css樣式學(xué)習(xí)？

CSS是Cascading style Sheets的簡稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”，我感到這樣順口一

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計,高端網(wǎng)頁制作,對格柵板等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

點，沒別的意思。實際上它是一組樣式。你可能對CSS這個名詞比較陌生，實際上無論你用Internet Explorer還是

Netscape Navigator在網(wǎng)上沖浪，幾乎隨時都在與CSS打交道，在網(wǎng)上沒有使用過CSS的網(wǎng)頁可能不好找。不管你用什么工

具軟件制作網(wǎng)頁，都有在有意無意地使用CSS。用好CSS能使你的網(wǎng)頁更加簡煉，為什么同樣內(nèi)容的網(wǎng)頁，有的人做出來有

幾十KB，而高手做出來只有十幾KB，CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小經(jīng)驗以及一些網(wǎng)友來信

提問的問題整理出來，供諸位參考。

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

當(dāng)有多個網(wǎng)頁要用到的CSS，采用外連CSS文件的方式，這樣網(wǎng)頁的代碼大大減少，修改起來非常方便；只在單個網(wǎng)頁

中使用的CSS，采用文檔頭部方式；只有在一個網(wǎng)頁一、兩個地方才用到的CSS，采用行內(nèi)插入方式。

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

三種用法可以混用，且不會造成混亂。這就是它為什么稱之為“層疊樣式表”的原因，瀏覽器在顯示網(wǎng)頁時是這樣處

理的：先檢查有沒有行內(nèi)插入式CSS，有就執(zhí)行了，針對本句的其它CSS就不去管它了；其次檢查頭部方式的CSS，有就執(zhí)行

了；在前兩者都沒有的情況下再檢查外連文件方式的CSS。因此可看出，三種CSS的執(zhí)行優(yōu)先級是：行內(nèi)插入式、頭部方

式、外連文件方式。

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)頁設(shè)計人員來講，要用記事之類的編輯器，去創(chuàng)建一個CSS外連式文件是相當(dāng)困難的。由于

Dreamweaver3對CSS支持的很好，用它來幫助就輕松多了。具體可以這樣操作：

1）先在紙上寫好在網(wǎng)站的網(wǎng)頁中可能要用到的格名稱，然后在Dreamweaver3的編輯窗中調(diào)出CSS面板，一個一個地定

義，并在一個空白頁上適當(dāng)?shù)貙懸稽c相關(guān)內(nèi)容，邊定義邊試用，效果不滿意，立即修改；

2）全部定義好后，再用記事本創(chuàng)建一個空的CSS外連式文件，把在head與/head之間的那段定義好的CSS復(fù)制

到CSS文件中去，就大功告成了。整個過程就是點鼠標(biāo)，方便吧？

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

不用！先用CSS面板定義好要用的CSS，然后，在要插入CSS的標(biāo)記插入：style=""，再把你剛才定義的CSS從head

后面拖到這個雙引號中來，把花括號以外的部分刪去就行了。

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

這一對東東的作用是為了不引起低版本瀏覽器的錯誤。如果某個執(zhí)行此頁面的瀏覽器不支持CSS，它將忽略其中的內(nèi)

容。雖然現(xiàn)在使用不支持CSS瀏覽器的人已很少了，由于互聯(lián)網(wǎng)上幾乎什么可能都會發(fā)生，所以還是留著為妙。

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

給文字加上不同顏色，在DW3中只要在屬性面板上選取文字的顏色就行了，非常方便，但要給部分文字加不同的背景色

卻沒有相應(yīng)的功能，我們可以先做一個定義背景色的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)長度為單位，正負(fù)值均可，當(dāng)取負(fù)值時產(chǎn)生字符擠在一起的效果。下

面代碼是一個定義好的字間距CSS例子：

style type="text/css"

!--

.style1 { letter-spacing: 3px}

--

/style

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

在DW3中CSS的屬性定義對話框(style Definition for .style1)的“Type”上的“decoration”屬性定義的就是這些

內(nèi)容，要注意的是閃爍屬性有些版本的瀏覽器不支持，少用為好。下面是一個定義好上述效果的CSS例子：

style type="text/css"

!--

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

--

/style

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

定義的是文字閃爍。

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

由于DW3輸入空格不方便，利用“首行縮進(jìn)”將彌補(bǔ)這個不足。在DW3中CSS的屬性定義對話框（style Definition

for .style1)的“Block”上的“text-indent”屬性定義的就是“首行縮進(jìn)”，所謂“首行”是指每段內(nèi)容的第一行，也

就是直接按回車鍵就形成了一個新的段落?？s進(jìn)最好以“em”（字符）為單位，比如：漢字編排要求每段開始縮進(jìn)兩個漢

字，設(shè)置好的CSS如下所示：

style type="text/css"

!--

.style1 { text-indent: 2em}

--

/style

在DW3要注意：在DW3中CSS的屬性定義對話框（style Definition for .style1)的“Block”上的“text-indent”右

面的縮進(jìn)單位選擇框中“ems”指的就是“em”。

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

可以！在DW3中CSS的屬性定義對話框（style Definition for .style1)的“Box”上的“margin”定義的就是內(nèi)容離

開邊緣的距離，分別可定義四個方向：“top”“bottom”“l(fā)eft”“right”。下面就是定義在左邊離開“10px”的CSS例

子代碼：

style type="text/css"

!--

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

--

/style

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

用CSS可以給某部分內(nèi)容加邊框，在DW3中CSS的屬性定義對話框（style Definition for .style1)的“Border”定義

的就是邊框線，“top”“bottom”“l(fā)eft”“right”四邊可分別定義線的粗細(xì)和顏色，這些定義好后不要忘記在下面的

“style”中定義線型，否則將看不邊框線，因為默認(rèn)的線型是“none”。下面是一個定義了上邊框為：藍(lán)色細(xì)線；左邊框

為：綠色中粗線的CSS例子：

style type="text/css"

!--

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

--

創(chuàng)建并定義了CSS樣式后，怎樣應(yīng)用CSS樣式？

你說的是CSS外部樣式引用

可以在head之間加上

link rel="stylesheet" href="這個是你的CSS樣式地址和CSS文件" type="text/css" /

（使用DW寫上面那句話的時候，它會有自動提示和連接引導(dǎo)）

或者直接使用DW來連接外部樣式表，名字叫CSS樣式，或者找窗口-CSS樣式

位置在軟件界面的右上角，有個鐵鏈一樣的小圖標(biāo)

它會自動引導(dǎo)你連接CSS樣式，還有修改添加功能

我在線，有疑問我再回你。

如何做css，用什么軟件？

TopStyle

TopStyle是一款Cascading Style Sheets (CSS) 的編輯軟件，可以幫助我們編寫符合包括CSS2標(biāo)準(zhǔn)在內(nèi)的樣式表。TopStyle具有CSS定義選擇功能，讓你可以選取特定的瀏覽器或CSS階層、內(nèi)建的樣式表檢查器、內(nèi)部的預(yù)覽能力、以顏色標(biāo)示的編輯器，以及樣式預(yù)覽。TopStyle是第一款可以使用Mozilla等Gecko瀏覽器的程序。你可以用內(nèi)嵌的Internet Explorer和Mozilla Gecko來預(yù)覽你的式樣表，或者分開使用。此外，TopStyle的設(shè)計對系統(tǒng)十分友善。它不會安裝任何DLL、ActiveX controls或其它系統(tǒng)文件。功能相當(dāng)多，附有CSS碼檢查功能，減少寫錯的機(jī)會。尤其是它的HELP文件中詳細(xì)的CSS指令介紹，很適于用作參考文件與初次接觸CSS的人做為學(xué)習(xí)使用。如果你想學(xué)習(xí)web標(biāo)準(zhǔn)，制作CSS需要一個好軟件，TopStyle是非常棒的選擇。

下載地址：

Dreamweaver

Dreamweaver是美國MACROMEDIA公司開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。DREAMWEAVER、FLASH以及在EAMWEAVER之后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計的FIREWORKS，三者被MACROMEDIA公司稱為DREAMTEAM(夢之隊)，足見市場的反響和MACROMEDIA公司對它們的自信。

下載地址：

CSS常用樣式二

實際應(yīng)用，更多的使用italic屬性值

實際應(yīng)用中， 行高的數(shù)值通過設(shè)計圖獲取， 量取數(shù)值時需要使用一些輔助軟件工具

選中文字工具，屬性選中：不消除鋸齒

字體、 字號、 行高、 加粗、 斜體 都是font綜合屬性的單一屬性。

font屬性五個單一屬性的值可以進(jìn)行合寫， 屬性值可以有2到多個， 值之間用空格進(jìn)行分隔。

font進(jìn)行綜合書寫時， 必須有字號和字體參與， 而且必須字號在前， 字體在后， 不能顛倒順序。

font屬性經(jīng)常對字體、 字號、 行高進(jìn)行合寫， 書寫順序必須是字號、 行高、 字體， 字號和行高之間必須用/進(jìn)行分隔

如果font屬性需要設(shè)置加粗和斜體， 兩個屬性值只能寫在最前面， 兩個值之間可以互換位置。 后面的字號、 行高、 字體不能更改位置

作用：設(shè)置文本整體是否有線條的裝飾效果

作用：設(shè)置段落首行是否進(jìn)行縮進(jìn)

實際應(yīng)用中，常用em

屬性值區(qū)分正負(fù)， 正數(shù)表示向右縮進(jìn)， 負(fù)數(shù)表示向左縮進(jìn)

瀏覽器控制臺中的盒模型圖

作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的寬度。

作用： 設(shè)置可以添加元素內(nèi)容的區(qū)域的高度。

如果一個元素不添加 height 屬性， 默認(rèn)屬性值為auto， 瀏覽器會自動計算出實際高度， 也就是是內(nèi)部元素內(nèi)容自動撐開的高度。 元素的高度自適應(yīng)內(nèi)部內(nèi)容的高度。

書寫四個方向單一屬性時， 一般是按照順時針規(guī)律書寫： 上、 右、 下、 左

設(shè)置四個屬性值， 分配方向上、 右、 下、 左。

設(shè)置三個值分配給上、 左右、 下。

設(shè)置兩個值， 分配給上下、 左右 。

設(shè)置屬性值只有一個， 四邊的值相同。

作用： 設(shè)置邊框的顏色。

屬性值： 顏色名或顏色值， 整體類似 padding 綜合屬性寫法。

每個單一屬性都必須與復(fù)合屬性 border 一致， 設(shè)置三個屬性值。

書寫四個方向單一屬性時， 一般是按照順時針規(guī)律書寫： 上、 右、 下、 左

設(shè)置四個屬性值， 分配方向上、 右、 下、 左。

設(shè)置三個值分配給上、 左右、 下。

設(shè)置兩個值， 分配給上下、 左右 。

設(shè)置屬性值只有一個， 四邊的值相同。

給 body 標(biāo)簽設(shè)置整體文字樣式， 讓大部分后代標(biāo)簽全部去繼承

設(shè)計圖中盒子高度占位是固定的， 后面同級元素在高度下面加載。多余內(nèi)容會溢出盒子。

設(shè)置了高度的盒子， 如果內(nèi)部元素的加載高度超過父級， 會溢出。可以通過一個溢出的屬性 overflow， 進(jìn)行溢出部分內(nèi)容的顯示效果設(shè)置。

要求盒子高度必須自適應(yīng)內(nèi)部內(nèi)容的高度。

或者設(shè)置height的屬性值是自動的。

一個元素內(nèi)部嵌套的子元素， 在父元素中居中。

針對類似 div 樣式上必須獨占一行的盒子， 如果子盒子寬度低于父盒子寬度， 可以設(shè)置子盒子的 margin 值， 水平方向的值都設(shè)置為 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果設(shè)置為 auto， 邊距會自動無限增大， 直到撐滿整個父元素除了子元素寬度之外剩余的區(qū)域， 如果兩個水平方向都是 auto， 兩邊都要無限大， 只能達(dá)到一個平衡， 兩邊距離相同， 導(dǎo)致盒子居中。

一般情況下， 一個父元素內(nèi)部可以放一個或多個子元素， 而且多個子元素要排成一行顯示， 必須保證父元素的寬度一定要足夠（不考慮溢出情況） ， 需要遵循一個設(shè)置尺寸的規(guī)律： 所有子元素的寬度加在一起不能大于父元素的寬度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不滿足條件： 要么多余的子元素掉下來不能在一排， 要么溢出父元素

父子盒模型中， 只有一個子元素， 且子元素是類似 div 標(biāo)簽必須占一行的。不設(shè)置子元素的 width 屬性， 子元素的 width 屬性值會自動加載父級元素的 width。如果同時設(shè)置了子元素水平方向的 padding 和 border 、 margin， 不需要手動去進(jìn)行內(nèi)減， 子元素的 width 會自動收縮尺寸。

子元素所有的水平方向的位置所有屬性的加和等于父元素的 width 。

在垂直方向如果有兩個元素的外邊距有相遇的， 瀏覽器中加載的真正的外邊距不是兩個間距的加和， 而是兩個邊距中值較大的， 邊距值小的塌陷到了邊距值大的值內(nèi)部。

上面的元素有下邊距， 下面的元素有上邊距， 兩個邊距相遇， 真正的盒子間距離是較大的那個值

父子元素之間也會出現(xiàn) margin 塌陷， 父元素和子元素都設(shè)置了同方向的margin-top 值， 兩個屬性之間沒有其他的內(nèi)容進(jìn)行隔離， 導(dǎo)致兩個屬性相遇， 發(fā)生margin 塌陷。

本身父元素與上一個元素的距離是0， 子元素如果設(shè)置了垂直方向的上邊距， 會帶著父級一起掉下來。

水平方向的 margin 沒有塌陷現(xiàn)象。

在標(biāo)準(zhǔn)流中， 大部分元素是區(qū)分等級的， 習(xí)慣將元素劃分為幾種常見的加載級別：塊級元素、 行內(nèi)元素、 行內(nèi)塊元素等。

大部分容器級標(biāo)簽包括p標(biāo)簽都是塊級元素， 比如 div 、 h1 等。

大部分的文本級標(biāo)簽， 比如 span、 a、 b 等。

比如 img、 input 等。

可以通過 display 屬性更改一個標(biāo)簽的顯示模式。

屬性值： 元素根據(jù)屬性值不同， 可以加載對應(yīng)元素等級的顯示模式的特點。

display 屬性更改的顯示模式并沒有改變標(biāo)準(zhǔn)流本質(zhì)性質(zhì)， 頁面還是只能從上往下加載， 存在空白折疊現(xiàn)象等微觀性質(zhì)。 要想實現(xiàn)更多的界面布局效果需要脫離標(biāo)準(zhǔn)流的限制。

標(biāo)簽元素脫離標(biāo)準(zhǔn)流的方法包括： 浮動、 絕對定位、 固定定位。

margin 塌陷現(xiàn)象出現(xiàn)在標(biāo)準(zhǔn)流中的， 浮動元素已經(jīng)脫離標(biāo)準(zhǔn)流， 不再具有 margin塌陷現(xiàn)象。

與前面壓蓋效果結(jié)構(gòu)類似， 同級元素中前面的元素浮動， 后面的元素不浮動， 不浮動的元素內(nèi)部還有一些文字， 浮動的藍(lán)盒子會壓蓋住粉盒子的一部分， 但是文字內(nèi)容不會被蓋住， 粉盒子中的文字會讓開藍(lán)盒子位置， 圍繞它進(jìn)行加載。這種效果稱為字圍現(xiàn)象。

可以利用字圍現(xiàn)象制作一些特殊的圖文混排布局效果

給標(biāo)準(zhǔn)流的父元素強(qiáng)制給一個合適的高度

作用： 清除標(biāo)簽元素自身受到的前面的浮動元素的影響。

給標(biāo)準(zhǔn)流父元素添加 clear 屬性， 父元素不受前面浮動影響， 不會再占有浮動讓出的位置。

給內(nèi)部有浮動子元素的父元素添加溢出隱藏 overflow: hidden; 屬性， 可以解決浮動的所有問題。

父元素有了高度后， 可以管理住內(nèi)部所有的浮動元素， 不會延伸到后面標(biāo)簽中影響貼邊。

a 標(biāo)簽可以根據(jù)用戶行為不同， 劃分為四種狀態(tài)， 通過a 標(biāo)簽的偽類可以將四種狀態(tài)選中設(shè)置為不同的樣式效果， 用戶觸發(fā)對應(yīng)行為， 就可以加載對應(yīng)的樣式。

一般會將訪問前和訪問后狀態(tài)設(shè)置為一樣的效果， 保證了頁面的統(tǒng)一性， 可以選擇性的設(shè)置鼠標(biāo)移上和鼠標(biāo)點擊狀態(tài)。

更加常用的一種設(shè)置方式如下：

a 標(biāo)簽任何普通的選擇器， 可以同時選中四種狀態(tài)， 可以將四種狀態(tài)設(shè)置為相同的樣式， 屬性可以設(shè)置所有的 a 默認(rèn)顯示樣式的屬性， 包括盒模型、 文字等。

a:hover 偽類選擇器： 設(shè)置鼠標(biāo)移上時不一樣的樣式屬性。

屬性值都是使用代表方向的單詞進(jìn)行書寫。

使用像素值作為背景定位的屬性值。

百分比表示法使用百分比數(shù)字作為屬性值。

100%代表的數(shù)值：

background 屬性可以將五個單一屬性的值進(jìn)行合寫。

屬性值： 可以有 1-5 個屬性值， 值之間用空格進(jìn)行分隔， 背景定位的兩個屬性值算作一個屬性值， 不能被分開也不能顛倒順序。 五個屬性值之間可以互換位置。

在h1 標(biāo)簽是權(quán)重最高的標(biāo)簽， 一般會在內(nèi)部書寫最重要的內(nèi)容， 比如 logo 圖片、 最大的標(biāo)題等。

另外 h1 內(nèi)部的文字， 可以幫助提高 SEO 搜索排名。

在設(shè)置的是 logo 圖片時， 如果使用插入圖， 就不能書寫搜索關(guān)鍵字。

如果想解決 SEO 問題， 可以將 HTML 結(jié)構(gòu)中， 插入圖換成搜索關(guān)鍵字， 然后使用 css 添加背景圖給 a 標(biāo)簽或 h1 標(biāo)簽。

在一個盒子中有背景圖部分， 而且有文字內(nèi)容， 文字會讓開背景圖區(qū)域進(jìn)行加載，

背景區(qū)域應(yīng)該使用 padding 擠出位置。

四個方向的 padding 都可能用于添加背景圖。

當(dāng)用戶訪問一個網(wǎng)站時， 需要向服務(wù)器發(fā)送請求， 網(wǎng)頁上的每張圖像都要經(jīng)過一次求才能展現(xiàn)給用戶。

然而， 一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾， 當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接受和發(fā)送請求， 這將大大降低頁面的加載速度。為了有效地減少服務(wù)器接受和發(fā)送請求的次數(shù)， 提高頁面的加載速度， 出現(xiàn)了 CSS精靈技術(shù)（也稱 CSS Sprites、 CSS 雪碧） 。

CSS 精靈是一種處理網(wǎng)頁背景圖像的方式。

它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去， 然后將大圖應(yīng)用于網(wǎng)頁， 這樣， 當(dāng)用戶訪問該頁面時， 只需向服務(wù)發(fā)送一次請求， 網(wǎng)頁中的背景圖像即可全部展示出來。

通常情況下， 這個由很多小的背景圖像合成的大圖被稱為精靈圖。

CSS3 支持背景半透明的寫法， 顏色值增加了一種 rgba 模式。

rgba 模式 ： 在 rgb 基礎(chǔ)上增加了一個不透明度的設(shè)置， 不透明度 alpha 取值范圍在0-1 之間， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

書寫方式： rgba(紅色， 綠色， 藍(lán)色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響。

通過 background-size 設(shè)置背景圖片的尺寸， 就像我們設(shè)置 img 的尺寸一樣， 在移動 Web 開發(fā)中做屏幕適配應(yīng)用非常廣泛。

CSS3 中規(guī)定， 一個盒子上， 可以添加多個背景圖片。

background-image 的屬性值書寫時， 以逗號分隔多背景的 URL路徑地址。

注意： 背景加載時， 先寫的背景壓蓋后寫的背景圖片。

屬性名： position。

作用： 設(shè)置定位的元素， 它需要根據(jù)某個參考元素發(fā)生位置的偏移。

定位的元素要想發(fā)生位置的移動， 必須搭配偏移量屬性進(jìn)行設(shè)置。

水平方向： left、 right。

垂直方向： top、 bottom。

屬性值： 常用 px 為單位的數(shù)值， 或者百分比。

子絕父相、 子絕父絕、 子絕父固

屬性值： absolute， 絕對的意思。

參考元素： 參考的是距離最近的有定位的祖先元素， 如果祖先都沒有定位， 參考body。必須搭配偏移量屬性才會發(fā)生位置移動。

性質(zhì)： 絕對定位的元素脫離標(biāo)準(zhǔn)流， 會讓出標(biāo)準(zhǔn)流位置， 可以設(shè)置寬高， 也可以隨時定義位置， 絕對定位的元素不設(shè)置寬高只能被內(nèi)容撐開。

注意1： 絕對定位的參考元素是不固定的， 不同的參考元素以及不同的偏移量組合，會導(dǎo)致絕對定位元素的參考點不同， 具體位移效果不同。

注意2： 在絕對定位中， 由于參考點不同， left 正值不再等價于 right 的負(fù)值。

以 body 為參考元素時， 參考點的確定與偏移量方向有關(guān)

第一， 如果有 top 參與的定位， 參考點就是 body 頁面的左上頂點和右上頂點。 自身的對比點是盒子的所有盒模型屬性最外面的左上角或右上角。

第二， 如果有 bottom 參與的絕對定位， 參考點是 body 頁面首屏的左下頂點或右下頂點。 對比點是盒子的所有盒模型屬性最外面的左下角或右下角。

實際應(yīng)用中， 如果以 body 為參考元素， 不同分辨率的瀏覽器中， 絕對定位的元素位置是不同的， 所以較少使用 body 作為參考元素。

祖先級為參考元素

如果祖先級中有定位的元素， 就不會去參考 body 。

參考元素： 參考的是祖先元素中有任意定位的， 在 HTML 結(jié)構(gòu)中距離目標(biāo)最近的祖先。

如果絕對定位的參考元素是某個祖先級， 參考點是盒子 border 以內(nèi)的四個頂點， 組合方向決定了參考點。 絕對定位的元素只關(guān)心對比點和參考點之間的距離， 會忽視參考元素的 padding 區(qū)域。

所有的定位類型都可以實現(xiàn)壓蓋效果。

由于絕對定位的元素脫標(biāo)， 不占標(biāo)準(zhǔn)流位置， 壓蓋效果更徹底， 實際工作中， 常見的是 絕對定位制作壓蓋。

定位的元素不區(qū)分定位類型， 都會去壓蓋標(biāo)準(zhǔn)流或浮動的元素。

如果都是定位的元素， 在 HTML 中 后寫定位壓蓋先寫的定位 。

更改定位的元素的壓蓋順序， 設(shè)置一個 z-index 屬性。

屬性值： 數(shù)字。

急~~~~網(wǎng)頁制作要求用CSS是什么意思?。?/h2>

CSS的定義是由三個部分構(gòu)成:

選擇符(selector)，屬性(properties)和屬性的取值(value)。

ccs 語法: selector {property: value} (選擇符 {屬性:值})

說明:

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

例子:body {color: black}，此例的效果是使頁面中的文字為黑色。

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

例子:p {font-family: "sans serif"} (定義段落字體為sans serif)

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

例子:p {text-align: center; color: red} (段落居中排列;并且段落中的文字為紅色)

2. 選擇符組

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

h1, h2, h3, h4, h5, h6 { color: green } (這個組里包括所有的標(biāo)題元素，每個標(biāo)題元素的文字都為綠色)

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標(biāo)記里加入你定義的class參數(shù):

這個段落向右對齊的

這個段落是居中排列的

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

.center {text-align: center} (定義.center的類選擇符為文字居中排列)

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

h1 class="center"這個標(biāo)題是居中排列的/h1

這個段落也是居中排列的

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

4. ID選擇符

在HTML頁面中ID參數(shù)指定了某個單一元素，ID選擇符是用來對這個單一元素定義單獨的樣式。

ID選擇符的應(yīng)用和類選擇符類似，只要把CLASS換成ID即可。將上例中類用ID替代,ID只能在一個頁面中出現(xiàn)一次,而class可以多次運(yùn)用.

ccs 這個段落向右對齊

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

#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

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

下面這個例子，ID屬性只匹配id="intro"的段落元素:

p#intro

{

font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

}

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

5. 包含選擇符

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

table a

{

font-size: 12px

}

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

6. 樣式表的層疊性

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

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

……

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

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

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

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

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

p {color: blue}

……

這個段落的文字為藍(lán)色9號字

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

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

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

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

7. 注釋:/* ... */

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

/* 定義段落樣式表 */

p

{

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

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

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

}

css可以用任何寫文本的工具進(jìn)行開發(fā),如文本工具,dreamweaver開發(fā)

css也是一種語言,這種語言要和html或者xhtml語言相結(jié)合才起作用,

css簡單來說就是用來美化網(wǎng)頁用的,用css語言來控制網(wǎng)頁的外觀

舉個例子

xhtml部分:

ul

li主頁/li

li留言/li

li論壇/li

/ul

此時在頁面上的表達(dá)形式是一個豎向列表,這樣不夠美觀,

可以css來改善這個列表為一個橫向?qū)Ш綏l和超鏈接

css部分:

ul{list-style:none;margin:0px;padding:0px}

ul li{margin:0px;padding:0px;float:left;}

ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none;text-align:center}

ul li a:hover{background:#333;color:#fff;}

添加上css后,這個列表變成橫向的導(dǎo)航條了,超級鏈接是淡色背景,灰色字體,沒有下劃線,高度是30像素,寬度是100像素

當(dāng)我們鼠標(biāo)經(jīng)過這個超級鏈接時候,變成灰色背景,白色字體

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

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

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

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

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

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

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

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

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

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

說實話，CSS就是為了簡化這樣的工作誕生的，當(dāng)然其功能決非這么簡單。

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

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

CSS的一大優(yōu)點是它的圖片傳輸速度比較完全的HTML網(wǎng)頁要快一點。

關(guān)于CSS的參考資料，網(wǎng)上有很多討論CSS的社區(qū)，但是要系統(tǒng)學(xué)習(xí)CSS，選擇一本好書還是非常有必要的，推薦閱讀CSS三劍客之一《CSS實戰(zhàn)手冊》

CSS:

Chinese,Surface-to-Surface

中國面對面導(dǎo)彈 簡稱CSS－N

CSS具有兩面性。就像它在格式化文本、導(dǎo)航欄、圖片以及其他小小的網(wǎng)頁方面很棒一樣，當(dāng)你準(zhǔn)備好布局完整的網(wǎng)頁時，它真正可怕的一面也展現(xiàn)出來了。

CSS布局有兩種風(fēng)格——絕對定位和浮動。絕對定位讓你把一個元素以像素級的精確性定位在網(wǎng)頁的任何位置——或者理論上是這樣。這種整體控制令人興奮，就如你將在下一章中所看到的，但是實際上很難實現(xiàn)。這就是大量網(wǎng)頁使用基于浮動的布局的原因，也是本章的主題。

詳細(xì)講解CSS規(guī)范化命名的三種通用命名規(guī)則

駱駝式命名法：

正如它的名稱所表示的那樣，是指混合使用大小寫字母來構(gòu)成變量和函數(shù)的名字。例如，下面是分別用駱駝式命名法和下劃線法命名的同一個函數(shù)：

printEmployeePaychecks()；

print_employee_paychecks()；

第一個函數(shù)名使用了駱駝式命名法，函數(shù)名中的每一個邏輯斷點都有一個大寫字母來標(biāo)記；第二個函數(shù)名使用了下劃線法，函數(shù)名中的每一個邏輯斷點都有一個下劃線來標(biāo)記。

駱駝式命名法近年來越來越流行了，在許多新的函數(shù)庫和Microsoft Windows這樣的環(huán)境中，它使用得相當(dāng)多。另一方面，下劃線法是c出現(xiàn)后開始流行起來的，在許多舊的程序和UNIX這樣的環(huán)境中，它的使用非常普遍。

匈牙利命名法：

廣泛應(yīng)用于象Microsoft Windows這樣的環(huán)境中。Windows 編程中用到的變量（還包括宏）的命名規(guī)則匈牙利命名法，這種命名技術(shù)是由一位能干的 Microsoft 程序員查爾斯- 西蒙尼(Charles Simonyi) 提出的。

匈牙利命名法通過在變量名前面加上相應(yīng)的小寫字母的符號標(biāo)識作為前綴，標(biāo)識出變量的作用域，類型等。這些符號可以多個同時使用，順序是先m_（成員變量）， 再指針，再簡單數(shù)據(jù)類型，再其它。

例如：m_lpszStr, 表示指向一個以0字符結(jié)尾的字符串的長指針成員變量。

匈牙利命名法關(guān)鍵是：標(biāo)識符的名字以一個或者多個小寫字母開頭作為前綴；前綴之后的是首字母大寫的一個單詞或多個單詞組合，該單詞要指明變量的用途。

帕斯卡（pascal）命名法：

與駱駝命名法類似。只不過駱駝命名法是首字母小寫，而帕斯卡命名法是首字母大寫，如：

DisplayInfo();

string UserName;

二者都是采用了帕斯卡命名法。在C#中，以帕斯卡命名法和駱駝命名法居多。

三種命名規(guī)則的小結(jié)：

MyData 就是一個帕斯卡命名的示例

而myData是一個駱駝命名法,它第一個單詞的第一個字母小寫,后面的單詞首字母大寫,看起來像一個駱駝

而iMyData是一個匈牙利命名法,它的小寫的i說明了它的型態(tài),后面的和帕斯卡命名相同,指示了該變量的用途.

CSS樣式解決了一個普遍的問題

HTML 標(biāo)簽原本被設(shè)計為用于定義文檔內(nèi)容。通過使用 h1、、 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息。而文檔布局希望通過瀏覽器來完成，而不使用任何的格式化標(biāo)簽。

由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難。

為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C），這個非營利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。

所有的主流瀏覽器均支持層疊樣式表。

[編輯本段]CSS設(shè)計網(wǎng)頁的經(jīng)驗

相信對大家是有一些幫助與啟發(fā)的。有些習(xí)慣顯得尤為重要，今天與您分享六個CSS習(xí)慣。因為習(xí)慣其實是會變的，所以只能寫“最近”的。這些習(xí)慣都跟技術(shù)無關(guān)，如果不遵守，也不會出錯。但是我覺得良好的習(xí)慣會體現(xiàn)一個人的素質(zhì)。

一、用class_name方式寫類名。

以前喜歡用class-name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會寫成駝峰式，理由見下一條。

二、樣式都用class而不用id。

有三個理由，一，id不可以重復(fù)，所以用class的話，可以肆無忌憚的用無數(shù)次。二，id的優(yōu)先級太高，若是寫了一個#page_contenta {color:#f60}，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過這個優(yōu)先級。三，id專門留給JS用，這樣才符合表現(xiàn)與行為分離的原則。所以id我用駝峰式，也是為了體現(xiàn)這一點。

三、margin和padding，盡量省略最后一個值。

比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應(yīng)該省略掉最后一個值，寫成margin: 20px 10px5px; 這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細(xì)小，但是可以看得出對margin四個值省略規(guī)則的熟練程度。

四、按標(biāo)準(zhǔn)寫CSS，再針對特定瀏覽器作hack。

比如，通常我們會遇到如下的寫法：

.side_col {

float:left;

display: inline;

margin-left: 20px;

}

而我的寫法會是：

.side_col {

float: left;

margin-left: 20px;

}

* .side_col {

_display:inline; /*hacked for IE 6*/

}

看明白了么？不應(yīng)該把hack混在一起，也不應(yīng)該用一種僥幸的心態(tài)，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達(dá)你的目的。

另外不要以為凡是hack都是為IE準(zhǔn)備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標(biāo)準(zhǔn)的熟練掌握，能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn)，哪些違反標(biāo)準(zhǔn)的。

此外，我喜歡在hack前面加上星號，其實這純粹是個人習(xí)慣了。可能過段時間我就不這么用了，呵呵。

五、記得加空格。

.class_name { property: value; }。我個人覺得合理的空格是優(yōu)秀代碼的一個指標(biāo)。按英文的習(xí)慣，標(biāo)點后面都應(yīng)該帶空格（如果你寫This is a pen.That’s apencil.句點后面不加空格， word里面會有錯誤提示）。所以既然CSS是外國人發(fā)明的，應(yīng)該按他們的格式來寫。類似的，在JS里var a= b + c;里面的空格也應(yīng)該都要加。

六、適當(dāng)?shù)膶盈B（Cascading)或縮進(jìn)以定義CSS的“作用域”。

啥叫“CSS的作用域”？其實并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導(dǎo)航欄”里的“搜索框”，可能應(yīng)該寫成：

.nav .search {}

而有時候用層疊會增加代碼優(yōu)先級，所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣：

.login_box {}

.forgot_pwd{}

縮進(jìn)，是為了表示它們對應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起到一個提醒的作用。

七、顏色代碼的所寫

例如：

.top{ width:104px; height:96px; background:#FF0099; }

可以寫成：

.top{ width:104px; height:96px; background:#F09; }

所寫 代碼必須是 AABBCC 形式的 縮寫成 ABC。

這樣寫加快處理效率，又簡單方便。

新聞名稱：寫軟件用css樣式,css是樣式設(shè)計語言
分享鏈接：http://jinyejixie.com/article10/dssocdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、外貿(mào)建站、商城網(wǎng)站、云服務(wù)器、Google

廣告

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