CSS3样式-美化界面

一、字体样式

字体样式的基本属性

1.font-family属性

2.font-size属性

单位

px(像素)
em、rem、cm、mm、pt、pc
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。

html代码

  
      我是body
      标题1
      标题2
      标题3

css代码

网页呈现效果

呈现效果

3.font-style属性

normal 默认状态，正常字体
italic 是指斜体字，可以理解成是使用文字的斜体
oblique oblique 是倾斜的文字，是让没有斜体属性的文字倾斜
html代码

标题1
标题2
标题3

css代码

  h1 {
      font-style: normal;
  }

  h2 {
      font-style: italic;
  }

  h3 {
      font-style: oblique;
  }

网页效果

呈现效果

4.font-weight属性

font-weight相关属性值

5.font属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型（font-style→font-weight→font-size→font-family）

二、文本样式

文本样式的基本属性

1.color属性

填写颜色的几种方式

RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量rgb(r,g,b) : 正整数的取值为0～255
```
p{color:#A983D8;}
```
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
```
p{color:rgba(0,0,255,0.5);}    /*0.5代表透明度为半透明*/
```
直接输入颜色
```
p{color:red;}
```

2.text-align属性文本排版

text-align属性相关值

3.text-decoration属性文本装饰

text-decoration属性相关值

4.vertical-align属性垂直对齐方式

middle 居中
top 置于顶部
bottom 置于底部

5.text-shadow 文本阴影

语法

     /* 
      语法：
          text-shadow : color  x-offset  y-offset  blur-radius;
          color 阴影颜色
          x-offset X轴位移，用来指定阴影水平位移量
          y-offset Y轴位移，用来指定阴影垂直位移量
          blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围
     */
     text-shadow: blue 5px 5px 5px;

*呈现效果

阴影呈现效果

三、超链接伪类

1.伪类样式

语法

语法规范
示例
设置a标签移入的效果：颜色变为#B46210；文本装饰增加下划线

伪类实例图

2.使用CSS设置超链接

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

超链接伪类样式

四、列表样式

1.列表类型（list-style-type）

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type

列表类型的常见值

列表类型常见值

2.列表项图像（list-style-image）

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

    ul li {
        list-style-image: url(xxx.gif)
    }

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

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

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的

4.简写列表样式（list-style）

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

    li {
        list-style: url(example.gif) square inside
    }

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

五、背景样式

1.背景颜色（background-color）

背景颜色也可以直接填写颜色也可以用十六进制方法表示
```
      background-color: red; 
      background-color: #778866;
```

2.背景图像（background-image）

背景图像中有url属性，括号中填写图片的路径
```
 background-image: url('image/xxx.jpg');
```

3.背景定位（background-position）

        background-position: 10px 10px;
        background-position: 50% 50%; 
        background-position: left center;

背景定位属性值

4.背景重复方式（background-repeat）

属性值

repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

5.背景属性（background）

设置背景属性值的顺序：背景颜色→背景图像→背景定位→背景重复方式

  background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

5.背景尺寸（background-size）

背景尺寸属性值

六、CSS3渐变

1.线性渐变（linear-gradient）

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
语法

语法规范
设置兼容Webkit内核的浏览器

兼容性
示例图

渐变示例图

2.径直渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

3.浏览器兼容性

兼容性图片

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-