CSS

CSS用来定义页面元素的样式，如字体、颜色、位置、大小以及动画效果等。

代码格式：

h1{
	color: white;
	font-size: 14px;
}

其中h1是选择器，color、font-size为属性，white、14px为属性值。属性+属性值组成声明。

在页面中使用CSS

<!--外链-->
<link rel="stylesheet" href="/mian.css">

<!--嵌入-->
<style>
p { color: white; }
<style>

<!--内联-->
<p style="color:white;">Hello World</p>

CSS工作流程

graph TD
  加载HTML-->解析HTML
	解析HTML-->加载CSS
	解析HTML-->创建DOM树
  创建DOM树-->展示页面
  加载CSS-->解析CSS
  解析CSS--> |添加样式到DOM节点| 展示页面

选择器 Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
  • 按照标签名、类名或者id
  • 按照属性
  • 按照DOM树中的位置

通配选择器

* {
	color: red;
}

标签选择器

p {
	color: red;
}

id选择器

#logo {
	color: red;
}

类选择器

.done {
	color: gray;
}

属性选择器

[disabled] {
	color: #999;
}

a[href^="#"] {
	color: #f54767;
}

a[href$=".jpg"] {
	color: deepskyblue;
}

伪类选择器

状态伪类

a:link {
	color: black;
}

a:visited {
	color: gray;
}

a:hover {
	color: orange;
}

a:active {
	color: red;
}

:focus{
	outline: 2px solid orange;
}

结构伪类

li {
	list-style-postion: inside;
  border-buttom: 1px solid;
  padding: 0.5em;
}

li:first-child {
	color: coral;
}

li:last-child {
	border-bottom: none;
}

选择器组合

名称	语法	说明	例子
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果他是A的子孙	nav a
亲子组合	A>B	选中B，如果他是A的子元素	section > p
兄弟选择器	A ~ B	选中B，如果他在A后，且和A同级	h2 ~ p
相邻选择器	A + B	选中B，如果他紧跟在A后面	h2 + p

选择器组

a, p {
	padding: 0;
}

字体 font-family

h1 {
	font-family: Optima, Georgia, serif;
}

body {
	font-family: Helvetica, sans-serif;
}

选择器的特异度

	#id	.(伪)类	E标签
#nav .list li a:link	1	2	2
.hd ul.links a	0	2	2

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
	.btn {
	display: inline-block;
	padding: .36em .8em;
	margin-right: .5em;
	line-height: 1.5;
	text-align: center;
	cursor: pointer;
	border-radius: .3em;
	border: none;
	background: #e6e6e6;
	color: #333;
	}
	.btn.primary {
	color: #fff;
	background: #218de6;
	}
</style>

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。通常关于字体的会继承，关于盒模型的不会继承。

可以使用inherit显式继承父元素。

初始值

• CSS中每个属性都有初始值。
• 可以使用initial关键字显示重置为初始值。