CSS也是一种标记语言，主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)。图片的外形(宽高、边框样式、边距等)，以及版面的布局和外观显示样式。
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。选择器{属性:值;属性:值}。
css一般在<head>中，以<style></style>包括。
选择器：
标签选择器(元素选择器) 用HTML标签名称作为选择器，按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
类选择器 可以单独选一个或者几个标签
.类名{
属性1:属性值1;
...
}
调用方式为<div class='类名1 类名2 ...'></div>
id选择器
#id名 {
属性1:属性值1;
...
}
调用方式为<div id='id名1 id名2 ...'></div>,id只能调用一次
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和Java script搭配使用。
通配符选择器 选取页面中所有元素(标签)
* {
属性1:属性值1;
...
}
复合选择器:
后代选择器：又称包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代，元素1 元素2 {样式声明}，表示选择元素1里面的所有元素2(后代元素)，举例如下
ol li a {
color: red;
}
子选择器：只能选择作为某元素的最近一级子元素，元素1>元素2{样式声明}，表示选择元素1里面的子一代元素2
并集选择器：选择多组标签，同时为他们定义相同的样式，元素,元素2{样式声明}，表示选择元素1和元素2，可与其他选择器共同使用
伪类选择器：向某些选择器添加特殊的效果，比如给链接添加特殊效果或选择第一个和第n个元素，元素1:元素2
链接伪类选择器：
a:link；选择所有未被访问的链接
a:visited；选择所有已被访问的链接
a:hover；选择鼠标指针位于其上的链接
a:active；选择活动链接(鼠标按下未弹起的链接)
链接伪类选择器要按LVHA的顺序声明，否则无效
a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式。
:focus伪类选择器：
用于选取获得焦点的表单元素。焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。
input:focus{
background-color:yellow;
}
字体属性:
font-family: Microsoft yahei'；定义字体系列；最常见的几个字体:body{font-family: 'Mircrosoft',tahoma,arial,'Hiragino Sans GB';}上述命令按顺序优先展示
font-size: 20px；定义字体大小，px是一个像素大小单位，标题标签比较特殊，指定<body>时需要单独指定文字大小。
font-weight: 700；定义字体粗细,100-900,400正常，700粗体
font-style: normal/itlic;定义字体风格，normal标准样式，italic斜体
字体属性可以复合body{font: font-style font-variant font-weight font-size/line-height font-family;}顺序不能更改且必须保留font-size和font-family属性，如body{font: 700 16px 'Microsoft yahei';}
文本属性:
color: red;定义文本的颜色，可以用预定义颜色值、rgb()、十六进制，开发中最常用十六进制
text-align: center;设置元素内文本内容的水平对齐方式，left左对齐(默认)、right右对齐、center居中对齐
text-decoration: underline;规定添加到文本的修饰，none无装饰线(默认)、underline下划线、overline上划线、line-through删除线等。
text-indent: 20px/2em;指定文本第一行的缩进，通常是将段落首行缩进，em是相对当前一个文字大小的相对单位
text-height: 26px;用于设置行间距
text-shadow: h-shadow v-shadow blur color；文字阴影，h-shadow必需，水平阴影的 位置，允许负值，v-shadow必需，垂直阴影的位置，允许负值，blur，可选，模糊距离，color可选，阴影的颜色
背景属性：
background-color:颜色值；定义元素的背景颜色，默认是transparent透明
background-image:none/url；描述元素的背景图像，非常便于控制位置
background-repeat:repeat/no-repeat/repeat-x/repeat-y；对背景图像进行平铺，各选项含义依次为 背景图像在横向和纵向上平铺、不平铺、在横向平铺、在纵向平铺。默认是平铺的
background-position:x,y；改变图片在背景中的位置，x，y可以使用方位名(top/center/bottom/left/right等)或精确单位(百分数或者有浮点数字和单位标识符组成的长度值)，混合使用时第一个是x，第二个是y
background-attachment:scroll/fix'e'd；设置背景图像是否固定或者随页面的其余部分滚动
background: rgba(0,0,0,0.3)；设置背景颜色半透明的效果 ，最后一个参数是alpha透明度，取值范围在零到一之间。
复合写法：background:背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
盒子模型：
边框：
border : border-width || border-style || border-color；定义边框粗细、样式、颜色
border-width:5px；单位是px
border-style:solid/dashed/dotted；实线、虚线、点线边框
复合写法：border: 1px solid red；没有顺序
可以分开写，如border-top：3px solid red
border-collapse: collapse；相邻边框合在一起
内边距：
padding-left/right/top/button: 20px；设置内边距
复合写法：padding：1px 2px 3px 4px；上右下左；三个值上 左右 下；两个值上下 左右；一个值 全
外边距：
margin-left/right/top/button: 20px；设置外边距，左右外边距设置为auto可以实现水平居中
外边距合并问题可以通过为父元素定义上边框/上内边距或者添加overflow:hidden解决
部分元素会自带内外边距，不同浏览器默认的也不一样，可以通过padding:0;和margin:0;清除内外边距
盒子阴影：
box-shadow: h-shadow v-shadow blur spread color inset;为盒子添加阴影；h-shadow必需，水平阴影的 位置，允许负值，v-shadow必需，垂直阴影的位置，允许负值，blur，可选，模糊距离，spread可选阴影的尺寸，color可选，阴影的颜色，insert可选，将外部阴影改为内部阴影，默认外阴影
圆角边框：
border-radius:length；用于设置元素的外边框圆角，length可以设置为四个值，从左上开始顺时针依次对应，三个值左上 右上左下 右下，两个值 左上 右下和左下 右上；或者以border-top-left-radius:length;形式写，top和left位置不能颠倒
浮动：
选择器 { float: 属性值;}；用于创建浮动框，将其移动到一边，直到好的同学们，接下来我们来讲一个非常重要的知识点，叫做普通的特性。因为我们给元素加了之后呢，和以前的默认的元素的排列方式有些不同啊，它具有自己一些单独的。左边缘或右边缘触及包含块或另一个浮动框的边缘，属性值可以是none//left/right
常见的网页布局，列布局用标准流，行布局用浮动
选择器 {clear: 属性值;}；清除浮动，属性值是legt/right/both，实际中几乎只用clear: both，清除浮动的策略是闭合浮动，清除浮动的本质就是清除浮动元素脱离标准造成的影响
清除浮动的方法：1.额外标签法，也称隔墙法(W3C推荐)。2.父级添加overflow属性。3.父级添加after伪元素。4.父级添加双伪元素
额外标签法：在浮动元素末尾添加一个空的标签，新添加的空标签必须是块级元素，例如<div style="clear:both"></div><br/>
样式表:
1.行内样式表(行内式)在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。
<div style="color: red;font-size: 12px;"></div>
2.内部样式表(嵌入式)写到HTML页面内部，将所有的CSS代码抽取出来，单独放到一个<style>标签中。
<style>
.blue {
color: red;
width: 500px;
height: 100px;
background-color: blue;
}
</style>
3.外部样式表(链接式)样式单独写到CSS文件中，之后用<link>标签把CSS文件引入到HTML页面中使用，实际开发中最常用。
<link rel="stylesheet" href="css文件路径">
Emmet语法:
1.生成标签，直接输入标签名，按tab键即可。
2.如果想要生成多个相同标签，加上*就可以了，比如div*3。
3.如果有父子级关系的标签，可以用>，比如ul>li
4.如果有兄弟关系的标签，可以用+，比如div+p
5.如果生成带有类名或者ID名字的，直接写.demo或者#two tab键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$
复合用法：ol>li.demo{中间文字$}*5
display: block/inline-block/inline；行内元素与块级元素的转换
若文字行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
CSS的三大特性：层叠性、继承性、优先性。
层叠性：样式冲突时遵循就近原则，哪个样式离结构近就执行哪个样式。
继承性：子标签会继承父标签的某些样式，如text-、font-、line-
优先性：同一个元素指定多个选择器根据选择器权重执行，相同执行层叠性，选择器权重由大到小为：！important重要的0,1,0,0>行内样式style0,1,0,0="">ID选择器0,0,1,1>类选择器或者伪类选择器0,0,1,0>元素选择器0,0,0,1>继承或者*0,0,0,0，后代选择器存在权重叠加，涉及复合选择器需要计算权重
CSS属性建议书写顺序：
1.布局定位属性： display/position/float/clear/visibility/overflour(建议display第一个写)
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/black-word
4.其他属性(CSS3)： content/cursor/border-radius/box shadow/text-shadow/background:linear-gradient
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
