css作用：早期，依靠HTML元素的属性设置样式，比如：border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。
CSS概念：
- CSS（Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表；
- 用于HTML文档中元素的定义
- 实现了将内容与表现分离
- 提高了代码的可重用性和可维护性
CSS基础语法：
- 由多个样式规则 组成，每个样式规则有两个部分: 选择器和声明
—>选择器：决定哪些元素使用这些规则
—>声明：由一个或多个属性/值组成，用于设置元素的外观表现；
*CSS 使用
一共有三种使用方式：内联样式、内部样式表、外部样式表
*内联样式：定义在单个HTML元素中；不需要定义选择器，也不需要大括号{}，只需要将分号隔开的一个或多个属性/值对，作为元素的style的值；如：
<h1 style=“background-color:silver;color:blue”>文本</h1>
- 内部样式表：定义在HTML页的头元素中；位于头元素的<style>元素内；在文档的<head>元素内添加<style>元素，在<style>中添加样式规则；如：
<head><style type="text/css">
h1{ color:green; }
</style></head>
<body><h1>文本</h1></body>
[注意：<style>中的属性 <type=“text/css”>可省略；且<style>元素里的注释要用css规定的/**/来注释，而不是HTML里的<!— —>]
- 外部样式表：定义在一个外部的CSS文件中(.css文件)；由HTML页面引用样式表文件；
—> 一个纯文本文件；
—> 该文件中只能包含css样式规则；
—> 文件后缀为.css;
使用 <link>元素链接需要的外部样式表文件。如:
myStyle.css文件：
h1{ color:green; }
p{ background-color;silver;color:blue; }
html文件里的<head>元素：
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
[注意：rel：表示做什么用；href：表示引入的文件路径；type：引入文件类型，text/css表示纯文本的CSS代码]；
** 三种使用方式的区别：
1）内联样式：将样式定义在元素的style属性里；但没有重用性。
2）内部样式表：将样式定义在<head>元素里的<style>里；但仅限于当前文档范围重用。
3）外部样式表：将样式表单独定义在.css文件里，有页面引入它；但可维护性可重用性高，同时实现了数据(内容)和表现的分离；
- CSS特征：
—> 继承性：大多数CSS的样式表可以被继承；
—> 层叠性：可以定义多个样式表；不冲突时，多个样式表中的样式可层叠为一个，即不冲突时采用并集方式； - 优先级：即冲突时采用优先级
—> 内联 > 内部 或 外部；
内部和外部：优先级相同的情况下，采取就近原则，以最后一次定义的优先
（所以，当修改时，不想去找，就在CSS文件中最后的位置重新写新的样式；这也是CSS文件越来越大的原因）；
[注意：还应注意浏览器的缺省设置]
** CSS的特点就是：继承+并集+优先级；
*CSS选择器
1）元素选择器：HTML文档的元素名 div
- 语法：如h1{color : blue}
- 缺点：不同的元素样式相同，即不能跨元素，做不到同一类元素下的细分；
2）类选择器：.class - 语法：.className{样式声明}，如：
.myClass{ background-color:pink;font-size:35pt; }
<h2 class="myClass">h2中的文本</h2>
<p class="myClass">p中的文本</p>
[注意：html文件中，所有元素都有一个class属性，如<p class=“name”></p>;
类选择器还有一种用法：<div id=“d1” class=“s1”></div>则样式d1和s1共同起作用]
3）分类选择器 div.class
将类选择器和元素选择器结合起来使用，以实现同一类元素不同样式的细分控制。如<input>元素，双有按钮又有文本时，可采用分类选择器，如：
p.myClass{ color:red;font-size:20pt }
<h2 class="myClass">h2中的文本</h2>
<p class="myClass">p1中的文本</p>
<p>p2中的文本</p>
4）元素id选择器 #id
以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器
- 语法：定义id选择器时，选择器前需要有一个”#”号。选择器本身则为文档中某个元素的id属性；如：
#header{ color:red;background:yellow; }
<h1 id="header">This is Title<h1>
[注意：html文件中，所有元素都一个id属性。且某个id选择器仅使用一次]
5）派生选择器 h1 span （包含/后代选择器）
依靠元素的层次关系来定义。某一包含元素下的一些相同子元素使用派生选择器
- 语法：通过依据元素在其位置的上下文关系来定义样式，选择器一端包括两个或多个用空格分隔的选择器。如：
h1 span{color:red;}
<h1>This is a<span>important</span>heading</h1>
6）选择器分组 h1,p,div
对某些选择器定义一些统一设置（相同的部分）
- 语法：选择器声明为以逗号隔开的元素列表，如：
h1,p,div{ border:1px solid black;}
7）伪选择器 a:link
用于向某些选择器添加特殊的效果
- 语法：使用冒号 ：作为结合符，结合符左边是其他选择器，右边是伪类。
- 常用伪类：有些元素有不同的状态，典型的如<a>元素
- link：未访问链接 *active：激活 *visited：访问过的链接 *focus：获得焦点
- hover：悬停，鼠标移入，所有元素都能用
如：
a:link{ color:black;font-size:15pt; } a:visited{ color:pink;font-size:15pt; }
a:hover{ font-size:20pt; }
8)子选择器 .class>div
用于指定标签元素第一代子元素。只作用于第一代后代；
+语法：使用>作为连接符，连接类名及标签名。如:
.first>span{border:1px solid red;}
9）通用选择器
作用是匹配html中所有标签元素。
+语法：使用一个 * 表示，如：*{color:red;}
*选择器优先级(每种选择都有其权值，优先级就是对其权值的比较)
- 基本规则：内联样式 > id选择器 > 类选择器 > 元素选择器
- 优先级从低到高：
div < .class < div.class < #id < div#id < #id.class < div#id.class
!important : 设置选择器的权值为最高，即优先级最大。
如：p{color:red!important;} /则不管后面的设置都会为红色/
id选择器与类选择器的区别：
—> id选择器在一个HTML中只能使用一次；若使用两次则会出错；而类选择器.class可以使用多次；
—> 可以使用类选择器列表为同一个元素设置多个样式，而id不能。如class=“stress bigsize”;
博客地址：Web基础之CSS（一）
