第三次前端培训（CSS）

CSS概述

CSS 层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。

CSS是用来美化网页的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能。

CSS基本使用

1.CSS定义

选择器名{

属性名：属性值；（声明）

属性名：属性值；（声明）

}

注意：（1）声明需要使用{}括起来，每个声明以分号结尾

(2)一行建议一个声明

(3)如果样式的属性值由多个单词组成，则用引号引起来

2.CSS注释

/*注释内容*/

3.CSS的三种使用方式

• 行内样式：直接写在标签上的样式，在标签上通过style属性定义的样式
• 内部样式：定义在style标签中的样式，style标签一般设置在head标签中
• 外部样式：定义在外部的css文件中，通过link标签引入

  <link rel="stylesheet" type="text/css" href="css文件的路径" />

4.CSS的选择器

CSS基本选择器

（1）通用选择器

*{

属性名：属性值；

}

（2）元素选择器

元素名/标签名{

属性名：属性值；

}

（3）ID选择器

#id属性值{

属性名：属性值；

}

（4）类选择器

.class属性值{

属性名：属性值；

}

（5）分组选择器

选择器1，选择器2，选择器3......{

属性名：属性值；

}

CSS组合选择器

（1）后代选择器：选择指定元素的所有指定后代元素，以空格隔开

选择器1  指定元素{

属性名：属性值；

}

（2）子代选择器：选择指定元素的第一代子元素

选择器 > 指定元素{

属性名：属性值；

}

（3）相邻兄弟选择器：选择指定元素的下一个指定元素（只会找一个）；两者有相同的父元素

选择器 + 指定元素{

属性名：属性值；

}

（4）普通兄弟选择器：选择指定元素后面的所有指定元素；两者有相同的父元素

选择器 ~ 指定元素{

属性名：属性值；

}