CSS3美化网页元素

1.div和span标签

<div>标签是块元素，独占一行，能够指定宽高的一个区域。可以用来布局网页。

<span>标签是指组合文档中的行内元素。可以为某一块范围加span标签！

2.字体样式：

• font-style:设置字体风格
• font-weight:设置字体粗细
• font-size:设置字体大小
• font-family:设置字体类型

p{
    font-family:verdana ,"楷体";
}

注释：设置字体类型，优先写英文字体，中文写其后面。

p{

    font-size:12px;
}

注释：设置字体大小为12px（像素）

p{
    
    font-style:normal;  

}

注释：normal是标准字体，italic是斜体，oblique是倾斜字体。一般常用是italic。

p{

    font-weight:bold;
}

注释：bold是粗体，normal是标准（默认），bolder是更粗的字体，lighter是更细的字体。
bold是700，normal是400.

注意使用顺序：字体风格> 字体粗细 > 字体大小 > 字体类型

3、网页文本排版

• color:设置文本颜色
• text-align:设置水平线对齐
• text-indent:文本缩进     常用单位 px 或者 em 
• line- height:文本行高
• text-decoration:文本装饰

4、水平对齐方式、垂直对齐

水平对齐   text-align:

• left    文本排列到左边，默认值
• right   文本排列到右边
• center   文本排列到中间，居中显示
• justify   两端对齐
• 垂直对齐   vertical - align
• middle  中间对齐
• top    上对齐
• bottom 下对齐

5、文本装饰

• text- decoration
• none     默认值，标准文本
• underline     设置文本下划线
• overline      设置文本上划线、
• line -through    删除线，在文本中间

6、文本阴影

text- shadow :color  x位置  y位置   模糊半径

注释：color 是文本颜色  x是水平位置  y是垂直位置   模糊半径是范围

7、超文本链接

a:hover {

   color:red;

}

超链接伪类：
a:link      单击访问前  
 
a:visited   单击访问后

a:hover     鼠标悬浮其上的链接样式

a:active    鼠标单击为释放的样式

注意：写超链接伪类一定要按照上面的顺序写，不可颠倒！！！

8、列表样式

list-style-type/list-style:

none     无标记符号，

disc     实心圆，默认类型

circk    空心圆

square   实心正方形 

decimal   数字

注意：一般用的较多是list-style，表示在一个声明设置所有的列表属性

9、背景属性

背景颜色：

• background - color
• transparent 可以设置透明色

背景图像：

• background -  image :url("图片路径");
• repeat     水平和垂直连个方向平铺
• no-repeat   不平铺，只显示一次
• repeat - x   只沿着水平方向平铺
• repeat - y  只沿着垂直方向平铺

背景定位：

• left   左边   right  右边 center  中间     --------- > 沿着水平方向
• top  上面  center  中间   bottom 下面  --------- >  沿着垂直方向

注意：可以一起设置背景样式，如下：

background :red url(" 图片路径") 250px  10px  no - repeat 

注释：red是颜色，url是图片，250是水平方向， 10是垂直方向  no - repeat 是不平铺

背景尺寸：background - size:

• auto      -----   自动，默认的
• percentage ------  百分值，相对元素宽度计算
• cover -----------   放大填充
• contain  ------- 缩放图片

10、线性渐变

background：linear -  gradient（position ,color1,color2 ......）;

注释：position 是位置，color是颜色，颜色可以很过种，没有要求！

注意：渐变需要浏览器兼容，要加上下面浏览器前缀！

background: -webkit-linear-gradient(left,yellow,red);  Chrome和Safari浏览器
background: -moz-linear-gradient(right,yellow,red);   Firefox浏览器
background: -o-linear-gradient(right,yellow,red);   Opera浏览器
background: -ms-linear-gradient(right,yellow,red);  IE浏览器
background: linear-gradient(to right,yellow,red);