CSS的使用方法

我們為網頁新增樣式表的方法有四種。

1．最簡單的方法是直接新增在html的識別符號（tag）裡：

< tag style=」properties」>網頁內容< /tag>

舉個例子：

< p style=」color: blue; font-size: 10pt」>css例項< /p>

**說明：

用藍色顯示字型大小為10pt的「css例項」。儘管使用簡單、顯示直觀，但是這種方法不怎麼常用，因為這樣新增無法完全發揮樣式表的優勢「內容結構和格式控制分別儲存」。

2．新增在html的頭資訊識別符號< head>裡：

< head>

< style type=」text/css」>

< !-- 樣式表的具體內容 -->

< /style>

< /head>

type=」text/css」表示樣式表採用mime型別，幫助不支援css的瀏覽器過濾掉css**，避免在瀏覽器面前直接以源**的方式顯示我們設定的樣式表。但為了保證上述情況一定不要發生，還是有必要在樣式表裡加上注釋識別符號「< !--注釋內容-->」。

3．鏈結樣式表

同樣是新增在html的頭資訊識別符號< head>裡：

< head>

< link rel=」stylesheet」 href=」*.css」 type=」text/css」 media=」screen」>

< /head>

*.css是單獨儲存的樣式表檔案，其中不能包含< style>識別符號，並且只能以css為字尾。

media是可選的屬性，表示使用樣式表的網頁將用什麼**輸出。取值範圍：

·screen（預設）：輸出到電腦螢幕

·print：輸出到印表機

·tv：輸出到電視機

·projection：輸出到投影儀

·aural：輸出到揚聲器

·braille：輸出到凸字觸覺感知裝置

·tty：輸出到電傳打字機

·all：輸出到以上所有裝置

如果要輸出到多種**，可以用逗號分隔取值表。

rel屬性表示樣式表將以何種方式與html文件結合。取值範圍：

·stylesheet：指定乙個外部的樣式表

·alternate stylesheet：指定使用乙個互動樣式表

4．聯合使用樣式表

同樣是新增在html的頭資訊識別符號< head>裡：

< head>

< style type=」text/css」>

< !--

@import 「*.css」

其他樣式表的宣告

-->

< /style>

< /head>

以@import開頭的聯合樣式表輸入方法和鏈結樣式表的方法很相似，但聯合樣式表輸入方式更有優勢。因為聯合法可以在鏈結外部樣式表的同時，針對該網頁的具體情況，做出別的網頁不需要的樣式規則。

需要注意的是：

·聯合法輸入樣式表必須以@import開頭。

·如果同時輸入多個樣式表有衝突的時候，將按照第乙個輸入的樣式表對網頁排版。

·如果輸入的樣式表和網頁裡的樣式規則衝突時，使用外部的樣式表。

七．控制文字的樣式

控制文字的樣式包括文字大小寫、文字修飾兩個部分。

1．文字大小寫

文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫，而可以在輸入完畢後，再根據需要對區域性的文字設定大小寫。

基本格式如下：

text-transform: 引數

引數取值範圍：

·uppercase：所有文字大寫顯示

·lowercase：所有文字小寫顯示

·capitalize：每個單詞的頭字母大寫顯示

·none：不繼承母體的文字變形引數

注意：繼承是指html的識別符號對於包含自己的識別符號的引數會繼承下來。

2．文字修飾

文字修飾的主要用途是改變瀏覽器顯示文字鏈結時的下劃線。

基本格式如下：

text-decoration: 引數

引數取值範圍：

·underline：為文字加下劃線

·overline：為文字加上劃線

·line-through：為文字加刪除線

·blink：使文字閃爍

·none：不顯示上述任何效果

八．控制文字的樣式

控制文字的樣式包括單詞距離、字母距離、文字行距、文字水平對齊、文字垂直對齊文字縮排六個部分。

1．單詞間距

單詞間距指的是英文每個單詞之間的距離，不包括中文文字。

基本格式如下：

word-spacing: 間隔距離

間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

2．字母間距

字母間距是指英文本母之間的距離，功能、用法，以及引數的設定和單詞間距很相似。

基本格式如下：

letter-spacing: 字母間距

3．行距

行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是計算機所認為的該行的基準線。

基本格式如下：

line-height: 行間距離

行間距離取值：

·不帶單位的數字：以1為基數，相當於比例關係的100%

·帶長度單位的數字：以具體的單位為準

·比例關係

注意：如果文字字型很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。

4．文字水平對齊

文字水平對齊可以控制文字的水平對齊，而且並不僅僅指文字內容，也包括設定、影像資料的對齊方式。

基本格式如下：

text-align: 引數

引數的取值：

·left：左對齊

·right：右對齊

·center：居中對齊

·justify：相對左右對齊

但需要注意的是，text-alight是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

5．文字垂直對齊

文字的垂直對齊應當是相對於文字母體的位置而言的，不是指文字在網頁裡垂直對齊。比如說，**的單元格裡有一段文字，那麼對這段文字設定垂直居中就是針對單元格來衡量的，也就是說，文字將在單元格的正中顯示，而不是整個網頁的正中。

基本格式如下：

vertical-align: 引數

引數取值：

·top：頂對齊

·bottom：底對齊

·text-top：相對文字頂對齊

·text-bottom：相對文字底對齊

·baseline：基準線對齊

·middle：中心對齊

·sub：以下標的形式顯示

·super：以上標的形式顯示

6．文字縮排

文字縮排可以使文字在相對預設值較窄的區域裡顯示，主要用於中文板式的首行縮排，或是為大段的引用文字和備註做成縮排的格式。

基本格式如下：

text-indent: 縮排距離

縮排距離取值：

·帶長度單位的數字

·比例關係

但是需要注意的是，在使用比例關係的時候，有人會認為瀏覽器預設的比例是相對段落的寬度而言的，其實事實並非如此，整個瀏覽器的視窗才是瀏覽器所預設的參照物。

另外，text-indent是塊級屬性，只能用於< p>、< blockquqte>、< ul>、< h1>~< h6>等識別符號裡。

CSS的使用方法

css使用方法

Css 變數使用方法

CSS定位使用方法

CSS的使用方法

css使用方法

Css 變數使用方法

CSS定位使用方法

相關推薦