CSS學習筆記——顏色、長度、文字樣式——day three
目錄
一、顏色
顏色的表現形式主要有三種方式：顏色名稱、十六進位制程式碼和十進位制程式碼。
顏色名稱
HTML4 時只有 16 種，列子如下。現在W3C提供了更多顏色名稱表。
十進位制
表示方法比較多樣化，有四種方案：
十六進位制
#000000六位相同可以省略三位#000，六位兩兩相鄰相同可以省略相同位，如#ff00cc可寫成#f0c;
二、度量單位
CSS 中長度單位又分為絕對長度和相對長度。
絕對長度
絕對長度指的是現實世界的度量單位，CSS 支援五種絕對長度單位。
相對長度
相對長度指的是依託其他型別的單位，也是五種。
常用單位用法
1、em
em 最初是指字母M的寬度，故名em。是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。em的值並不是固定的，會繼承父級元素的字型大小。
2、px
畫素（Pixel）。相對長度單位。px 是相對於顯示器螢幕解析度而言的。擁有絕對的特性，用的時候其實就是絕對單位。長度固定。
3、%
百分比
font-size: 200%;
width: 50%;
width決定它所在區塊的寬度。而 font-size 則是繼承到的原始大小的百分比。
4.CSS3長度單位 rem
也稱為（根em），目前主流 的現代瀏覽器都很穩定的支援。它和 em、百分比不同的是，它不是與父元素掛鉤，而是相 對於根元素<html>的文字大小來計算的，這樣能更好的統一整體頁面的風格。網頁預設字型大小是16px.
以下是em方式控制字型大小，它每一個都和父元素掛鉤。
/*首先，來一段HTML */
<h1>標題<em>小標題</em></h1>
<p>我是一個段落，我是一段<code>程式碼</code></p>
/*其次來一段 CSS*/
html { font-size: 62.5%; }
h1 { font-size: 3em; }
p { font-size: 1.4em; }code{font-size:1.1rem;} 改變html文字的大小，code等標籤裡面運用了rem單位的文字的大小也會等比例改變。
三、文字樣式
字型
① font-size字型大小
最常用：數字+px 使用 CSS 畫素長度設定字型大小。
smaller、larger、數字+% 設定字型相對於父元素字型的大小。
還有其它的方式，用的比較少，可以去W3C查詢。
② font-style 傾斜
normal 表示讓傾斜狀態恢復到正常狀態。
italic 表示使用斜體。
oblique 表示讓文字傾斜。區別在沒有斜體時使用。
③ font-weight 加粗
④ font-family 字型名稱
p { font-family: 楷體,微軟雅黑,宋體; }
使用這種方法使用備用字型，相容不同瀏覽器。
⑤ font 字型樣式組合簡寫形式
font: 50px 楷體;
中間用空格隔開。
⑥ @font-face 設定Web字型
伺服器端字型，提供本地沒有這種字型的使用者下載。
@font-face {
/*至少包含兩個屬性*/
font-family: abc;
/*自己命名的字型名稱*/
src: url('BrushScriptStd.otf');
/*下載儲存到本地的地址*/
}
p {
font-size: 50px;
font-family: abc;
}CSS文字樣式
每一個樣式的具體屬性值可用W3C查詢對應的使用方式。下面三個為最常用的文字樣式。
① text-decoration
a { text-decoration: none; }
讓本來有下劃線的超連結取消下劃線。
② text-transform
p { text-transform: uppercase; }
設定英文文字轉換為大小寫。
③ text-shadow
p { text-shadow : 5px 5px 3px black; }
給文字新增陰影。
第一個值：水平偏移；
第二個值：垂直偏移；
第 三個值：陰影模糊度（可選）；
第四個值：陰影顏色（可選）。
多重陰影疊加
text-shadow:0px 0px 0 rgb(188,178,188),
1px 0px 0 rgb(173,163,173),
2px 0px 0 rgb(157,147,157),
3px 0px 0 rgb(142,132,142)；
CSS3文字樣式
1.文字裁剪
text-overflow W3C查詢每個屬性在瀏覽器的支援度，決定帶不帶字首。
控制文字的溢位部分，它的作用是對溢位的部分 裁剪掉，然後判定是否新增省略號。
clip 預設值，裁剪文字時不新增“...”省略號
ellipsis 裁剪文字時新增“...”省略號
必須不換行和使用 overflow 控制溢位
p {
width: 160px;
white-space: nowrap;/*不能換行*/
background: silver;
/*text-overflow: clip;*/
text-overflow: ellipsis;
overflow: hidden;/*控制溢位*/
}
2.文字描邊
text-stroke、text-stroke-width、text-stroke-color。
目前只有 webkit 引擎的瀏覽器支援，並且必須加上-webkit-字首才能有效。
修改描邊的顏色和厚度
p {
font-size: 50px;
-webkit-text-stroke:1px red;
-webkit-text-stroke-color: orange;
-webkit-text-stroke-width: 2px;
}
3.文字填充
text-fill-color，感覺和 color 屬性很像。其 實在配合其他屬性才能達到不一樣的效果。
文字方位
每一個屬性還有很多值，這裡例舉常用的，具體查詢W3C。
① text-align
p { text-align: center; }
指定文字的對齊方式。其中兩端對齊的意思是兩端儘可能填充，與左右邊框無縫隙，但中間字型間隙可能適度會改變。
② white-space
p { white-space: nowrap; }
處理空白排版方式。自己敲了很多空格鍵，但是顯示出來的文字會把它壓縮掉，沒有自己敲的空白長。還有其他屬性，如保留空白符，遇到換行符換行，具體就像編輯微信朋友圈時實現效果和發出來的效果之間的差距。
③ letter-spacing
p { letter-spacing: 4px; }
設定文字之間的間距。兩個漢字間。
④ word-spacing
p { word-spacing: 14px; }
設定英文單詞之間的間距。
⑤ line-height
p { line-height: 200%; }
設定段落行高。兩行之間的距離。
⑥ word-wrap
p { word-wrap: break-word; }
讓過長的英文單詞斷開。
⑦ text-indent
p { text-indent: 20px; }
設定文字首行的縮排。