标签快捷写法 总结：‘.’点代表class类，‘#’代表id，‘$’代表数字从1开始，‘>’代表儿子 div.c1#d1 按下tab键 效果： <div class="c1" id="d1"></div> div.c$#d$*2 按下tab键 效果： <div class="c1" id="d1"></div> <div class="c2" id="d2"></div> div.c$#d${文本}*2 效果： <div class="c1" id="d1">文本</div> <div class="c2" id="d2">文本</div> div>(p>a)*10 效果： <div> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> <p><a href=http://www.mamicode.com/""></a></p> </div> 宽和高 height: 200px; # 高度200px width: 200px; # 宽度200px 字体 1.文字字体 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 2.字体巨细 p { font-size: 14px; } 3.字体粗细

font-weight用来设置字体的字重（粗细）。

值 描述
normal   默认值，标准粗细  
bold   粗体  
bolder   更粗  
lighter   更细  
100~900   设置具体粗细，400等同于normal，而700等同于bold  
inherit   担任父元素字体的粗细值  
4.字体颜色 - 十六进制值 - 如: ＃FF0000 - 一个RGB值 - 如: rgb(255,0,0) - 一个RGB值 - 如: rgba(255,0,0,0.3) # 第四个值为alpha，控制透明度 - 颜色的名称 - 如: red 5.字体对齐

text-align 属性规定元素中的文本的程度对齐方法。

值 描述
left   左边对齐 默认值  
right   右对齐  
center   居中对齐  
justify   两端对齐  
6.文字下划线控制

text-decoration 属性用来给文字添加特殊效果。

值 描述
none   默认。界说标准的文本。  
underline   界说文本下的一条线。  
overline   界说文本上的一条线。  
line-through   界说穿过文本下的一条线。  
inherit   担任父元素的text-decoration属性的值。  

常用的为去失a标签默认的自划线：

a { text-decoration: none; } 7.文字首行缩进

将段落的第一行缩进 32像素：

p { text-indent: 32px; } 8.字体英文换大写

text-transform

值 描述
none   默认。界说带有小写字母和大写字母的标准的文本。  
text-transform：capitalize   文本中的每个单词以大写字母开头。  
text-transform：uppercase   界说仅有大写字母。  
text-transform：lowercase   界说无大写字母，仅有小写字母。  
text-transform：inherit   规定应该从父元素担任 text-transform 属性的值。  
配景属性 1.配景颜色 /*配景颜色*/ background-color: red; 2.配景图片 /*配景图片*/ background-image: url('1.jpg'); 3.配景不服铺 background-repeat:repeat(默认):配景图片平铺排满整个网页 background-repeat:repeat-x：配景图片只在程度标的目的上平铺 background-repeat:repeat-y：配景图片只在垂直标的目的上平铺 background-repeat:no-repeat：配景图片不服铺 4.配景位置 background-position: 100px 10px; !*第一个调治摆布 第二个调治上下 5.固定配景图像

界说配景图片随滚动轴的移动方法

background-attachment: fixed;

background: url("111.png") center center; background-attachment: fixed;

案例：