第六章css樣式表基礎ppt教程_0基礎如何自學html和css

Ⅰ CSS樣式的主要特點及其類型

CSS(Cascading Stylesheets，層疊樣式表)是一種製作網頁的新技術，現在已經為大多數的瀏覽器所支持，成為網頁設計必不可少的工具之一。
層疊樣式表的特點

且不說過去的網頁缺少動感，就是在網頁內容的排版布局上也有很多困難，如果不是專業人員或特別有耐心的人，很難讓網頁按自己的構思和創意來顯示信息。即便是掌握了HTML語言精髓的人也要通過多次地測試，才能駕馭好這些信息的排版，過程十分漫長和痛苦。為了Internet的發展，讓更多人早日踏足這個多姿多彩的世界，新的HTML輔助工具呼之欲出。

樣式表就是在這種需求下誕生的，它首先要做的是為網頁上的元素精確地定位，可以讓網頁設計者象導演一樣，輕易地控制由文字、圖片組成的演員們，在網頁這個舞台上按劇本要求好好地表演。

其次，它把網頁上的內容結構和格式控制相分離。瀏覽者想要看的是網頁上的內容結構，而為了讓瀏覽者更好地看到這些信息，就要通過格式控制來幫忙了。以前兩者在網頁上的分布是交錯結合的，查看修改很不方便，而現在把兩者分開就會大大方便網頁的設計者。內容結構和格式控制相分離，使得網頁可以光由內容構成，而將所有網頁的格式控制指向某個CSS樣式表文件。這樣一來的好出表現在兩個方面:

第一，簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量(因為重復設置的格式將被只保存一次)。

第二，只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。避免了一個一個網頁的修改，大大減少了重復勞動的工作量，當你面對的是有數百個網頁的站點時，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開頭。

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

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

Ⅱ CSS樣式表怎麼做

1、創建使用css樣式表有三種，分別是外部樣式表，內部樣式表和內聯樣式。下面通過一個小demo演示它們的用法，首先新建一個html文件，放入3個button按鈕，給前兩個按鈕分別設置class屬性為btn1和btn2：

Ⅲ 關於CSS的基礎，我不會理解。。希望來高手簡單化下~

第一句。應該是多個不同的頁面都可以連接一個相同的css文件。<link href="layout.css" rel="stylesheet" type="text/css" /> 修改一個css就可以改變所有連接這個css文件的頁面。。第二句。在同一個html網頁中，可以同時連接幾個不同css文件。。比如定義文件基本屬性的css。比如boby的背景，字體，字體大小一類。。還有定義表格屬性的css。。（只是舉例，不一定要這樣定義的）。

Ⅳ 如何提高頁面設計如何能自如的運用CSS樣式表

CSS之入門篇——推薦新手

關於CSS樣式表

一.在學習css之前你應該掌握哪些基礎知識

1.什麼是網頁，什麼是超文本語言（html）。
2.會使用Dreamweaver等常用的網頁編輯器。

Dreamweaver是現今最好的網站編輯工具之一，而Dreamweaver8增加的對CSS的支持更是你容易得來使用CSS，用它來給製作網頁的CSS樣式表會更簡單、更方便。本教程教你如何利用Dreamweaver8在頁面中加入CSS，你不用死記硬背的記代碼標記，也不用去看很厚的CSS手冊，你就可以輕松自如的在網頁中運用CSS。不過首先你要對CSS有一定的了解。因此，本教程的前面4章為CSS理論知識，主要是對CSS的全面介紹，希望讀者看後對CSS的語法、結構、應用有一個全面的了解；後面4章為DW實戰，主要是教你如何利用Dreamweaver8靈活運用CSS在網頁中。閱讀此文前，你需要對HTML有一定的了解，並會使用Dreamweaver。

二.認識CSS

CSS就是Cascading Style Sheets，中文翻譯為「層疊樣式表」，簡稱樣式表，它是一種製作網頁的新技術。

網頁設計最初是用HTML標記來定義頁面文檔及格式，例如標題<h1>、段落<p>、表格<table>、鏈接<a>等，但這些標記不能滿足更多的文檔樣式需求，為了解決這個問題，在1997年W3C(The World Wide Web Consortium)頒布HTML4標準的同時也公布了有關樣式表的第一個標准CSS1, 自CSS1的版本之後，又在1998年5月發布了CSS2版本，樣式表得到了更多的充實。W3C把DHTML(Dynamic HTML)分為三個部分來實現：腳本語言(包括JavaScript、Vbscript等)、支持動態效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。

注意：CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持，有些效果需要更高版本的瀏覽器支持。

三.怎樣使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定義文字字體、顏色、大小等屬性的時候，查看一下代碼你會發現有這樣的一部分在head區域：

<style type="text/css">

</style>

那麼恭喜你，你已經使用了CSS設計網頁。
那麼除了這種調用CSS的方法外，還有別的嗎？回答是「當然有了」，下面是系統介紹

標記加註法(in-line)：
如果只有一個HTML標記需要設定樣式，則可在該標記內，加上屬性

style=" "

以個別修訂樣式。

頁面內嵌法：

<style type="text/css">  </style>

外部調用法：

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

雙表法調用樣式表：

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">@import url( css/style01.css );</style>

1. 基本語法

CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。
基本格式如下：

selector {property: value}

（選擇符 {屬性：值}）
選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：

body {color: black}

選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。

如果屬性的值是多個單片語成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合：

p {font-family: "sans serif"}

（定義段落字體為sans serif）

如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開：

p {text-align: center; color: red}

（段落居中排列；並且段落中的文字為紅色）

為了使你定義的樣式表方便閱讀，你可以採用分行的書寫格式：

p
{
text-align: center;
color: black;
font-family: arial
}

（段落排列居中，段落中文字為黑色，字體是arial）

2. 選擇符組

你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義：

h1, h2, h3, h4, h5, h6 { color: green }

（這個組里包括所有的標題元素，每個標題元素的文字都為綠色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸為9號字）

效果完全等效於：

p { font-size: 9pt }
table { font-size: 9pt }

3. 類選擇符

用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類：

p.right {text-align: right}
p.center {text-align: center}

然後用不在不同的段落里，只要在HTML標記里加入你定義的class參數：

<p class="right"> 這個段落向右對齊的
</p>

<p class="center">
這個段落是居中排列的
</p>

<p class="right"> 這個段落向右對齊的
</p>

<p class="center">
這個段落是居中排列的
</p>

注意：類的名稱可以是任意英文單詞或以英文開頭與數字的組合，一般以其功能和效果簡要命名。

類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式：

.center {text-align: center}

（定義.center的類選擇符為文字居中排列）
這樣的類可以被應用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為「center」類，這使兩個元素的樣式都跟隨「.center」這個類選擇符：

<h1 class="center">
這個標題是居中排列的
</h1>
<p class="center">
這個段落也是居中排列的
</p>

注意：這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。

4. ID選擇符

在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：

<p id="intro">
這個段落向右對齊
</p>

定義ID選擇符要在ID名稱前加上一個「#」號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素：

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

（字體尺寸為默認尺寸的110%；粗體；藍色；背景顏色透明）
下面這個例子，ID屬性只匹配id="intro"的段落元素：

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。

5. 包含選擇符

可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，例如：

table a
{
font-size: 12px
}

在表格內的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。

6. 樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記：
div { color: red; font-size:9pt}
……
<div>
<p>
這個段落的文字為紅色9號字
</p>
</div>

（P元素里的內容會繼承DIV定義的屬性）
注意：有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。

另外，當樣式表繼承遇到沖突時，總是以最後定義的樣式為准。如果上例中定義了P的顏色：

div { color: red; font-size:9pt}
p {color: blue}
……
<div>
<p>
這個段落的文字為藍色9號字
</p>
</div>

我們可以看到段落里的文字大小為9號字是繼承div屬性的，而color屬性則依照最後定義的。

不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先順序。ID選擇符，類選擇符和HTML標記選擇符，因為ID選擇符是最後加上元素上的，所以優先順序最高，其次是類選擇符。如果想超越這三者之間的關系，可以用!important提升樣式表的優先權，例如：

p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}

我們同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。

7. 注釋

你可以在CSS中插入注釋來說明你代碼的意思，注釋有利於你或別人以後編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開頭，以"*/" 結尾，如下：

/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

前面我們了解了CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別並調用。當瀏覽器讀取樣式表時，要依照文本格式來讀，這里介紹四種在頁面中插入樣式表的方法：[u]鏈入外部樣式表[/u]、[u]內部樣式表[/u]、[u]導入外表樣式表[/u]和[u]內嵌樣式[/u]。

1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存為一個樣式表文件，然後在頁面中用<link>標記鏈接到這個樣式表文件，這個<link>標記必須放到頁面的<head>區內，如下：

<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>

上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=」stylesheet」是指在頁面中使用這個外部的樣式表。type=」text/css」是指文件的類型是樣式表文本。href=」mystyle.css」是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設備，盲文閱讀設備等。

一個外部樣式表文件可以應用於多個頁面。當你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在製作大量相同樣式頁面的網站時，非常有用，不僅減少了重復的工作量，而且有利於以後的修改、編輯，瀏覽時也減少了重復下載代碼。

樣式表文件可以用任何文本編輯器（例如：記事本）打開並編輯，一般樣式表文件擴展名為.css。內容是定義的樣式表，不包含HTML標記，mystyle.css這個文件的內容如下：

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/*定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件*/

2. 內部樣式表

內部樣式表是把樣式表放到頁面的<head>區里，這些定義的樣式就應用到頁面中了，樣式表是用<style>標記插入的，從下例中可以看出<style>標記的用法：

<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>

注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記里的內容，並把style標記里的內容以文本直接顯示到頁面上。為了避免這樣的情況發生，我們用加HTML注釋的方式（）隱藏內容而不讓它顯示：

<head>
……
<style type="text/css">

</style>
……
</head>

3. 導入外部樣式表

導入外部樣式表是指在內部樣式表的<style>里導入一個外部樣式表，導入時用@import，看下面這個實例：

<head>
……
<style type=」text/css」>

</style>
……
</head>

例中@import 「mystyle.css」表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導入外部樣式表輸入方式更有優勢。實質上它相當於存在內部樣式表中的。
注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。

4. 內嵌樣式

內嵌樣式是混合在HTML標記里使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記里加入style參數。而style參數的內容就是CSS的屬性和值，如下例：

<p style="color: sienna;margin-left: 20px;">
這是一個段落
</p>


在style參數後面的引號里的內容相當於在樣式表大括弧里的內容。
注意：style參數可以應用於任意BODY內的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

5. 多重樣式表的疊加

上一章里我們已經提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到沖突的地方會以最後定義的為准。例如，我們首先鏈入一個外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性：

h3
{
color: red;
text-align: left;
font-size: 8pt;
}
/*標題3的文字顏色為紅色；向左對齊；文字尺寸為8號字*/

然後在內部樣式表裡也定義了h3選擇符的text-align和font-size屬性：

h3
{
text-align: right;
font-size: 20pt;
}
/*標題3文字向右對齊；尺寸為20號字*/

那麼這個頁面疊加後的樣式就是：

color: red;
text-align: right;
font-size: 20pt;
/*文字顏色為紅色；向右對齊；尺寸為20號字*/

字體顏色從外部樣式表裡保留下來，而對齊方式和字體尺寸都有定義時，按照後定義的優先而依照內部樣式表。

注意：依照後定義的優先，所以優先順序最高的是[s]內嵌樣式[/s]，[s]內部樣式表[/s]高於[s]導入外部樣式表[/s]，[s]鏈入的外部樣式表[/s]和[s]內部樣式表[/s]之間是最後定義的優先順序高。

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">@import url( css/style01.css );</style>

————————————————————————————————————————————

1. 基本語法

CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。
基本格式如下：

selector {property: value}

（選擇符 {屬性：值}）
選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：

body {color: black}

選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。
如果屬性的值是多個單片語成，必須在值上加引號，比如字體的名稱經常是幾個單詞的組合：

p {font-family: "sans serif"}

（定義段落字體為sans serif）

如果需要對一個選擇符指定多個屬性時，我們使用分號將所有的屬性和值分開：

p {text-align: center; color: red}

（段落居中排列；並且段落中的文字為紅色）

為了使你定義的樣式表方便閱讀，你可以採用分行的書寫格式：

p
{
text-align: center;
color: black;
font-family: arial
}

（段落排列居中，段落中文字為黑色，字體是arial）

2. 選擇符組

你可以把相同屬性和值的選擇符組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重復定義：

h1, h2, h3, h4, h5, h6 { color: green }

（這個組里包括所有的標題元素，每個標題元素的文字都為綠色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸為9號字）

效果完全等效於：

p { font-size: 9pt }
table { font-size: 9pt }

3. 類選擇符

用類選擇符你能夠把相同的元素分類定義不同的樣式，定義類選擇符時，在自定類的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類：

p.right {text-align: right}
p.center {text-align: center}

然後用不在不同的段落里，只要在HTML標記里加入你定義的class參數：

<p class="right"> 這個段落向右對齊的
</p>

<p class="center">
這個段落是居中排列的
</p>

<p class="right"> 這個段落向右對齊的
</p>

<p class="center">
這個段落是居中排列的
</p>

注意：類的名稱可以是任意英文單詞或以英文開頭與數字的組合，一般以其功能和效果簡要命名。

類選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式：

.center {text-align: center}

（定義.center的類選擇符為文字居中排列）
這樣的類可以被應用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為「center」類，這使兩個元素的樣式都跟隨「.center」這個類選擇符：

<h1 class="center">
這個標題是居中排列的
</h1>
<p class="center">
這個段落也是居中排列的
</p>

注意：這種省略HTML標記的類選擇符是我們經後最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預先定義好的類樣式。

4. ID選擇符

在HTML頁面中ID參數指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。
ID選擇符的應用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代：

<p id="intro">
這個段落向右對齊
</p>

定義ID選擇符要在ID名稱前加上一個「#」號。和類選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個例子，ID屬性將匹配所有id="intro"的元素：

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

（字體尺寸為默認尺寸的110%；粗體；藍色；背景顏色透明）
下面這個例子，ID屬性只匹配id="intro"的段落元素：

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

注意：ID選擇符局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。

5. 包含選擇符

可以單獨對某種元素包含關系定義的樣式表，元素1里包含元素2，這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義，例如：

table a
{
font-size: 12px
}

在表格內的鏈接改變了樣式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。

6. 樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標記中嵌套P標記：
div { color: red; font-size:9pt}
……
<div>
<p>
這個段落的文字為紅色9號字
</p>
</div>

（P元素里的內容會繼承DIV定義的屬性）
注意：有些情況下內部選擇符不繼承周圍選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會繼承的，直覺上，一個段落不會同文檔BODY一樣的上邊界值。

另外，當樣式表繼承遇到沖突時，總是以最後定義的樣式為准。如果上例中定義了P的顏色：

div { color: red; font-size:9pt}
p {color: blue}
……
<div>
<p>
這個段落的文字為藍色9號字
</p>
</div>

我們可以看到段落里的文字大小為9號字是繼承div屬性的，而color屬性則依照最後定義的。

不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先順序。ID選擇符，類選擇符和HTML標記選擇符，因為ID選擇符是最後加上元素上的，所以優先順序最高，其次是類選擇符。如果想超越這三者之間的關系，可以用!important提升樣式表的優先權，例如：

p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}

我們同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優先權最高的ID選擇符為黃色文字。

7. 注釋

你可以在CSS中插入注釋來說明你代碼的意思，注釋有利於你或別人以後編輯和更改代碼時理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開頭，以"*/" 結尾，如下：

/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

樣式表文件可以用任何文本編輯器（例如：記事本）打開並編輯，一般樣式表文件擴展名為.css。內容是定義的樣式表，不包含HTML標記，mystyle.css這個文件的內容如下：

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/*定義水平線的顏色為土黃；段落左邊的空白邊距為20象素；頁面的背景圖片為images目錄下的back40.gif文件*/

/* 定義段落樣式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字為黑色 */
font-family: arial /* 字體為arial */
}

<p class="right"> 這個段落向右對齊的
</p>

<p class="center">
這個段落是居中排列的
</p>

Ⅳ 0基礎如何自學html和css

Web前端的學習誤區

網頁製作是計算機專業同學在大學期間都會接觸到的一門課程，而學習網頁製作所用的第一個集成開發環境(IDE)想必大多是Dreamweaver，這種所見即所得的「吊炸天」IDE為我們製作網頁帶來了極大的方便。

入門快、見效快讓我們在不知不覺中已經深深愛上了網頁製作。此時，很多人會陷入一個誤區，那就是既然藉助這么帥的IDE，通過滑鼠點擊菜單就可以快速方便地製作網頁。
那麼我們為什麼還要去學習HTML、CSS、JavaScrpt、jQuery等這些苦逼的代碼呢?這不是舍簡求繁嗎?
但是隨著學習的深入，就會發現我們步入了一種窘境——過分的依賴IDE導致我們不清楚其實現的本質，知其然但不知其所以然。
因此在頁面效果出現問題時，我們便手足無措，更不用提如何進行頁面優化以及完成一些更高級的應用了。其原因是顯而易見的——聰明的IDE成全了我們的惰性，使我們忽略了華麗的網頁背後最本質的內容——code。

正確的方向勝過無謂的努力

有兩只螞蟻想翻越一段牆，尋找牆那頭的食物。一隻螞蟻來到牆腳就毫不猶豫地向上爬去，可是每當它爬到大半時，就會由於勞累、疲倦而跌落下來。雖然它不氣餒，一次次跌下來，又迅速地調整一下自己，重新開始向上爬去
另一螞蟻觀察了一下，決定繞過牆去。很快，這只螞蟻繞過牆來到食物前，開始享受起來;而另一隻螞蟻還在不停地跌落下去又重新開始。

很多時候，成功除了勇氣、堅持不懈外，更需要方向。也許有了一個好的方向，成功來得比想像的更快。如果在錯誤的路上奔跑,再怎麼努力也是白搭。學習Web前端也是如此，首先應該選擇一個正確的學習路線。

導航:首頁 > 文件教程 > 第六章css樣式表基礎ppt教程

第六章css樣式表基礎ppt教程

與第六章css樣式表基礎ppt教程相關的資料

友情鏈接