html5|CSS层叠样式表 html5|css3

1、什么是结构和表现分离？
在页面中，使用html搭建页面的结构(页面的内容),不使用标签的属性设置样式，标签的样式全部在CSS中设置。
2、什么是CSS?
CSS是层叠样式表(Cascading Style Sheet)的简称
目前CSS3是新版本的CSS，与老版本(CSS2.1)相比在性能和成本上有大的提升。
3、如何使用CSS？
3.1、页面嵌入式：页面嵌入式就是使用标签嵌入CSS规则

p{ color: red; }

代码展示

Documentp{ color: red; font-size: 30px; }你好

效果展示

文章图片

3.2、行内嵌入式给标签添加style属性，此效果只对嵌入标签有效。如：

你好

3.3、链接式先建立独立的CSS文件。然后在页面中使用标签链接外部的CSS文件，通常建议使用这种嵌入方式。
代码展示

p{ color: blue; font-size: 30px; }

Document 你好

效果展示

文章图片

4、CSS的选择器
4.1、标签名选择器

标签名{属性名：值; }

4.2、id选择器给标签设置id属性，通过id属性值选择标签。标签的id属性值和之前提到的一样不能重复。

#id{ 属性名：值； }

4.3、类选择器给标签设置class属性，通过class属性选择标签，class属性名可以重复。

.class属性值{ 属性名：值; }

4.4、通配符选择器通配符(*)，可以匹配页面中的任何元素

*{ 属性名：值； }

5、文本样式属性
5.1、字体样式：

字体样式	作用
font-size	设置字号（文字的大小）
font-family	设置字体（前提是本地装有相应字体
font-style	字体的样式
font-weight	字体的粗细（数值从100-900，数值越大字体越粗）
@font-face	当本地并无相应字体时，可设置服务端字型（该属性是CSS3新增的样式属性）

5.2、文本样式

文本样式	作用
color	定义文本颜色（颜色表示方式和之前博客提到一样）
letter-spacing	设置字符之间的间距
word-spacing	该属性用于英文单词之间的间距，对中文无效
line-height	设置行高
text-algin	设置内容的对齐方式
text-transform	控制英文大小写
text-decoration	设置文本的下划线、上划线、删除线
text-indent	设置首行文本的缩进
text-shadow	设置文本的阴影效果
text-overflow	文本的溢出效果(结合overflow属性使用)
word-wrap	设置长单词和URL地址的自动换行

6、属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

属性选择器	作用
E[att]	选择具有att属性的元素
E[att=“val”]	选择具有att属性,并且att属性值等于val的元素
E[att~=“val”]	选择具有att属性,并且att属性值是用空格隔开的单词,其中一个单词等于val
E[att^=“val”]	选择具有att属性,并且att属性值是以val开头的字符串
E[att$=“val”]	选择具有att属性,并且att属性值是以val结尾的字符串
E[att*=“val”]	选择具有att属性,并且att属性值中包含val的字符串

代码演示
7、关系选择器

关系选择器	作用
包含选择器(E F)	选择所有被E包含的F元素
子元素选择器(E>F)	选择所有作为E元素的子元素F
相邻元素选择器(E+F)	选择紧贴在E元素之后F元素
兄弟选择器(E~F)	选择E元素后面的所有兄弟元素F

代码演示

关系选择器ul li{ color: crimson; font-size: 30px; } nav>p{ color: blue; font-size: 30px; } nav+p{ color: cadetblue; font-size: 30px; } p~span{ color: gold; font-size: 30px; } 西游记水浒传红楼梦三国演义金融学财务管理经济学会计学统计学

效果展示

文章图片

8、结构化的伪类选择器(伪类选择器带冒号)

结构化的伪类选择器	作用
html:root	根元素选择器。html文档中的根只有一个。样式应用于页面的每个元素
E:not(选择器)	不包含给定选择器的元素
E:only-child	匹配父元素仅有的一个子元素E
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素的最后一个子元素E
E:nth-child(n)	匹配父元素中第(n)个子元素E
E:nth-last-child(n)	匹配父元素中倒数第(n)个子元素E
E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
E:empty	匹配没有任何子元素的元素E
E:checked	匹配用户界面上处于选中状态的元素E
E:enabled	匹配用户界面上处于可用状态的元素E
E:disabled	匹配用户界面上处于禁用状态的元素E

代码演示
9、伪对象选择器

伪对象选择器	作用
E::before(CSS3)	设置在对象前（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用
E::after(CSS3)	设置在对象后（依据对象树的逻辑结构）插入的内容。必须和content属性一起使用

代码演示

伪对象选择器p::before{ color:cyan; content: 'Manchester'; } span::after{ color: cyan; content: 'City'; }City Manchester

效果展示

文章图片

10、超链接的伪类选择器

超链接的伪类选择器	作用
E:link	设置超链接a在未被访问前的样式。
E:visited	设置超链接a在被访问后的样式
E:hover	设置元素在其鼠标悬停时的样式
E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。