第三天:CSS
1.Css
样式规则:
选择器{
声明-> 属性:属性值;
}
说明:
- 每个 `CSS `样式由选择器和声明组成,声明由属性和属性值组成,且由分号(;)结束。
- 一个属性有多个属性值得时候,属性值与属性值不分先后。
2.样式表的简历和优先级
### 2.1内部样式表:
语法:
<style type = "style/css">
样式
<style>
说明:style
标签zuihao写在head
标签内部。
2.2 内联样式(行内样式)
语法:
<标签 style = "属性:属性值;属性=:属性值;"></标签>
2.3 外部样式表
-
导入方式:
-
<link rel="stylesheet" type="text/css" href="路径" />
-
<style type="text/css"> @import url(路径); </style>
说明:
link
和import
区别- link属于
XTML
标签,而@import
是CSS
提供的一种方式。 - 加载顺序不同:
link
引用的CSS
会在页面加载时同时被加载。@import
引用的CSS
会等到页面加载完毕时才被加载。
- 兼容性的差别:
link
标签无兼容性问题。@import
是CSS2.1
提出的,过旧的浏览器不支持,只有在IE5
以上才能识别。- 使用
dom
(document object moder
文档对象模型)控制样式是的差别:只能使用link
。
- link属于
-
2.4 优先级
说明:
内联样式表的优先级最高,内部样式表与外部样式表的优先级和书写顺序有关 书写在后面的优先级最高。(覆盖)
2.5 css
选择器
-
id
选择器:#id名{ 属性1:属性值; 属性2:属性值; } <!-- a.id选择器只能定义唯一一个标签。 b.最大用处:创建网页的外围结构。 -->
-
类(
class
)选择器:.类名{ 属性1:属性值; 属性2:属性值; } <!-- 可以对多个标签进行选择定义。 -->
-
多类名选择器:
<标签名 class="类名1 类名2"></标签名>
-
群组选择器:
.类名1,类名2,类名3{ 属性1:属性值; 属性2:属性值; }
-
通配符选择器:
*{ 属性1:属性值; 属性2:属性值; } <!-- *是所有选择器中作用范围最广的,能匹配页面中全部元素。 -->
-
伪类选择器
<!-- 超链接初始状态 --> a:link{ 属性1:属性值; 属性2:属性值; } <!-- 超链接被访问后的状态 --> a:visited{ 属性1:属性值; 属性2:属性值; } <!-- 鼠标放在超链接上时,超链接的状态 --> a:hover{ 属性1:属性值; 属性2:属性值; } <!-- 鼠标点击超链接时,超链接的状态 --> a:active{ 属性1:属性值; 属性2:属性值; } <!-- 必须按照上面的顺序书写伪类选择器,否则样式可能失效 -->
-
包含选择器
选择器1 选择器2{ 属性1:属性值; 属性2:属性值; }
2.6 权重
说明:CSS
中用四位数字表示权重。
- 标签选择器的权重:0001
- `class` 类选择器权重:0010
- `id` 选择器权重:0100
- 伪类选择器权重:0010
- 包含选择器权重:选择器的权重和
- 内联样式权重:1000
- 继承样式权重:0000