CSS美化网页元素

一.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);

猜你喜欢

转载自www.cnblogs.com/cw172/p/9893999.html
今日推荐