CSS基础语法
CSS样式表由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义他们的显示效果。每一条样式规则有三部分构成：选择符（selector）、属性（property）、属性值（value）。基本格式如下：
selector{property:value}
解释：（1）selector可以采用多种形式，可以为文档中的HTML标记，也可以是XML文档中的标记。
（2）property是选择符指定的标记所包含的属性。
（3）value指定了属性的值。
在HTML中使用CSS3的方法
CSS样式表能很好的控制页面显示，分离网页内容和样式代码，他控制HTML5页面效果的方式通常包括行内样式，内嵌样式，链接样式，导入样式。
- 行内样式
这种样式是比较简单、直观的方法，他可以直接把CSS代码添加到HTML文件中，是作为HTML的标记属性存在的。这种方法可以很简单对某个元素单独定义样式。使用格式如下：
<p style="color:red">段落样式</p>
注意这种方法后期委维护成本过高，网页也容易过胖，不推荐使用。
2. 内嵌样式
内嵌样式就是将CSS样式代码添加到< head>与< /head>之间，并且用< style>和< /style>标记进行说明。格式如下：
<head>
<style type="text/css">
p{color:red;font-size:12px;}
</style>
</head>
- 链接样式
链接样式是CSS中使用频率最高，也是最实用的方法。他可以很好的将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完成分离，使前期制作和后期制作维护都十分方便。同一个CSS文件，根据需要可以链接到网站中所有的HTML页面上，使得网站整体风格统一，并且后期维护的工作量也大大减少。
链接样式是指外部定义CSS样式表并形成以.css为扩展名的文件，然后在页面中通过< link>标记链接到页面中该语句代码需要放在页面的< head>标记区。代码如下：
<link rel="stylesheet" type="text/css" href="文件名"/>
解释：1）rel表示连接到样式表，其值为stylesheet。
2）type表示样式表类型为CSS样式表。
3）href指定了CSS样式表文件。
优势：就是将css代码和HTML代码完全分离，并且同一个CSS文件能被不同的HTML文件链接使用。
4. 导入样式
采用导入样式是在HTML文件初始化时，会被导入到HTML文件内容的一部分，类似于内嵌效果。导入外部样式表是指在内嵌样式表的< style> 标记中使用@import导入一个外部的CSS文件。例如：
<head>
<style type="text/css">
<!--
@import "文件名"
-->
</style>
</head>
注意：CSS样式表方式的优先级顺序由大到小依次为：行内样式，内嵌样式，链接样式，导入样式。
CSS3选择器
选择器（selector）也被称为选择符。所有HTML语言中的标记都是通过不同的CSS选择器进行控制。选择器不只是HTML文档中的元素标记。他可以是类（class），ID或者是元素的某种状态。选择器分为标记选择器，类选择器，全局选择器，ID选择器，伪类选择器。
- 标记选择器
标记选择器基本格式如下：
tagName{property：value}
其中tagName表示标记名称，property表示css3属性，value表示css3属性值。注意：CSS3标准对于所有属性和值都有相对严格的要求，如果生命的属性在css3规范中没有或者某个属性值不符和属性要求，都不能是CSS语句生效。
2. 类选择器
类选择器用来为一系列标记定义相同的呈现方式，语法格式如下：
.classValue{property：value}
classValue是指选择器的名称。
3. ID选择器
ID选择器定义的是某一个特定的HTML标记，一个网页文件中只能有有一个标记使用某一个ID的属性值。基本语法格式如下：
#idvalue{property:value}
idvalue是选择器名称。
类选择器与id选择器主要的区别：
1）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。
2）ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器发生冲突时，优先使用ID选择器定义的样式。
4. 全局选择器
全局选择器就是对所有的HTML标记起作用，其语法格式如下：
*{property:value}
- 组合选择器
将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器，即将标记选择器、类选择器和ID选择器组合起来使用。一般的组合方式是标记选择器和类选择器组合或标记选择器和ID选择器组合。组合选择器只是一种组合形式，并不是一种真正的选择器，语法格式如下：
tagName.class Value{property:value}
- 继承选择器
继承选择器的规则是：子标记在没有定义的情况下所有的样式是继承父标记的；当子标记重新定义父标记已经定义过的声明时，子标记会执行后面的声明，其中与父标记不冲突的地方仍然沿用父标记的声明。举例如下：
.test span img{border:1px blue solid;}
解释：规律是从左到右依次细化，最后锁定要控制的标记。
7. 伪类
伪类也是选择器的一种，但是用来伪类定义的CSS样式并不是作用在标记上的，而是作用在标记的状态上。伪类包括：first-child，：link，：hover，：active，：focus，：lang。其中一组伪类是主流浏览器都支持的，就是超链接的伪类，包括：link，：visited，：hover，：active。
伪类选择器定义的样式进程应用在标记< a>上，他表示超链接四种不同的状态，即未访问超链接（link），已访问超链接（visited），鼠标停留在超链接上（hover），激活超链接（active）。
8. 属性选择器
直接使用属性控制HTML标记样式的选择器称为属性选择器。属性选择器根据某个属性是否存在属性值来寻找元素，因此能够实现某些非常有意思和强大的效果。常见属性选择器如下表;
9. 结构伪类选择器
结构伪类就是利用文档结构树（DOM）实现元素过滤。就是说，通过文档结构的相互关系来匹配特定的元素，从而减少文档内部对class属性和id属性的定义，使得文档更加简洁。如下表：
10. UI元素状态伪类选择器
UI（User Interface）用户界面的简称。UI设计则是指对软件的人机交互、操作逻辑，界面美观的整体设计。UI元素的状态一般包括可用、不可以、选中、未选中、获取焦点、失去焦点、锁定、待机等。如下表;
选择器声明
- 集体声明
集体声明就是在声明各种CSS选择器时，如果某些选择器的分格是完全相同的或者部分相同，可以将风格相同的CSS选择器同时声明。 - 多重嵌套声明
使用层层递进的方式（嵌套方式）对指定位置的HTML标记进行修饰。
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
