Skr-Eric的HTML课堂（四）——HTML的CSS介绍和CSS选择器

CSS

1. CSS介绍

CSS ：Cascading Style Sheet 层叠样式表

作用 ：实现网页布局，美化页面元素

 

2. CSS使用

在HTML文档中使用CSS，主要有三种方式

1. 行内样式/内联样式

特点 ：在具体的HTML标签中引入CSS代码

语法 ：

所有的HTML标签都具有一个style属性，属性值就可以

使用CSS样式规则

<标签 style="CSS样式规则"></标签>

CSS样式规则：

由CSS属性与值组成,属性名与值之间使用:隔开，

每一条CSS语句以分号结束

<h1 style="color:red">大标题</h1>

<h2 style="color:green;background-color:pink;">

常见的CSS属性

1. font-size : 设置字体大小，取值为像素值

2. color : 设置文本颜色，取值颜色的英文单词

3. background-color : 设置背景颜色

2. 文档内嵌

将CSS代码从标签中抽离出来，单独写在一起

1. 在HTML文档中使用<style></style>引入样式表，

<style>标签可以在文档的任意地方使用

2. 样式表语法 ：

<style>

CSS选择器 {

属性 : 值;

属性 : 值;

...

}

</style>

选择器 ：用来匹配文档中元素，并且为其设置样式

{}中是要给元素添加的样式声明

et :

标签选择器 ：根据给定的标签名，匹配文档中

所有的该元素，并应用样式

p{

color:red;

}

span{

color:green;

}

3. 外部样式表 / 外链方式

创建外部的CSS文件，在HTML文档中只需引入外部样式表即可

优点 ：

1. 真正实现样式与结构的分离，便于维护

2. 可以实现样式的复用

使用 ：

1. 创建外部的CSS文件 .css

2. 在HTML文档中使用

<link rel="stylesheet" href="url">引入样式表文件

3. 在样式表中添加样式：通过选择器书写样式

 

3. 样式表特点

1. 层叠性

多个CSS样式共同作用于元素

et :

p{

color:red;

background-color:green;

font-size:32px;

}

2. 继承性

父元素中设置的样式，子元素可以继承下来。

大部分文本相关的属性，都可以被继承，

块级元素的宽度与父元素保持一致；

3. 样式表的优先级

只有发生样式冲突时，才考虑优先级

h1{

font-size:32px;

}

inherited from body{

font-size:20px;

}

优先级从低到高 ：

1. 继承样式

2. 浏览器的缺省设置 （默认样式）

3. 文档内嵌方式 / 外链方式 设置的样式

相同的优先级，发生样式冲突时，由代码的书写

顺序决定最终样式，后来者居上

4. 行内样式优先级最高

 

 CSS 选择器

1. 选择器介绍 ：

作用 ：根据指定的选择模式匹配文档中元素，并为其设置

样式。

选择模式 ：选择符，指匹配元素的依据

 

2. 分类 ：

1. 标签选择器 / 元素选择器

根据标签名，匹配文档中所有的该元素，为其设置样式

语法：

标签名{

属性: 值;

}

练习 ：

1. 新建文件

2. 创建超链接

3. 设置超链接

文本色为红色

字体大小为20px

取消下划线 text-decoration : none;

使用 ：

常用于清除页面默认样式，以及设置基础样式

2. 类选择器

根据元素的class属性值进行匹配

语法：以英文.开头，后面跟上class属性值

et :

.c1{

color:red;

}

<p class="c1"></p>

注意 ：

1. 写选择器时，不要随便出现任何符号

2. 类名自定义，禁止以数字开头，可以出现 - 数字 字母，

尽量见名知意

3. 组合使用 ：

选择器1选择器2{

}

匹配同时满足选择器1和选择器2的元素,并设置样式

et :

p.c1{} 标签与类名组合使用,标签在前,类名在后

错误写法 ：.c1p{} 匹配类名为"c1p"对应的元素

.c1.c2{} 不常用，可以直接给c1或者c2添加样式

4. 每个元素都具备class属性，也可以使用多个类名，

多个类名之间使用空格隔开

et :

<p class="c1 c2 c3"></p>

3. ID选择器

根据元素的id属性值匹配元素

每个元素都具备id属性，并且id属性具有唯一性

语法 ：

以#开头，跟上id属性值

#id属性值{}

使用 ：

通常页面中具有唯一性的元素，都可以使用id进行

标识，并使用id选择器添加样式

页面中具有唯一性的元素：外围结构标签，搜索框

注意 ：

1. id属性具有唯一性，不能重复使用相同id值,

在使用JS获取页面元素时，ID是元素唯一的标识,

如果出现重复，后面的元素都获取不到

2. id选择器与class选择器的区别 ：

id具有唯一性，id选择器定义的样式不能被复用；

class可以重复使用，类选择器定义的样式可以复用

3. 具有唯一性的元素都可以使用ID选择器设置样式，

et :

外部的结构标签使用id标识，内部的标签使用class标识

4. 群组选择器

为一组元素统一设置样式

语法 ：

选择器1,选择器2,选择器3{

}

5. 后代选择器

依托元素的层级关系匹配后代元素，后代元素包含直接

子元素和间接子元素

语法 ：

选择器1 选择器2{

样式规则

}

选择器1与选择器2之间是父元素与后代元素的关系

作用 ：在选择器1匹配到的元素中,查找满足选择器2

的后代元素

6. 子代选择器

依托元素的层级关系，匹配直接子元素

语法 ：

选择器1>选择器2{}

表示在选择器1对应的元素中，匹配满足选择器2的

直接子元素

 

3.选择器的优先级

选择器的优先级主要考虑选择器的权重

可以将各种选择器的权重以数值来表示，数值越大，优先级越高

选择器 权值

--------------------

标签selector 1

类选择器 10

ID选择器 100

行内样式 1000

复杂选择器优先级的计算 ：

1. 群组选择器不参与计算

div,span{

color:red;

}

.c1{

color:green;

}

<div class="c1"></div>

2. 后代和子代选择器，由各种选择器权值相加得到最终的优先级

3. 伪类选择器的权值与类选择器保持一致 都是10

 

 

 

想要看更多的课程请微信关注SkrEric的编程课堂