CSS总结2

1.css三大特性

    1.继承性 设置父元素的样式，子元素可以继承 color/text-/line-/font-

        注意：

            h1标签作为子元素不可以继承font-size

            a标签作为子元素字体颜色下划线无法继承

    2.层叠性

        使用多个选择器给"同一个标签"设置样式，发生重叠

    3.优先级 权重

        !important 优先级最高

        style属性 权重 1000

        id选择器 权重 100

        类选择器 伪类选择器 属性选择器 权重10

        标签选择器 伪元素选择器  权重 1

        通配符选择器/普通选择器 权重0

2.颜色属性

    1.设置颜色关键字

        color: red;

    2.十六进制 0-f 0-9 a-f 3/4/6位

        color: #cad826;

    3.rgb 三原色 red green blue 取值范围0-255 值越大越靠近三原色

        color: rgb(red, green, blue);

    4.rgba alpha 透明度(0-1) 0完全透明 1完全不透明

        color: rgba(red, green, blue, alpha);

3.文本属性

    1.打开或者关闭斜体 fs font-style italic开启斜体 normal默认值

        font-style: italic;

    2.设置文本加粗 fw font-weight 100-900 bold bolder

        font-weight: bold;

    3.设置字体大小 fs font-size

        font-size: 28px;

    4.设置字体类型 ff font-family 第一个字体生效 电脑中无字体则依次后推

        font-family:"微软雅黑","行体", serif;

    5.简写形式 顺序必须如下：font: style weight size family  style weight可以省略 其他不可以

        font:normal bold 26px serif

4.字体图标库

    1.iconfont字体图标库使用 使用单色图标库

        1.1使用link标签引入iconfont.css文件

            <link rel="stylesheet" href="./download/font_4lvjjjcj28y/iconfont.css">

        1.2 使用iconfont图标 前缀必须为iconfont

            <i class="iconfont icon-a-picture2"></i>

    2.多色图标库使用步骤

        2.1引入iconfont.js文件 可以是线上或本地地址

            <script src="http://at.alicdn.com/t/c/font_4101134_ul8ibm4jhj.js"></script>

        2.2使用多色图标库

            <svg class="icon" aria-hidden="true">

                <use xlink:href="#icon-a-daterangepicker2"></use>

            </svg>

    3.font-aswsome 图标使用

        3.1使用link标签引入

            <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

        3.2使用font-aswsome 图标库  类名前缀必须为 fa

            <i class="fa fa-address-book fa-5x" aria-hidden="true" /></i>

5.文本装饰属性

    1.上划线(overline) 下划线(underline) 删除线(line-through)

        text-decoration: overline;

    2.居中

        水平居中 默认left center right

            text-align: center;

        垂直居中 line-height=height

            line-height: 200px

    3.首行缩进 2em

        text-indent: 2em;

    4.设置形变 可以设置单词 全部大写(uppercase) 全部小写(lowercase)首字母大写(capitalize) 等宽字体(full-width)

       text-transform: capitalize;

    5.设置文本阴影

        text-shadow: -5px -5px 1px red;

            none:取消所有阴影  

            h-shadow :必需。水平阴影的位置。允许负值。    

            v-shadow :必需。垂直阴影的位置。允许负值

            blur:可选。模糊的距离。 值越大越模糊

            color:可选。阴影的颜色。

            text-shadow: -5px -5px 1px red;