写在前面
- CSS基础语法
- CSS引用
- 行内样式
- 内部样式
- 外部样式
- CSS导入式
- 优先级
- 选择器
- CSS继承
- CSS层叠
一、CSS基础语法
(1)CSS:层叠样式表(Cascsding Style Sheets)
(2)CCS样式:CSS样式规则是由选择器+声明构成,例如:p{font-size:16px;color:blue;}
(3)注释:/*注释内容*/
二、CSS引用
(1)、行内样式(内联样式)
- 位置:在开始标签内添加
- 例如:
<p style="font-size:25px">内容</p>
(2)、内部样式(嵌入样式)
- 位置:写在
<head>
标签内 - 例如:
<head>
<style type="text/css">
css样式...
</style>
</head>
(3)外部样式(外联样式)
- 位置:一个单独的文件,*.css
- 例如:
<link href="*.css" rel="stylesheet" type="text/css" />
(4)、CSS导入式
- 位置:
<style>
标签内部 - 例如: @import url(*.css) 或 @import “外部CSS样式"
<style type="text/css">
@import url(*.css)
</style>
三、优先级
- 行内样式>内部样式>外部样式
- 链入外部样式表和内部样式表是依据就近原则
四、选择器
- 标签选择器
- 以HTML标签作为选择器。例如 h6
- 类选择器
.class1
- 伪类:
:Link
、:Visited
、:Hover
、:Active
- ID选择器
#id1
- 全局选择器
*
- 群组选择器
- 后代选择器
五、CSS继承
从父元素那继承部分CSS属性
六、CSS层叠
(1)层叠规则
-
css一个元素可以定义多个样式;
-
当样式之间不冲突时,多个样式可叠加显示
-
当样式之间冲突时,按不同样式规则优先级来应用样式
-
ID选择器 > 类选择器 > 标签选择器
-
多次定义同类样式,后定义的优先级高
-
同一样式表中:(1)权值相同:就近原则(2)权值不同: 选择权值高的
-
(2)选择器权值:
-
标签选择器:1 > 类选择器和伪类:10 > ID选择器:100 > 通配符选择器:权值为0 > 行内样式:权值为1000
-
注意:!important优先级高于行内样式,例如:
p{font-size:16px !important;}