CSS3美化网页元素

span 标签

作用：能让某几个文字或者某个词语凸显出来

<p>享受<span class="show">“北大式”</span>教育服务</p>

<p>在北大青鸟，有一群人默默支持你成就      

<span id="dream">IT梦想</span></p>

<p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

字体样式

字体类型

font-family属性

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

body{font-family: Times,"Times New Roman", "楷体";}

字体大小

font-size属性

单位

px（像素）

em、rem、cm、mm、pt、pc

示例h1{font-size:24px;}

        h2{font-size:16px;}

        h3{font-size:2em;}

        span{font-size:12pt;}

        strong{font-size:13pc;}

字体风格

font-style属性：normal、italic和oblique

字体的粗细

 字体属性：font属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

示例：p span{font:oblique bold 12px "楷体";}

文本样式：文本属性

 文本颜色：color属性

RGB：

十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

rgb(r,g,b) : 正整数的取值为0～255

RGBA

在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

示例：color:#A983D8; color:#EEFF66; color:rgb(0,255,255); color:rgba(0,0,255,0.5);

排版文本段落

 文本修饰和垂直对齐

文本装饰：text-decoration属性

垂直对齐方式：vertical-align属性：middle、top、bottom

 文本阴影

 超链接伪类

伪类样式：语法：标签名:伪类名{声明;}

示例：a:hover {     color:#B46210;     text-decoration:underline; }

使用CSS设置超链接

 列表样式2-1

list-style-type               

list-style-image

list-style-position           

list-style：示例：li {     list-style:none; }（去除列表前面的小黑点）

 网页背景：背景颜色：background-color

                   背景图像：background-image

                    示例：background-image:url(图片路径);

背景重复方式：background-repeat属性

1.repeat：沿水平和垂直两个方向平铺

2.no-repeat：不平铺，即只显示一次

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

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

设置背景图像

背景定位：background-position属性

 设置背景：background属性

 背景尺寸： background-size、

 CSS3渐变

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

语法：

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

总结：