CSS基础二（CSS）

一.文字样式设置：

文字常用属性：

1.字体系列：font-family——设置一种字体

（1）font-family : “宋体”;——设置宋体
（2）font-family : “宋体”, “仿宋”, “Times New Roman”;——若用户系统里有宋体，用宋体，无宋体则用仿宋，无仿宋则用新罗马字体
（3）serif——相近字体，不用加引号

2.字体大小：font-size——设置字体大小

（1）设置字体大小为绝对值：font-size: 20px;——设置字体大小为20像素
（2）设置字体大小为相对值：font-size: 2em;( font-size : 200%;）——设置字体大小为200%（相对于父元素来设置大小）

3.字体倾斜：font-style——设置字体倾斜

（1）设置字体倾斜显示：font-style: italic;
（2）属性值：normal、italic、oblique（与italic没有明显区别）

4.字体加粗：font-weight——设置字体加粗

（1）使用固定值加粗：font-weight: 900;
（2）使用关键字加粗：font-weight:bolder;
关键字tip：属性值：lighter、normal、bold、bolder
固定值tip：属性值取值范围为100~900，400 等同于 normal，而 700 等同于 bold

5.字体综合设置：font——一次性设置所有属性

注意：
（1）建议属性顺序为：倾斜——加粗——字号——字体
（2）至少设置两种属性
（3）font后加冒号，每个属性之间用空格隔开，分号结尾

.class1{
	font:italic bold 30px "楷体";
}
.class2{
	font:60px "华文彩云";
}

二.文本样式设置：

1.文本对齐：text-align——设置元素的文本行的对齐方式

（1）设置文本左对齐：text-align:left;
（2）属性值：left、center、right
（3）默认对齐方式是左对齐

2.文本缩进：text-indent——设置段落元素的第一行缩进

（1）首行缩进20像素：font-size:20px;
（2）首行缩进2个相对长度：text-indent:2em;
（3）首行缩进-3个相对长度：text-indent:-3em;
（4）属性值可为绝对值（px）,也可为相对值（em）
（5）相对单位 em 是相对于元素本身的字体大小；而font-size 属性，它的 em 值指的是父元素的字体大小

3.行高：line-height——设置行与行之间的距离

（1）固定值，如：line-height:36px;
（2）相对值，如：line-height:1.5em;

4.文本颜色：color——设置文字颜色

（1）关键字表示：color : green ;
（2）带“#”号16进制表示：color : #008000 ;
（3）RGB表示：color : rgb(0,128,0) ;

5.文本修饰：text-decoration——设置文本修饰效果

（1）为文本设置下划线：text-decoration:underline;
（2）属性值：none（无装饰）, overline（上划线）, underline（下划线）, line-through（删除线）
（3）可用来去掉浏览器给超链接加的默认下划线

6.字符转换：text-transform——设置文本大小写

（1）uppercase：把所有字母转换成大写
（2）lowercase：把所有字母转换成小写
（3）capitalize：只对每个单词的首字母大写

7.行和段落：

行高跟文字要搭配，一般行高是文字的 1.5~1.8 倍最为合适
例如：正文文字：14px
则：行高(px)：22px~26px ( 行高最好设置为偶数 )
则：行高(em)：1.5em~1.8em

三.超链接样式设置：

1.超链接有四种状态：

（1）未被访问的超链接：a:link
（2）鼠标悬浮于超链接之上：a:hover
（3）链接被点的那一刻：a:active
（4）访问过的超链接：a:visited
（5）说明：设置顺序为（1）→（4）→（2）→（3）

<style type="text/css">
	a:link{color: red;}
	a:visited{color: skyblue;}
	a:hover{color: green;}
	a:active{color: yellow;}
</style>

2.清除超链接下划线：

<style type="text/css">
.class{
	text-decoration-line: underline;
}
</style>

3.伪类：可与 css 类结合使用，向某些选择器添加特殊效果

注：link 和 visited 只能用于超链接，其他可用于各种 HTML 元素

四.背景类样式修饰：

1.背景色：background-color

（1）关键字：background-color: gray;
（2）十六进制：background-color: #808080;
（3）RGB：background-color: rgb(128,128,128);

2.背景图：background-image:url(xxx.jpg);

（1）背景图像重复：background-repeat

（2）背景图像定位：background-position
A.关键字：

如果仅规定了一个关键词，那么第二个值将是 “center”

B.百分比：

C.长度值：

3.背景综合设置：

<style type="text/css">
body{
	background:#00ff00 url(bg.jpg) no-repeat center;
 }
 </style>

五.列表类样式设置：

1.列表标志类型：list-style-type

1.无序列表：

2.有序列表：

2.列表标志图像：list-style-image

list-style-image:url(image/arrow2.png);

3.列表标志位置：list-style-position

有outside和inside两种属性

4.列表综合设置：

<style type="text/css">
	li{
	list-style: url(image/arrow2.png) inside circle;
}
</style>