CSS文本属性(font)及其他补充属性

最新推荐文章于 2023-01-26 23:45:38 发布

杏黄的三叶草

最新推荐文章于 2023-01-26 23:45:38 发布

阅读量394

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104029700

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

补充属性

单位

px：像素
em：1em==一个文字的大小
一个文字的大小不同浏览器有不同的默认值，也可以自己设置font-size:20px；

颜色的表示方法

1.写具体的颜色单词(red,blue…)
2.使用十六进制表示颜色（#000~fff）
3.rgb(三原色)
        r  red  (0~255)
        g  green  (0~255)
        b  blue  (0~255)

background-color:rgb(100.231.211);

4.rgba：设置半透明的效果(只设置背景半透明，不对其中的文本起作用)
a alpha (0~1)0代表全透明，1代表不透明

background-color:rgba(0,23,21,0.5);

5.opacity(实现半透明的效果，对其中的内容也起作用)
取值：0~1之间（0代表全透明，1代表不透明）

background-color:#000000;
opacity:0.2;

字体样式属性

font-size：设置文字大小
font-family：设置文字字体

font-family:"微软雅黑";

可以同时设置多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体

font-family:Arial，"微软雅黑"，"宋体";

注意

1.各个字体之间必须使用英文状态下的逗号隔开。
2.中文字体需要加英文状态下的引号，英文字体一般不需要加（如果英文字体名中有空格，则需要加引号）
3.当设置英文字体时，英文字体名必须在中文字体名前面。

font-family:"Times New Roman",Arial，"微软雅黑"，"宋体";

使用字体对应的单词表示
在这里插入图片描述 font-weight：设置文字的粗细（100~900之间）
normal:默认值400
bold:j加粗700
bolder:更粗
lighter：更细
font-style：设置字体风格（normal | italic【斜体】）
line-height: 设置文字行高（暂时理解文字的高度）
通过该属性可以改变文字的上下间距

font属性联写
总结：
◆ 在font属性联写中必须设置font-size 和 font-family
◆ 在font属性联写中，font-size 必须设置在font-family之前
◆如果要设置行高，那么行高必须设置到font-size之后，其他属性没顺序

font:italic  bold 30px/20px "微软雅黑"；

文本的外观属性

color:设置文本的颜色(前景色)
letter-spacing：字间距（字符与字符之间的空白）
word-spacing：单词间距(对中文无效)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            color: red;
            width: 200px;
            height: 200px;
            background-color:#000000;
            letter-spacing:2em;
        }
    </style>
</head>
<body>
<div>只剩下麻木的我没有了当年的热血</div>
</body>
</html>

在这里插入图片描述
text-decoration：文本修饰
none:没有修饰
overline：上划线
underline：下划线
line-through：删除线
可以给文本添加多个显示效果

text-decoration:underline overline;

text-align:设置水平对齐方式（可文本可图片）
left | right | center（只适合于块级元素，对行内元素无效）

text-indent:设置首行文本缩进（只适合于块级元素，对行内元素无效）

white-space：空白符处理
normal：常规（默认值），文本的空格，空行无效，满行后自动换行
pre：预格式化，按文档的书写格式保留空格，空行原样显示
nowrap：空格空行无效，强制文本不能换行。除非遇到换行标签<br>。内容超过标签的边界也不换行，若超出浏览器页面则会自动增加滚动条。
text-shadow: 设置文字阴影

 text-shadow: 0px 0px 10px red;

◆第一个值可以设置正数或者负数，设置文字阴影在水平方向的一个偏移量
◆第二个值可以设置正数或者负数，设置文字阴影在垂直方向的偏移量
◆第三个值代表的是文字阴影的模糊度，不能设置负数
◆第四个值代表文字阴影的颜色。
可设置多个阴影叠加

text-shadw:0px 8px 2px red,2px -2px 3px blue;

总结：
◆文字阴影使用text-shadow
◆如果设置多个阴影，用逗号隔开

text-overflow：对象内文本的溢出
ellipsis:用省略符号表示被修剪的文本
clip:修剪溢出文本，无省略符号显示。
通常和另外三个属性一起使用，具体步骤如下：
1.为包含文本的对象定义宽度。
2.应用white-space：nowrap；强制文本不能换行。
3.应用overflow：hidden;隐藏溢出文本。
4, ellipsis:用省略符号表示被修剪的文本。

杏黄的三叶草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS文本属性(font)及其他补充属性

补充属性单位px：像素em：1em==一个文字的大小一个文字的大小不同浏览器有不同的默认值，也可以自己设置font-size:20px；颜色的表示方法1.写具体的颜色单词(red,blue…)2.使用十六进制表示颜色（#000~fff）3.rgb(三原色)        r  re...
复制链接

扫一扫