css作用：早期，依靠HTML元素的属性设置样式，比如：border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。

CSS概念：

+ CSS（Cascading Style Sheets）:层叠样式表，又叫级联样式表，简称样式表；

+ 用于HTML文档中元素的定义

+ 实现了将内容与表现分离

+ 提高了代码的可重用性和可维护性

CSS基础语法：

+ 由多个样式规则 组成，每个样式规则有两个部分: 选择器和声明

—>选择器：决定哪些元素使用这些规则

—>声明：由一个或多个属性/值组成，用于设置元素的外观表现；

*CSS 使用

一共有三种使用方式：内联样式、内部样式表、外部样式表

*内联样式：定义在单个HTML元素中；不需要定义选择器，也不需要大括弧{}，只需要将分号隔开的一个或多个属性/值对，作为元素的style的值；如：

<h1 stylex=「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」;


推荐阅读：
相关文章