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

  • 相关阅读:
    抑郁症:2019年11月9日
    NOIP2018考前抱佛脚——图论基础复习
    NOIP2018考前抱佛脚——搜索复习
    NOIP2018考前抱佛脚——数据结构基础及STL实现
    题解 P2920 【[USACO08NOV]时间管理Time Management】
    agc030C Coloring Torus
    agc036B Do Not Duplicate
    agc034C Tests
    AFO
    agc005D ~K Perm Counting
  • 原文地址:https://www.cnblogs.com/liuying23/p/9894679.html
Copyright © 2011-2022 走看看