什么是CSS樣式

CSS之入門篇——推薦新手

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設,隆安企業(yè)網(wǎng)站建設,隆安品牌網(wǎng)站建設,網(wǎng)站定制,隆安網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,隆安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

關于CSS樣式表

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

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

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

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

二.認識CSS

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

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

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

三.怎樣使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本，在定義文字字體、顏色、大小等屬性的時候，查看一下代碼你會發(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設計網(wǎng)頁。

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

標記加注法(in-line)：

如果只有一個HTML標記需要設定樣式，則可在該標記內，加上屬性

style=" "

以個別修訂樣式。

頁面內嵌法：

style type="text/css" !-- body { background : white ; color : black ; } -- /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是顏色的值，此例的效果是使頁面中的文字為黑色。

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

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參數(shù)：

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

/p

p class="center"

這個段落是居中排列的

/p

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

/p

p class="center"

這個段落是居中排列的

/p

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

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

.center {text-align: center}

（定義.center的類選擇符為文字居中排列）

這樣的類可以被應用到任何元素上。下面我們使h1元素（標題1）和p元素（段落）都歸為“center”類，這使兩個元素的樣式都跟隨“.center”這個類選擇符：

h1 class="center"

這個標題是居中排列的

/h1

p class="center"

這個段落也是居中排列的

/p

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

4. ID選擇符

在HTML頁面中ID參數(shù)指定了某個單一元素，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. 樣式表的層疊性

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

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

……

div

p

這個段落的文字為紅色9號字

/p

/div

（P元素里的內容會繼承DIV定義的屬性）

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

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

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

p {color: blue}

……

div

p

這個段落的文字為藍色9號字

/p

/div

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

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

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

我們同時對頁面中的一個段落加上這三種樣式，它最后會依照被!important申明的HTML標記選擇符樣式為紅色文字。如果去掉!important，則依照優(yōu)先權最高的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區(qū)內，如下：

head

……

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

……

/head

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

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

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

hr {color: sienna}

p {margin-left: 20px}

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

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

2. 內部樣式表

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

head

……

style type="text/css"

CSS樣式是什么?

不知你是否真知道，答案很長，學習總是枯燥的!

要有耐心看喔!

樣式

CSS是Cascading style Sheets的簡稱，中文譯作“層疊樣式表單”.

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

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

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

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

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

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

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

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

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

1）先在紙上寫好在網(wǎng)站的網(wǎng)頁中可能要用到的格名稱，然后在Dreamweaver3的編輯窗中調出CSS面板，一個一個地定義，并在一個空白頁上適當?shù)貙懸稽c相關內容，邊定義邊試用，效果不滿意，立即修改；

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

5、在Dreamweaver3中采用行內插入式CSS要手動寫代碼嗎？

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

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

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

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

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

style type="text/css"

!--

.bgstyle { background: #FFFFCC}

--

/style

在要用時選取那段文字，再在CSS面板上點一下“bgstyle”就行了。

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

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

style type="text/css"

!--

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

--

/style

在要用時選取那段文字，再在CSS面板上點一下“imgbgstyle”就行了。

9、如何使頁面的背景在文字“滾動”時背景圖案靜止不動？

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

style type="text/css"

!--

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

background-repeat:repeat-y;

background-attachment:fixed

}

--

/style

10、如何定義字間距？

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

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

11、如何給文字加上劃線、下劃線、刪除線和閃爍？

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

style type="text/css"

!--

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

--

/style

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

定義的是文字閃爍。

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

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

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

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

13、在用表格進行排版時，能使某一方向上的內容離開表格線一點嗎？

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

style type="text/css"

!--

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

--

/style

14、能給某部分內容加邊框嗎？

用CSS可以給某部分內容加邊框，在DW3中CSS的屬性定義對話框（style Definition for .style1)的“Border”定義的就是邊框線，“top”“bottom”“l(fā)eft”“right”四邊可分別定義線的粗細和顏色，這些定義好后不要忘記在下面的“style”中定義線型，否則將看不邊框線，因為默認的線型是“none”。下面是一個定義了上邊框為：藍色細線；左邊框為：綠色中粗線的CSS例子：

style type="text/css"

!--

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

--

參考：百度百科

css中文字和背景圖片同步的問題，也就是說當文字增多的時候背景也同樣拉伸？

用css樣式目前是實現(xiàn)不了你的要求的，不過在IE下可以利用濾鏡實現(xiàn)

style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='zj5.jpg', sizingmethod='scale')"

注意這個只支持IE并且在IE6下容器內的a鏈接會無效的

另外如果你用這種方法建議用table做容器存放內容，我做過測試如果是Div必須先定義好DIV的寬高才可以顯示背景，用table就不用，這樣就可以根據(jù)文字增多而整體尺寸變大了

css中文全稱是什么

1、css層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

2、CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。

3、CSS 能夠對網(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

4、希望對你有幫助。

css怎么設置漂亮的中文字體樣式

CSS即使設置了其他字體，也要看別的電腦里有沒有，一般系統(tǒng)自帶有宋體，黑體等字體，但是如果你電腦上有好看的字體，可以顯示，在別的電腦沒有你的字體，就顯示不了，所以一般只會設置系統(tǒng)自帶的字體。

設置方法：

html

head

style type="text/css"

p.ziti{font-family:"Times New Roman",Georgia,Serif}

/style

/head

body

h1CSS font-family/h1

p class="ziti"要更改的字體內容/p

/body

/html

CSS定義可以是：font-family:sans-serif

也就是CSS用 p{font-family:"Times New Roman",Georgia,Serif}

為什么我這里設置了三個，分別用","隔開呢，因為不同版本的操作系統(tǒng)，對字體的支持不同解釋如下：

例如微軟雅黑不同操作系統(tǒng)不同版本需要如下設置：

Windows XP及以前版本的Windows

font-family: Arial, 宋體, sans-serif;

Windows Vista和Windows 7

font-family: 'Microsoft Yahei', sans-serif;

Sorry，英文就無法設置字體了，因為中文字體都包含了英文字體。好在雅黑顯示英文還湊合。

Mac及其它操作系統(tǒng)

font-family: sans-serif;

系統(tǒng)自帶中文字體編碼：

宋體SimSun黑體SimHei微軟雅黑Microsoft YaHei微軟正黑體Microsoft JhengHei新宋體NSimSun新細明體PMingLiU細明體MingLiU標楷體DFKai-SB仿宋FangSong楷體KaiTi仿宋_GB2312FangSong_GB2312楷體_GB2312KaiTi_GB2312

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程

CSS樣式表代碼布局基礎教程—課程10：外部樣式表(一)

十、外部樣式表

外部樣式表是把各種樣式單獨存在一個文件里，供其他多個網(wǎng)頁調用，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x10.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、外部樣式表

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

2）在里面輸入下面的內容；

/* by TeliuTe */

body {

background-color: #ccffff;

font-size:1.2em;

span {

color:#800000;

.myblue {

color:blue;

3）第一行 /* ... */ 是注釋，注明作者版權用途等，根據(jù)自己的需要，

下面的內容跟內部樣式表相同，各個標簽和它的樣式，保存一下文件；

4）回到 lx10.html 文檔中，在 head 區(qū)內加上下面一行外部引用標識；

5）然后在 body 區(qū)內，輸入下面的內容；

1）點菜單“文件－新建”，新建一個空白文檔，保存文件名為 style.css ，位置跟 lx10 放一起，這是一個單獨的文件；

6）保存一下文件，回到自己文件夾中，打開 lx10 網(wǎng)頁，看一下效果；

7）在多個網(wǎng)頁具有相同樣式時，使用外部樣式表可以節(jié)省空間和減小網(wǎng)頁大小；

本節(jié)學習了外部樣式表的使用方法，你成功地完成了本教程，歡迎繼續(xù)學習本站的其他課程！

本教程由86團學校TeliuTe制作

（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）

CSS標簽大全(一)

字體屬性：(font)

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數(shù)值就可以，單位：PX、PD

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

變體 font-variant: small-caps;(小型大寫字母) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 text-decoration: underline;(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性：(background)

色彩background-color: #FFFFFF;

圖片background-image: url();

重復background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動)

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixe輔助圖片一律用背景處理d left top;

區(qū)塊屬性： (Block)

字間距l(xiāng)etter-spacing: normal; 數(shù)值

對劉text-align: justify;(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進text-indent: 數(shù)值px;

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal; 數(shù)值

空格white-space: pre;(保留) nowrap;(不換行)

顯示display:block;(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題)

方框屬性：(Box)

width:; height:; float:; clear:both; margin:; padding:; 順序：上右下左

邊框屬性： (Border)

border-style: dotted(點線); dashed(虛線); solid(實線); double(雙線); groove(槽線); ridge;(脊狀) inset;(凹陷) outset;

border-wid

th:; 邊框寬度

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數(shù)字) lower-roman;(小羅碼數(shù)字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切) css屬性代碼大全

一 CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

text-decoration:line-through; /*加刪除線*/

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白*/

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-st

yle-type:decimal; /*阿拉伯數(shù)字*/

list-style-type:lower-roman; /*小寫羅馬數(shù)字*/

list-style-type:upper-roman; /*大寫羅馬數(shù)字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復排列-網(wǎng)頁默認*/

background-repeat : no-repeat; /*不重復排列*/

background-repeat : repeat-x; /*在x軸重復排列*/

background-repeat : repeat-y; /*在y軸重復排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標轉到鏈接*/

鼠標光標樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc;

/*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:

border-top-color : #369 /*設置上框線top顏色*/

border-top-width :1px /*設置上框線top寬度*/

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表單運用：

文字方塊

按鈕

復選框

選擇鈕

多行文字方塊

下拉式菜單 選項1選項2

八、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性： 字體樣式(Font Style)

序號 中文說明 標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數(shù)值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數(shù)值|inherit|normal;}

9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}

10 單詞間距 {word-spacing:數(shù)值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號 中文說明 標記語法

1

行 間 距 {line-height:數(shù)值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數(shù)值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號 中文說明 標記語法

1 背景顏色 {background-color:數(shù)值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

框架樣式(Box Style)

序號 中文說明 標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補 白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數(shù)值

4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊 框 {border:border-width border-style color}

上 邊 框 {border-top:border-top-width border-style color}

右 邊 框 {border-right:border-right-width border-style color}

下 邊 框 {border-bottom:border-bottom-width border-style color}

左 邊 框 {border-left:border-left-width border-style color}

7 寬 度 {width:長度|百分比| auto}

8 高 度 {height:數(shù)值|auto}

9 漂 浮 {float:left|right|none}

10 清 除 {clear:none|left|right|both}

分類列表

序號 中文說明 標記語法

1 控制顯示 {display:none

|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

word-wrap是控制換行的。使用break-word時，是將強制換行。中文沒有任何問題，英文語句也沒問題。但是對于長串的英文，就不起作用。break-word是控制是否斷詞的。normal是默認情況，英文單詞不被拆開。break-all，是斷開單詞。在單詞到邊界時，下個字母自動到下一行。主要解決了長串英文的問題。keep-all，是指Chinese, Japanese, and Korean不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。）ie下：使用word-wrap:break- word;所有的都正常。ff下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。為了解決長串英文，一般用 word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。目前主要的問題存在于 長串英文 和 英文單詞被斷開。其實長串英文就是一個比較長的單詞而已。即英文單詞應不應該被斷開那？那問題很明顯了，顯然不應該被斷開了。對于長串英文，就是惡意的東西，自然不用去管了。但是，也要想些辦法，不讓它把容器撐大。用：overflow:auto; ie下，長串會自動折行。ff下，長串會被遮蓋。所以，綜上，最好的方式是word-wrap:break-word; overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。

CSS樣式表代碼布局基礎教程—課程9：鏈接樣式

九、鏈接樣式

使用偽類可以設置鏈接的樣式，比如改變顏色、去掉下劃線等，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開自己文件夾里的lx7.html

3）再點菜單“文件－另存為”命令，保存文件名為 “l(fā)x9.html”

2、設置偽類

1）在 head 區(qū)內，輸入內部樣式表，設定各個 的錨標記樣式，如下；

2）第一個 a 設定全局錨點的樣式，用塊顯示、寬度是50像素、背景色是淺綠色，接下來是錨點 a 的成員：

link 是鏈接，設定頁面中的鏈接樣式，顏色藍色，不帶下劃線，

visted 是訪問過的鏈接，設定樣式為栗色、不帶下劃線，

active 是按下鼠標時的鏈接，設定顏色為綠色、無下劃線，

hover 是鼠標移過來懸停，設定顏色為紅色、有下劃線，背景色改成黃色，hover 放在其他幾個成員的后面；

3）保存一下文件，回到自己的文件夾中，打開 lx9 網(wǎng)頁，試著用鼠標點擊、拖動鏈接，看一下效果；

本節(jié)學習了設置鏈接樣式的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內容；

CSS樣式表代碼布局基礎教程—課程8：內部樣式表(一)

八、內部樣式表

內部樣式表放在網(wǎng)頁的...區(qū)內，集中在一起方便管理，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、內部樣式表

1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；

2）第一行是樣式表開始，最后是樣式表結束， 是注釋標簽，

首先是對 body 標簽設置樣式，這樣凡是在 body 區(qū)里的內容，都會使用這個樣式，設置背景色和文字大小

然后對 span 標簽設置樣式，設置內容的顏色，以后凡是用到 span 的地方，都使用這個顏色；

3）接著在 body 區(qū)里輸入下面的內容；

1）對系統(tǒng)標簽使用樣式，這會影響所有的這種標簽，在 head 區(qū)輸入下面的代碼；

4）保存一下文件，回到自己的文件夾里，打開 lx8 網(wǎng)頁，看一下效果；

5）自定義樣式選擇符，除了系統(tǒng)的標簽外，也可以自己定義需要的樣式標記，在 head 的.樣式表里加入下面的代碼；

.myblue {

color:blue;

前面的點，表示這是一個通用的樣式，可以重復使用，如果是 #號，表示是一個標識符，是專用唯一的 id，myblue 是自定義的樣式名稱；

6）在 body 區(qū)里加入下面的代碼，加在上一行的前面，再加上

標簽分成兩段；

7）這兒使用的是 span，里面的 class 套用的是 myblue 樣式，替換了前面設的樣式，

保存一下文件，到瀏覽器中看看效果；

本節(jié)學習了使用內部樣式表的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內容；

CSS樣式表代碼布局基礎教程—課程7：ul列表(一)

七、ul 列表

對于排列有序的條目，可以使用列表來實現(xiàn)，下面我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－保存”命令，以“l(fā)x8.html”為文件名，類型所有文件，編碼 UTF-8，保存到自己的文件夾；

3）按照基礎02課的方法，輸入、和的內容；

2、使用列表（計算機基礎知識，電腦知識入門學習，請到http://電腦知識網(wǎng)）

1）在后面接著輸入下面的代碼；

第一課

第二課

第三課

2）前面的

建立一個列表，里面的各個

是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號，

保存一下文件，到自己文件夾里，打開 lx7 網(wǎng)頁，看看列表的效果，這兒加了 超級鏈接；

3）如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內邊距為 0，輸入下面的代碼；

第一課

第二課

第三課

4）保存一下，再到瀏覽器里看一下，三個列表都排到了左邊對齊；

5）如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；

6）保存一下，再到瀏覽器里看一下，三個列表項都水平排列了；

本節(jié)學習了列表的基本使用方法，如果你成功地完成了練習，請繼續(xù)學習下一課內容；

CSS樣式表代碼布局基礎教程—課程6：div布局(一)

六、div 布局

默認 div 占據(jù)一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局，我們來看一個練習；

1、文本編輯器

1）打開記事本或 gedit、leafpad 文本編輯器，gedit 在查看菜單里選擇“HTML”；

2）點菜單“文件－打開”命令，打開上次的 lx5 網(wǎng)頁，再點“文件－另存為”，以“l(fā)x6.html”為文件名，保存到自己的文件夾；

3）按照兩列并排來進行布局；

2、定位布局

1）在下面加一個

標簽，作為主框架，在標簽里加入下面的樣式；

2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，

在里面的樣式里設置了顏色、邊框、內邊距，

設定了固定寬度 604，高度 202，這個可以計算出來，根據(jù)下面兩列的寬度再加上內邊距；

3）修改里面的古詩的 div 樣式，加上背景色、去掉內外邊距，最后加上一個左浮動 float:left

4）在這個后面，再加上另一個 div，樣式相同，里面輸入另一首古詩 ；

5）這兒的 float:left; 讓這個 div 框，跟上一個框并排左對齊，而不是到下一行去，

最后再加一個標簽，結束最外面的大框架；

6）保存一下文件，回到自己文件夾里，打開 lx6 網(wǎng)頁看看效果；

本節(jié)學習了使用 div 布局的基本方法，如果你成功地完成了練習，請繼續(xù)學習下一課內容；

;

網(wǎng)頁題目：css中文樣式圖,css字體樣式代碼大全
文章URL：http://chinadenli.net/article11/dsejddd.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站導航、外貿網(wǎng)站建設、響應式網(wǎng)站、網(wǎng)站設計公司、企業(yè)網(wǎng)站制作

廣告

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