CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言，浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。
直观的说，就是可以控制如内容的字体、颜色、大小和间距这些。
一条 CSS 的样式定义包括属性和属性值，它们共同决定网页的外观。
/* p 选择符用来选择页面中的所有 <p> 标签 */
p {
/* color 属性用来定义文本颜色，这里为黄色 */
color: yellow;
/* background-color 属性用来定义元素的背景色，这里为黑色 */
background-color: black；
}
CSS基本语法
基本语法
由选择器指定CSS作用的对象，在一对大括号{ }内写一条或多条声明，声明由属性和属性值构成
selector {
declaration1：value1;
declaration2：value2;
...
}
CSS选择器的概念
CSS选择器，是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。
- 通配选择器，由一个星号（
*）代指它选中了文档中的所有内容。 - 类型选择器，也叫标签名选择器或者是元素选择器，它在文档中选择了一个 HTML 标签/元素
- 类选择器，以一个句点（
.）开头，会选择文档中应用了这个类的所有物件。 - id选择器， 开头为
#而非句点，不过基本上和类选择器是同种用法。一个 ID 只会一般用到一次，虽然用多次也能正常显示，但是用javascript通过id来控制元素时就会出现错误。
Cascading是层叠的意思，层叠是 CSS 的一个基本特征，意为多个选择符之间具有特定的优先级，它是一个定义了如何合并来自多个源的属性值的算法。
p {
color: red;
}
p {
color: blue;
}
在上面的代码块中，我们为 p 选择器定义了两个规则，但是段落最后是蓝色的。这是因为将其设置为蓝色的声明将出现在样式表的后面，而稍后的样式将覆盖以前的样式。
这是在同样优先级的情况下，如果在优先级不同时，
比如，在我们同时使用了类选择器和元素选择器的前一个例子中，类将获胜，使得段落变红——即使它出现在样式表的前面。
.special {
color: aqua;
}
p{
color: black;
}
所以，在同优先级的情况下，后定义的生效，不同级则优先级高的生效。
各优先级关系，一般来说，选择器的优先级，范围越小，优先级越高
id选择器 > 类选择器 > 元素选择器 > 通配符选择器
CSS基本样式
常用样式
-
font-size：字体大小 px
-
font-weight: normal; //字体粗细 font-style: italic; //字体倾斜
-
-
text-align：center； //文本对齐
-
text-decoration: none; //无装饰 text-decoration: overline; //上划线 text-decoration: line-through; //中划线 text-decoration: underline; //下划线 text-transform: uppercase; //文本转换，全部换为大写字母 text-indent: 50px; //首行缩进 letter-spacing: 3px; //字母间距 word-spacing: 10px; //单词间距 line-height: 0.8; //行间距 white-space: nowrap; //禁用html框中文字编辑时的换行符（不必懂） text-shadow: 2px 2px 5px red; //分别是文本的水平、垂直阴影以及阴影的模糊效果、阴影颜色
-
-
color：字体颜色
-
background：背景样式
-
background-color: blue; //颜色名称方式 background-color: rgb(255, 0, 0); //RGB方式 background-color: #ff0000; //十六进制方式 background-image: url("bg.png") ; //设置背景图片 background-repeat: repeat-x; //沿x方向阵列 background-position: right top; //设置背景图片初始位置 background-attachment: fixed; //背景图片是否随网页滑动 background: #ffffff url("tree.png") no-repeat right top;//简写形式
-
-
height，width，margin，border
div {
width : 300px ;
border : 15px solid green; //边框粗细 实线 颜色 ，dotted是点线，double是双线，dashed是虚线
padding: 50px;
margin: 20px;
}
//height: 200px; 设置内容的高度
//width: 50%; 设置内容的宽度
- outline-style：轮廓样式
outline-color: red; //轮廓颜色
outline-style: dotted; //轮廓样式
border-style: dotted; 边框样式，用于下图中边框与轮廓的比较
outline-width: thin; 轮廓宽度
outline: 5px solid yellow; 简写轮廓属性
outline-offset: 25px;//轮廓偏移
- cursor：pointer；//鼠标呈现为指示链接的一只手
html与css的结合方式
- 行内式：html中的标签属性 style ：适用于单纯只有一个标签需要设置时的特殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World</h1>
- 内嵌式：建议在head中使用，使用标签 style 适用于当前页面多个标签使用同一个样式。
<head>
<style>
p{
color: blue;
font-size: 50px;
}
</style>
<head/>
<body>
<p>内嵌<p/>
<body/>
- 外链式：link:适用于多个页面使用同一个样式时。
<link rel="stylesheet" href="css/my.css" />
注意：link中href属性必须有，表示链接的css文件。
代码规范
保持统一
如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用 Tab 还是空格来缩进代码？如果是空格，用多少个？）
一直遵守一系列规则，你会在编写 CSS 的时候省去不少精神上的预负担，因为一些决定已经定型了。
将 CSS 格式化成可读的形式
你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：
body {
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
还有的开发者更喜欢将所有的东西放在新的一行：
body {padding: 1em;margin: 0 auto;max-width: 33em;}
CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。
margin:0auto;
/* “0auto”不被识别为边距属性的有效值 (“0”和“AUTO”是两个独立的值) */
margin:0 auto;
如果一个浏览器在解析你所书写的 CSS 规则的过程中遇到了无法理解的属性或者值，它会忽略这些并继续解析下面的 CSS 声明。在你书写了错误的 CSS 代码（或者误拼写），又或者当浏览器遇到对于它来说很新的还没有支持的 CSS 代码的时候上述的情况同样会发生（直接忽略）。
为你的 CSS 加注释
在你的 CSS 里加入注释，不仅可以帮任何未来的开发者处理你的 CSS 文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。
你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。
或许你是照着一个教程来做事的，CSS 有些不够直观。此时，你应该在注释里面加入教程的 URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。
浏览器调试CSS
点击箭头可以查看元素
划线表示属性被覆盖
可以手动划掉属性，更改属性或添加新属性
