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

  • 相关阅读:
    《社会动物》笔记
    对长城汽车品牌多样化的一点思考
    LightGBM简单例子
    mysql拆分字符串为多行(逗号等分割)
    vue中$refs、$emit、$on的使用场景
    js中的call()和apply()和bind()方法
    Vue.js中this.$nextTick()的使用
    Vue中ref和$refs的介绍及使用
    ES6(异步操作和Async函数&await)
    vue项目在git commit时,使用eslint检测
  • 原文地址:https://www.cnblogs.com/wnwn/p/9891280.html
Copyright © 2011-2022 走看看