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 =e 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: visitedcss样式规则;}: 单击访问后超链接的状态
3. a: hovercss样式规则;}: 鼠标指针息停时超链接的状态
4. a: activelcss样式规则;}: 鼠标未释放时超链接的状态
   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：把图像扩展到最大尺寸

background：背景图像 背景定位 背景重复方式：

4.css渐变

background-image：linear-gradient（direction（方向），color-stop1颜色，color-stop2，color-stop3，…）至少定义三种