碼上快樂

相關內容    簡體    繁體

CSS 字體風格

本文轉載自   查看原文   2019-03-22 11:51   687 

粗體

font-weight 屬性可以設置文本的粗細。

它有兩個屬性:

  • normal 普通粗細
  • bold 粗文本

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-weight</ title >
     < style >
         .a{
             font-weight:nomal;
         }
         .b{
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >學編程，上利永貞網</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

斜體

font-style 屬性可以設置文本傾斜。

它有3個屬性:

  • normal 正常顯示
  • italic 手寫風格斜體
  • oblique 斜體

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-style</ title >
     < style >
         .a{
             font-style:nomal;
         }
         .b{
             font-style:italic;
         }
         .c{
             font-style:oblique;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

大寫和小寫

text-transform 屬性可以設置文本的大寫或小寫。

它有3個屬性:

  • upercase 使文本大寫顯示
  • lowercase 使文本小寫顯示
  • captialize 使每個單詞的首字母大寫

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-transform</ title >
     < style >
         .a{
             text-transform:uppercase;
         }
         .b{
             text-transform:lowercase;
         }
         .c{
             text-transform:capitalize;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
</ body >
</ html >

下划線和刪除線

text-decoration 屬性可以給文本設置線條。

它有5個屬性:

  • none 刪除文本的裝飾線
  • underline 在文本底部增加一條實線
  • overline 在文本頂部增加一條實線
  • line-through 在文本中間穿一條線
  • blink 文本動態閃爍

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-decoration</ title >
     < style >
         .a{
             text-decoration:none;
         }
         .b{
             text-decoration:underline;
         }
         .c{
             text-decoration:overline;
         }
         .d{
             text-decoration:line-through;
         }
         .e{
             text-decoration:blink;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
< p class = "e" >study hard, improve every day</ p >
</ body >
</ html >

行間距

line-height 屬性可以設置行間距。

行間距會使文本垂直方向的空隙增大。

設置行間距單位使用em，不要使用px，這樣的好處是可以根據用戶選擇的文本大小來設定。

行間距的初始值最好設定在1.4em~1.5em之間。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >line-height</ title >
     < style >
         .a{
             line-height:1.4em;
         }
         .b{
             line-height:2.4em;
         }      
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

字母間距

letter-spacing 屬性可以設置字母間距。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >letter-spacing</ title >
     < style >
         .a{
             letter-spacing:2em;
         }
         .b{
             letter-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

單詞間距

word-spacing 屬性可以設置單詞之間距離。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >word-spacing</ title >
     < style >
         .a{
             word-spacing:2em;
         }
         .b{
             word-spacing:1em;
         }      
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

對齊方式

text-align屬性可以設置文本的對齊方式。

它有4個屬性:

  • left 設置文本左對齊
  • right 設置文件右對齊
  • center 設置文本居中顯示
  • justify 設置文本兩端對齊

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-align:left;
         }
         .b{
             text-align:right;
         }
         .c{
             text-align:center;
         }  
         .d{
             text-align:justify;
         }          
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

垂直對齊

vertical-align 垂直對齊通常在文本做為內聯元素時使用。

它的屬性有：

  • baseline 使元素的基線與父元素的基線對齊
  • sub 使元素的基線與父元素的下標基線對齊
  • super 使元素的基線與父元素的上標基線對齊
  • text-top 使元素的頂部與父元素的字體頂部對齊
  • text-bottom 使元素的底部與父元素的字體底部對齊
  • middle 使元素的中部與父元素的基線加上父元素x-height的一半對齊
  • top 使元素及其后代元素的頂部與整行的頂部對齊
  • bottom 使元素及其后代元素的底部與整行的底部對齊

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             vertical-align:text-top;
         }
         .b{
             vertical-align:middle;
         }
         .c{
             vertical-align:text-bottom;
         }      
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p >
< img class = "a" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "b" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
< p >
< img class = "c" src = "https://www.liyongzhen.com/liyongzhen/docs/images/downloadmediazip.png" />
study hard, improve every day
</ p >
</ body >
</ html >

文本縮進

text-indent 屬性可以設置首行文本縮進。

中文的首行縮進兩個字可以設置為2em。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-indent</ title >
     < style >
         .a{
             text-indent:2em;
         }      
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >一日，許褚走馬入東門，正迎許攸，攸喚褚曰：“汝等無我，安能出入此門乎？”褚怒曰：“吾等千生萬死，身冒血戰，奪得城池，汝安敢誇口！”攸罵曰：“汝等皆匹夫耳，何足道哉！”褚大怒，拔劍殺攸，提頭來見曹操，說“許攸如此無禮，某殺之矣。”操曰：“子遠與吾舊交，故相戲耳，何故殺之！”深責許褚，令厚葬許攸。乃令人遍訪冀州賢士。冀民曰：“騎都尉崔琰，字季珪，清河東武城人也。數曾獻計於袁紹，紹不從，因此托疾在家。”操即召琰為本州別駕從事，而謂曰：“昨按本州戶籍，共計三十萬眾，可謂大州。”琰曰：“今天下分崩，九州幅裂，二袁兄弟相爭，冀民暴骨原野，丞相不急存問風俗，救其塗炭，而先計校戶籍，豈本州士女所望於明公哉？”操聞言，改容謝之，待為上賓。
</ p >
< p >study hard, improve every day</ p >
</ body >
</ html >

投影

text-shadow 屬性可以設置文本的投影效果。

它有4個值，同時使用，也可以有選擇地使用：

  • 第一個值 設置陰影左右延伸長度，負值向左，正值向右
  • 第二個值 設置陰影上下延伸長度，負值向上，正值向下
  • 第三個值 設置陰影的模糊程度
  • 第四個值 設置陰影的顏色

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >text-align</ title >
     < style >
         .a{
             text-shadow:1px 1px 0px #df3232;
         }
         .b{
             text-shadow:1px 1px 5px #df3232;
         }
         .c{
             text-shadow:2px 2px 9px #red;
         }  
         .d{
             text-shadow:1px 1px 10px blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p class = "b" >study hard, improve every day</ p >
< p class = "c" >study hard, improve every day</ p >
< p class = "d" >study hard, improve every day</ p >
</ body >
</ html >

首字母

:first-letter 屬性可以設置首字母

它是一個偽選擇器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-letter</ title >
     < style >
         .b:first-letter{
             font-size:2em;
             font-weight:bold;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >學編程，上利永貞網</ p >
< p class = "b" >study hard, improve every day</ p >
</ body >
</ html >

首行文本

:first-line屬性可以設置首字母

它是也一個偽選擇器。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >:first-line</ title >
     < style type = "text/css" >
         p.a:first-line {
             font-weight: bold;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< p >學編程，上利永貞網</ p >
< p >study hard, improve every day</ p >   
</ body >
</ html >

鏈接樣式

鏈接樣式也是偽選擇器，有兩個：

:link 未訪問過的鏈接樣式

:visited 已經單擊過的樣式

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >鏈接樣式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >學編程，上利永貞網</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >

響應用戶

響應用戶有3個偽選擇器：

:hover 鼠標懸停時的樣式

:active 用戶在元素上操作時生效

:focus 元素擁有焦點時生效

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >鏈接樣式</ title >
     < style type = "text/css" >
         a:link{
             color:#000;
         }
         a:visited{
             color:#982312;
         }
         a:hover{
             color:yellow;
         }
         a:active{
             color:red;
         }
         a:focus{
             color:blue;
         }          
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< p class = "a" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com/" target = "_blank" >學編程，上利永貞網</ a >
< p >study hard, improve every day</ p >   
</ body >
</ html >


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS 字體類型 字體重量 字體風格 字體大小 字體變形 vscode舒適的字體風格 PyCharm設置字體風格 CSS字體 github風格的markdown渲染css Intellij IDEA 13.1.3 字體,顏色,風格設置 英語 | 字體 | 字跡 | 好看的手寫字體風格推薦 字的研究（1） 字、字形、字型、字體風格和字體文件 CSS設置全局字體 CSS 字體(font)實例
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM