網頁設計層疊樣式表_1HTML語言和CSS樣式表在網頁設計中有很重要作用它們各自解決的技術問

1、1.HTML語言和CSS樣式表在網頁設計中有很重要作用，它們各自解決的技術問

網頁現在的新標準是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是網頁的結構，CSS是網頁的樣式，javascript是行為。結構就是蓋房子先要把結構建出來，然後用CSS來裝飾。其實你在用dreamweaver做網頁時就已經用到了CSS，比如你用DW的屬性面板來設置一個字的字體、顏色和大小，當你選好後，就會自動生成一個.style1的紅色代碼，在<style></style>之間不知道你注意過沒有，這就是CSS,這樣講的話你應該能理解html和CSS的區別了吧。CSS的名稱就叫「層疊樣式表」,從字面也就能理解了。

2、網頁設計中採用div+css布局，這里的DIV是什麼意思？

DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。
DIV在編程中又叫做整除，即只得商的整數。 DIV元素是用來為HTML（標准通用標記語言下的一個應用）文檔內大塊（block-level）的內容提供結構和背景的元素。

3、網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

2、下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對於新手這個功能具有可視化，能更好的製作網頁。

3、下面我們來製作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。

4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件，並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。

5、下面我們來製作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示範。

6、下面學習添加文本。編輯「籃球資訊網」，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。

7、網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。

8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。

9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

(3)網頁設計層疊樣式表擴展資料：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。

4、網頁製作中的CSS樣式是什麼？為什麼要學CSS？

上海傲孚網站建設為您解答：簡單地講，CSS樣式全稱為Cascading Style Sheets，中文翻譯為「層疊樣式表」，簡稱樣式表有被我們稱為CSS樣式或認知的div css樣式，而CSS就是Cascading Style Sheets英文單詞開頭字母縮寫，CSS樣式是一種製作網頁樣式的新技術。
可以這樣理解CSS樣式只是一個名稱而已，就像自己名字為什麼叫張三李四一樣，從「CSS樣式」短語可以理解，去除「CSS」後，只剩「樣式」兩字，所以可以通俗理解「樣式」就有花樣、種類多樣、多種多樣、各式各樣等意思。顧名思義CSS樣式就是通過"CSS"代名詞後技術來製作開發多種多樣不同樣式、不同版面、版面區分、上下區分網頁的一種CSS技術。
在設計中使用 CSS 後，您將減少客戶需要下載的代碼的數量。僅僅減少某些頁面中的字體標簽就可以大大減少代碼的數量。在很多情況下，如果完全使用 CSS-P 進行設計，代碼的數量最多可以減少 50% 甚至更多。代碼減少就意味著頁面下載的速度加快。

5、網頁製作的階段

下面是網站製作的步驟：需要評估使用的功能規格；競爭的研究；發展的結版構（樹），網頁的內容和權演示；創建一個Web界面（也被稱為網頁設計）；用不同的編程語言的網站整合。主要的的HTML（標准通用標記語言下的一個應用），層疊樣式表（外語簡稱：CSS），JavaScript，PHP，ASP.NET；建立一個網站的內容管理系統（外語簡稱：CMS）；預訂和管理域名（網站地址，網站的訪問）；上線一個FTP伺服器，允許主辦的網站不斷地連接到互聯網上的Web伺服器上的網頁文件；創建一個網站可以委託給易雅網或自己製作。要自己建立一個網站，它可以使用網頁編輯器。

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

CSS之入門篇——推薦新手

關於CSS樣式表

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

1.什麼是網頁，什麼是超文本語言（）。
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>

7、在網頁製作學習中，經常會聽到CSS樣式。請問這個CSS樣式是什麼？作用？是哪幾個單詞的簡稱？

CSS是Cascading Style Sheets（層疊樣式表單）的簡稱，不過叫得最多的還是樣式表。
至於它有內什麼用呢，也就是說容它能夠更好的控制網頁元素的布局[比如說圖片/文字/表格/等的大小，距離，位置，間隔等]做到網頁設計軟體所無法做到的控制。
還有比如說你定義了一個樣式表，可以用它來控制N個採用了這個樣式表的網頁布局。
最後一個，代碼簡練。加快網頁瀏覽速度。

8、網頁製作是什麼意思呀!

網頁製作網頁實際是一個文件，他存放在世界某個角落的的某一台計算機中，而這台計算機必須是與互聯網相連的。網頁經由網址（ URL ）來識別與存取，當我們在瀏覽器輸入網址後，經過一段復雜而又快速的程序，網頁文件會被傳送到你的計算機，然後再通過瀏覽器解釋網頁的內容，再展示到你的眼前。要領一：確定網站主題做網站，首先必須要解決的就是網站內容問題，即確定網站的主題。美國《個人電腦》雜志(PC Magazine)評出了99年度排名前100位的全美知名網站的十類題材：第1類：網上求職；第2類：網上聊天/即時信息/ICQ；第3類：網上社區/討論/郵件列表；第4類：計算機技術；第5類：網頁/網站開發；第6類：娛樂網站；第7類：旅行；第8類：參考/資訊；第9類：家庭/教育；第10類：生活/時尚。我們可以參看上面的分類，繼續細分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解，做出自己的特色；二者，在製作網站時不會覺得無聊或者力不從心。興趣是製作網站的動力，沒有創作熱情，很難設計製作出優秀的作品。對於內容主題的選擇，要做到小而精，主題定位要小，內容要精。不要去試圖製作一個包羅萬象的站點，這往往會失去網站的特色，也會帶來高強度的勞動，給網站的及時更新帶來困難。記住：在互聯網上只有第一，沒有第二！要領二：選擇好域名域名是網站在互聯網上的名字。一個非產品推銷的純信息服務網站，其所有建設的價值，都凝結在其網站域名之上。失去這個域名，所有前期工作就將柯淇鍘?br> 目前，做個人網站的很多都依賴免費個人空間，其域名也是依賴免費域名指向，如網易的虛擬域名服務，其實這對個人網站的推廣與發展很為不利，不光是它「適時」開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網站，而且也妨礙了網頁的傳輸速度。所以，就我個人觀點來說，首先花點錢去注冊一個域名，獨立的域名就是個人網站的第一筆財富，要把域名起得形象、簡單、易記。要領三：掌握建網工具網路技術的發展帶動了軟體業的發展，所以用於製作Web頁面的工具軟體也越來越豐富。從最基本的HTML編輯器到現在非常流行的Flash互動網頁製作工具，各種各樣的Web頁面製作工具，下面是幾款具有代表性的網頁製作器：（1）HTML編輯器。雖然HTML代碼復雜，編輯和調試要花費大量的時間，但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果，仍受高級網頁製作人員的青睞。就目前來說，有眾多的編輯器供選擇，這些編輯器廣泛支持復雜頁面創建及高級HTML規范，使用較為普遍的有Hotdog等專業HTML編輯器。（2）所見即所得的網頁編輯器。其中以Microsoft Frontpage為代表，它具有如Word一樣的操作界面，熟知Word功能的操作者，只要稍加培訓就能輕松編制網頁。而且，Frontpage還能解析網頁的HTML源代碼，並提供了預覽支持。但Frontpage的一些特殊顯示功能並不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁製作人員使用的工具軟體。（3）現在非常流行的 Macromedia公司出品的Flash互動網頁製作工具。這是是一款功能非常強大的互動式矢量多媒體網頁製作工具。能夠輕松輸出各種各樣的動畫網頁，它不需要特別繁雜的操作，也比JAVA小巧精悍！但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash動畫中封裝Mp3音樂、填寫表單等；並且由於Flash編制的網頁文件比普通網頁文件要小得多，所以大大加快了瀏覽速度。這是一款十分適合動態Web製作的工具。另外，個人網站製作者還需了解W3C的HTML4.0規范、CSS層疊樣式表的基本知識、javascript、VBScript的基本知識。對於常用的一些腳本程序如ASP、CGI、PHP也要有適當了解，還要熟練使用圖形處理工具和動畫製作工具以及矢量繪圖工具，並能部分了解多種圖形圖像動畫工具的基本用法，熟練使用FTP工具以及擁有相應的軟硬體和網路知識也是必備的。當然，互聯網還是一個免費的資料庫。編制網頁需要多種多樣的按鈕、背景還有各種各樣圖形、圖片。如果這些都要靠自己完成，既浪費時間又浪費金錢，而且還需要強大的圖形、圖查看原帖>>

9、在網頁製作中怎樣引用CSS樣式？

共有4種引入cascading sheet style層疊樣式表方式： 1。<link href="路徑/文件名.css" rel="stylesheet" type="text/css"> 2。<style> a{text-align:center:...}</style>(一般放在</head>與</body>之間) 3。<style> @import url("路徑/文件名.css" );</style> (一般放在</head>與</body>之間,但比較少見，也少用) 4。直接在標簽後面加入style=""。比如<img src='' " style="width:xxxpx;.height:xxxpx;" />

求採納

10、什麼是CSS屬性（網頁製做方面）？

CSS是Cascading style Sheets的簡稱，中文譯作「層疊樣式表單」，我把它叫作「層疊樣式表」，我感到這樣順口一
點，沒別的意思。實際上它是一組樣式。你可能對CSS這個名詞比較陌生，實際上無論你用Internet Explorer還是
Netscape Navigator在網上沖浪，幾乎隨時都在與CSS打交道，在網上沒有使用過CSS的網頁可能不好找。不管你用什麼工
具軟體製作網頁，都有在有意無意地使用CSS。用好CSS能使你的網頁更加簡煉，為什麼同樣內容的網頁，有的人做出來有
幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經驗以及一些網友來信
提問的問題整理出來，供諸位參考。
1、CSS在網頁製作中一般有三種方式的用法，那麼具體在使用時該採用哪種用法？
當有多個網頁要用到的CSS，採用外連CSS文件的方式，這樣網頁的代碼大大減少，修改起來非常方便；只在單個網頁
中使用的CSS，採用文檔頭部方式；只有在一個網頁一、兩個地方才用到的CSS，採用行內插入方式。

2、CSS的三種用法在一個網頁中要以混用嗎？
三種用法可以混用，且不會造成混亂。這就是它為什麼稱之為「層疊樣式表」的原因，瀏覽器在顯示網頁時是這樣處
理的：先檢查有沒有行內插入式CSS，有就執行了，針對本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執行
了；在前兩者都沒有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執行優先順序是：行內插入式、頭部方
式、外連文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？
在Dreamweaver3中使用外連文件式CSS並沒有特殊要求，同樣是用記事本創建一個*.css文件，在網頁的<head>與
</head>之間加上一句這樣的代碼：<link rel="stylesheet" href="在這里填上你的CSS文件地址（相對路徑+文件
名）" type="text/css"> 就行了。

4、如何用Dreamweaver3快速創建CSS外連式文件？
對於一個初接觸CSS的網頁設計人員來講，要用記事之類的編輯器，去創建一個CSS外連式文件是相當困難的。由於
Dreamweaver3對CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作：
1）先在紙上寫好在網站的網頁中可能要用到的格名稱，然後在Dreamweaver3的編輯窗中調出CSS面板，一個一個地定
義，並在一個空白頁上適當地寫一點相關內容，邊定義邊試用，效果不滿意，立即修改；
2）全部定義好後，再用記事本創建一個空的CSS外連式文件，把在<head>與</head>之間的那段定義好的CSS復制
到CSS文件中去，就大功告成了。整個過程就是點滑鼠，方便吧？

5、在Dreamweaver3中採用行內插入式CSS要手動寫代碼嗎？
不用！先用CSS面板定義好要用的CSS，然後，在要插入CSS的標記插入：style=""，再把你剛才定義的CSS從<head>
後面拖到這個雙引號中來，把花括弧以外的部分刪去就行了。

6、在方檔頭部方式和外連文件方式的CSS中都有「」，好象沒什麼用，不要可以嗎？
這一對東東的作用是為了不引起低版本瀏覽器的錯誤。如果某個執行此頁面的瀏覽器不支持CSS，它將忽略其中的內
容。雖然現在使用不支持CSS瀏覽器的人已很少了，由於互聯網上幾乎什麼可能都會發生，所以還是留著為妙。

7、如何給一部分文字加背景色？
給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色
卻沒有相應的功能，我們可以先做一個定義背景色的CSS（如：bgstyle），在DW3中點幾下鼠就完成了。如一個定義淡黃色
背景的CSS是這樣的：
<style type="text/css">

</style>
在要用時選取那段文字，再在CSS面板上點一下「bgstyle」就行了。

8、如何給部分文字加背景圖像？
與加背景色操作類似，中是在背景在選擇載入圖象就是了，一個定義好的加背景圖象的CSS例子的代碼是這樣的：
<style type="text/css">

</style>
在要用時選取那段文字，再在CSS面板上點一下「imgbgstyle」就行了。

9、如何使頁面的背景在文字「滾動」時背景圖案靜止不動？
要使背景圖案不隨文字「滾動」的CSS是這樣的：
<style type="text/css">

</style>

10、如何定義字間距？
在DW3中CSS的屬性定義對話框（style Definition for .style1)的「Block」上的「letter spaceing」屬性定義的就
是字間距，它指的是每一個字元之間的額外間距，經長度為單位，正負值均可，當取負值時產生字元擠在一起的效果。下
面代碼是一個定義好的字間距CSS例子：
<style type="text/css">

</style>

11、如何給文字加上劃線、下劃線、刪除線和閃爍？
在DW3中CSS的屬性定義對話框(style Definition for .style1)的「Type」上的「decoration」屬性定義的就是這些
內容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用為好。下面是一個定義好上述效果的CSS例子：
<style type="text/css">

</style>
其中：「underline」是定義下劃線；「overline 」是定義上劃線；「 line-through」定義的是刪除線；「blink」
定義的是文字閃爍。

12、如何使網頁具有「首行縮進」功能？
由於DW3輸入空格不方便，利用「首行縮進」將彌補這個不足。在DW3中CSS的屬性定義對話框（style Definition
for .style1)的「Block」上的「text-indent」屬性定義的就是「首行縮進」，所謂「首行」是指每段內容的第一行，也
就是直接按回車鍵就形成了一個新的段落。縮進最好以「em」（字元）為單位，比如：漢字編排要求每段開始縮進兩個漢
字，設置好的CSS如下所示：
<style type="text/css">

</style>
在DW3要注意：在DW3中CSS的屬性定義對話框（style Definition for .style1)的「Block」上的「text-indent」右
面的縮進單位選擇框中「ems」指的就是「em」。

13、在用表格進行排版時，能使某一方向上的內容離開表格線一點嗎？
可以！在DW3中CSS的屬性定義對話框（style Definition for .style1)的「Box」上的「margin」定義的就是內容離
開邊緣的距離，分別可定義四個方向：「top」「bottom」「left」「right」。下面就是定義在左邊離開「10px」的CSS例
子代碼：
<style type="text/css">

</style>

14、能給某部分內容加邊框嗎？
用CSS可以給某部分內容加邊框，在DW3中CSS的屬性定義對話框（style Definition for .style1)的「Border」定義
的就是邊框線，「top」「bottom」「left」「right」四邊可分別定義線的粗細和顏色，這些定義好後不要忘記在下面的
「style」中定義線型，否則將看不邊框線，因為默認的線型是「none」。下面是一個定義了上邊框為：藍色細線；左邊框
為：綠色中粗線的CSS例子：
<style type="text/css">

導航:首頁 > 萬維百科 > 網頁設計層疊樣式表

網頁設計層疊樣式表

與網頁設計層疊樣式表相關的知識