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)

posted @ 2018-11-01 18:56  梅川酷子灬  阅读(185)  评论(0编辑  收藏  举报