前端秘法基础式(CSS)(第一卷)

一.认识CSS

CSS 指的是层叠样式表（Cascading Style Sheets），它是一种用于描述网页外观和布局的语法

CSS 可以定义网页中元素的字体、颜色、大小、位置、背景等样式，使网页具有美观的外观和统

一的风格。

通过将 CSS 样式表与 HTML 文档关联起来，可以实现对网页样式的控制和管理。CSS 的优点

在于它可以实现网页样式的分离，使得 HTML 主要负责网页的结构和内容，而 CSS 则专注于样式

定义，提高了代码的复用性和维护性。

例如，以下是一个简单的 CSS 规则：

p {

color: red;

font-size: 16px;

}

上述规则将使所有 <p> 标签中的文本颜色变为红色，字体大小为 16 像素。通过这种方式，可以

方便地为整个网站或特定页面应用一致的样式。

CSS 还支持各种选择器，如类选择器、ID 选择器、元素选择器等，以便更精确地定位和样式化特

定的 HTML 元素。同时，CSS 还提供了一些高级特性，如媒体查询，可以根据不同的设备或屏幕

尺寸应用不同的样式。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: aqua;
            font: 16px;
        }
    </style>
</head>
<body>
    <p>
        行也思君,&nbsp; 坐也思君
    </p>
</body>
</html>

二.CSS引入方式

1.内部样式表

写到style标签中,嵌入html内部

优点:可以使样式和页面结构分离

缺点:分离的不够彻底

引入方式参考上文

2.行内样式表

通过style属性来指定某个标签的样式,只适用于简单的设计,且优先级较高会覆盖其他的样式

html 复制代码

<body>
    <p style="color: aquamarine; font-size: 16px;">
        行也思君,&nbsp; 坐也思君
    </p>
</body>

3.外部样式

实际开发中最常用的样式,单独写一个.css文件,通过link链接

三.CSS选择器的种类

以下内容只是CSS2标准中支持的选择器

1.基础选择器(单个选择器构成的)

标签选择器
类选择器
id选择器
通配符选择器

1.1类选择器

通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择

html 复制代码

<p class="poem">
        行也思君,&nbsp; 坐也思君
</p>
<!--html文件-->
.poem{
    color:black;
    font-size: 20px;
}
<!--css文件-->

1.2id选择器

html 复制代码

<p id="poem">
        行也思君,&nbsp; 坐也思君
    </p>
#poem{
    color:black;
    font-size: 20px;
}

1.3通配符选择器

在实际应用开发中用来针对页面中所有元素默认样式进行消除,主要用来消除边距
html 复制代码
*{
    background-color: beige;
}

2.复合选择器(把多种选择器综合运用起来)

后代选择器
子选择器
并集选择器
伪类选择器

2.1后代选择器

又叫包含选择器,选择某个父元素中的某个子元素

父级元素子级元素{

.....

}

只影响被选择的子级元素

html 复制代码

<style>
        ol li{
            color: blue;
        }
    </style>

2.2伪类选择器

链接伪类选择器

a:link选择未被访问过的链接

a:visited选择已被访问过的链接

a:hover选择鼠标指针悬停上的链接

a:active选择活动链接(鼠标按下但未弹起)

a换成input也可以哦

具体可以参考w3c官方文档