CSS总结2

您所在的位置:网站首页 总结字体设置 CSS总结2

CSS总结2

2023-06-05 19:42| 来源: 网络整理| 查看: 265

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文件

           

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

           

    2.多色图标库使用步骤

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

           

        2.2使用多色图标库

           

               

           

    3.font-aswsome 图标使用

        3.1使用link标签引入

           

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

           

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;



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3