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);
  • 相关阅读:
    分布式系统学习一-概念篇
    JAVA多线程学习九-原子性操作类的应用
    JAVA多线程学习八-多个线程之间共享数据的方式
    JAVA多线程学习七-线程池
    vue 工作随笔
    智能云课堂整理
    mysql
    模板引挚 jade ejs
    node实战小例子
    昭山欢node资料学习笔记
  • 原文地址:https://www.cnblogs.com/cw172/p/9893999.html
Copyright © 2011-2022 走看看