CSS文本样式

21fanqie · 发表于 2024-7-21 15:31:51

CSS文本样式
划线、首缩进、行间距、字间距、居中、长度单位

<style type="text/css">
.box1 {
text-decoration: overline;  /*text-decoration属性设置为overLine,表示装饰线在文本顶部*/}
.box2 {
text-decoration: underline;  /*text-decoration属性设置为underLine,表示装饰线在文本底部*/}
.box3 {
text-decoration: line-through;  /*text-decoration属性设置为Line-through,表示装饰线从文本穿过*/}
</style>

技术点的解释：

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

21fanqie · 发表于 2024-7-21 15:37:54

开头空两格喔 - 使用text-indent为文本添加首行缩进

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>缩进样式</title>
    <style type="text/css">
        p{text-indent:2em;}
    </style>
</head>

<body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>

</html>

21fanqie · 发表于 2024-7-21 15:39:00

行间距（行高）属性（line-height）

p{line-height:1.5em;}
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

复制代码

21fanqie · 发表于 2024-7-21 15:45:36

中文字间隔、字母间隔设置：

如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：

h1{
    letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{
    word-spacing:20px;
}
...
<h1>welcome to imooc!</h1>

21fanqie · 发表于 2024-7-21 15:49:45

为块状元素中的文本、图片设置居中样式，可以使用 text-align 样式代码

设置居中：

h1{
text-align:center;
}
<h1>了不起的盖茨比</h1>

复制代码

居左：

h1{
text-align:left;
}
<h1>了不起的盖茨比</h1>

复制代码

居右：

h1{
text-align:right;
}
<h1>了不起的盖茨比</h1>

复制代码

21fanqie · 发表于 2024-7-21 15:56:51

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

复制代码

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

复制代码

css:

p{font-size:14px}
span{font-size:0.8em;}

复制代码

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

复制代码

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

		自动登录	找回密码
密码			立即注册

CSS文本样式

相关帖子