zoukankan      html  css  js  c++  java
  • 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)

  • 相关阅读:
    设计模式-创建型-原型模式
    设计模式-创建型-抽象工厂模式
    设计模式-创建型-工厂模式
    设计模式-创建型-单例模式
    css3技巧属性之text-overflow
    bootstrap如何自定义5等分
    LeetCode-64-最小路径和
    LeetCode-62-不同路径
    LeetCode-5-最长回文子串
    LeetCode-98-验证二叉搜索树
  • 原文地址:https://www.cnblogs.com/whtt/p/9891133.html
Copyright © 2011-2022 走看看