css字型樣式+文字樣式
阿新 • • 發佈：2020-08-10
font-family屬性值：具體字型名或者字型集
如果是中文或者有單詞之間有空格，需要加雙引號
字型集：
Serif （有裝飾線）
Sans-serif （無裝飾線）
Monospace
Cursive
Fantasy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-family: "Times New Roman"; } p{ font-family: "微軟雅黑","宋體","黑體",sans-serif; } </style> </head> <body> <h1>css層疊樣式表</h1> <p>什麼是css層疊樣式表呢？</p> </body> </html>
font-size 相對單位
px （受顯示器解析度影響，在手機端一般不使用）
em （針對父元素）
% （針對父元素）
字型顏色
可查詢web安全色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*rgb數字：0~255*/ h1{ color:rgb(0,255,0); } /*rgb百分比：0%~100%*/ p{ color:rgb(0%,100%,0%); } p.spe{ color:#008800;/*#開頭，六位，0~F*/ color:#080;/*簡寫*/ } </style> </head> <body> <h1>css層疊樣式表</h1> <p>什麼是css層疊樣式表呢？</p> <p class="spe">顏色十六進位制</p> </body> </html>
font-variant:small-caps 小型大寫字母
css文字樣式
text-align 只對塊級元素有效：可以在元素外巢狀塊級元素，給外元素新增text-align屬性
margin:0 auto; 也可以設定元素居中顯示
line-height
實際開發中，行高一般使用em單位，與字型大小相關
瀏覽器預設行高一般是1.2em
行高可以繼承自父元素，繼承的是計算後的值，而不是直接繼承百分比
首行縮排 text-indent
vertical-align 對行內元素或者單元格元素生效
可以用在圖片上 vertical-align:middle;
或者可以用具體的數值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ height:400px; width:500px; border:1px solid; display: table;/*轉為表格元素*/ } .content{ vertical-align: middle; text-align:center; display: table-cell;/*轉為單元格元素*/ } </style> </head> <body> <div class="wrap"> <div class="content"> <p>什麼是<span class="sub">css</span>層疊樣式表呢？</p> <p>什麼是<span class="super">css</span>層疊樣式表呢？</p> </div> </div> </body> </html>
word-spacing 單詞間距
letter-spacing 字母間距
單詞的判斷以空格為準
text-transform:capitalize | uppercase | lowercase | none 設定文字大小寫
text-decoration:underline | line-through | overline | none 設定文字裝飾線
也可以設定多個樣式 text-decoration:underline overline;