1. 程式人生 > >CSS學習筆記——顏色、長度、文字樣式——day three

CSS學習筆記——顏色、長度、文字樣式——day three

目錄

一、顏色

顏色名稱 

十進位制

十六進位制

二、度量單位

絕對長度

相對長度

常用單位用法

三、文字樣式

字型

CSS文字樣式

CSS3文字樣式

1.文字裁剪

2.文字描邊

3.文字填充

文字方位


一、顏色

顏色的表現形式主要有三種方式:顏色名稱、十六進位制程式碼和十進位制程式碼。

顏色名稱 

       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; }

設定文字首行的縮排。