CSS3基础知识（2）

CSS3美化网页元素

一.字体样式及文本样式

1.< span >标签

是HTML5的行内标签 没有固定的表现格式

2.字体样式

font-family：设置字体类型

可以同时指定多个字体 但是要用逗号隔开
当用户没有电脑安装此字体时 会用电脑默认的字体
需要用英文状态的的逗号隔开

font-size：设置字体大小

常用单位是px 除此之外还有in cm mm pt等 但是都不常用

font-style：设置字体风格

normal:默认值 浏览器会显示标准的字体样式
intalic：浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜体的字体样式
其中intalic和oblique都用来定义斜体 但都是没有本质上的区别 实际开发时常用intalic

font-weight：设置字体粗细

normal:默认值 定义标准的字符
bold：定义粗体字符
bolder：定义更粗的字符
lighter：定义更细的字符
100~900：定义由细到粗的字符 其中400等于normal 700等用于bold值越大越粗

font：用于对字体样式进行综合设置

基本语法：
p（font：font-style font-weight font-size font-family；）
各属性之间用空格隔开 且必按照语法的顺序书写

3.文本样式

color：设置文本颜色
text-align：设置文本内容的水平对齐方式

left:默认值 左对齐
right：右对齐
center：居中对齐
justift：两端对齐

text-indent：设置首行文本的缩进

属性值为em或px

line-height：设置文本的行高

行与行之间的距离
常用的属性值:px em 百分比

text-decoration：设置文本的装饰

none：默认值
none：下画线
underline：上画线
line-through：删除线
可以多个属性一起用

vertical-align:设置文本内容的垂直对齐方式

对< h1 >< h6 >< p >不起作用
常用于与图片跟文字居中对齐 属性值为middle

text-shadow：设置文本阴影效果

语法:
texy-shadow：h-shadow v-shadow blur color；
h-shadow用于设置水平阴影的位置
v-shadow用于设置垂直阴影的位置
blur用于设置模糊的距离
color用于设置阴影的颜色

二.超链接伪类和列表样式

1.超链接伪类

1. a：link{css样式规则；}：未访问前超链接的状态
2. a：visited{css样式规则；}：单击访问后超链接的状态
3. a：hover{css样式规则；}：鼠标指针悬停时超链接的状态
4. a：active{css样式规则；}：鼠标未释放时超链接的状态
   text-decoration：none；（无下划线）
   text-decoration：underline；（有下划线）

2.列表样式

list-stule-type：设置列表项的类型
list-stule-image：使用图片替换列表项的标记
list-stule-pasition：设置在何处放置列表项的标记
list-stule：设置所有的列表属性
list-style：none 去除小黑点

3.背景样式

< div >标签：

<div>内容</div>

背景属性：
background-color：规定要使用的背景颜色
background-image：规定要使用的背景图像
使用url（图片路径）；
background-repeat：规定如何重复背景图像
属性：

repeat：默认，往垂直方向和水平方向重复
repeat-x：背景图像将在水平方向重复
repeat-y：背景图像将在垂直方向重复
no-repeat：背景图像将仅显示一次

background-postion：规定背景图像的位置
设置图像的详细位置
background-size：规定背景图像的尺寸

属性值：
length
percentage
cover：把背景图像拓展到足够大 以至于背景图像覆盖背景区域
contain：把图像拓展到最大尺寸

backgroud：背景图像 背景定位 背景重复方式；

4.css渐变

background-image:linear-grandient(direction（方向）,color-stop1（颜色）,color-stop2,color-stop3,…) 至少定义三种