CSS美化页面元素

为什么使用CSS

       有效的传递页面信息

使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

具有良好的用户体验

 

<span>标签 的作用

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

       示例：

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

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

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

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

 

字体样式

 

1. font-family属性          字体的类型

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

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

 

1. font-size属性              字体的大小
   1. 单位
      • 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;}

 

1. font-style属性      字体的风格

normal(默认)、italic(使用电脑斜体库)和oblique（系统自己把子变斜体，）

         

1. font-weight属性    字体的粗细

 

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

示例：

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

 

 

1. 文本属性                文本样式

 

上下对齐top middle bottom

 

文本颜色

  color属性

1. 1. RGB
      • 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
      • rgb(r,g,b) : 正整数的取值为0～255
   2. RGBA    透明度
      • 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

示例：

              color:#A983D8;

color:#EEFF66;

color:rgb(0,255,255);

color:rgba(0,0,255,0.5);

 

排版文本段落

             

           text-align: center

文本修饰和垂直对齐

1.          文本装饰
   1. text-decoration属性
2. 垂直对齐方式
   1. vertical-align属性：middle、top、bottom

                   

文本阴影

                      

 

      浏览器兼容性

                    

1. 伪类样式

                     

使用CSS设置超链接

                   

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

列表样式

list-style-type

list-style-image

                         

                     

                  示例：

                     list-style

                    li {

                              list-style:none;  //去除列表前面的小黑点

                     }

 

                   网页背景

背景颜色

                background-color        //背景颜色值：十六进制方法表      transparent

背景图像

               background-image 

1. 背景图像
   1. background-image属性

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

1. 背景重复方式
   1. background-repeat属性                                                             
      • repeat：沿水平和垂直两个方向平铺
      • no-repeat：不平铺，即只显示一次
      • repeat-x：只沿水平方向平铺
      • repeat-y：只沿垂直方向平铺

                                             

设置背景图像

                背景定位

   background-position属性

                                   

                         强调在设置背景图像时，这三个属性通常同时使用，只有在设置了背景图像时，背景重复方式和定位才有

设置背景

1. 背景属性
   1. background属性

                  

   背景尺寸

1. 设计师如何对背景图片的大小进行控制呢？
   1. 背景尺寸 background-size

                  

线性渐变

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

径向渐变

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

浏览器兼容性

                      

 

 

CSS3渐变兼容：

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

 

线性渐变

               

 

 

               背景颜色值：十六进制方法表背景颜色

 值：十六进制方法表

背景颜色值：十六进制方法表