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核心技术 卷一 笔记2 字符串的复制
    Java核心技术 卷一 笔记1
    修改css 样式后, hover事件 不生效
    修改 element ui input 输入框 样式不生效问题
    css3 计算属性
    Vue3 改动系列
    浏览器实现,向下滑动 鼠标滚轮,页面横向移动
    linux ceont0s7 vue 打包压缩图片 一直报错
  • 原文地址:https://www.cnblogs.com/wws553/p/9934754.html
Copyright © 2011-2022 走看看