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

  • 相关阅读:
    轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
    Serverless 实战 —— Funcraft + OSS + ROS 进行 CI/CD
    急速搭建 Serverless AI 应用:为你写诗
    O'Reilly 1500 份问卷调研:2019 年 Serverless 落地到底香不香?
    2019 阿里巴巴云原生这一年
    快速部署 Spring PetClinic 到函数计算平台
    1354. Construct Target Array With Multiple Sums
    1352. Product of the Last K Numbers
    1351. Count Negative Numbers in a Sorted Matrix
    1347. Minimum Number of Steps to Make Two Strings Anagram
  • 原文地址:https://www.cnblogs.com/Chencheno/p/9895551.html
Copyright © 2011-2022 走看看