web前端入門到實戰(zhàn):css常用樣式font控制字體的多種變換

CSS 字體屬性定義文本的字體系列根穷、大小柏靶、加粗物邑、風(fēng)格(如斜體)和變形(如小型大寫字母)font-family控制字體溜哮,由于各個電腦系統(tǒng)安裝的字體不盡相同,但是基本裝有黑體色解、宋體與微軟雅黑這三款字體茂嗓,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei"

font-size控制字體大小,我們設(shè)置字體大小是設(shè)置它的寬度科阎,它的高度一般電腦系統(tǒng)默認字體大小是16px述吸,所以字體大小盡量不要低于16px,1em=16px锣笨; font-weight: bold;/*控制字重 一般是100-900 常用lighter(細體) normal(正常)bold加粗 */至于這個font-style蝌矛,一般默認是normal,也就是正常的错英,如果說你設(shè)置 font-style: italic;斜體話入撒,其實和這個<em></em>的效果是差不多的;文字間的間距用的line-height如果和高度相等話,就是垂直居中了椭岩。

通常font字體的簡寫:font:style weight size/line-heigt font-family /要求必須出現(xiàn)的2個是 size與font-family/

專門建立的學(xué)習(xí)Q-q-u-n: 784783012 茅逮,分享學(xué)習(xí)的方法和需要注意的小細節(jié),不停更新最新的教程和學(xué)習(xí)技巧
(從零基礎(chǔ)開始到前端項目實戰(zhàn)教程判哥,學(xué)習(xí)工具献雅,全棧開發(fā)學(xué)習(xí)路線以及規(guī)劃)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css常用樣式font字體的多種變換</title>
 7     <style>
 8         div{
 9             font-family: 'Microsoft YaHei';/*微軟雅黑*/
10             /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
11             /*字體加上雙引號或者單引號,當有多個字體的時候塌计,中間逗號分開*/
12             color:#f90;
13             font-size: 24px;/*控制字體大小*/
14             font-weight: bold;/*控制字重 常用lighter(細體) normal(正常)bold加粗 */
15             font-style: italic;/*等同于em*/
16             line-height: 30px;
17         }
18         /*font字體的簡寫:font:style weight size/line-heigt font-family*/
19         /*要求必須出現(xiàn)的2個是 size font-family*/
20         p{  
21             font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
22             letter-spacing: 1px;/*英文字母間距*/
23             word-spacing: 10px;/*英文單詞間距*/
24         }
25         P::first-letter{
26             text-transform: capitalize;
27         }/*第一個字母::first-letter*/
28         p::first-line{
29             color:red;
30         }/*第一行::first-line*/
31     </style>
32 </head>
33 <body>
34     <div>技術(shù)為王世界,欲問青天山頂景色是否獨好技術(shù)為王世界,欲問青天山頂景色是否獨好技術(shù)為王世界,欲問青天山頂景色是否獨好技術(shù)為王世界, 
35 欲問青天山頂景色是否獨好技術(shù)為王世界,欲問青天山頂景色是否獨好技術(shù)為王世界,欲問青天山頂景色是否獨好技術(shù)為王世界, 36         欲問青天山頂景色是否獨好技術(shù)為王世界,欲問青天山頂景色是否獨好 </div>
37     <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 
38 I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 
39         I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p>
40 </body>
41 </html>

關(guān)于樣式繼承問題/與文字有關(guān)樣式會被繼承下去/代碼展示如下:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         p{
 8             font-size: 20px;
 9             font-family: 微軟雅黑;    
10             color:#f00;
11             font-weight:bold;
12             font-style:italic;
13             word-spacing:15px;
14         }
15 
16     </style>
17 </head>
18 <body>
19     <div>
20         <p><span>linux php linux</span></p>
21         <p><span>linux linux php linux</span></p>
22         <p><span>linux linux php linux</span></p>
23         <p><span>linux linux php linux</span></p>
24     </div>    
25 </body>
26 </html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末挺身,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子夺荒,更是在濱河造成了極大的恐慌瞒渠,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件技扼,死亡現(xiàn)場離奇詭異伍玖,居然都是意外死亡,警方通過查閱死者的電腦和手機剿吻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門窍箍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事椰棘》墓祝” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵邪狞,是天一觀的道長祷蝌。 經(jīng)常有香客問我,道長帆卓,這世上最難降的妖魔是什么巨朦? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮剑令,結(jié)果婚禮上糊啡,老公的妹妹穿的比我還像新娘。我一直安慰自己吁津,他們只是感情好棚蓄,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著碍脏,像睡著了一般梭依。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上潮酒,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天睛挚,我揣著相機與錄音,去河邊找鬼急黎。 笑死扎狱,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的勃教。 我是一名探鬼主播淤击,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼故源!你這毒婦竟也來了污抬?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤绳军,失蹤者是張志新(化名)和其女友劉穎印机,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體门驾,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡射赛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奶是。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片楣责。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡竣灌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秆麸,到底是詐尸還是另有隱情初嘹,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布沮趣,位于F島的核電站屯烦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏房铭。R本人自食惡果不足惜漫贞,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望育叁。 院中可真熱鬧,春花似錦芍殖、人聲如沸豪嗽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽龟梦。三九已至,卻和暖如春窃躲,著一層夾襖步出監(jiān)牢的瞬間计贰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工蒂窒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留躁倒,地道東北人。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓洒琢,卻偏偏與公主長得像秧秉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子衰抑,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

推薦閱讀更多精彩內(nèi)容