CSS样式表
css样式表总结
CSS: Cascading Style Sheet,层叠样式表
一、CSS的基本语法：
Css由三部分组成：选择符、样式属性、值；
基本语法：选择符 {样式属性：值；样式属性：值.....}
二、CSS的四种添加方式
（1）、连接外部样式表
如：
<link href="样式表名.css" rel=stylesheet type="text/css">
（2）、内部样式表
如：
<head>
<style type="text/css">
body{
margin-left:0px;
margin-right:25px;
margin-bottom:0px;
margin-top:30px;
}
</style>
</head>
（3）、导入外部样式表
如
<style type="text/css"> @import 样式表.css </style>
（4）、内嵌样式表
如：
<table style="color:red;margin-right:12px">
三、字体属性
（1）、font-family:"字体一"，"字体二".....
如果font-family 定义了多种字体，浏览器会根据本机上的字体从头到尾来判断第一个在本机上有的字体便是显示出来的字体。
（2）、font-size:大小取值
xx-small:绝对字体的尺寸最小 x-small:绝对字体尺寸较小 small:绝对字体尺寸小 medium:绝对字体尺寸默认小 large:绝对字体尺寸大 x-large:绝对字体尺寸较大 xx-large:绝对字体尺寸最大 larger:相对字体尺寸相对增大 smaller:相对字体尺寸相对减小 length:可采用百分比或长度值来确定字体的大小
（3）、字体风格 font-style:样式的取值
normal:正常字体 默认值 italic:斜体显示 oblique:属于中间状态，以偏斜体显示
（4）、加粗字体 font-weight:字体粗细值
normal:正常显示 默认值 bold:加粗显示 bolder:特粗显示 lighter:特细显示 number:用数值控制字体的粗细
（5）、小写字母转为大写字母 font-variant :normal / small-caps
使用font-variant可以将小写字母转化为大写字母
normal:正常显示 默认值
small-caps:将小写字母转化为大写字母
（6）、字体的复合属性
如 ： .h{font: bold italic "宋体"}
四、颜色和背景属性
（1）、颜色 Color:属性值
属性值就是十六进制数或者颜色的英文字母
（2）、背景颜色 background-color:颜色值
（3）、背景图像 background-image:url( );
（4）、背景重复 background-repeat:取值
no-repeat 不重复
repeat 全屏重复(默认)
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
（5）、背景附件
background-attachment :scroll / fixed
scroll :背景随图像的滚动而滚动
fixed : 背景的位置是固定不变的
（6）、背景位置 background-position :位置取值
（7）、背景复合属性 background：url() norepeat letf
4、段落属性
利用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:文字的下标 super:文字的上标 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 所有数值取值（最上面给出）
（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-bottom
6、边框属性
（1）、边框样式 border-style:样式值
border-top-style: border-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:大于默认宽度 number:用数值表示
（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( )
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
