CSS3基本用法

1.CSS3样式

选择符：指定样式作用的对象，可以是标签名、类名或ID等。
声明：指定渲染对象的效果，包括属性和属性值。使用分号结束一个声明。所有声 明包含在一个=对大括号内，位于选择器的后面。
属性：设置样式的具体效果项
属性值：定义显示效果的值。

2.应用样式

• 行内样式：把CSS3样式设置为HTML标签的style属性值。
• 内部样式：把CSS3样式放在< style>标签内
• 外部样式：把CSS3样式保存到独立的文本文件中。

3.CSS3样式表

CSS3样式表由一个或者多个CSS3样式组成，它分为内部样式表和外部样式 表。 一个< style>标签可以定义一个内部样式表。如果网页中包含多个< style>标签，就表示该文档包含了多个内部样式表。

一个CSS3文件可以定义一个外部样式表，这是一个文本文件，扩展名为.css。

外部样式表必须导入到网页文档中才能有效。具体方法有两种：

1. 使用< link>标签导入
2. 使用@import关键字导入

< link>标签导入外部样式表文件

<link href="style.css" rel="stylesheet" type="text/css" />

• href:定义外部样式表文件的URL
• type：定义导入文件的类型
• rel：表示导入文件是关联样式表

采用@import关键字导入外部样式表

<style type="text/css">
@import url("style2.css")
</style>

在@import关键字后面，利用CSS3的 url()函数引入外部样式表的地址。

小结

• < link>是HTML定义的标签，而@import是CSS3定义的命令。
• 页面加载时< link>会被同时加载，而@import引用的CSS3会等到页面加载完毕后再加载。
• @import只有在IE5以上才能被识别，而< link>是HTML标签，无兼容问题
• < link>的权重高于@import的权重

4.CSS3的继承性

CSS3具有两个基本特性：继承性和层叠性
CSS3继承性：在HTML结构中，后代元素可以继承祖先元素的样式。
继承样式主要包括：字体、文本等基本属性，如字体、字号、颜色、行距等，对于下面的属性是不允许继承的：边框、边界、补白、背景、定位、布局、尺寸等。

但是继承的样式优先级是最低的。
在HTML界面中< body>标签可以定义整个页面的字体大小、字体颜色等基本属性。这样就不需要为每个标签定义这些样式。

5.CSS3的层叠性

CSS3层叠性是指可以为同一个对象应用多个样式。当多个样式作用于同一个对象时，会根据选择器的权重来确定优先级，并显示最终渲染效果。
基本选择器的权重值说明如下：

• 标签选择器：1
• 伪元素或伪对象选择器：1.
• 类选择器：10
• 属性选择器：10
• ID选择器：100
• 其他选择器（如通配选择器等）：0

复合选择器的权重值等于组成的基本选择器的权重值之和。

小结

• 行内样式优先级最高，继承样式优先级最低
• 在样式表中，如果两个样式的权重值相同，则靠近对象最近的样式优先级最高
• 使用 !important 命令样式优先级绝对最高，使用方法：pr{color:red !important ;}命令放在属性值和分号之间，否则无效。