CSS简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
下图是有无css修饰的网页图形对比（网址：www.w3school.com.cn）
CSS语法规范
CSS规则有两个主要部分组成：选择器以及一条或多条声明
键值对：一个属性对应一个值出现的就叫做键值对。
属性：对指定的对象设置样式属性，例如字体大小、文本颜色等。
注意事项：属性和属性值之间用英文的 “ : ”分开
多个“键值对”之间用英文的 “ ; ”进行区分
CSS代码风格
样式书写格式：
h3{
color: red;
}样式大小写：除特殊情况外，选择器、属性名、属性值关键字都使用小写字母
空格规范：①属性值前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留一个空格
CSS样式引入方式：内部
内联方式(不推荐)：直接在 HTML 标签中的 style 属性中添加 CSS
<div style=“background: red”>我是内联</div>
嵌入方式：在 HTML 头部中的 <style> 标签下书写 CSS 代码
<head>
<style>
.nav {
color: red;
}
</style>
</head>
只对当前HTML文件起作用，如有多种样式或使用这些样式的文件过多，容易造成代码冗余，非常不利于维护
CSS样式引入方式：外部
链接方式（吐血推荐）：使用 HTML 头部的 <head> 标签引入外部的 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这是最常见的也是最推荐的引入 CSS 的方式。这种方式CSS 代码只存在于单独的 CSS 文件中，具有良好的可维护性，并且可以在加载页面时提高效率
导入方式：使用 CSS 规则引入外部 CSS 文件
<style>
@import url(style.css);
</style>
导入式出现较晚，书写难度高，加载顺序低，更推荐链接式引入CSS
CSS基础选择器：标签选择器
标签选择器（元素选择器）:是指用HTML标签名称作为选择器，按标签名进行分类，为页面内某一类（所有）标签指定统一的CSS样式。
语法：
标签名 {
属性1: 属性值1;
}
示例：
p {
color: red;
font-size: 20px;
}
CSS基础选择器：类选择器
类选择器：在需要差异化选择不同标签的时候，单独选择一个或几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中以一个” . ”显示。
语法：
.类名 {
属性1: 属性值1;
}
示例：
.font36 {
font-size: 36px;
}
命名规范：https://www.qianduan.net/css-selectors-naming-2/
CSS基础选择器：多类名选择器
多类名选择器：
书写格式:
在标签class属性中写多个类名。
多个类名之间必须用空格分开。
该标签可以分别具有这些类名的样式。
举例:
<div class=“red font36”>字体颜色为红色，大小36px</div>
使用场景：好几个标签，颜色不同，但字体大小、字体相同。
CSS基础选择器：id选择器
id选择器：语法：
<p id=“grey”>灰色</p>
#grey {
color: grey;
}
id选择器与类选择器的区别：
①类选择器（class）好比人的名字，一个人可以用多个名字，同时一个名字也能被多个人使用。 ②id选择器好比人的身份证，具有唯一性，不得重复。 ③id选择器和类选择器最大的不同就在于使用次数。 ④id选择器一般用于页面唯一性的元素上，常与JavaScript搭配使用。
CSS基础选择器：通配符选择器
使用“ * ”定义，表示选取页面中的所有元素（标签）
语法：
* {
属性1: 属性值1；
}
注意：通配符选择器不需要调用，直接给所有元素（标签）使用样式。
特殊情况使用。
CSS字体
font-family：用于定义文本的字体系列。
尽量使用系统默认自带字体，保证任何用户的浏览器都能正确显示。
与font-face的区别：
font-family:用于指定字体。设置后，电脑上无该字体时，观看网页不能显示该字体效
font-face:载入一个字体。将该字体的.eot格式文件传到服务器上，用font-face加载到网页中。
最常见的几个字体：‘Microsoft Yahei’、‘Tahoma’、‘Arial’、‘Hiragino Sans GB’
font-size:用于定义字体大小。px(像素)是网页最常用单位。
注意：不同浏览器默认显示的字号大小可能不一致，尽量设置一个明确值大小，不要默认大小
font-weight：用于设置文本字体的粗细。
| 属性值 | 描述 |
| normal | 默认值（不加粗） |
| bold | 定义粗体（加粗） |
| 100-900 | 400等同于normal，700等同于bold，注意数字后不加单位 |
使用：有时用来让加粗标签（如<h>和<strong>）不加粗，或使其他标签加粗。实际开发中，更喜欢用数字表示字体大小。
font-style：用于设置文字样式
| 属性值 | 作用 |
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
注意：网页中很少给文字加斜体，反而要把斜体标签（<em>和<i>）改成不倾斜的字体。
font复合属性：字体属性可以综合来写，节约代码
body {
font: font-style font-weight font-size line-height font-family;
}
使用复合属性时，必须严格按照以上顺序书写，不能更换顺序，每个属性间用空格隔开
不需要设置的属性可以省略（默认），但必须保留font-size和font-family属性，否则无效。
文本颜色color：预定义的颜色值（系统定义好的）：red,green,blue,pink等
十六进制：#FF0000,#FF6600,#29D794等。与rgb相似，12位表示红色，34位表示绿色，56位表示蓝色。
RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)等。rgb值最小为0，最大为255。rgb及三个值分别表示红、绿、蓝（三原色），其值既可以用数字表示也可以用百分比表示。
注：开发中最常用的是十六进制。
文本对齐text-align：用于设置行内文本内容的水平对齐方式。
| 属性值 | 解释 |
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
装饰文本text-decoration:用于规定添加到文本的修饰。可以添加上划线、下划线、删除线等。
| 属性值 | 描述 |
| none | 默认。没有装饰线（最常用） |
| underline | 下划线，链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
文本缩进text-indent:用来指定文本第一行的缩进，通常是将段落缩进。
写法：
div {
text-indent: 10px;
}
长度设置可以是负值。
em是一个相对单位，是当前元素（font-size）1个文字的大小，如果没有设置大小，就会按照父元素的一个文字大小。
行间距line-height:用于设置行间距离（行高） ，可以控制文字行与行之间的距离。
CSS三大特性
层叠性
层叠性：相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要用于解决样式冲突的问题。
层叠性原则：样式冲突时遵循就近原则，哪个样式离结构近，就执行哪个样式。
样式不冲突时，不会发生层叠。
继承性
继承性：子标签会继承父标签的某些样式，如文本颜色和字号。
使用技巧：父子元素之间如果有相同属性，此时使用继承可以简化代码。子元素可以继承父元素的样式（text-，font-，line-，这些元素开头的可以继承，以及color属性）http://www.cnphp.info/css-style-inheritance.html
http://www.cnphp.info/css-style-inheritance.html
优先级
优先级：当同一个元素指定多个选择器，就需要考虑优先级的问题。
选择器相同，则执行层叠性。选择器不同，则根据选择器权重执行。
选择器权重如下表所示：
| 选择器 | 选择器权重 |
| 继承 或者 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style=“” | 1，0，0，0 |
| !important 重要的 | ∞无穷大 |
CSS复合选择器
复合选择器：复合选择器是建立在基础选择器上，对基础选择器进行组合形成的。包括了后代选择器，子选择器，并集选择器，伪类选择器等等
并集选择器：给多个选择器赋予相同的样式。选择器之间用英文的“ , ”连接。选择器可以是标签名称，也可以是id、class名称。
实例：
<style>
.font20,.font30 {
color: red;
}
</style>后代选择器（重要）：后代选择器又称为包含选择器，可以选择父元素中的子元素。把外层标签写前面，把内层标签写在里面，中间用空格分隔。
语法：元素1 元素2 { 样式声明 }
上述语法表示选择元素1中所有的元素2（后代元素）
实例：
ul li { color: red; }注意：元素1是父级，元素2是子集，最终选择的是元素2。
元素2可以是儿子，也可以是孙子，只要是元素1的后代即可。
元素1和元素2可以是任意基础选择器。
子选择器（重要）：子元素选择器（子选择器）只能作为某元素的最近一级子元素。
语法：元素1>元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代（子元素）元素2。
实例：
div > p { color: red; }注意：元素1和元素2之间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是最近一级子元素，孙子、重孙等都不能选择
伪类选择器：伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器最大的特点就是用冒号（ : ）表示，比如 :hover、 :active。
链接伪类选择器：即a标签的伪类选择器
a:link 选出没有点击过的（访问过的）链接
a:active 选择鼠标正在按下，还未弹起的那个链接
a:hover 选择鼠标经过的那个链接（最常使用）
a:visited 选择点击过的（访问过的）链接
注意：为了确保样式生效，必须按照LVHA的顺序声明：:link-，:visited-，:hover-，:active。
a链接在浏览器中常常具有默认样式，所以实际工作中都要给链接单独制定样式。
伪元素选择器：使用伪元素选择器表示元素中特殊位置
::first-letter 首字母（只能用于块级元素）
::first-line 首行（只能用于块级元素）
::before在最前端添加内容（一般before和after与content属性连用）
::after在最后面添加内容
文本级标签: p, span, a, b, I, u, em, （只能嵌套文字、图片、超链接）
容器级标签: div, h系列, li, dt, dd（能嵌套其他所有标签）
行内元素: 除了p之外，所有的文本级标签，都是行内元素。
块级元素: 所有的容器级标签，都是块级元素，以及p标签。
补充内容
行高的继承：行高可以跟单位也可以不跟
如果子元素没有设置行高，则会继承父元素的行高，此时子元素的行高为：当前子元素的文字大小*父元素行高
给body设置行高1.5，这样写法的优势就是里面子元素可以根据自己文字大小调整行高。（设置为1.5这种写法很常见，比如京东的网页元素就很多）
伪元素选择器first-child:用于选取属于其父元素的首个子元素的指定选择器。
语法：
元素名:first-child {
color: red;
}
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
