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)

  • 相关阅读:
    什么是理想?
    leetcode 62. 不同路径-动态规划及优化,双100%
    使用双指针暴力解决力扣28题《实现 strStr()》
    使用双指针解决力扣27题《移除元素》
    SQL SERVER 数据库日志已满时清理日志的方法
    修改git提交的名字和邮箱
    React Native运行出现Could not find "iPhone X" simulator
    eosio 编译与部署
    恢复经常写博客的习惯
    MAC OS系统替换homebrew使用阿里云或中科大的镜像源
  • 原文地址:https://www.cnblogs.com/whtt/p/9891133.html
Copyright © 2011-2022 走看看