CSS样式表总结.docx
《CSS样式表总结.docx》由会员分享，可在线阅读，更多相关《CSS样式表总结.docx（9页珍藏版）》请在冰豆网上搜索。
CSS样式表总结
css样式表总结
CSS:
CascadingStyleSheet,层叠样式表
一、CSS的基本语法：
Css由三部分组成：
选择符、样式属性、值；
基本语法：
选择符{样式属性：
值；样式属性：
值.....}
二、CSS的四种添加方式
（1）、连接外部样式表
如：
（2）、内部样式表
如：
body{
margin-left:
0px;
margin-right:
25px;
margin-bottom:
0px;
margin-top:
30px;
}
（3）、导入外部样式表
如
@import样式表.css
（4）、内嵌样式表
如：
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:
bolditalic"宋体"}
四、颜色和背景属性
（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（）norepeatletf
4、段落属性
利用css控制段落主要包括以下几点：
单词间隔字符间隔文字修饰纵向排列文本转换文本排列文本缩进和行高等
（1）、英文单词间隔word-spacing:
取值
（2）、中文字符间隔letter-spacing:
取值
（3）、文字修饰text-decration:
取值
取值：
none不修饰默认值
underline下划线
overline上划线
line-through删除线
blink文字闪烁效果
Shadow文字阴影（0px1px3px#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-topmargin-leftmargin-bottommargin-right
（2）、边距复合属性margin:
10px30px20px10px
（3）、填充属性padding-toppadding-leftpadding-rightpadding-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（）
升级会员 