HTML 关注语义、内容、结构，CSS 关注样式、外观
HTML可以在标签中用属性来简单设置样式，但是每个元素都设置会太繁琐
CSS————层叠样式表。设置文本的字体、大小、对齐方式；设置图片的外形宽高边框；版面的布局、外观显示样式
尽可能让结构（HTML）与样式（CSS）分离
引入方法1：行内样式：在标签中设置style属性
<p style="color: darkblue;"> xxxxxx </p>
引入方法2：内部样式表（内嵌）：用css<style>标签写在<head>标签中
<style> p { color: darkblue; font-size: 16px; } </syle>
引入方法3：外部样式表（外导）：css代码保存在.css文件中，链接式或导入式加入页面 1、link引用CSS时，在页面载入时同时加载；@import需要页面完全载入后才加载。 2、link支持使用JavaScript控制DOM去改变样式；@import不支持这样的操作 （JavaScript可以获取link标签元素，但获取不到@import，因为@import只是一种CSS语法）。
<link rel="styleSheet" href="CSS文件路径" /> <style type="text/css" > @import ulr("css_url") </syle>
p { color: darkblue; font-size: 16px; }
类选择器————按标签的class属性单独选一个或某几个，实现差异化.myClass { color: darkblue; }
ID选择器————按照标签的id属性选择某一个（注意ID有唯一性）#myId { color: darkblue; }
通配符选择器————用*选择页面中所有元素* { margin:0; padding:0; }
结合使用标签选择器和类选择器div.red { background-color: red; } div.green { background-color: green; } div.boxes { border:1px solid black; }
font： italic bold 20px 'Microsoft Yahei'
font： italic bold 20px/24px 'Microsoft Yahei'(24px是行高，对块级有效)
font： italic bold 20px/1.5 'Microsoft Yahei'(1.5是行高为当前字号大小的1.5倍)
text-align: center
text-align: left
text-align: right
这一行text-indent:-20px
这一行默认
这一行text-indent: 2em
这一行line-height:40px
这一行默认
这一行line-height:10px
使用缩写来提高html/css的编写速度——快速生成HTML结构和CSS代码
打出标签名后按tab键；div*10再按tab可以批量生成
ul>li再按tab可以生成包含关系的html；div+p是生成兄弟级元素；
div.myclass按tab可以直接生成带类名的标签，#同理
div.demo$*5按tab可以生成5个类名1~5的元素；$是自增符号
div{默认文字$默认文字}*5；大括号中可以放入默认内容，可以包含自增符号，可以重复生成
tac加tab快速生成text-align:center
w100快速生成width：100px;tdn=text-docoration;lh=line-height;ti=text-indent
快速对齐代码，对齐缩进————shift+Alt+F或右键整理代码格式
组合各种基础选择器，更高效准确地选的目标元素————后代选择器、子选择器、并集选择器、伪类选择器
后代选择器( 空格 )选择某个某个父元素中包含的所有子元素（子、孙）
div p{ color:pink; }
子选择器( > )选择某个元素的所有直接后代
div>p{ color:pink; }
并集选择器( , )选择多组标签统一设置
div,p{ color:pink }
伪类选择器向某些元素添加特殊效果——————:not/:checked/:empty/:first-of-type/:nth-child(n)
链接伪类————————a:link（未访问过）/a:visited/a:hover/a:active（按下未弹起）
链接伪类————————input:focus 选取获得光标的元素（比如那个输入框选中则高亮边框）
伪类————————div:first-child（父元素的第一个子元素，该选择在IE8之前版本需要有！DCOTYPE声明）
div标签自己占一行、span一行内可以有多个——————————块元素、行内元素
1、div元素是最典型的块级元素独占一行，即使自己的宽度不足一行，其他元素也要另起一行
2、只有块级元素可以设置宽高
3、默认宽度是父元素的100%
4、块级元素可以看过容器，里面可以放任何东西（其他的块级、行内）
5、文字型元素内不能放块级元素————如p中不能再放div
1、span是最典型的行内元素（内联元素）
2、直接设置宽高无效，默认宽度是内容的宽高
3、行内元素只能放文本或者其他行内元素（小特例：a里面不能放a但可以放块级img）
1、img、input、td、form同时具有行内和块元素的特点
2、一行内可以放多个（一行内可以多个input或者img）
3、可以控制宽高、行高、内外边距
将a标签转化成块级元素——————使用css属性display:block
同理可以将块级转成行内————————display：inline、inline-block
原理：行高=上间距+字高+下间距—————————行高 > 盒高会使得文字偏下
background-color:背景颜色——————可以与背景图同时添加，背景色在底
background-position:——————控制背景图片位置，对小的装饰图片/logo，bg-pos比img标签更好控制位置
方位名词 left top(靠左上) | right center(和center right一样) | 只写一个right，则水平靠右而垂直默认居中
位置名词 xpos ypos | x% y%
background-size
background-repeat:如何重复背景图片,默认平铺——————repeat|no-repeat|repeat-x|repeat-y
background-origin:背景图的定位区域———pos是相对于哪个盒子进行定位：border-box|padding-box|content-box
background-clip:背景图的绘画区域
background-attachment：背景图像是否固定————————scroll（默认随着页面滚动）|fixed（不滚动）|local（随元素滚动）
background-image:url('xxx')
background:———————复合写法，无顺序，但一般约定color+img+pos+size+repeat+origin+clip+att+ini
background:url(img_navsprites.gif) 0 0; 可以控制显示一张大图的哪个部分————CSS精灵图
包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。使用图像精灵将减少服务器请求数量并节约带宽。
1、CSS层叠性：样式冲突时遵循————————就近原则（行内>内部表>外部表）
2、CSS继承性：字标签默认继承父标签的某些样式————————如文本样式（颜色、字号）
例子：行高的继承————子元素可以继承父元素的行高
3、相同选择器冲突——就近原则；不同选择器——看优先级
一、选择器类型 1、ID #id 2、class .class 3、标签 p 4、通用 * 5、属性 [type="text"] 6、伪类 ：hover 7、伪元素 ::first-line 8、子选择器、相邻选择器 二、权重计算规则 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为0100。 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器、继承的。如*、>、+,权值为0000。 继承的样式没有权值。 三、比较规则 1,0,0,0 > 0,99,99,99，从左往右逐个等级比较，前一等级相等才往后比 四、!important会覆盖所有的样式规则获得最高权重，但慎用
块元素 = MarginBox + BorderBox + PaddingBox + ContentBox
一、border-width||border-style||border-color 有复合写法
二、上下左右边框可通过border-top|border-bottom等等分别设置
三、注意border会改变盒子的实际大小————影响height，height包含border宽*2
一、padding-top|bottom|left|right
二、缺省写法：padding：5px 10px（上下） || 5px 10px 20px （上5左右10下20）|| 5px 10px 20px 30px（上右下左）
三、padding也会影响盒子实际大小——————应用：
四、padding不影响盒子大小的情况——————本来块级元素未指定width时，默认继承父元素宽度，此时padding不影响宽度
一、盒子的宽/高 = MarginBox*2 + BorderBox*2 + PaddingBox*2 + ContentBox
一、盒子与盒子之间的距离————外边距————margin-top|right|bottom|left
二、和padding一样可以 5px 10px | 5px 10px 3px
三、可以让块级元素实现水平居中————①盒子必须有设定width ②左右margin:auto
四、margin左右auto对行内、行内块元素水平居中是无效的，解决方法是给父元素添加text-align：center
例如：.header{ width:960px; margin:0 auto; }
五、嵌套块元素垂直margin塌陷问题——父元素和子元素同时有上margin时，父元素会塌陷较大的margin
解决方法：父元素定义上边框||父元素定义上padding||父元素添加overflow：hidden
六、用 * { margin:0 ; padding:0 } 清除所有元素内外边距
七、行内元素照顾兼容性，尽量只设置左右的内外边距（span上下margin没用），转化成块级和行内块可以。块级元素无所谓
八、css3盒子新特性——圆角边框、盒子阴影、文字阴影
九、text-shadow：h-shadow | v-shadow | blur | color
