tft每日頭條

 > 圖文

 > css中字間距怎麼弄

css中字間距怎麼弄

圖文 更新时间:2024-11-20 12:45:43

css中字間距怎麼弄(Css字體間距的設置方法)1

(原圖樣式)

今天我們講一下幾個文本标簽<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加講一下<code>first-line</code>和<code>first-letter</code>的使用方法。

先上源碼:

<!DOCTYPE html>

<html>

<head>

<title>css文本标簽介紹</title>

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

}

</style>

</head>

<body>

<div class="wenben">

今天我們來測試一下自己間距的設置方法,主要标簽有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加講一下<code>first-line</code>和<code>first-letter</code>的樣式。

</div>

</body>

</html>

第一個标簽:text-indent(設置擡頭距離css縮進)

css樣式:

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

}

</style>

css中字間距怎麼弄(Css字體間距的設置方法)2

第二個标簽:letter-spacing(設置字與字之間的間距)

css樣式:

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

}

</style>

css中字間距怎麼弄(Css字體間距的設置方法)3

第三個标簽: line-height(設置行高,就是每一行的高度)

css樣式:

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

</style>

css中字間距怎麼弄(Css字體間距的設置方法)4

第四個标簽,其實叫做選擇器: ::first-line(設置第一行的樣式)

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

.wenben::first-line{

color:blue;

font-weight: bold/*字體加粗*/;

}

</style>

css中字間距怎麼弄(Css字體間距的設置方法)5

第五個選擇器: ::first-letter(設置第一行的第一個字的樣式)

<style>

.wenben{

width:300px;

height: 150px;

background-color: #f0f0f0;

padding: 20px;

border: 1px solid #ccc;

margin:0 auto;

text-indent: 23px;

letter-spacing: 3px;

line-height: 30px;

}

.wenben::first-line{

color:blue;

font-weight: bold/*字體加粗*/;

}

.wenben::first-letter{

font-size: 24px;

color: white;

font-weight: normal;

border: 1px solid red/*設置文字邊框*/;

background-color:blue/*設置文字背景*/;

padding: 2px;

}

</style>

css中字間距怎麼弄(Css字體間距的設置方法)6

你學會了嗎?有問題可以私聊我哦!

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved