这是我参与「第四届青训营」笔记创作活动的第2天

CSS样式概述

CSS：Cascading Style Sheets，层叠样式表
特点：

以统一的方式完成相同的页面效果
实现页面内容（html）与样式（css）相分离
提高代码的可重用性和可维护性

CSS样式的定义格式：由选择器及一条或多条声明构成。

selector {declaration1; declaration2; ... declarationN }

选择器selector：需要改变样式的HTML元素
声明declaration：由一个属性和一个值组成。

书写CSS样式时，除遵循CSS样式定义规则外，还应注意以下特点：

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，一般习惯将选择器、属性和值都采用小写的方式。
多个属性之间必须用英文分号隔开，最后一个属性后的分号可以省略，但为了便于增加新样式，最好保留。
若属性的值由多个单词组成，且中间包含空格，则必须为这个值加上英文引号。
采用/*…*/对CSS代码进行注释。

css样式

<!--外部-->
<link rel="stylesheet" href=" /assets/style.css ">
<!--内部-->
<style>
    li { margin: 0 ;list-style: none; }
    p { margin : lem 0; }
</style>
<--内联-->
<p style="margin: lem0 ">Example content</p>

1. 内联样式

内联样式：又称行内样式，由HTML元素的style属性定义
语法：

<标记名称 style=“样式声明1;样式声明2;…;样式声明n;”>内容</标记名称>

样式声明格式：样式属性 : 属性值；

<div style=“color:red; font-size:12px;width:200px;height:200px;background-color:grey;”>
	这是一个div
</div>

缺点：
属性值内容太多，会导致代码太乱，不能实现样式与元素相分离
只对其所在的标签及嵌套在其内的子标签起作用，其他元素想实现相同效果，需再重写相同的style属性，不能实现代码重用性

2. 内部样式表

使用<style></style>标记将样式表定义在HTML文档的元素中。
语法：

<head>
	<style>
		样式规则定义
	</style>
</head>

样式规则：一组可以应用在某些元素上的样式声明
样式规则语法：

选择器{
	样式声明1；
	样式声明2；
	…
	样式声明n;
}

例如：

<head>
	<style>
		div{
			color:red;
			font-size:12px;
			width:200px;
			height:200px;
			background-color:grey;
		}
	</style>
</head>
<body>
	<div>这是一个Div</div>
	<div>这是一个Div</div>
	<div>这是一个Div</div>
</body>

特点：以独立的方式，定义页面元素的样式（元素与样式相分离），并且能够让样式应用在多个元素中（提升可重用性和可维护性）
缺点：只能在当前页面中使用

3. 外部样式表

将样式定义在外部独立的CSS文件中，应用样式的HTML文档可以引入该CSS文件。
步骤：

创建扩展名为.css的外部样式表文件，编写样式规则，样式规则由选择器和若干样式声明组成。
在页面中以链接或导入的方式引入样式表文件。链接式首先加载外部CSS文件，再加载网页页面，因此，这种情况下显示出来的网页从一开始就是带有样式效果的。
导入式会在整个网页加载完毕后再装载CSS文件，即先将HTML的结构呈现出来，再把外部的CSS文件加载到网页当中，最终显示效果与链接式一样。但是，若网页比较大，或者网速较慢时会出现先显示没有统一CSS样式的HTML网页，然后再显示有样式的网页，这样会给阅读者带来不好的感觉。

4. 样式表的特征

（1）继承性：

样式继承是指书写CSS样式表时，子标签会继承父标签的某些样式。
user agent stylesheet：用户代理样式，即浏览器指定的默认样式。
CSS3提供了针对浏览器的前缀，现代浏览器的内核，主流内容主要有Mozilla、Webkit、Opera、Trident，前缀如下：
Chrome：谷歌浏览器，-webkit-
Safari：苹果浏览器，-webkit-
Firefox：火狐浏览器，-moz-
IE：-ms-
Opera：-o-

恰当使用继承可以简化代码，降低CSS样式的复杂性。但若在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式，可以使用继承。如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档的所有文本。
并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素宽高等属性。

（2）层叠性：

样式层叠是指多种CSS样式的叠加，即可以为一个元素定义多个样式规则或样式声明，只要样式声明不冲突，则所有样式声明都可应用于该元素上。

（3）样式冲突与优先级：

样式冲突是指多种CSS样式叠加时，出现属性相同而属性值不同的冲突现象。不同优先级的样式表定义元素的不同属性都会作用在元素上，相同属性的只有优先级最高的会对元素起作用。
若样式表声明出现冲突，则按照样式规则优先级进行样式应用：

低：浏览器缺省设置（User Agent StyleSheet）
中：外部样式表
次高：内部样式表
高：内联样式表注意：
子元素定义的样式会覆盖继承来的样式
样式优先级相同时，则采用就近原则，即选择离元素近的样式
定义CSS样式时，对CSS样式属性值后缀“!important”可调整该样式为最高优先级。

选择器

选择器用于指定CSS样式作用的HTML元素。
使用CSS可对HTML页面中的元素实现一对一、一对多或多对一的控制。

基本选择器

（1）通用选择器：（通配选择器）

目的：作用范围最广，为了匹配HTML网页文档中所有的元素。
语法：*{样式声明;}
特点：匹配页面所有的元素，效率低，尽量少使用。

*{
	background-color:yellow;
	margin:0;    /*定义外边距*/
	padding:0;   /*定义内边距*/
}

（2）元素/标签选择器：

作用：指用HTML标签名作为选择器，为页面中某一类标签指定统一的CSS样式。
语法：标签名称{样式声明;}
特点：可快速为页面中同类型的标签统一样式，但不能设计差异化样式。

p{
	color:red;
	font-size:25px;
}

<body>
	<p>段落1</p>
	<h1>标题</h1>
	<p>段落2</p>
</body>

（3）类选择器：

作用：允许被任何一个元素的class属性进行引用的选择器
语法：.类名{样式声明;}
注意：类名允许包含字母、数字、下划线和连字符-，不允许以数字开头
引用语法：<标签名称 class=“类名”></标记名称>
特点：可为元素对象定义单独或相同的样式。

.color{
	color:red;	
}

<body>
	<p class=“color”>段落</p>
	<h1 class=“color”>标题</h1>
</body>

（4）id选择器：

作用：为标有特定 id 的 HTML 元素指定特定的样式
语法：#id值{样式声明;}
id属性设置：<标签名称 id=“id值”></标记名称>

#footer{
	color:red;		
        font-size:20px;
	background-color:#aaaaaa;
	width:300px;
	height:300px;
}

<body>
	<div id=“footer”>段落</div>
	<div id=“top”>段落</div>
</body>

群组选择器

作用：将多个选择器放在一起，统一声明样式
语法：选择器1,选择器2,…,选择器n{样式声明;}

#footer , p , div , .color{
	color:red;
}

#footer{   color:red;      }
p{	color:red;         }
div{	color:red;         }
.color{	color:red;         }

层次选择器

作用：通过HTML元素间的层次关系获取元素，并为其定义样式

选择器	类型	描述
E F	后代选择器	选择E元素的所有后代F元素
E > F	子代选择器	选择E元素下所有的子元素F
E + F	相邻兄弟选择器	选择紧接在E元素后的F元素
E ~ F	通用兄弟选择器	选择E元素后边的所有兄弟F元素

（1）后代选择器：

当元素发生嵌套时，内层元素就成为外层元素的后代。
格式：外层元素内层元素{样式声明;}
作用：选择外层元素的所有后代内层元素。

#footer  p{   color:red;        }

<div id=“footer”>
	<h1>标题1</h1>	
	<p>段落1</p>
	<div>
		<p>段落2</p>
        </div>
	<h1>标题2</h1>	
	<p>段落3</p>
</div>

（2）子代选择器：

格式：外层元素 >内层元素{样式声明;}
作用：选择外层元素的所有直接后代元素（间接元素不适用）。

#footer>p {   color:red;        }

<div id=“footer”>
	<h1>标题1</h1>	
	<p>段落1</p>
	<div>
		<p>段落2</p>
        </div>
	<h1>标题2</h1>	
	<p>段落3</p>
</div>

（3）相邻兄弟选择器：

格式：元素E +元素F { 样式声明; }
作用：选择紧接在E元素后的F元素

h1+p{			
	color: red;		
        background: #CCCCCC;
}

<div id=“footer”>
	<h1>标题1</h1>	
	<p>段落1</p>
	<p>段落2</p>
	<h1>标题2</h1>	
	<p>段落3</p>
</div>

（4）通用兄弟选择器：格式：元素E ~元素F{样式声明;} 作用：选择E元素后边的所有兄弟元素F

h1~p{			
	color: red;		
        background: #CCCCCC;
}

<div id=“footer”>
	<h1>标题1</h1>	
	<p>段落1</p>
	<p>段落2</p>
	<h1>标题2</h1>	
	<p>段落3</p>
</div>

伪类选择器

伪类：同一个元素，根据其不同的状态，有不同的样式。
作用：匹配元素不同状态
语法：

E: pseudo-class  {property:value}

E：HTML元素
pseudo-class：伪类选择器名称
property：属性名称
value：属性值

“伪”的含义：它不像类样式那样，需要使用class属性。

选择器
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E:active	用户行为伪类选择器	选择匹配的E元素，且匹配元素被激活。常用于锚点与按钮上
E:hover	用户行为伪类选择器	选择匹配的E元素，且用户鼠标在停留在元素E上。
E:focus	用户行为伪类选择器	选择匹配的E元素，且匹配的元素获得焦点

超链接的4种状态，需要有特定的书写顺序才能生效。
a:link {}
a:visited {}
a:hover {}
a:active {}
可靠的顺序可用喜欢(love)和讨厌(hate)两个词来概括：
l(link)ov(visited)e h(hover)a(active)te

a:link{
	color: #0f0;
}
a:visited{
	color: #0000ff;
}
a:hover{
	color: #CCCCCC;
}
a:active{
	color: #f00;
}

<body>
	<a href="http://www.baidu.com" target="_blank">Web前端技术</a>
</body>

结构伪类是CSS3新设计的选择器，利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁。

E:nth-child(n)：

作用：选择所有在其父元素中第n个位置的匹配E的子元素。
n可以是数字、关键词或公式。

tr:nth-child(odd) /*用于匹配下标是奇数的子元素的关键词*/
{
	background-color:#ff0000;
}
tr:nth-child(even) /*用于匹配下标是偶数的子元素的关键词*/
{
	background-color:#0000ff;
}

p:nth-child(2n+1) /*使用公式（an+b)，表示周期的长度，n为计数器（从0开始），b是偏移量*/
{
	background:#ff0000;
}

E:nth-of-type(n)：

作用：选择所有在其父元素中同类型第n个位置的匹配E的子元素。
N可以是数字、关键词或公式。

属性选择器

在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。CSS3在CSS2的基础上扩展了这些属性选择器，支持基于模式匹配来定位元素。

选择器	描述
E[attr]	选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素
E[attr=val]	选择匹配具有属性attr的E元素，并且attr的属性值为val（其中val区分大小写），同样E元素省略时表示选择定义了attr属性值为val的任意类型元素
E[attr｜=val]	选择匹配E元素，且E元素定义了属性attr，attr属性值是一个具有val或者以val-开始的属性值。常用于lang属性（例如lang=“en-us”）。例如p[lang=en]将匹配定义为英语的任何段落，无论是英式英语还是美式英语
E[attr~=val]	选择匹配E元素，且E元素定义了属性attr，attr属性值具有多个空格分割的值，其中一个值等于val。例如，.info[title~=more]将匹配元素具有类名info，而且这个元素设置了一个属性title，同时title属性值包含了”more”的任何元素。如<a class=“info” title=“click here for more information”>click

通配符	类型	示例
^	匹配起始符	span[class^=span]表示选择以类名“span”开头的所有span元素
$	匹配终止符	a[href$=pdf]表示选择以“pdf”结尾的所有href属性的所有a元素
*	匹配任意符	a[title*=site]匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串

选择器优先级

① 在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
② 作为style属性写在元素标签上的内联样式
③ id选择器
④ 类选择器/伪类选择器/属性选择器
⑤ 标签选择器
⑥ 通配符选择器
⑦ 浏览器默认属性或继承的属性

语法：属性：值!important;
作用：提升指定样式规则的应用优先权。

选择器类型	权值
通配符选择器	0,0,0,0
元素选择器	0,0,0,1
类选择器	0,0,1,0
属性选择器	0,0,1,0
伪类选择器	0,0,1,0
ID选择器	0,1,0,0
内联样式	1,0,0,0

例：

<!doctype html>
<html lang="zh-cn">

	<head>
		<title>选择器优先级</title>
		<meta charset="utf-8">
		<style>
			#d1 #s1 {
				color: red;
			}
			
			#d1 p span {
				color: orange;
			}
			
			.p1 span {
				color: yellow;
			}
			
			#s1 {
				color: pink;
			}
			
			#d1 .p1 span {
				color: blue;
			}
			
			#d1 #p1 #s1 {
				color: green;
			}
		</style>
	</head>

	<body>
		<div id="d1">
			<p id="p1" class="p1">
				<span id="s1">这是一个span</span>
			</p>
		</div>
	</body>

</html>

css | 青训营笔记