css樣式是什么

CSS就是一種叫做樣式表（stylesheet）的技術(shù)。也有的人稱(chēng)之為層疊樣式表（Cascading Stylesheet）。

創(chuàng)新互聯(lián)專(zhuān)注于網(wǎng)站建設(shè)，為客戶(hù)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類(lèi)網(wǎng)站都可以開(kāi)發(fā)，成都品牌網(wǎng)站建設(shè)，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢(qián)，價(jià)格優(yōu)惠，收費(fèi)合理。

在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。

只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀(guān)和格式。

它的作用可以達(dá)到：

（1）在幾乎所有的瀏覽器上都可以使用。

（2）以前一些非得通過(guò)圖片轉(zhuǎn)換實(shí)現(xiàn)的功能，現(xiàn)在只要用CSS就可以輕松實(shí)現(xiàn)，從而更快地下載頁(yè)面。

（3）使頁(yè)面的字體變得更漂亮，更容易編排，使頁(yè)面真正賞心悅目。

（4）你可以輕松地控制頁(yè)面的布局 。

（5）你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。

想一想，沒(méi)有使用CSS前我們是如何控制字體的顏色和大小以及所使用的字體的？我們一般使用HTML標(biāo)簽來(lái)實(shí)現(xiàn)，代碼非常煩瑣。

很難想象，如果在一個(gè)頁(yè)面里需要頻繁地更替字體的顏色大小，最終生成的HTML代碼的長(zhǎng)度一定臃腫不堪。

說(shuō)實(shí)話(huà)，CSS就是為了簡(jiǎn)化這樣的工作誕生的，當(dāng)然其功能決非這么簡(jiǎn)單。

CSS是通過(guò)對(duì)頁(yè)面結(jié)構(gòu)的風(fēng)格控制的思想，控制整個(gè)頁(yè)面的風(fēng)格的。

式樣單放在頁(yè)面中，通過(guò)瀏覽器的解釋執(zhí)行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。生殖對(duì)一些非常老的瀏覽器，頁(yè)不會(huì)產(chǎn)生頁(yè)面混亂的現(xiàn)象。

什么是CSS樣式，以及CSS樣式包含那幾種類(lèi)型

　CSS是英語(yǔ)Cascading Style Sheets（層疊樣式表單）的縮寫(xiě)，它是一種用來(lái)表現(xiàn)HTML或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言。

樣式表有三種類(lèi)型：

外部鏈接的樣式表。指使用CSS文件鏈接到HTML文件。

內(nèi)部樣式表。是指卸載HTML頁(yè)面頭部（head里）的樣式表

形式為：

style type="text/css"

聲明{ 屬性: 值;}

/style

內(nèi)嵌樣式表。是指HTML標(biāo)簽里面內(nèi)嵌的樣式，形式為 style="屬性: 值;"

什么是CSS樣式

CSS之入門(mén)篇——推薦新手

關(guān)于CSS樣式表

一.在學(xué)習(xí)css之前你應(yīng)該掌握哪些基礎(chǔ)知識(shí)

1.什么是網(wǎng)頁(yè)，什么是超文本語(yǔ)言（html）。

2.會(huì)使用Dreamweaver等常用的網(wǎng)頁(yè)編輯器。

Dreamweaver是現(xiàn)今最好的網(wǎng)站編輯工具之一，而Dreamweaver8增加的對(duì)CSS的支持更是你容易得來(lái)使用CSS，用它來(lái)給制作網(wǎng)頁(yè)的CSS樣式表會(huì)更簡(jiǎn)單、更方便。本教程教你如何利用Dreamweaver8在頁(yè)面中加入CSS，你不用死記硬背的記代碼標(biāo)記，也不用去看很厚的CSS手冊(cè)，你就可以輕松自如的在網(wǎng)頁(yè)中運(yùn)用CSS。不過(guò)首先你要對(duì)CSS有一定的了解。因此，本教程的前面4章為CSS理論知識(shí)，主要是對(duì)CSS的全面介紹，希望讀者看后對(duì)CSS的語(yǔ)法、結(jié)構(gòu)、應(yīng)用有一個(gè)全面的了解；后面4章為DW實(shí)戰(zhàn)，主要是教你如何利用Dreamweaver8靈活運(yùn)用CSS在網(wǎng)頁(yè)中。閱讀此文前，你需要對(duì)HTML有一定的了解，并會(huì)使用Dreamweaver。

二.認(rèn)識(shí)CSS

CSS就是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱(chēng)樣式表，它是一種制作網(wǎng)頁(yè)的新技術(shù)。

網(wǎng)頁(yè)設(shè)計(jì)最初是用HTML標(biāo)記來(lái)定義頁(yè)面文檔及格式，例如標(biāo)題h1、段落p、表格table、鏈接a等，但這些標(biāo)記不能滿(mǎn)足更多的文檔樣式需求，為了解決這個(gè)問(wèn)題，在1997年W3C(The World Wide Web Consortium)頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS1, 自CSS1的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實(shí)。W3C把DHTML(Dynamic HTML)分為三個(gè)部分來(lái)實(shí)現(xiàn)：腳本語(yǔ)言(包括JavaScript、Vbscript等)、支持動(dòng)態(tài)效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。

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

三.怎樣使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定義文字字體、顏色、大小等屬性的時(shí)候，查看一下代碼你會(huì)發(fā)現(xiàn)有這樣的一部分在head區(qū)域：

style type="text/css"

!--

.STYLE2 {

font-size: 16pt;

font-family: "Courier New", Courier, monospace;

font-weight: bold;

color: #FF3300;

}

--

/style

那么恭喜你，你已經(jīng)使用了CSS設(shè)計(jì)網(wǎng)頁(yè)。

那么除了這種調(diào)用CSS的方法外，還有別的嗎？回答是“當(dāng)然有了”，下面是系統(tǒng)介紹

標(biāo)記加注法(in-line)：

如果只有一個(gè)HTML標(biāo)記需要設(shè)定樣式，則可在該標(biāo)記內(nèi)，加上屬性

style=" "

以個(gè)別修訂樣式。

頁(yè)面內(nèi)嵌法：

style type="text/css" !-- body { background : white ; color : black ; } -- /style

外部調(diào)用法：

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" /

雙表法調(diào)用樣式表：

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. 基本語(yǔ)法

CSS的定義是由三個(gè)部分構(gòu)成：選擇符（selector），屬性（properties）和屬性的取值（value）。

基本格式如下：

selector {property: value}

（選擇符 {屬性：值}）

選擇符是可以是多種形式，一般是你要定義樣式的HTML標(biāo)記，例如BODY、P、TABLE……，你可以通過(guò)此方法定義它的屬性和值，屬性和值要用冒號(hào)隔開(kāi)：

body {color: black}

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

如果屬性的值是多個(gè)單詞組成，必須在值上加引號(hào)，比如字體的名稱(chēng)經(jīng)常是幾個(gè)單詞的組合：

p {font-family: "sans serif"}

（定義段落字體為sans serif）

如果需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，我們使用分號(hào)將所有的屬性和值分開(kāi)：

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

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

為了使你定義的樣式表方便閱讀，你可以采用分行的書(shū)寫(xiě)格式：

p

{

text-align: center;

color: black;

font-family: arial

}

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

2. 選擇符組

你可以把相同屬性和值的選擇符組合起來(lái)書(shū)寫(xiě)，用逗號(hào)將選擇符分開(kāi)，這樣可以減少樣式重復(fù)定義：

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

（這個(gè)組里包括所有的標(biāo)題元素，每個(gè)標(biāo)題元素的文字都為綠色）

p, table{ font-size: 9pt }

（段落和表格里的文字尺寸為9號(hào)字）

效果完全等效于：

p { font-size: 9pt }

table { font-size: 9pt }

3. 類(lèi)選擇符

用類(lèi)選擇符你能夠把相同的元素分類(lèi)定義不同的樣式，定義類(lèi)選擇符時(shí)，在自定類(lèi)的名稱(chēng)前面加一個(gè)點(diǎn)號(hào)。假如你想要兩個(gè)不同的段落，一個(gè)段落向右對(duì)齊，一個(gè)段落居中，你可以先定義兩個(gè)類(lèi)：

p.right {text-align: right}

p.center {text-align: center}

然后用不在不同的段落里，只要在HTML標(biāo)記里加入你定義的class參數(shù)：

p class="right" 這個(gè)段落向右對(duì)齊的

/p

p class="center"

這個(gè)段落是居中排列的

/p

p class="right" 這個(gè)段落向右對(duì)齊的

/p

p class="center"

這個(gè)段落是居中排列的

/p

注意：類(lèi)的名稱(chēng)可以是任意英文單詞或以英文開(kāi)頭與數(shù)字的組合，一般以其功能和效果簡(jiǎn)要命名。

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

.center {text-align: center}

（定義.center的類(lèi)選擇符為文字居中排列）

這樣的類(lèi)可以被應(yīng)用到任何元素上。下面我們使h1元素（標(biāo)題1）和p元素（段落）都?xì)w為“center”類(lèi)，這使兩個(gè)元素的樣式都跟隨“.center”這個(gè)類(lèi)選擇符：

h1 class="center"

這個(gè)標(biāo)題是居中排列的

/h1

p class="center"

這個(gè)段落也是居中排列的

/p

注意：這種省略HTML標(biāo)記的類(lèi)選擇符是我們經(jīng)后最常用的CSS方法，使用這種方法，我們可以很方便的在任意元素上套用預(yù)先定義好的類(lèi)樣式。

4. ID選擇符

在HTML頁(yè)面中ID參數(shù)指定了某個(gè)單一元素，ID選擇符是用來(lái)對(duì)這個(gè)單一元素定義單獨(dú)的樣式。

ID選擇符的應(yīng)用和類(lèi)選擇符類(lèi)似，只要把CLASS換成ID即可。將上例中類(lèi)用ID替代：

p id="intro"

這個(gè)段落向右對(duì)齊

/p

定義ID選擇符要在ID名稱(chēng)前加上一個(gè)“#”號(hào)。和類(lèi)選擇符相同，定義ID選擇符的屬性也有兩種方法。下面這個(gè)例子，ID屬性將匹配所有id="intro"的元素：

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

（字體尺寸為默認(rèn)尺寸的110%；粗體；藍(lán)色；背景顏色透明）

下面這個(gè)例子，ID屬性只匹配id="intro"的段落元素：

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

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

5. 包含選擇符

可以單獨(dú)對(duì)某種元素包含關(guān)系定義的樣式表，元素1里包含元素2，這種方式只對(duì)在元素1里的元素2定義，對(duì)單獨(dú)的元素1或元素2無(wú)定義，例如：

table a

{

font-size: 12px

}

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

6. 樣式表的層疊性

層疊性就是繼承性，樣式表的繼承規(guī)則是外部的元素樣式會(huì)保留下來(lái)繼承給這個(gè)元素所包含的其他元素。事實(shí)上，所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把很多層嵌套的樣式疊加在一起，除非另外更改。例如在DIV標(biāo)記中嵌套P標(biāo)記：

div { color: red; font-size:9pt}

……

div

p

這個(gè)段落的文字為紅色9號(hào)字

/p

/div

（P元素里的內(nèi)容會(huì)繼承DIV定義的屬性）

注意：有些情況下內(nèi)部選擇符不繼承周?chē)x擇符的值，但理論上這些都是特殊的。例如，上邊界屬性值是不會(huì)繼承的，直覺(jué)上，一個(gè)段落不會(huì)同文檔BODY一樣的上邊界值。

另外，當(dāng)樣式表繼承遇到?jīng)_突時(shí)，總是以最后定義的樣式為準(zhǔn)。如果上例中定義了P的顏色：

div { color: red; font-size:9pt}

p {color: blue}

……

div

p

這個(gè)段落的文字為藍(lán)色9號(hào)字

/p

/div

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

不同的選擇符定義相同的元素時(shí)，要考慮到不同的選擇符之間的優(yōu)先級(jí)。ID選擇符，類(lèi)選擇符和HTML標(biāo)記選擇符，因?yàn)镮D選擇符是最后加上元素上的，所以?xún)?yōu)先級(jí)最高，其次是類(lèi)選擇符。如果想超越這三者之間的關(guān)系，可以用!important提升樣式表的優(yōu)先權(quán)，例如：

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

我們同時(shí)對(duì)頁(yè)面中的一個(gè)段落加上這三種樣式，它最后會(huì)依照被!important申明的HTML標(biāo)記選擇符樣式為紅色文字。如果去掉!important，則依照優(yōu)先權(quán)最高的ID選擇符為黃色文字。

7. 注釋

你可以在CSS中插入注釋來(lái)說(shuō)明你代碼的意思，注釋有利于你或別人以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以"/*" 開(kāi)頭，以"*/" 結(jié)尾，如下：

/* 定義段落樣式表 */

p

{

text-align: center; /* 文本居中排列 */

color: black; /* 文字為黑色 */

font-family: arial /* 字體為arial */

}

/* 定義段落樣式表 */

p

{

text-align: center; /* 文本居中排列 */

color: black; /* 文字為黑色 */

font-family: arial /* 字體為arial */

}

前面我們了解了CSS的語(yǔ)法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識(shí)別并調(diào)用。當(dāng)瀏覽器讀取樣式表時(shí)，要依照文本格式來(lái)讀，這里介紹四種在頁(yè)面中插入樣式表的方法：[u]鏈入外部樣式表[/u]、[u]內(nèi)部樣式表[/u]、[u]導(dǎo)入外表樣式表[/u]和[u]內(nèi)嵌樣式[/u]。

1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存為一個(gè)樣式表文件，然后在頁(yè)面中用link標(biāo)記鏈接到這個(gè)樣式表文件，這個(gè)link標(biāo)記必須放到頁(yè)面的head區(qū)內(nèi)，如下：

head

……

link href="mystyle.css" rel="stylesheet" type="text/css" media="all"

……

/head

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

一個(gè)外部樣式表文件可以應(yīng)用于多個(gè)頁(yè)面。當(dāng)你改變這個(gè)樣式表文件時(shí)，所有頁(yè)面的樣式都隨之而改變。在制作大量相同樣式頁(yè)面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時(shí)也減少了重復(fù)下載代碼。

樣式表文件可以用任何文本編輯器（例如：記事本）打開(kāi)并編輯，一般樣式表文件擴(kuò)展名為.css。內(nèi)容是定義的樣式表，不包含HTML標(biāo)記，mystyle.css這個(gè)文件的內(nèi)容如下：

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

/*定義水平線(xiàn)的顏色為土黃；段落左邊的空白邊距為20象素；頁(yè)面的背景圖片為images目錄下的back40.gif文件*/

2. 內(nèi)部樣式表

內(nèi)部樣式表是把樣式表放到頁(yè)面的head區(qū)里，這些定義的樣式就應(yīng)用到頁(yè)面中了，樣式表是用style標(biāo)記插入的，從下例中可以看出style標(biāo)記的用法：

head

……

style type="text/css"

CSS樣式是什么?

不知你是否真知道，答案很長(zhǎng)，學(xué)習(xí)總是枯燥的!

要有耐心看喔!

樣式

CSS是Cascading style Sheets的簡(jiǎn)稱(chēng)，中文譯作“層疊樣式表單”.

實(shí)際上它是一組樣式。你可能對(duì)CSS這個(gè)名詞比較陌生，實(shí)際上無(wú)論你用Internet Explorer還是Netscape Navigator在網(wǎng)上沖浪，幾乎隨時(shí)都在與CSS打交道，在網(wǎng)上沒(méi)有使用過(guò)CSS的網(wǎng)頁(yè)可能不好找。不管你用什么工具軟件制作網(wǎng)頁(yè)，都有在有意無(wú)意地使用CSS。用好CSS能使你的網(wǎng)頁(yè)更加簡(jiǎn)煉，為什么同樣內(nèi)容的網(wǎng)頁(yè)，有的人做出來(lái)有幾十KB，而高手做出來(lái)只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經(jīng)驗(yàn)以及一些網(wǎng)友來(lái)信提問(wèn)的問(wèn)題整理出來(lái)，供諸位參考。

1、CSS在網(wǎng)頁(yè)制作中一般有三種方式的用法，那么具體在使用時(shí)該采用哪種用法？

當(dāng)有多個(gè)網(wǎng)頁(yè)要用到的CSS，采用外連CSS文件的方式，這樣網(wǎng)頁(yè)的代碼大大減少，修改起來(lái)非常方便；只在單個(gè)網(wǎng)頁(yè)中使用的CSS，采用文檔頭部方式；只有在一個(gè)網(wǎng)頁(yè)一、兩個(gè)地方才用到的CSS，采用行內(nèi)插入方式。

2、CSS的三種用法在一個(gè)網(wǎng)頁(yè)中要以混用嗎？

三種用法可以混用，且不會(huì)造成混亂。這就是它為什么稱(chēng)之為“層疊樣式表”的原因，瀏覽器在顯示網(wǎng)頁(yè)時(shí)是這樣處理的：先檢查有沒(méi)有行內(nèi)插入式CSS，有就執(zhí)行了，針對(duì)本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執(zhí)行了；在前兩者都沒(méi)有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執(zhí)行優(yōu)先級(jí)是：行內(nèi)插入式、頭部方式、外連文件方式。

3、在Dreamweaver3中如何使外部文件式CSS？

在Dreamweaver3中使用外連文件式CSS并沒(méi)有特殊要求，同樣是用記事本創(chuàng)建一個(gè)*.css文件，在網(wǎng)頁(yè)的head與/head之間加上一句這樣的代碼：link rel="stylesheet" href="在這里填上你的CSS文件地址（相對(duì)路徑+文件名）" type="text/css" 就行了。

4、如何用Dreamweaver3快速創(chuàng)建CSS外連式文件？

對(duì)于一個(gè)初接觸CSS的網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)講，要用記事之類(lèi)的編輯器，去創(chuàng)建一個(gè)CSS外連式文件是相當(dāng)困難的。由于Dreamweaver3對(duì)CSS支持的很好，用它來(lái)幫助就輕松多了。具體可以這樣操作：

1）先在紙上寫(xiě)好在網(wǎng)站的網(wǎng)頁(yè)中可能要用到的格名稱(chēng)，然后在Dreamweaver3的編輯窗中調(diào)出CSS面板，一個(gè)一個(gè)地定義，并在一個(gè)空白頁(yè)上適當(dāng)?shù)貙?xiě)一點(diǎn)相關(guān)內(nèi)容，邊定義邊試用，效果不滿(mǎn)意，立即修改；

2）全部定義好后，再用記事本創(chuàng)建一個(gè)空的CSS外連式文件，把在head與/head之間的那段定義好的CSS復(fù)制到CSS文件中去，就大功告成了。整個(gè)過(guò)程就是點(diǎn)鼠標(biāo)，方便吧？

5、在Dreamweaver3中采用行內(nèi)插入式CSS要手動(dòng)寫(xiě)代碼嗎？

不用！先用CSS面板定義好要用的CSS，然后，在要插入CSS的標(biāo)記插入：style=""，再把你剛才定義的CSS從head后面拖到這個(gè)雙引號(hào)中來(lái)，把花括號(hào)以外的部分刪去就行了。

6、在方檔頭部方式和外連文件方式的CSS中都有“!--”和“--”，好象沒(méi)什么用，不要可以嗎？

這一對(duì)東東的作用是為了不引起低版本瀏覽器的錯(cuò)誤。如果某個(gè)執(zhí)行此頁(yè)面的瀏覽器不支持CSS，它將忽略其中的內(nèi)容。雖然現(xiàn)在使用不支持CSS瀏覽器的人已很少了，由于互聯(lián)網(wǎng)上幾乎什么可能都會(huì)發(fā)生，所以還是留著為妙。

7、如何給一部分文字加背景色？

給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色卻沒(méi)有相應(yīng)的功能，我們可以先做一個(gè)定義背景色的CSS（如：bgstyle），在DW3中點(diǎn)幾下鼠就完成了。如一個(gè)定義淡黃色背景的CSS是這樣的：

style type="text/css"

!--

.bgstyle { background: #FFFFCC}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“bgstyle”就行了。

8、如何給部分文字加背景圖像？

與加背景色操作類(lèi)似，中是在背景在選擇加載圖象就是了，一個(gè)定義好的加背景圖象的CSS例子的代碼是這樣的：

style type="text/css"

!--

.imgbgstyle { background-image: url(/logo.gif)}

--

/style

在要用時(shí)選取那段文字，再在CSS面板上點(diǎn)一下“imgbgstyle”就行了。

9、如何使頁(yè)面的背景在文字“滾動(dòng)”時(shí)背景圖案靜止不動(dòng)？

要使背景圖案不隨文字“滾動(dòng)”的CSS是這樣的：

style type="text/css"

!--

BODY { background: purple url(/bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

--

/style

10、如何定義字間距？

在DW3中CSS的屬性定義對(duì)話(huà)框（style Definition for .style1)的“Block”上的“l(fā)etter spaceing”屬性定義的就是字間距，它指的是每一個(gè)字符之間的額外間距，經(jīng)長(zhǎng)度為單位，正負(fù)值均可，當(dāng)取負(fù)值時(shí)產(chǎn)生字符擠在一起的效果。下面代碼是一個(gè)定義好的字間距CSS例子：

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

11、如何給文字加上劃線(xiàn)、下劃線(xiàn)、刪除線(xiàn)和閃爍？

在DW3中CSS的屬性定義對(duì)話(huà)框(style Definition for .style1)的“Type”上的“decoration”屬性定義的就是這些內(nèi)容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用為好。下面是一個(gè)定義好上述效果的CSS例子：

style type="text/css"

!--

.style1 { text-decoration: underline overline line-through blink}

--

/style

其中： “underline”是定義下劃線(xiàn)；“overline ”是定義上劃線(xiàn)；“ line-through”定義的是刪除線(xiàn)；“blink”

定義的是文字閃爍。

12、如何使網(wǎng)頁(yè)具有“首行縮進(jìn)”功能？

由于DW3輸入空格不方便，利用“首行縮進(jìn)”將彌補(bǔ)這個(gè)不足。在DW3中CSS的屬性定義對(duì)話(huà)框（style Definition for .style1)的“Block”上的“text-indent”屬性定義的就是“首行縮進(jìn)”，所謂“首行”是指每段內(nèi)容的第一行，也就是直接按回車(chē)鍵就形成了一個(gè)新的段落。縮進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開(kāi)始縮進(jìn)兩個(gè)漢字，設(shè)置好的CSS如下所示：

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

在DW3要注意：在DW3中CSS的屬性定義對(duì)話(huà)框（style Definition for .style1)的“Block”上的“text-indent”右面的縮進(jìn)單位選擇框中“ems”指的就是“em”。

13、在用表格進(jìn)行排版時(shí)，能使某一方向上的內(nèi)容離開(kāi)表格線(xiàn)一點(diǎn)嗎？

可以！在DW3中CSS的屬性定義對(duì)話(huà)框（style Definition for .style1)的“Box”上的“margin”定義的就是內(nèi)容離開(kāi)邊緣的距離，分別可定義四個(gè)方向：“top”“bottom”“l(fā)eft”“right”。下面就是定義在左邊離開(kāi)“10px”的CSS例子代碼：

style type="text/css"

!--

.style1 { margin: 0px 0px 0px 10px}

--

/style

14、能給某部分內(nèi)容加邊框嗎？

用CSS可以給某部分內(nèi)容加邊框，在DW3中CSS的屬性定義對(duì)話(huà)框（style Definition for .style1)的“Border”定義的就是邊框線(xiàn)，“top”“bottom”“l(fā)eft”“right”四邊可分別定義線(xiàn)的粗細(xì)和顏色，這些定義好后不要忘記在下面的“style”中定義線(xiàn)型，否則將看不邊框線(xiàn)，因?yàn)槟J(rèn)的線(xiàn)型是“none”。下面是一個(gè)定義了上邊框?yàn)椋核{(lán)色細(xì)線(xiàn)；左邊框?yàn)椋壕G色中粗線(xiàn)的CSS例子：

style type="text/css"

!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--

參考：百度百科

什么是CSS樣式，怎樣定義和使用它？

CSS是Cascading Style Sheet 的縮寫(xiě)。譯作「層疊樣式表單」。是用于（增強(qiáng)）控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。鏈入外部樣式表文件 (Linking to a Style Sheet) 你可以先建立外部樣式表文件（.css），然后使用HTML的link對(duì)象。示例如下： head titletitle of article/title link rel=stylesheet href=" " type="text/css"/head 而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入： ? xml-stylesheet type="text/css" href=" " ?定義內(nèi)部樣式塊對(duì)象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標(biāo)記之間插入一個(gè)STYLE.../STYLE塊對(duì)象。 定義方式請(qǐng)參閱樣式表語(yǔ)法。示例如下： html style type="text/css" !-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} -- /style body 請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為"text/css"，是允許不支持這類(lèi)型的瀏覽器忽略樣式表單。 內(nèi)聯(lián)定義 (Inline Styles) 內(nèi)聯(lián)定義即是在對(duì)象的標(biāo)記內(nèi)使用對(duì)象的style屬性定義適用其的樣式表屬性。示例如下： 這一行被增加了左右的外補(bǔ)丁 樣式表語(yǔ)法 (CSS Syntax) Selector { property: value } 參數(shù)說(shuō)明： Selector -- 選擇符 property : value -- 樣式表定義。屬性和屬性值之間用冒號(hào)(:)隔開(kāi)。定義之間用分號(hào)(;)隔開(kāi) 繼承的值 (The ' Inherit ' Value) 每個(gè)屬性都有一個(gè)指定的值：Inherit。它的意思是：將父對(duì)象的值等同為計(jì)算機(jī)值得到。這個(gè)值通常僅僅是備用的。顯式的聲明它可用來(lái)強(qiáng)調(diào)。 選擇符說(shuō)明： #表示選擇id .表示選擇class 比如我有個(gè) 這時(shí)就得用#test{屬性}來(lái)給id為test的div來(lái)制定樣式 而 則應(yīng)該用.test{屬性}來(lái)給其指定樣式。 編輯本段根據(jù)分辨率不同，調(diào)用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0 SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果瀏覽器為Firefox var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) }else{ file://如果瀏覽器為其他 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; ScreenWidth(Other1024,Other800,Other1152,Otherother) } } function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ if ((screen.width == 1024) (screen.height == 768)){ setActiveStyleSheet(CSS1); }else{ if ((screen.width == 800) (screen.height == 600)){ setActiveStyleSheet(CSS2); }else{ if ((screen.width == 1152) (screen.height == 864)){ setActiveStyleSheet(CSS3); }else{ setActiveStyleSheet(CSS4); }}} } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解釋?zhuān)?var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引號(hào)里面分別填寫(xiě)，用戶(hù)使用IE的時(shí)候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引號(hào)里面分別填寫(xiě)，用戶(hù)使用FF的時(shí)候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引號(hào)里面分別填寫(xiě)，用戶(hù)使用其他瀏覽器的時(shí)候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. 不判斷分辨率，只判斷瀏覽器 應(yīng)E.Qiang提議，編如下代碼。實(shí)現(xiàn)根據(jù)瀏覽器類(lèi)型自動(dòng)調(diào)用不同CSS。 代碼： SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { file://如果瀏覽器為IE setActiveStyleSheet("default.css"); }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果瀏覽器為Firefox setActiveStyleSheet("default2.css"); }else{ file://如果瀏覽器為其他 setActiveStyleSheet("newsky.css"); } } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解釋?zhuān)?如果瀏覽器為IE，則調(diào)用default.css 如果瀏覽器為Firefox，則調(diào)用default2.css 如果瀏覽器為其他，則調(diào)用newsky.css 用法：放在head/head中即可。 中國(guó)專(zhuān)業(yè)css標(biāo)準(zhǔn)化推廣網(wǎng)站 【Div之家】 css 層疊樣式表 引入層疊樣式表的方法包括： 1，外聯(lián)式樣式表 2，內(nèi)嵌樣式表 3，元素內(nèi)定 4，導(dǎo)入樣式表 外聯(lián)式樣式表 例：head link rel="stylesheet" href="/css/default.css" /head body .... /body /html 屬性：rel 用來(lái)說(shuō)明link元素在這里要完成的任務(wù)是連接一個(gè)獨(dú)立的css文件。而href屬性給出了所要連接css文件的url地址 內(nèi)嵌式樣式表： 例：html head style type="text/css" !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html 元素內(nèi)定 格式： 導(dǎo)入式樣式表 〈html head style type="text/css" !-- @import url(css/home.css); -- /style body .... /body /html

本文標(biāo)題：css樣式概述,css樣式總結(jié)
當(dāng)前URL：http://chinadenli.net/article21/dsgdicd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App設(shè)計(jì)、企業(yè)建站、軟件開(kāi)發(fā)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)