CSS3美化网页元素

一.span标签:能让某几个文字或者某个词语凸显出来

<p>

今天是11月份的<span>第一天</span>,地铁卡不打折了

</p>

二.字体风格

font-family:字体类型

font-size:字体大小

font-style:字体风格

font-weight:字体粗细

font: 风格 粗细 大小 类型;

三.文本样式

color 设置文本颜色 rgb(0,0,255),rgba(0,0,255,0.5)

text-align 设置元素水平对齐方式

text-indent 设置首行文本的缩进

line-height 设置文本的行高

text-decoration 设置文本的装饰

vertical-align 设置文本垂直方式

text-shadow 设置文字阴影

text-shadow: 颜色 x轴偏移位置 y轴偏移位置 模糊半径

四.超链接伪类

单击访问前

.class01:link{   

          color: green;   

          text-decoration: none;  

       }

单击访问后

.class02:visited{  

           color: pink;

            text-decoration: none;  

       }

鼠标悬浮

.class03:hover{      

       color: aqua;     

        text-decoration: none;       

  }

单击未释放

.class04:active{     

        color: red;       

      text-decoration: none;     

    }

五.列表样式

list-style-type 列表项前图标

list-style-image    列表项前图片

list-style-image:url(../image/QQ图片20181101095555.png);

六.背景样式

background-color 设置背景颜色

background-image    设置背景图像

background-repeat 设置图像是否平铺

background-position 设置背景图像位置

background: 背景颜色 背景图像 x轴偏移位置 y轴偏移位置 平铺;

七.渐变

IE浏览器是Trident内核,加前缀:-ms-

Chrome浏览器是Webkit内核,加前缀:-webkit-

Safari浏览器是Webkit内核,加前缀:-webkit-

Opera浏览器是Blink内核,加前缀:-o-

Firefox浏览器是Mozilla内核,加前缀:-moz-

background: -webkit-gradient(linear,left bottom,right top,from(red),to(blue));

background: linear-gradient(to bottom left,red,black);

原文地址:https://www.cnblogs.com/Chencheno/p/9895551.html