选择器常用的有元素选择器id选择器类选择器子元素选择器群组选择器元素选择器是按html的元素选则 比如 dev {color:red;}id选择器是按html元素的id选择 比如div idaaaabc/div style typetext/css#aaa {color:red;}/style类选择器是按html元素的class字段选择 比如div classaaaabc/div style typetext/css.aaa {color:red;}/style子元素选择器如下 div classaaaspanabc/span/div style typetext/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, 900font-style表示字体是否斜体只能跟单个值不能跟多个。有normal, italic, oblique三个值后两个都是斜体有的系统没有italic只有obliquecolor表示字体颜色可以跟关键字(gray, red, ...)十六进制三色数字(#002288, ...)rgbahsl等注释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-colorborder-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值只有两个topbottom可以在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:linkhover不光可以在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的父元素