CSS 规则由两个主要的部分构成：
1.选择器:通常是需要改变样式的 HTML 元素 2.一条或多条声明：由一个属性和一个值组成。 每个属性有一个值。属性和值被冒号分开。
选择器：
分组：用逗号可以将需要分组的选择器分开。 继承：从父元素继承属性，如head继承body
引用：
注释
CSS注释与HTML中不同 可以用 的方式来注释.
ID选择器和类选择器区别：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
子元素选择器和后代选择器的区别：
1、派生选择器子元素选择器'>'作用于元素的第一代后代，后代选择器（空格）作用于元素的所有后代。
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
li strong{ color: red; } 这个样式便只对
为标有 id 的 HTML 元素指定特定的样式, id 选择器以“#”来定义，而id选择器经常与id选择器配合使用
注意：id 属性值只能在每个 HTML 文档中出现一次。
CSS：#div a{ color:red; }
HTML:what a fuck
//只有fuck显示red效果
3.类选择器
.divclass { color: red; } 在某个元素中含有class=divclass则意味着要遵守前面这个代码的规则，即含有divclss类。
注：第一个字符不能用数字。
经常与id选择器配合使用
CSS：.divclass a{ color:green; }
HTML:brain fucker
//只有er显示green效果
多类选择器:
class="p1 p2" //HTML
.p1.p2{ font-style: italic }
//这样P3既有了p1p2的属性 还有属于自己的字体属性
4.属性选择器
1、[title]{}这是为带有title属性的元素设置样式
2、[title=te]{}这是为title=te的元素设置样式
像h1{}、a{}等，这些文档的元素就是最基本的选择器。
6、选择器分组就是对多个元素进行分组同时进行样式设置，如h1,h2,h3{}
还有一个通配符*的使用,用通配符的时候就是设置整个页面的内边距和外边距,若想要某个例外，则对该元素单独进行设置、覆盖即可。
类与标签的分组使用，例.first,#second span{}
后代选择其可以选择作为某元素后代的元素。比如对p中的strong的子标签进行设置，p strong{}
8、子元素选择器与后代选择器相比,子元素选择器只能选择作为某子元素的元素，例h1>strong{}
9、相邻兄弟选择器相邻兄弟选择器可以选择紧接在另一个元素后的元素,且二者有相同的父级元素,例h1+p{}
兄弟选择器多用于列表,具有相同的父级元素 ul li+li{}
兼容性最好的也最常用的一个列子：a:hover{}即表示鼠标划过时显示的样式
| 属性 | 描述 |
|---|---|
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置元素的背景颜色 |
| background-image | 把图片设置为背景 |
| background-position | 设置背景图片的起始位置 |
| background-repeat | 设置背景图片是否及如何重复 |
设置背景图片的时候默认是重复的，所以此时可以用background-repeat属性来设置图片是否重复：background-repeat:no-repeat
no-repeat 表示不能重复，repeat 可重复，repeat-x 表示 x 轴重复，repeat-y 表示 y 轴重复
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。还可以使用长度值和百分数值。
背景关联如果网页比较长，那么当网页向下滚动时，背景图像也会随之滚动。当网页滚动到超过图像的位置时，图像就会消失。 我们可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的fixed，因此不会受到滚动的影响.
| 属性 | 描述 |
|---|---|
| background-size | 规定背景图片的尺寸 |
| background-origin | 规定背景图片的定位区域 |
| background-clip | 规定背景的绘制区域 |
链接的四种状态：
a:link --普通的、未被访问的链接 a:visited --用户已访问的链接 a:hover --鼠标指针位于链接的上方 a:active --链接被点击的时刻
四个属性设置要遵循的顺序问题： a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后
修改都对应属性的background-color即可改变链接背景颜色
下划线：在text-decoration里面将传址改为none即可
list-style-type属性可以控制列表前面的标记类型，其值有circlesquareupper-romanlower-alpha
列表项图片,用list-style-image，下载的图标放入工程文件夹：
简写列表样式，即把所有列表属性设置放在一个声明中：
如li {list-style : url(example.gif) square}
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
CSS轮廓outline,也有color,width,style等属性
从的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
1、内联式：样式在开始标签中，并且要写在style=“"双引号中，多条样式代码用分号隔开。
2、嵌入式：写在当前的文件中,把CSS代码写在
3、外部式：单独把css内容写在另外的文件内。
就近原则（离被设置元素越近优先级别越高），由此他们的优先级：内联式 > 嵌入式 > 外部式
CSS尺寸涉及属性：
height -- 设置元素的高度。 line-height --设置行高,normal,百分比 max-height-- 设置元素的最大高度。 max-width --设置元素的最大宽度。 min-height --设置元素的最小高度。 min-width --设置元素的最小宽度。 width --设置元素的宽度。CSS导航栏
导航栏分为：垂直导航栏和水平导航栏。
我们要用CSS实现导航栏前面的圆点消失，颜色改变，下划线去掉。
ul{ list-style:none };
a:link,a:visited{ text-decoration:none }
//还可以设置背景颜色和展示(block)
a:active,a:hover{ background-color: }
//给导航栏加个鼠标移动到上面时,改变背景颜色:
水平显示：在li标签中改变显示方式 li{ display:inline}
这样它们会在一行显示，生成水平导航栏。
透明度opacity: 范围0-1，而1表示完全透明;
继承属性如我为p标签设置样式，则p标签下的子标签都会继承p的属性。
如果我们为同一个元素设置不同的css样式时就需要判断优先级—— 即权值来确定先启用哪个标签。
权值规则：继承：0.1 ；标签：1 ；类选择符：10 ；ID选择符最高为：100；例：
p{color:red;}
p span{color:green;}
.warning{color:white;}
p span.warning{color:purple;}
`#footer .note p{color:yellow;}
当优先级想当时就涉及到一个“层叠”的规则，即后面的会覆盖前面的。
但是如果我需要某些在前面的内容突出显示，即凸显它的重要性 则需要在属性设置后，分号前加入!important
字体：font-family:"Microsoft Yahei"
字号：font-size
颜色:color
1、英文命令颜色，如`color:red`
2、RGB颜色 `p{ color:rgb(133,45,200) }`或者改成百分比
3、十六进制颜色（最普遍）：
将RGB的每一项0-255变成十六进制00-ff，ex: color:#00ffff
| 排版：font-weight,bold.font-style:italic 下划线删除线：text-decoration:underlineline-through 缩进：text-indent:2em 行高：line-height:2em 文字间隔或字母间隔:letter-spacing:20px 单词间距:word-spacing：20px 段落对齐：text-align:centerleftright 属性 |
描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| text-decoration | 向文本中添加修饰 |
| text-indent | 缩进文本中的首行 |
| text-transform | 元素中的 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
indent单位em，设置该样式缩进
长度值：
1、像素px
2、em,为相对之前的px单位,如font-size设置为14px则1em=14px.另外当font-size单位为em时计算标准以其父元素的font-size为基础
html中的标签元素大体被分为三种不同的类型：
1、块状元素: 、
、...、
- 、
- 、
- 、