CSS字体样式
一、字體類型:(font-family屬性)
1.可以寫多個字體類型,用逗號隔開。
2.單個英文單詞的字體類型不用加雙引號(或單引號),其他的需要加雙引號(或單引號)。
示例
p{font-family:Verdana,"楷體";} body{font-family:Times,"Times New Roman","楷體";}二、字體大小:(font-size屬性)
1.常用單位:em、px(像素)
h1{font-size:24px;} h2{font=size:2em;}三、字體風格(font-style屬性)
1.normal文本正常顯示
2.italic文本斜體顯示
3.oblique文本傾斜顯示
h1{font-style:italic;} //h1的字體風格為斜體四、字體的粗細(font-weight屬性)
1.normal (默認值,定義標準的字體) 常用
2.bold (粗體字體)? ?常用
3.bolder(更粗的字體)
4.lighter (更細的字體)
5.100、200、300、400、500、600、700、800、900 (定義由細到粗的字體,400等同于normal,700等同于bold)
h1{font-weight:bold;} //設置h1的字體為粗體五、字體屬性(font屬性)
字體屬性的順序:字體風格—>字體粗細—>字體大小—>字體類型
p span{font:oblique bold 12px "楷體";}?六、字體樣式使用案例
借助字體相關樣式,實現字體展示效果
1、字體:Times、Times New Roman、楷體
2、一級標題:24px斜體
3、"全部商品分類" 字體正常粗細
4、二級標題:16px字體正常粗細
5、段落字體12px
6、每段落中商品分類為粗體、12px、斜體、楷體
<html> <head><title>字體風格</title><style>body{font-family:Times,"Times New Roman","楷體";}h1{font-size:24px;font-style:italic;}h1 span{font-weight:normal;}h2{font-size:16px;font-weight:normal;}p{font-size:12px;}p span{font:italic bold 12px "楷體";}</style> </head> <body><div><h1>商城――<span>全部商品分類</span></h1><h2>圖書、音像、電子書刊</h2><p><span>電子書刊</span> 電子書 網絡原創 數字雜志 多媒體圖書目<br/><span>音像</span>音樂 影視 教育音像<br/><span>經管勵志</span> 經濟 金融與投資 管理 勵志與成功</p><h2>家用電器</h2><p><span>大家電</span> 平板電視 空調 冰箱 DVD播放機<br/><span>廚房電器</span> 電磁爐 微波爐 電餅鐺 抽油煙機<br/><span>生活電器</span> 凈化器 電風扇 飲水機 電話機</p><h2>個護化妝</h2><p><span>面部護理</span> 潔面乳 精華露 眼部護理 T區護理<br/><span>身體護理</span> 洗發護發 沐浴 手工/香皂 手足護理<br/><span>香水SPA</span> 女士香水 男士香水 組合套裝 迷你香水</p><h2>服飾鞋帽</h2><p><span>女裝</span> T恤 襯衫 針織衫 衛衣 連衣裙 風衣 大衣 休閑褲<br/><span>男裝</span> 襯衫 POLO衫 針織衫 皮衣 外套 棉服 大衣<br/><span>運動</span> 休閑鞋 跑步鞋 足球鞋 運動褲 運動包</p></div> </body> </html>總結
 
                            
                        - 上一篇: Telegram 群组创建机器人bot
- 下一篇: 2019年天猫商家如何通过积分运营来达到
