CSS样式表总结.docx

1、CSS样式表总结css样式表总结CSS: Cascading Style Sheet,层叠样式表一、CSS的基本语法：Css由三部分组成：选择符、样式属性、值；基本语法：选择符 样式属性：值；样式属性：值.二、CSS的四种添加方式（1）、连接外部样式表如：（2）、内部样式表如：bodymargin-left:0px;margin-right:25px;margin-bottom:0px;margin-top:30px;（3）、导入外部样式表如import 样式表.css（4）、内嵌样式表如：三、字体属性（1）、font-family:字体一，字体二. 如果font-family 定义了多种字体

2、，浏览器会根据本机上的字体从头到尾来判断第一个在本机上有的字体便是显示出来的字体。（2）、font-size:大小取值xx-small:绝对字体的尺寸最小x-small:绝对字体尺寸较小small:绝对字体尺寸小medium:绝对字体尺寸默认小large:绝对字体尺寸大x-large:绝对字体尺寸较大xx-large:绝对字体尺寸最大larger:相对字体尺寸相对增大smaller:相对字体尺寸相对减小length:可采用百分比或长度值来确定字体的大小（3）、字体风格 font-style:样式的取值normal:正常字体 默认值italic:斜体显示oblique:属于中间状态，以偏斜体显示

3、（4）、加粗字体 font-weight:字体粗细值normal:正常显示 默认值bold:加粗显示bolder:特粗显示lighter:特细显示number:用数值控制字体的粗细（5）、小写字母转为大写字母 font-variant :normal / small-caps使用font-variant可以将小写字母转化为大写字母normal:正常显示 默认值small-caps:将小写字母转化为大写字母（6）、字体的复合属性如 ： .hfont: bold italic 宋体四、颜色和背景属性（1）、颜色 Color:属性值属性值就是十六进制数或者颜色的英文字母（2）、背景颜色 backgr

4、ound-color:颜色值（3）、背景图像 background-image:url( );（4）、背景重复 background-repeat:取值no-repeat 不重复repeat 全屏重复(默认)repeat-x 水平方向平铺repeat-y 垂直方向平铺（5）、背景附件background-attachment :scroll / fixedscroll :背景随图像的滚动而滚动fixed : 背景的位置是固定不变的（6）、背景位置 background-position :位置取值（7）、背景复合属性 background：url() norepeat letf4、段落属性利用

5、css控制段落主要包括以下几点：单词间隔 字符间隔 文字修饰 纵向排列 文本转换 文本排列 文本缩进和行高等（1）、英文单词间隔 word-spacing:取值（2）、中文字符间隔 letter-spacing:取值（3）、文字修饰 text-decration :取值 取值： none 不修饰 默认值 underline 下划线overline 上划线line-through 删除线blink 文字闪烁效果 Shadow 文字阴影 （0px 1 px 3px #606060）（4）、垂直对齐方式 vertical-align :排列取值baseline:浏览器默认对其方式sub:文字的下标s

6、uper:文字的上标top:垂直靠上对齐text-top：使元素和上级元素的字体向上对齐middle:垂直居中对齐text-bottom:使元素和上级元素的字体向下对齐（5）、文本转换 text-transform:转换值none:使用原始值capitalize:每个元素的第一个字母大写uppercase:每个单词的所有字母都大写lowercase:每个单词的所有字母都小写（6）、水平对齐方式 text-align:排列取值left:左对齐right:右对齐center:中对齐justify:两端对齐（7）、文本缩进 text-indent:缩进值 取值： em 字宽 XX 所有数值取值（最上

7、面给出）（8）、文本行高 line-height:行高值（9）、处理空白 white-space:值（10）、文本反排 unicode-bidi,direction五、边距与填充属性（1）、边距：margin-top margin-left margin-bottom margin-right（2）、边距复合属性 margin:10px 30px 20px 10px（3）、填充属性 padding-top padding-left padding-right padding-bottom6、边框属性（1）、边框样式 border-style:样式值border-top-style:border

8、-left-style:border-right-style:border-bottom-style:none:无边框 默认值dotted:点线边框dashed：虚线边框solid:实线边框double:双实线边框groove:边框具有主体感的沟槽ridge:边框成脊形inset:使整个边框凹陷outset:使整个边框崛起（2）、边框宽度：border-width:宽度值border-top-width:border-left-width:border-right-width:border-bottom-width:medium:默认宽度thin:小于默认宽度thick:大于默认宽度numbe

9、r:用数值表示（3）、边框颜色：border-color:border-top-color:border-left-color:border-right-color:bodrder-bottom-color:（4）、边框的复合属性：border:边框宽度 边框样式 属性颜色值border-top:border-left:border-right:border-bottom:7、列表属性：（1）、list-style-type:值disc：默认值 实心圈circle:空心圈square:实心方块decimal:阿拉伯数字lower-roman:小写罗马数字upper-roman:大写罗马数字lower-alpha:小写英文字母upper-alpha:大写英文字母none:不使用任何项目符号（2）、图像项目符号 list-style-image:url( )