CSS简介、语法，选择器...（全）

CSS简介

• CSS 指层叠样式表（Cascading Style Sheets）
• 负责网页结构的美化工作
• 根据浏览器的不同，每个浏览器都有默认的CSS样式

CSS语法

由选择器和 声明块组成。
选择器：选择页面中的一个或多个指定元素
声明块：是一个整体用大括号{}包裹；由多个样式组成。
样式：由样式名和值组成；由分号"："进行连接，以分号";" 结尾
声明块的所有样式会应用在选择器所有对应的元素上

p /* CSS选择器*/
{ /* 声明块 start */
	color:blue;
	font-size: 16px;
} /* 声明块 end */

CSS样式写入方式

1、内联样式

• 直接将CSS代码编写到HTML标签的Style属性中
• 优点：编写方便，CSS代码直观。
• 缺点：结构和表现耦合度高，难维护，不建议使用

2、style标签

• 将样式写到style标签里，style标签需要写在head标签里面
• 优点：HTML和CSS代码分离，使CSS样式可重复使用，方便后期维护
• 缺点：跨页面不能使用，只能影响当前页面

3、外部CSS文件（推荐使用）

• 将CSS代码编写到外部的CSS文件，用Link标签引入该CSS文件
• 在不同的页面中可复用CSS样式，后期易维护；
• 可充分利用浏览器的缓存机制，提高浏览器加载页面的速度。

HTML元素之间的关系

• 父元素：直接包含子元素的元素
• 子元素：直接被父元素所包含的元素
• 祖先元素：直接或间接包含后代元素的元素；父元素也属于祖先元素
• 后代元素：直接或间接被祖先元素包含的元素；子元素也属于后后代元素
• 兄弟元素：拥有相同父元素的元素

CSS选择器

普通选择器

选择器	语法	作用
通配选择器	*	选择页面中所有元素
元素选择器	tag	根据标签名选择指定元素
ID选择器	#id	根据ID属性值找到唯一元素
类选择器	.class	选择所有具有class属性值的元素

复合选择器

选择器	语法	作用
并级选择器	选择器1，选择器2…选择器n	同时为多个选择器应用同样的样式
交集选择器	选择器1选择器2…选择器n	选择同时符合多个选择器的元素
后代选择器	祖先 后代	选择指定元素的指定后代元素
子元素选择器	.父元素 > 子元素	选择指定父元素中的直接子元素
兄弟选择器1	兄弟元素1 + 兄弟元素2	紧随其后的一个兄弟元素
兄弟选择器2	兄弟元素1 ~ 兄弟元素2	选择后面所有兄弟元素

伪类选择器

用来表示元素的一些特殊状态或者特殊位置

• ：frist-child：表示第一个子元素
• ：first-of-type：表示同一类型中的第一个子元素
• ：last-child：表示最后一个子元素
• ：last-of-type：表示同一类型中的最后一个子元素
• ：nth-child(n)：表示第n个子元素
  • odd ：表示选择奇数行的子元素
  • even：表示选择偶数行的子元素
• ：nth-of-type(n)：表示同一类型第n个子元素
• ：only-child：唯一的一个子元素
• ：only-of-type：同一类型中唯一的一个子元素
• ：empty：匹配空元素
• ：not(选择器)：选择不包括选择器的元素
• ：hover：鼠标移入的状态
• ：active：鼠标正在点击的状态

a元素特有的伪类

：link： 正常的超链接（带有href属性的a标签）
：visited：访问过的a标签，样式只能修改字体的颜色

伪元素选择器

表示一些特殊的元素

• ：：before：开始标签与文本内容之间的位置元素
• ：：after：结束标签与文本内容之间的位置元素
• ：：first-letter：选择内容的第一个单词，中文选择第一个字
• ：：first-line：选择内容的第一行
• ：：selection：选中的内容

属性选择器

作用：获取包含指定属性名或某个属性值的元素

• 语法1：[属性名]
  • 选择所有包含属性名的元素
• 语法2：[属性名=属性值]
  • 选择所有等于属性值的元素
• 语法3：[属性名^=属性值]
  • 选择所有以该属性值开头的元素
• 语法4：[属性名*=属性值]
  • 包含所有该属性名中属性值的元素

样式继承

祖先元素设置的样式，会应用到后代元素上

什么CSS属性可以继承？
	比如：color，font-size等属性
什么CSS属性不能继承？
	background-背景色，还有CSS布局属性。

选择器权重

当发生同一个元素样式冲突时，选择哪一个选择器的样式由选择器的权重决定
选择器权重值由高到底：

选择器	权重值
内联样式	1000
id选择器	100
类和伪类	10
元素选择器	1
通配选择器	0
继承样式	没有权重

特点：

• 优先选择权重高的选择器的CSS样式
• 当为一个样式添加了 !important 则该样式会获得最高的优先级。
• 对于复合选择器将所有选择器的权重相加；权重计算，不会超过其最大的数量级
• 分组选择器都是独立计算权重
• 两个选择器权重值相同，则后面的样式覆盖前面的样式