css3文本与字体属性

赵哎呦

已于 2022-02-07 15:25:40 修改

阅读量572

点赞数 1

文章标签： css3 css 前端

于 2022-02-06 22:08:05 首次发布

本文链接：https://blog.csdn.net/weixin_50795415/article/details/122801208

版权

常用文本样式属性

color属性

可以设置文本内容的前景色；主要用英语单词、十六进制、rgb()、rgba()来表示

十六进制：

/* 白色 */
color: #fff;
/* 黑色 */
color: #000;
/* 常见灰色 */
color: #ccc;
color: #333;
color: #2f2f2f;

rgba(): rgba(255 , 0 , 0 , .65) ，最后一个参数表示透明度，介于0~1之间，0为纯透明，1为纯实心

font-size属性

设置字号，单位：px、em、rem；浏览器最小支持10px；

font-weight属性

设置字体的粗细程度，eg：normal（400）、bold（700）

font-style属性

设置字体的倾斜，eg：normal、italic（倾斜）

text-decoration属性

设置为文本的修饰线外观的，none、underline（下划线）、line-through（删除线）

字体属性

font-family属性

设置字体，字体可以是列表形式，一般英语字体放到前面，后面字体是前面字体的”后备“字体

/* 字体名称中有空格,或者中文字体,必须用引号包裹 */
font-family: serif, "微软雅黑";

定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5中文件；拥有字体文件之后，可以用@fond-face来定义字体

段落和行相关属性

text-indent属性

定义首行文本内容之前的缩进量

/* 缩进两个字符 */
text-indent: 2em;

line-height 行高

带单位：line-height：30px；
不带单位，表示字号的倍数：line-height：1.5；/ line-height：150%；

单行文本垂直居中：行高=盒子高度

水平居中：text-align：center；

font合写属性

font属性，可以用来作为font-style，font-weight，font-size，line-height，font-family属性的合写

font: italic bold 20px/1.5 Arial,"微软雅黑";

继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效

color
font-开头
list-开头
text-开头
line-开头

文字相关属性有继承性，通常，设置body标签的字号、颜色等，就会当作整个页面的默认样式

就近原则

选择器权重计算失效，而是“就近原则”，继承的标签权重不如选中标签权重大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            font-size: 30px;
            line-height: 1.5;
            font-weight: bold;
            font-family: '宋体';
            text-align: center;
            text-decoration: underline;
            font-style: italic;
            color: red;
        }
        #box1 #box2 #box3 {
            color: red;
        }
        p{
            color: green;
        }
        #box1 #box2{
            background-color: #f36;
        }
        .box1 .box3{
            background-color: rgba(239, 243, 16, 0.904);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>猎鸟气</li>
        </ul>
    </div>
    <div class="box1" id="box1">
        <div class="box2" id="box2">
            <div class="box3" id="box3">
                <p>cndsajklvbdksb</p>
            </div>
        </div>
    </div>
</body>
</html>

赵哎呦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3文本与字体属性

常用文本样式属性color属性可以设置文本内容的前景色；主要用英语单词、十六进制、rgb()、rgba()来表示十六进制：/* 白色 */color: #fff;/* 黑色 */color: #000;/* 常见灰色 */color: #ccc;color: #333;color: #2f2f2f;rgba(): rgba(255 , 0 , 0 , .65) ，最后一个参数表示透明度，介于0~1之间，0为纯透明，1为纯实心font-size属性设置字号，单位：p
复制链接

扫一扫