选择器
常用的有元素选择器，id选择器，类选择器，子元素选择器，群组选择器
元素选择器是按html的元素选则 比如 dev {color:red;}
id选择器是按html元素的id选择 比如<div id="aaa">abc</div> <style type="text/css">#aaa {color:red;}</style>
类选择器是按html元素的class字段选择 比如<div class="aaa">abc</div> <style type="text/css">.aaa {color:red;}</style>
子元素选择器如下 <div class="aaa"><span>abc</span></div> <style type="text/css">.aaa span {color:red;}</style>
群组选择器可以一次选择多个元素，规定样式，可以组合元素选择器、id选择器、类选择器，多个分类用逗号分隔
字体样式
常用的有font-family, font-size, font-weight, font-style, color等属性
font-family后跟字体，可以跟多个字体，浏览器先用字体1，浏览器或系统如果没有字体1，则默认往后用字体2 字体3...
font-size表示字体大小，可以跟关键字small, medium, large等，也可以跟px, em等大小单位。px表示像素，不同分辨率显示屏或操作系统的像素大小不一定相同，需注意
font-weight表示字体的粗细，可以跟关键字normal, lighter, bold, bolder或100-900的整百数字，越小表示越细，越大表示越粗，四个关键字对应数字为400, 100, 700, 900
font-style表示字体是否斜体，只能跟单个值，不能跟多个。有normal, italic, oblique三个值，后两个都是斜体，有的系统没有italic只有oblique
color表示字体颜色，可以跟关键字(gray, red, ...)，十六进制三色数字(#002288, ...)，rgba，hsl等
注释
css注释是/* xxx */
html注释是<!-- xxx -->
文本样式
常用的有text-indent, text-align, text-decoration, text-transform, line-height, letter-spacing, word-spacing等
text-indent用来规定p元素的首行缩进，一般值大小是font-size的两倍，实现空两格
text-align用来控制文本在水平方向对齐方式，即左对齐，居中，右对齐这些。值有三个，left, right, center。这个不仅对文本有效，对img元素也有效
text-decoration规定文本修饰效果，如下划线，上划线，中划线，值有四个，none, underline, overline, line-through。none可以用来消除超链接的下划线
text-transform可对文本进行大小写转换。取值有四个，none, uppercase, lowercase, capitalize。capi是将每个单词的首字母大写
line-height规定行高，值可以为px em等
letter-spacing是单词的字母间距
word-spacing是单词之间的间距，中文网页用的少
边框样式
常用的属性有border-width, border-style, border-color
border-style可取值none, dashed, solid
三个属性可简写为border: 1px solid red;
可分别对上下左右四个边框进行设置，用border-left-width, border-left-style, border-left-color, ....可简写为border-left: 1px solid blue。删掉边框可以用border-width: 0px实现
列表样式
元素：注意，有序列表元素是ol，无序是ul
序号样式：都用list-style-type，无序列表和有序列表只用过属性值区分。有序列表的值为decimal, lower-roman, upper-roman, lower-alpha, upper-alpha. 无序列表值为disc, circle, square。还可以为none表示去掉列表前面的符号
列表项图片：如果想用自己自定义的符号或图片作为列表序号，可以用list-style-image, 比如list-style-image: url(img/abc.png)。一般这个属性用的少 相比之下用的更多的是iconfont。
表格样式
标题位置：caption-side，值只有两个，top，bottom，可以在table和caption元素中定义，一般直接定义在table元素中就行
表格边框合并：border-collapse。默认表格单元格之间有间隙，可看到两条线，可以合并为一条线。默认是分开，值是separate和collapse，也是在table元素中定义就行
表格边框间距：border-spacing
图片样式
图片大小：即用weight和height表示，单位是px em等
图片边框：也是通过border的几个属性弄的，一样，也可以简写
图片水平对齐：通过文本的对齐属性text-align对齐，text-align应该在图片父元素中定义，而不是在img元素中定义
图片垂直对齐：vertical-align属性控制，值有四个，top, middle, bottom, baseline。但使用需要注意，比较复杂，定义的地方不在父元素
文字环绕：float属性 值有left和right 在img元素定义，如果left，则图片跑到环绕的文字的最左边
背景样式
背景颜色：background-color
背景图片样式：background-image: url(img/test.png);背景图片父容器还需要长宽，和普通图片不一样
背景图片平铺：background-repeat 是否将图片平铺满背景，有四个值，repeat(默认值), repeat-x, repeat-y, no-repeat。
背景图片位置：background-position，值可以是像素或关键字，如果是像素，需要两个值，空格分隔，分别表示图片离父容器左上角的水平距离和数直距离。关键字有九个，分别是top left, top center, top right, left center, center center, right center, bottom left, bottom center, bottom right.
背景图片固定：background-attachment, 当滑轮滚动时，背景图片是固定不动，还是被滚轮滚上去，有两个取值，分别是scroll和fixed
超链接样式
超链接可通过伪类定义样式a:link, a:visited, a:hover, a:active，这四个顺序不能变。对于未访问的a元素，直接定义a 没必要定义a:link
hover不光可以在a元素使用，还可以在任意元素使用，作用是定义鼠标放在元素上的样式
鼠标样式：cursor属性定义，值是关键字，值有很多，常用的有default, pointer, text。pointer是手形，text是输入文本的I形
自定义鼠标样式：还是cursor，跟两个值，cursor: url(xxx), default。url后缀名一般是xxx.cur
盒模型
宽高：只有块元素才能用weight, height，行内元素不行，行内元素没有weight和height，宽高只能由content撑起来。weight和height定义的是content的宽高，不包含padding
边框：一般用简写，即border:1px solid red;
内边距：用padding属性，有几个简写方法：分别是padding: a; padding: a b;, padding: a b c d;如果只有一个a，则上下左右padding都是a，如果只有ab，则上下是a左右是b，如果有abcd，则上右下左分别是abcd，按顺时针记忆即可
外边距：用margin属性，也支持简写，和padding简写一样
浮动布局
正常文档流，脱离文档流
浮动：用float属性，值只有两个，left和right
清除浮动：clear属性来清除，值有left, right, both。清除浮动一般是在最后一个浮动元素后增加一个空元素，然后给空元素设置clear属性清除浮动，一般用clear: both 比较多
定位布局
和浮动类似，浮动只有float，定位布局有四种：fixed, relative, absolute, static（默认值），这四个是值，值的属性是position
固定定位时，是position: fixed， 此时需要设定固定元素的位置，可以设置四个属性top, left, right, bottom四个属性设置距离浏览器边缘的距离，一般弄两个固定位置就可以了 不用四个属性全用
相对定位：相对定位是元素相对自己原本的位置进行位置移动，和固定定位类似，position: relative，再加上两个元素固定位置
绝对定位：和固定定位类似，基准点是在dom树中离本元素最近的，position不为static的父元素