HTML5第五章CSS3美化网页元素

一、字体样式

font-family:设置字体类型

p{font-family:Verdana,"楷体";}/*英文字体和中文字体需要加个逗号隔开*/
/*Verdana这个是英文字体一般英文字体都不会变*/

font-size:设置字体大小 px em rem cm mm pt pc

单位：

px（像素）

em根据父容器字体大小改变（em×父级大小px）

rem根据元素字体大小改变（rem×根元素字体大小px）

font-style:设置字体风格（倾斜）

p{
    font-style:italic;/*一般没啥用*/
}

font-weight:设置字体的粗细 normal bold bolder lighter

normal：默认字体

bold：粗体字体（对应数字700）

bolder：更粗的字体（对应数字900）

lighter：更细字体

p{
    font-weight:"900"/*这里字体大小最低100最高900*/
}

font:在一个声明中设置所有字体属性

font:italic bold 36px "宋体";/*后面两个必须是子大小和字体类型*/
/*font：风格  粗细  大小  类型*/

二、文本样式

color：设置文本颜色

单词，十六进制，rgb，rgba（透明度从0-1）

text-align：设置元素水平和齐方式（在块级元素中生效）

left：左 （默认是左） right：右 center：居中

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

link-height：设置文本的行高

text-decoration：设置文本的装饰

none:默认（默认不要下滑线）

underline：设置文本下划线

overline：设置文本上滑线

line-through：设置文本的删除线（也可以使用del标签）

vertical-align：垂直对齐方式

top：上 middle：中 bottom：下

text-shadow：设置阴影

text-shadow : color x-offset y-offset blur-radius;
/*color颜色，x-offset：x坐标，y-offset：y坐标，blur-radius模糊程度*/

三、伪类样式

a：link：未单击访问时超链接样式

a:visited;单击访问后超链接样式

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

a:active:鼠标单击未释放的超链接样式

设置伪类的顺序：a:link->a:visited->a:hover->a:active

四、列表样式

list-style：none（去除ul和ol的前缀）

五、背景样式

1.背景颜色

background-color

2.背景图像

background-image:url(背景图片 url路径);

3.背景重复方式

background-repeat：沿水平和垂直两个方向平铺

on-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

background-position：图像唯一

background-position:x y
水平方向：left，center，right
垂直方向：tpo，center，bottom

background简写 背景颜色 背景图片路径 是否铺平

background:color image:url  repeat;

background-size:图片大小

ayto：默认值，使用背景图片保持原样

percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

cover：整个背景图片放大填充了整个元素

contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

4.背景颜色渐变

background：linear-gradient：背景颜色渐变

linear-gradient ( 方向,第一种颜色,第二种颜色,…)；
background：-webkit-linear-gradinent（left top，red，green）