CSS——字型、英文間距、大小寫及下劃線
阿新 • • 發佈：2019-01-26
字型屬性
- font-weight(設定文字的粗細)
- font-style（設定文字傾斜加粗）
- font-variant（設定小型大寫字母）
- font-family（設定字型）
字型大小（相對單位）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字型大小</title> <style type="text/css"> p{font-size: 50px;} .larger{font-size: larger;} .smaller{font-size: smaller;} .em{font-size: 2em;} .percent{font-size: 150%;}/*p標籤的的大小*150%*/ </style> </head> <body> <!-- 相對單位 --> <p>文字大小px，受顯示器解析度影響</p> <p>文字大小<span class="larger">相對父元素的文字大小變大</span></p> <p>文字大小<span class="smaller">相對父元素的文字大小變小</span></p> <div id="fontSize"> <p>文字大小<span class="em">相對值em</span></p> <p class="percent">文字大小<span class="percent">相對值%</span></p> <!-- span標籤相對於父元素p標籤再乘以150% --> </div> </body> </html>
字型大小（絕對單位）
<style type="text/css"> .in{font-size: 0.5in;} .cm{font-size: 0.5cm;} .mm{font-size: 5mm;} .pt{font-size: 15pt;} .pc{font-size: 2pc;} .xx-small{font-size: xx-small;} .x-small{font-size: x-small;} .small{font-size: small;} .medium{font-size: medium;} .large{font-size: large;} .x-large{font-size: x-large;} .xx-large{font-size: xx-large;} /*每個瀏覽器下對於small等字型大小是不固定的*/ </style> <body> <!-- 絕對單位 --> <p>預設字型大小</p> <p class="in">文字大小是0.5in</p> <p class="cm">文字大小是0.5cm</p> <p class="mm">文字大小是5mm</p> <p class="pt">文字大小是15pt</p> <p class="pc">文字大小是2pc</p> <p class="xx-small">文字大小是xx-small</p> <p class="x-small">文字大小是x-small</p> <p class="small">文字大小是small</p> <p class="medium">文字大小是medium</p> <p class="large">文字大小是large</p> <p class="x-large">文字大小是x-large</p> <p class="xx-large">文字大小是xx-large</p> </body>
字型顏色
h1{color: red;}
/*具體顏色名稱*/
p{color: rgb(0%,100%,0%);}
/*兩種方法表示：數字：0~255；百分比：0%~100% 分別代表紅綠藍*/
div{color: #;}
/*十六進位制：#開頭，六位，0~F，相鄰兩位可以縮寫，如#008800可以縮寫成#080*/
字型簡寫
div { font-variant: small-caps; font-style: italic; font-weight: bold; font-size: 50px; font-family: "微軟雅黑",serif; } /*簡寫要按照這個順序，且最少要有後兩個屬性*/ div{font: italic small-caps bold 50px "微軟雅黑",serif;}
英語間距大小寫及下劃線
.word{word-spacing: 1em;}
/*針對英文單詞，但是單詞之間的識別法辦法是空格，所以只要p標籤內中文打了空格的話也會被識別成英文單詞*/
.letter{letter-spacing: 2em;}
/*每個字母之間的距離,也適用於中文*/
.one{text-transform: capitalize;}
/*首字母大寫*/
.two{text-transform: uppercase;}
/*全部大寫*/
.three{text-transform: lowercase;}
/*全部小寫*/
.four{text-transform: none;}
/*沒有樣式*/
.xhx{text-decoration: underline;}
/*下劃線*/
.shx{text-decoration: overline;}
/*上劃線*/
.scx{text-decoration: line-through;}
/*穿越線、也就是刪除線*/
.none{text-decoration: none;}
/*無樣式*/
/*還有個blink樣式是閃爍效果，存在相容性問題，大多不適用*/
.dg{text-decoration: underline overline line-through;}
/*可以設定多個樣式全部實現，但是加上none就會清空所有效果*/
/*下劃線的顏色會跟文字顏色一樣*/
a{text-decoration: none;}
/*可以用此方法設定連結不帶下劃線*/
