CSS筆記（字型樣式，文字屬性和顏色樣式）

阿新 • • 發佈：2019-01-17

1 字型樣式

1.1 字體系列（font family）

在CSS中，字型劃分為五組“字體系列”，分別為：

sans-serif字體系列：沒有襯線的字型，最常用不為過，如 Arial、Verdana，Arial Black，Geneva等
serif 字體系列：有襯線的字型，常用於新聞文字排版，如 Times，Times New Roman，Georgia等
monospace 字體系列：每個字元都包含固定的寬度，主用於顯示軟體程式碼，如 Courier New，Adale Mono，Courier
cursive 字體系列：Comic Sanc，Apple Chancery
fantasy

字體系列：LAST NINJA，Impact

簡單來說，serif字型高雅傳統；sans-serif字型外觀清晰，可讀性強，最常用；Monospace字型像是列印；而Cursive和fantasy這是一種有趣風格。
CSS使用font-family去定義字型時，支援候選字型，以防瀏覽器沒有對應的字型，如：

body {
    font-family:Verdana,Geneva,Arial,sans-serif;
}
/*
注意的是字型名稱大小寫要區分開來，而且如果字型名稱有空格如：Comic Sanc，就要使用引號了"Comic Sanc"，最後要以字體系列作為結尾以防瀏覽器之前的指定字型都不支援
*/

注：
宋體–> “SimSun”
黑體–> “SimHei”
微軟雅黑 –> “Microsoft YaHei”

1.1.1 引用外部字型

如果想要使用外部指定的字型就要使用到CSS的一個內建規則——@font-face規則。

@font-face {
    font-family:Seiei;
    scr:url("url1")
        url("url2")
}
h1 {
    font-family:Seiei;
}
/*
@font-face先是命名了字型名字，然後使用scr呼叫外部字型，注意的是這個scr:url("url")的書寫方法，同樣的這裡也是可以候選，這裡主要是擔心檔案格式，最為廣泛流傳的格式是：".woff" 以及 ".svg"
*/

CSS還有其他的一些內建規則，如@import和@media。
@media用於建立應對某些使用者客戶端的規則，比方說螢幕小於幾寸，就要使用這個樣式等等。
@import用於允許匯入其他CSS檔案

1.1.2 使用系統字型

如果希望頁面結合使用者作業系統設定，就可以使用font 來定義（這個可以用來簡寫），其值有：

cation ：用於有標題的控制元件，如按鈕
icon ：用於對圖示加標籤
menu ：用於選單（下拉選單和選單列表）
message-box ：用於對話方塊
small-caption ：用於對小控制元件加標籤
status-bar ：用於視窗狀態條

button {
    font:cation;
    font-size:1em;
/*
假如此時cation樣式的大小不足，可以自己調節
*/

1.2 字型大小（font-size）

調整字型大小，這裡有幾種方法（其實諸如框架的外邊距，內邊距什麼的，都是類似這樣的方法）

1.2.1 畫素（px）

定義畫素就是準確的告訴瀏覽器要高度多高的字型（這個高度是指平時3條線的英語本中最高那條與最低的之間的距離）

body {
    font-size:14px;
}

1.2.2 百分比（%）

用百分比指定字型大小就是基於父元素繼承的字型大小上，得出的結果。如果沒有指定字型大小，那麼預設的<body>字型大小為16px

body {
    font-size:14px;
}
h1 {
    font-size:150%;
}
/*
h1的字型為21px
*/

1.2.3 單位（em）

在CSS中，1個em 定義為一種 給定字型 的font-size 值，比方說某個元素的font-size 為14畫素，那麼對於該元素，1em 就等於14畫素。

body {
    font-size:14px;
}
p {
    font-size:1em;
}
/*
p的字型為14px
*/

1.2.5 單位（rem）

相對於em，rem有統一的參考font-size，那就是html標籤上的字型大小，這對於響應式佈局有很大的幫助，比如說可以使用JS檢測螢幕大小，從而生成自適應的html標籤上的font-size。
以下js外掛用於檢測生成html標籤字型大小

!function(e){function t(){var t=a.clientWidth,i="}";!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)&&t>1024&&(t=640,i=";max-width:"+t+"px;margin-right:auto!important;margin-left:auto!important;}"),e.rem=t/10,/ZTE U930_TD/.test(navigator.userAgent)&&(e.rem=1.13*e.rem),s.innerHTML="html{font-size:"+e.rem+"px!important;}body{font-size:"+12*(t/320)+"px"+i}var i,n,a=document.documentElement,r=document.querySelector('meta[name="viewport"]'),s=document.createElement("style");if(i=e.devicePixelRatio||1,n=1/i,!r)return void console.warn('請設定預設viewport為：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />');var o=a.clientWidth;a.firstElementChild.appendChild(s),a.setAttribute("data-dpr",i),e.dpr=i,e.addEventListener("resize",function(){t()},!1),e.addEventListener("pageshow",function(e){e.persisted&&t()},!1),t()}(window),function(e,t){var i=[],n={add:function(){i.push({type:"add",args:arguments})},use:function(){i.push({type:"use",args:arguments})},ready:function(){var e=t.KISSY;e&&e.each(i,function(t){e[t.type].apply(null,t.args)})}};t.GL=n}(document,window);

1.2.6 單位（vw）

以視口的寬度大小為標準，分為100份，而1vw則代表1/100的視口寬頻大小。

h1 {
    font-size: 8vw;
}
/* 如果視口的寬度是200mm，那麼上述程式碼中h1元素的字號將為16mm，即(8x200)/100 */

1.2.7 單位（vh）

單位vh的用法與單位vw類似，但vh適用於高度

1.2.7 關鍵字

這一種指定的方法比較特別，也最推薦使用，這裡把字型得大小指定為

xx-small
x-small
small（最常用，約12px，後一層比前一層大約20%）
medium（約14px）
large
x-large
xx-large

body {
    font-size:small;
}
h1 {
    font-size:1.5em;
}
/*
這種定義是最常用的，最推薦的
*/

1.3 字型的粗細以及風格

1.3.1 字型得粗細（font-weight）

字型的粗細可以使用font-weight表示，可以定義關鍵字：

lighter
normal
bold
boler

通常只用 normal 和 bold，當然也可以設定數值100~900（只能是100的倍數）

body {
    font-weight:normal;
}

1.3.2 字型的風格（font-style）

這裡風格的意思其實就是：是否為斜體（有區分斜體**italic還是傾斜**oblique，不過不重要）

body {
    font-style:italic;
}

1.4 文字的裝飾（text-decoration）

文字裝飾允許你為文字增加一些裝飾性的效果，如下劃線、上劃線和刪除線，只需使用text-decoration

/* 刪除線 */
em {
    text-decoration:line-through;
}
/* 上劃線 */
em {
    text-decoration:overline;
}
/* 下劃線 正常來講文字是不會使用字型下劃線的以防被認為是連結，通常會使用邊框 “border-bottom” */
em {
    text-decoration:underline;
}
/* 下劃線與上劃線,只需用空格連線 */
em {
    text-decoration:overline underline;
}
/* 最後就是取消裝飾，例如對<a>元素的連結取消下劃線 */
a {。
    text-decoration:none;
}

2文字屬性

2.1 文字縮排（text-indent）

text-indent 屬性可以定義——所有元素的第一行縮排的給定長度值，這個值甚至可以為負值，屬性本身可繼承。
當屬性值為百分數時，其相對物件為父類塊元素的寬度。

body {
    text-indent:4em;
}

2.2 文字水平對齊（text-align）

text-align 屬性不僅作用於文字，它可以對塊元素中的所有內聯元素內容對齊，text-align 屬性只應用於塊級元素，所以說在內聯元素如<img>是不起作用的，得把它包圍在塊元素中，後到塊元素上設定text-align 屬性。
屬性值有四個，除了左右中三個之外，還有一個justify 屬性值。justify 屬性值作用是兩端文字對齊。

body {
    text-align:justify;
}

2.3 文字垂直對齊（vertical-align）

vertical-align 屬性只能應用於內聯元素和替換元素（如影象和表單元素），不能繼承。
關鍵字屬性值有：

baseline ：基線對齊，如果元素沒有基線（影象或表單），則該元素地段與父元素基線對齊。
sub ：下標，具體距離由瀏覽器決定
super ：上標，具體距離由瀏覽器決定
bottom ：底端對齊，元素行內框底端與行框底端對齊
top ：頂端對齊，注意是行內框與行框
middle ：居中對齊，接近但不是中點對齊，對齊目標是父元素的基線上方0.25處

2.4 行高（line-height）

line-height屬性允許定義文字行高（注意不是行距）

body {
    line-height:20%
}
/*
0.2倍行高
*/

上述值得注意的是20%，代表的到底是誰的0.2倍？
其實只要沒有設定過數值的元素都是繼承父類元素的。比如來講，當前元素的字型大小屬性是從<body>元素繼承的，而<body>預設字型為small,那麼設定的行距就可以算出來了。
而問題又出來了，假如當前元素下有類如<h1>,<h2>這些元素又怎麼辦呢？
因為設定的行距是基於small字型大小的，那麼這些元素定然會靠得很近，所以這裡就可以直接給line-height賦予數值，這樣的意義是基於當前元素字型大小的倍數，如：

body {
    line-height:1.5;
}
/*
直接賦予數值
*/

一旦給定了內容行已經生成的所有行內框，下來再行框的構造中就會考慮這些行內框。（行內框與行框不是同一種東西）

2.5 字間距（word-spacing）

word-spacing 屬性定義字間距，“字”是任何非空白字元組成的字串。

    body {
    word-spacing:0.2em;
}

2.6 字母間距（letter-spacing）

字母間距使用lettr-spacing來定義

    body {
    letter-spacing:1em;
}

字型屬性簡寫形式：

body {
font:font-style font-weight font-variant font-size/line-height font-family
}
/*
注意斜槓號，不分順序，除字型大小必須填寫外，其它可選，font-family候選時要使用逗號
font屬性屬於簡寫屬性，因此每次定義都會覆蓋先前給定的元素指定值
*/

2.7 `word-break`，`word-wrap`以及`white-space`

關於字元轉行，需要了解以上三個屬性。

word-break，使其容器如<div>的內容自動換行，屬性值有三個分別是：normal（使用瀏覽器預設規則），break-all（允許在單詞內換行）以及keep-all（只能在半形空格或連字元處換行）
word-wrap，使其容器如<div>的內容自動換行，屬性值有兩個分別是：normal（使用瀏覽器預設規則），break-word（允許長單詞留到下一行，前提是留到下一行時，容器能裝得下，否則還是要換行）
white-space，詳情可看這裡，的屬性值：
- normal：不保留書寫形式換行，忽略空白符
- nowrap：合併空白符序列，不保留書寫形式換行，定義文字不換行，直到遇到 <br> 標籤為止
- pre：保留空白符與書寫形式換行，段落不會自動換行
- pre-wrap：保留空白符序列，保留書寫形式換行，段落會自動換行
- pre-line：合併空白符序列，保留書寫形式換行，段落會自動換行

3 顏色

CSS提供了幾種指定顏色的方法，如：

指定顏色名
通過百分比指定紅綠藍各自的值
通過數值（0~255）指定紅綠藍各自的值
通過使用十六進位制（hex）指定紅綠藍各自的值（前面要加#號）

十六進位制是制定Web顏色最為常用的方法，不過所有這些指定顏色的方法最終目的都是告訴瀏覽器，這個顏色種紅、綠、藍分量分別是多少。

/* 百分比 255*80%,40%255,0 */
body {
    color:rgb(80%,40%,0%);
}
/* 數值 */
body {
    color:rgb(204,102,0);
}
/* 十六進位制 12*16+12,6*16+6,0 */
body {
    color:#cc6600;
}
/* 十六進位制顏色有簡寫，如上述可寫成：#c60 */

color屬性實際上控制著一個元素的前景色，所以它會控制文字和邊框的顏色，所以當文字與邊框顏色衝突時，可以使用border-color屬性指定邊框顏色