摘要:因?yàn)榫W(wǎng)頁中可能存在中英文,中英文的字體樣式不同。要首先寫英文字體,在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會強(qiáng)制換行,但是因?yàn)橛⑽暮蛿?shù)字不會強(qiáng)制換行。
css基礎(chǔ)—字體那些事
1. 首先講字的大小樣式等
字體大小 font-size: 40px;
文字字體 font-family: "宋體",Arial;
文字樣式 font-style:normal;
-normal:正常字體 -italic,oblique:斜體
字體加粗 font-weight: bold;
每行所占高度(行高) line-height: 50px;
疑問一: 文字字體怎么會同時寫兩個值?
解答:
是首選和備選的關(guān)系,不只可以寫兩個,還可以寫多個。放在第一個位置的是首選,后面的是備選。因?yàn)榫W(wǎng)頁中可能存在中英文,中英文的字體樣式不同。
font-family:首選,備選1,備選2.....
注意:當(dāng)網(wǎng)頁上存在中文和英文的時候。要首先寫英文字體,在寫中文字體。因?yàn)橹形淖煮w庫包含英文,英文字體庫不包含中文。
疑問二:行高是什么?用來干什么的?
解答:轉(zhuǎn)答案在這里,別人的博文和再看一篇會更懂,也是別人的博客
line-height用來控制文字垂直方向上的位置。
2. 字體相關(guān)屬性
字體顏色 color:red;
首行縮進(jìn) text-indent: 2em;或者 text-indent: 32px;
文本水平方向?qū)R text-align:文本對齊
- 屬性值有3個:left,center,right。 - 只能靠左,居中,靠右。 - 上下移動目前可以使用line-height.
text-decoration:文本修飾
underline 下劃線
line-through 刪除線
overline 上劃線
none 無
字間距:letter-spacing:10px;
詞間距:word-spacing:10px;
字間距+詞間距:
letter-spacing:10px;和word-spacing:10px;共同使用
強(qiáng)制換行:word-break:break-all;
由于中文會強(qiáng)制換行,但是因?yàn)橛⑽暮蛿?shù)字不會強(qiáng)制換行。
英文和數(shù)字不會自動換行
Title dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
強(qiáng)制不換行:white-space:nowrap;
點(diǎn)擊查看強(qiáng)制不換行
注意:詞間距的使用
eg:
1.我愛學(xué)習(xí)
2.我 愛 學(xué)習(xí)
對這兩個寫樣式詞間距的樣式。只有2起作用。因?yàn)闉g覽器無法自動識別那些是詞,給了空格才知道。
查看詞間距使用效果
Title 我 愛 學(xué)習(xí)我 愛 學(xué)習(xí)
詞間距和字間距同時使用時,注意實(shí)際效果:
eg:我 愛 學(xué) 習(xí)。設(shè)置字間距為20px,詞間距為50px。
實(shí)際效果為:
我-20px-空格-20px-50px-愛
詞間距和字間距共同使用的效果
Title 我愛學(xué)習(xí)我 愛 學(xué) 習(xí)我 愛 學(xué) 習(xí)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115962.html
摘要:因?yàn)榫W(wǎng)頁中可能存在中英文,中英文的字體樣式不同。要首先寫英文字體,在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會強(qiáng)制換行,但是因?yàn)橛⑽暮蛿?shù)字不會強(qiáng)制換行。 css基礎(chǔ)—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...
摘要:現(xiàn)在回到我們這一章節(jié)的標(biāo)題,將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫基礎(chǔ)庫構(gòu)思為什么要做基礎(chǔ)庫我上一章節(jié)的末尾拋出了幾個問題假設(shè)你要做一個游戲單頁面,網(wǎng)頁上并不存在表單內(nèi)容,那么你就要移除一些冗余的代碼,開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié),我們都說了哪些內(nèi)容: CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
摘要:現(xiàn)在回到我們這一章節(jié)的標(biāo)題,將它做下補(bǔ)充關(guān)于那些事四之基于構(gòu)架基礎(chǔ)樣式庫基礎(chǔ)庫構(gòu)思為什么要做基礎(chǔ)庫我上一章節(jié)的末尾拋出了幾個問題假設(shè)你要做一個游戲單頁面,網(wǎng)頁上并不存在表單內(nèi)容,那么你就要移除一些冗余的代碼,開始自定義樣式來滿足自己的需求。 前言 先來回顧一下前幾章節(jié),我們都說了哪些內(nèi)容: CSS Reset 歷史 與 Normalize.css 介紹 Normalize.css...
閱讀 2465·2021-09-09 09:33
閱讀 2865·2019-08-30 15:56
閱讀 3119·2019-08-30 14:21
閱讀 891·2019-08-30 13:01
閱讀 855·2019-08-26 18:27
閱讀 3584·2019-08-26 13:47
閱讀 3449·2019-08-26 10:26
閱讀 1583·2019-08-23 18:38