文本、列表、其他样式、显示隐藏元素及px、-em和rem的区别

weixin_45753087

已于 2022-08-18 09:52:39 修改

阅读量170

点赞数

文章标签：前端学习 html

于 2022-08-06 15:34:08 首次发布

本文链接：https://blog.csdn.net/weixin_45753087/article/details/126194130

版权

1文本属性

属性概览：

color 为字体指定颜色

font-style 用于打开和关闭斜体文本

font-weight 为字体设置粗细程度

font-size 为文字指定大小

font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

webFont 网络字体

字体图标

text-decoration 设置或者取消文本修饰

text-align 文字排列方式

text-indent 文本缩进属性

text-transform 设置或者取消字体改变

text-shadow 设置或者取消文本阴影

1.1颜色属性

css中通过color属性来修改颜色

1.2.1英文单词

设置一个标签，给标签修改颜色时可用英文单词，例如red(红)、skyblue(天蓝)、pink(粉)、green(绿)等

<head>
    <style>
        div{
            /* 颜色设置为红色 */
            color: red;
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.2rgb三原色

三原色即为红、蓝、绿，取值为0-255之间，通过三原色的三色分别取不同的值，可以得到最终获得的颜色

<head>
    <style>
        div{
            /* rgb 三原色 red green blue  */
            /* color: rgb(red, green, blue); */
            /* 颜色为黄色的值 */
            color: rgb(255, 255, 0);
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.3rgba三原色及透明度

与三原色相同，不过多出了一个可以调节透明度的标签，透明度的取值为0-1之间

<head>
    <style>
        div{
            /* rgba 三原色+透明度0-1之间取值,值越大,透明度越低 */
            /* 颜色为暗红色 */
            color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.4 16进制

通过每两位表示一个颜色，每到16就向前进一位，与三原色类似

<head>
        div{
            /* 16进制 */
            /* 颜色接近春绿色(springgreen) */
            color: #1dce7e;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>

1.3文本样式

<head>
        p{
            /* 文本样式 */
            /* 设置文本打开或者关闭italic斜体 */

最低0.47元/天解锁文章

weixin_45753087

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本、列表、其他样式、显示隐藏元素及px、-em和rem的区别

html+css+js简单学习总结
复制链接

扫一扫

文本、列表、其他样式、显示隐藏元素及px、-em和rem的区别

“相关推荐”对你有帮助么？