CSS

HTML5+CSS3——第11章 CSS3文本樣式

字號+ 編輯: Snake 修訂: Snake 來源: 慕课网 2023-09-05 我要說兩句(0)

本節給大家介紹一下CSS3文本樣式,想爲塊狀元素中的文本、圖片設置居中樣式嗎?首行縮進如何設置?在段落排版中起重要作用的行間距(行高)屬性!

11-1 使用text-decoration添加文本修饰

我们来学习文本装饰,比如我们想实现以下效果:

 1.jpg

想要实现以上效果,我们可以输入以下代码:

技术点的解释:

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

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

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

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

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

11-2使用text-indent为文本添加首行缩进

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}
<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>

注意:2em的意思就是文字的2倍大小。

11-3 使用line-height为文字设置行间间距

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height)

如下代码实现设置段落行间距为1.5倍。

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

11-4 使用letter/word-spacing增加或减少字符间的空白

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

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

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

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

l 单词间距设置:

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

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

11-5 使用text-align设置文本对齐方式

想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。

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

同样可以设置居左:

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

还可以设置居右:

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

11-6长度值

长度单位总结一下,目前比较常用到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)。

閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: PHP+JS聊天群

相關課文
  • 多個高度相同, 屬性inline-block的div,有的div沒有内容而有的div有内容,有内容的會下沉?

  • 讓整個網頁全侷變成黑白色調的css代碼

  • CSS生成内容

  • CSS3外輪廓屬性

我要說說
網上賓友點評