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>