html中css层叠样式表（行内样式，内嵌式，外部式）

一、认识css

css全称Cascading Style Sheets（层叠样式表）

现在常用的最新版本是css3，它新增了圆角、阴影、动画/过渡、部分选择器等新特性

css层叠样式表的优先级为：id > 类 > 标签 > 通配符，即选择范围越小，优先级越高；（当优先级相同时，同一选择器有不同的属性，那么离元素进的生效）

二、css的书写规范

css语法：

选择器{
     样式属性名: 样式属性值;
     样式属性名2: 样式属性值2;
}

根据位置可分为：

• 行内样式：直接写在标签里面

例：

 

• 内嵌式：在头部head里面加入style标签，在style里面写

例：

• 外链式：将css写到另一个单独的文件，通过在head里面添加link来引入

例：

 三、选择器

• 基本选择器：

通用选择器：*{样式属性名: 样式属性值;} ——匹配所有标签元素

id选择器：#id名{样式属性名: 样式属性值;}——匹配标签上id属性为该id名的唯一标签

类选择器：.类名{样式属性名: 样式属性值;}——匹配标签上class属性为该类名的标签

标签选择器：标签名{样式属性名: 样式属性值;}——匹配对应的标签

群组选择器并集选择器：选择器1，选择器2{样式属性名: 样式属性值;}——匹配对应的选择器名下的对应标签

• 层叠选择器

后代选择器：父类选择器（空格）后代名{样式属性名: 样式属性值;}——匹配此父类下对应的名的所有后代标签（例：.div1 p{} 选择div1里面的所有p标签）

子代选择器：父类选择器>子代名{样式属性名: 样式属性值;}——匹配此父类下的对应名的子代标签例：（.div1>p{} 选择div1里面的第一级p标签；如果div1包含div如div1-1，div1-1里面的p标签不受影响）

• 伪类选择器

:hover——鼠标移入

:action ——鼠标点击时

a:link——超链接未访问时

a:visited——超链接访问后的样式