html/css

時間 2019-12-18

標籤 html css 欄目 HTML 简体版

原文原文鏈接

網頁製做技術javascript

xhmtl+css標記語言css

1、WEB標準的概念及組成html

結構：xhtml、xmljava

表現：csscss3

行爲：DOM.ECMAScriptweb

web標準是網頁製做標準，是根據網頁的組成部分而生成的一系列標準，它不是一個標準算法

W3C（萬維網聯盟）制定的是結構和表現的標準chrome

ECMA（歐洲電腦廠商聯合會）指定的是行爲的標準windows

Web標準是一個複雜的概念集合，它由一系列標準組成。瀏覽器

這些標準大部分由W3C起草與發佈，也有一些標準是其它標準組織制訂，如ECMA（European Computer Manufactrrers Association,歐洲電腦廠商協會）的ECMAScript標準。

W3C( World Wide Web Consortium )萬維網聯盟，建立於1994年是Web技術領域最具權威和影響力的國際中立性技術標準機構。

W3C 最重要的工做是發展 Web 規範(制定告終構和表現的標準，非盈利的）

結構：

結構標準語言在網頁中主要對網頁信息起到組織和分類的做用，主要包括(xhtml ,xml)

表現：(css)

表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單地說就是如何修飾網頁信息的顯示樣式，

ECMA（歐洲電腦場商聯合會）制定的行爲標準

ECMA於1960年由一些歐洲最大的計算機和技術公司成立，與w3c同樣，是一家非盈利的組織，目標是評估開發和承認電信和計算機標準。

旨在創建統一的電腦操做格式標準--包括程序語言和輸入輸出的組織。

行爲標準語言在網頁中主要對網頁信息的結構和現實進行邏輯控制，簡單地說就是動態的控制網頁的結構和顯示，實現網頁的智能交互，

簡單的說, web標準提出的就是一種靜態html頁面的製做標準.

本意是實現內容(結構)和表現分離，就是將樣式剝離出來放在單獨的css文件中。這樣作的好處是能夠分別處理內容和表現

HTML用1.2.1 HTML 、XHTML 、HTML5

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

XHTML指可擴展超文本標記語言（標識語言）（The EXtensible HyperText Markup Language）。 XHTML 是更嚴格更純淨的 HTML 版本

HTML1.0， HTML2.0 ，HTML3.0， HTML4.0 ，XHTML1.0 ，HTML5

一、HTML 1 並不曾存在，草案（並無真正地肯定），HTML 得第一個官方版本即是由 IETF （互聯網工程任務組）推出得 HTML2.0。其後，W3C取代IETF得角色，成爲HTML得標準構造

二、HTML 在 HTML 4.01 以後得第一個修訂版本即是 XHTML 1.0，此中 X 表明「eXtensible」，擴展，當然也有人將之解讀爲「eXtreme」，極度。XHTML 1.0 是基於 HTML 4.01得，並無引入任何新標籤或屬性，惟一得區別是語法，HTML 對語法比力任意，而 XHTML 則要求 XML 般得嚴格語法。HTML 4.01允許你利用大寫或不大寫字母標識標記元素和屬性，XHTML 則只允許不大寫字母。

三、對 W3C 而言，到了 HTML 4 已是功德圓滿，他們得下一步事變是 XHTML 2，XHTML 2 不向前兼容，乃至不兼容以前得HTML。它是一種全新得語言，盼望將Web帶向 XML得光亮未來。W3C 憑空杜撰得做風引發了部分人得不滿，來自 Opera, Apple, 以及 Mozilla得表明開始表達反對聲音。他們自發構造建立了超文本應用技術事變組，即是 WHATWG。

目前推薦遵循的是W3C於2000年1月26日發佈的XHTML1.0

HTML5 指的是HTML的第五次重大修改

WHATWG網頁超文本應用技術工做小組是一個以推進網絡HTML 5 標準爲目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

(HTML5 是 W3C 與 WHATWG 合做的結果，是最新的html規範）

IETF 互聯網工程任務組

國際互聯網工程任務組（The Internet Engineering Task Force，簡稱 IETF）是一個公開性質的大型民間國際團體，聚集了與互聯網架構和互聯網順利運做相關的網絡設計者、運營者、投資人和研究人員，並歡迎全部對此行業感興趣的人士參與。

互聯網工程任務組，成立於1985年末，是全球互聯網最具權威的技術標準化組織，主要任務是負責互聯網相關技術規範的研發和制定，當前絕大多數國際互聯網技術標準出自IETF。

IETF的主要任務是負責互聯網相關技術標準的研發和制定，是國際互聯網業界具備必定權威的網絡相關技術研究團體。

2、html及相關的概念的介紹

html（Hyper Text Markup language）超文本標記語言

xhtml（Extensible Hyper Text Markup Language）可擴展超文本標記語言

Html5是Html的第五次重大修改（是W3C與WHATWG合做的結果）

3、DW基本功能

4、調試工具——瀏覽器

1）PC端調試工具的使用——瀏覽器

2）移動端調試工具chrome能夠測試移動端頁面

5、創建站點

站點的做用：用來規劃一整個網站的全部內容和代碼

6、

HTML5基本結構（新建一個HTML文件默認有哪些代碼）

<!doctype html> 命名文檔類型

<html> 說明咱們寫的是標記語言

<head> 文件頭部

<title>首頁</title> 文件標題（顯示在狀態欄上的內容）

</head>

<body> 文件主體（全部要寫的內容）

</body>

</html>

xhtml基本語法（必須遵照）

一、常規標記

<標記屬性=」屬性值」屬性=」屬性值」></標記>

二、空標記

<標記屬性=」屬性值」 />

說明：

1.寫在<>中的第一個單詞叫作標記（標籤、元素）

2.標記和屬性用空格隔開，屬性和屬性值用等號鏈接，屬性值必須放在」」號內

3.一個標記能夠沒有屬性，也能夠有多個屬性，屬性和屬性之間不分前後順序

4.空標記沒有結束標籤，用/代替

html經常使用標記

1) 文本標題（h1-h6）

……

2）段落

3）強制換行

<br/> 強制換行

4）空格

它所佔的位置大小不固定空格大小和中英文沒有關係，和字號大小有關

5）加粗文本

6）傾斜

<em>傾斜文本</em>（起強調做用）

7）水平線

<hr /> 空標記

8）列表

html中有三種列表：無序列表、有序列表、自定義列表

無序列表

<ul> ul裏面只能放li

……

</ul>

有序列表

<ol> 子元素放在父元素裏要空四個空格，或者按tab鍵

……

</ol>

自定義列表

<dl>

……

</dl>

</ol>

1爲數字1234 a爲小寫abcd A爲大寫ADCD i爲小寫羅馬數字 I爲大寫羅馬數字，不能有漢字的，例如1、二

<ol type=」A」 reversed> 這樣能夠實現倒序

加上 start=」2」則表示從從B開始往下數

9）插入圖片

注：所要插入的圖片必須放在站點下

title的做用：當鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，html的絕大多數標籤都支持title屬性，title屬性是專門作提示信息的

alt的做用：alt屬性是在你的圖片由於某種緣由不能加載時頁面現實的提示信息，他會直接輸出在本來加載圖片的地方

相對路徑的寫法：

1.噹噹前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名

2.噹噹前文件與目標文件所處的文件夾在同一目錄下：文件夾名/目標文件全稱.擴展名

3.噹噹前文件所處的文件夾和目標文件夾所處的文件夾在同一個目錄下：../文件夾名/目標文件全稱.擴展名

10）超連接的應用

語法：

<a href=」目標路徑及全稱/鏈接地址」 alt=」替換文本」 title=」提示文本」>鏈接文本或圖片</a>

<a href=」#」></a> 空連接（跳轉到頂部）

<a href=」javascript:;」 /> 空連接（無動做）

屬性：target：頁面打開方式

屬性值：_blank 新窗口打開

<a href=」#」 target=」_blank」>新頁面打開</a>

<a></a>在導航裏，若是設置背景圖，中間必須寫文字，能夠加text-indent:-999px;overflow:hidden;中間的文字將會隱藏。

11）數據表格的做用

做用：顯示數據

cellspacing:」單元格間距」 cellpadding:」單元格內容與其邊框之間的空白」

<tr> 一行

<td></td> 一列（一個單元格）

……

</tr>

</table>

注：一個tr表示一行，一個td表示一列（一個單元格）

colspan=」」合併列 rowspan=」」合併行

表格的(列)表頭使用 <th> 標籤進行定義

<tr> <th>Heading</th> <th>Another Heading</th> </tr>

</table>

12）表單

做用：收集用戶信息

表單域

能完成一個功能的東西，要放在同一個表單域裏面

get和post是傳送方式，get傳送速度快，post傳送安全性高

表單元素

1.用戶名

2.密碼框

3.提交按鈕

4.重置按鈕

5.單選框/單選按鈕（name屬性必須相同，不然沒法實現單選）

checked=」checked」默認選中

6.複選框

disabled=」disabled」禁用

7.下拉菜單

… …

</select>

在option標籤中添加select=」select」則能夠設置默認選項

8.多行文本框（文本域）

通常寬度以英文字母的個數來算，寫出來的框能夠輸入文本內容，也能夠提早輸入好內容，後面能夠刪除、修改

9.按鈕

它和submit的區別是，submit是提交按鈕，起提交信息的做用，button只起跳轉的做用，不進行提交

10.隱藏域（裏面的內容將被隱藏起來）

13）div的用法

14）span的用法

<span>內容</span>文本節點（某一小段文本，或是某一個字）

Span標籤是根據內容佔用相應的大小空間，而div標籤則是佔用一整行。

CSS基礎

一、CSS簡介

cascading style sheets 漢譯層疊樣式表,WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。

目前推薦遵循的是W3C發佈的CSS3.0.

用來表現XHTML或者XML等樣式文件的計算機語言。

1998年5月21日由w3C正式推出的css2.0

二、樣式的創建:

內部樣式外部樣式和內聯樣式（就近原則）

內部樣式：

語法：

/*css語句*/

</style>

注：使用style標記建立樣式時，將該標記寫在<head></head>裏面。

三、CSS語法

選擇符{屬性：屬性值；屬性：屬性值；}

說明：

1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；

2）屬性必須放在花括號中，屬性與屬性值用冒號鏈接。

3）每條聲明用分號結束。

4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。

5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示。

四、外部樣式的創建及調用

a:外部樣式表的建立

b:外部樣式表的導入

*方法一

說明：使用link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。

*方法二

@import url(目標文件的路徑及文件名全稱);

</style>

注：@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；

*link和import導入外部樣式的區別：

差異1：老祖宗的差異：link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。 link標籤除了能夠加載CSS外，還能夠作不少其它的事情，好比定義RSS，定義rel鏈接屬性等，@import就只能加載CSS。

差異2：加載順序的差異：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。

差異3：兼容性的差異：@import是CSS2.1提出的，因此老版本瀏覽器不支持，@import只在IE5以上的才能識別，而link標籤無此問題。

差異4：使用dom控制樣式時的差異：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

3) 內聯樣式表（行間樣式，行內樣式，嵌入式樣式）

語法：<標籤 style="屬性：屬性值;屬性:屬性值;"></標籤>

四、樣式表的優先級

內聯樣式表的優先級別最高

內部樣式表與外部樣式表的優先級和書寫的順序有關，後書寫的優先級別高。

五、CSS選擇符（選擇器）

選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素.

經常使用的選擇符有十種左右：類型選擇符，id選擇符，class選擇符，通配符，羣組選擇符，包含選擇符，僞類選擇符，僞對象選擇符。

1）元素選擇符/類型選擇符（element選擇器 )

語法：元素名稱{屬性：屬性值；}

說明：

a)元素選擇符就是以文檔語言對象類型做爲選擇符，即便用結構中元素名稱做爲選擇符。例如body、div、p、img、em、strong、span......等。

b)全部的頁面元素均可以做爲選擇符;

用法：

a）若是想改變某個元素的默認樣式時，可使用類型選擇符；
b）當統一文檔某個元素的顯示效果時，可使用類型選擇符；

2) id選擇器

語法：#id名{屬性：屬性值;}

說明：

a）當咱們使用id選擇符時，應該爲每一個元素定義一個id屬性，

如：<div id="top"></div>

b）id選擇符的語法格式是「#」加上自定義的id名

如：#box{width:300px; height:300px;}

c)起名時要取英文名，不能用關鍵字：(全部的標記和屬性都是關鍵字)

如：head標記

d）一個id名稱只能對應文檔中一個具體的元素對象，由於id只能定義頁面中某一個惟一的元素對象。

e）最大的用處：建立網頁的外圍結構。

3）class選擇器

語法：.class名{屬性：屬性值;}

說明：

a）當咱們使用類選擇符時，應先爲每一個元素定義一個類名稱，

b）類選擇符的語法格式是："如：<div class="top"></div>"

用法：class選擇符更適合定義一類樣式；

4)*通配符

語法：*{屬性：屬性值；}

說明：通配選擇符的寫法是「*」，其含義就是全部元素。
用法：經常使用來重置樣式。

5）羣組選擇器

語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;}

說明：當有多個選擇符應用相同的樣式時，能夠將選擇符用「，」分隔的方式，合併爲一組。

居中：選擇符{margin:0 auto;}

6）包含選擇器

語法：選擇符1 選擇符2{屬性：屬性值;}

說明：選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的全部選擇符2;

7）僞類選擇器(僞類選擇符)

語法：

a:link{屬性：屬性值;}超連接的初始狀態;

a:visited{屬性：屬性值;}超連接被訪問後的狀態;

a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超連接時的狀態;

a:active{屬性：屬性值;}超連接被激活時的狀態，即鼠標按下時超連接的狀態;

說明：
1）當這4個超連接僞類選擇符聯合使用時，應注意他們的順序，正常順序爲：
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超連接的樣式失效；

2）爲了簡化代碼，能夠把僞類選擇符中相同的聲明提出來放在a選擇符中；

例如：a{color:red;} a:hover{color:green;} 表示超連接的三種狀態都相同，只有鼠標劃過變顏色。

5、選擇符的權重

css中用四位數字表示權重，權重的表達方式如：0，0，0，0

類型選擇符的權重爲0001

class選擇符的權重爲0010

id選擇符的權重爲0100

子選擇符的權重爲0000

屬性選擇符的權重爲0010

僞類選擇符的權重爲0010

僞元素選擇符的權重爲0010

包含選擇符的權重：爲包含選擇符的權重之和

內聯樣式的權重爲1000

繼承樣式的權重爲0000

6、註釋

html的註釋

css的註釋

/*註釋內容*/

CSS核心屬性

1、CSS屬性組成和做用

屬性：屬性值；

1.每一個css樣式必須由兩部分組成：選擇符（selector）和聲明（decleration）

注：聲明又包括屬性（properyt）和屬性值（value）

2.CSS屬性：屬性是指定選擇符所具備的屬性，它是css的核心，css2共有150多個屬性

3.CSS屬性值：屬性值包括法定屬性值和常規的數值加單位或顏色值（color value），如25px。

2、CSS核心屬性

一、文本顏色：

{color:顏色值;}

說明：

用十六進制表示顏色值：

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 9 A B C D E F

顏色模式：光色模式

R G B

FF 00 00

顏色值的縮寫：

當表示三原色的三組數字同時相同時，能夠縮寫爲三位;

當用十六進制表示顏色值時，須要在顏色值前加「#」

二、文本大小：

{font-size:value;}

例如{font-size:12px;}

說明：

1）屬性值爲數值型時，必須給屬性值加單位，屬性值爲0時除外。
2）單位還能夠是pt，9pt=12px;

3）爲了減少系統間的字體顯示差別，IE Netscape Mozilla的瀏覽器製做商於1999年召開會議，共同肯定16px/ppi爲標準字體大小默認值,即1em.默認狀況下，1em=16px,0.75em=12px;

4)使用絕對大小關鍵字
                   xx-small  =9px
                   x-small   =11px
                   small    =13px
                   medium   =16px
                   arge    =19px
                   x-large   =23px
                   xx-large  =27px

三、文本字體：

{font-family:"字體1","字體2";}

說明：
*當字體是中文字體時需加引號；
*當英文字體中有空格時需加引號如「Times New Roman」；

Windows中文版本操做系統下，中文默認字體爲宋體或者新宋體，英文字體默認爲Arial.

四、加粗：

{font-weight:bolder/bold/normal/100-900;}

說明：在css規範中把字體的粗細分爲9個等級，分別從100-900，其中100對應最輕的字體變形，而900對應最重的字體變形。

500常規字體

600-900加粗字體

五、傾斜：

{font-style:normal/italic/oblique;}
說明：italic和oblique都表示傾斜，不過oblique的幅度要大一點。但通常瀏覽器對它們的區分不是很明顯。

六、行高

{line-height:normal/數值;}

說明：只適用於單行文本

1）當單行文本的行高等於容器高時，可實現單行文本在容器中垂直方向居中對齊；

2)當單行文本的行高小於容器高時，可實現單行文本在容器中垂直中齊以上任意位置的定位；

3)當單行文本的行高大於容器高時，可實現單行文本在容器中垂直中齊如下任意位置的定位。（IE6及如下版本存在瀏覽器兼容問題）

倍行高：{line-height:2} 2倍 {line-height:1.5} 1.5倍

當使用倍行高時，不加單位px

*文字屬性簡寫：font:12px/1.5em "宋體";

font屬性的簡寫：

說明:font的屬性值應按如下次序書寫(各個屬性之間用空格隔開)

順序: font-style | font-weight | font-size / line-height | font-family

(1)簡寫時 , font-size和line-height只能經過斜槓/組成一個值，不能分開寫。

(2) 順序不能改變 ,這種簡寫法只有在同時指定font-size和font-family屬性時才起做用,並且,你沒有設定font-weight , font-style , 他們會使用缺省值。

七、水平對齊方式

{text-align:left/right/center/justify（兩端對齊中文不起做用）;}

八、垂直對齊方式不少狀況不生效

{vertical-align:top/bottom/middle;}

九、文本修飾：

text-decoration:none/underline/overline/line-through/blink(高版本瀏覽器不支持blink屬性)

說明：

none:沒有修飾

underline:添加下劃線

overline:添加上劃線

line-through:添加刪除線

blink：閃爍

十、border:3px solid red;

邊框

border:粗細（數值+單位）線型（solid/dashed/dotted/double）顏色;

右邊框

border-right:線形（solid/dashed/dotted/double）粗細（數值+單位）顏色;

左邊框

border-left:線形（solid/dashed/dotted/double）粗細（數值+單位）顏色;

上邊框

border-top:線形（solid/dashed/dotted/double）粗細（數值+單位）顏色;

下邊框

border-bottom:線形（solid/dashed/dotted/double）粗細（數值+單位）顏色;

solid:實線，dashed:虛線，dotted:點狀線，double:雙線，

十一、首行縮進：

{text-indent:value;}
說明：

1）text-indent能夠取負值；

2）text-indent屬性只對第一行起做用。

十二、字間距

{letter-spacing:value;}

控制英文字母和漢字的字距。
1三、詞間距

{word-spacing:value;}

控制英文單詞詞距

1四、文本流控制不多用（只支持IE瀏覽器）

{layout-flow:horizontal/vertical-ideographic;}
說明：

1）horizontal:自左向右
2）vertical-ideographic:自上而下

1五、列表的樣式

定義列表符號樣式：

*list-style-type:disc(實心圓)/circle（空心圓）/square(實心方塊 )none(去掉列表符號)；

*使用圖片做爲列表符號：

list-style-image:url(所使用圖片的路徑及全稱);

*定義列表符號位置：

list-style-position:outside（默認）/inside;

list-style:none;去掉列表符號

注：列表符號都不用這種方式寫，所有用插圖、背景圖來寫，這個不穩定，位置很差控制

1六、關於背景的css聲明

1）背景顏色
語法：選擇符{background-color:顏色值;}

2）背景圖片的設置

語法：background-image:url(背景圖片的路徑及全稱);

說明：

網頁上有兩種圖片形式：

a）插入圖片：屬於網頁內容，也就是結構。

b）背景圖：屬於網頁的表現，背景圖上能夠顯示文字、插入圖片、表格等。

3）背景圖片的顯示原則

a）容器尺寸等於圖片尺寸，背景圖片正好顯示在容器中;

b）容器尺寸大於圖片尺寸，背景圖片將默認平鋪，直至鋪滿元素；

c）容器尺寸小於圖片尺寸，只顯示元素範圍之內的背景圖。

*背景圖片平鋪屬性

語法：選擇符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

no-repeat:不平鋪

repeat：平鋪（默認）

repeat-x：橫向平鋪

repeat-y ：縱向平鋪

5）背景圖的固定
語法：

選擇符{background-attachment:scroll(滾動)/fixed(固定);}

6）背景圖片的位置
語法：

選擇符{background-position:left/center/right/數值 top/center/bottom/數值;}

水平方向上的對齊方式（left/center/right）或值數值能夠是負數

垂直方向上的對齊方式(top/center/bottom)或值

background-position:值1 值2;

兩個值：第一個值表示水平位置的值，第二個值：表示垂直的位置。

當兩個值都是center的時候寫一個值就能夠表明的是水平位置和垂直位置。

說明：向右方向，向下方向是負值

7）各屬性的縮寫
語法：

選擇符{background：屬性值1 屬性值2 屬性值3;}

例如：{background:#60c utl(連接地址) no-repeat 300px 300px}

調換位置不會出現問題，背景色最好加在背景圖的前面前面

8）網頁上經常使用的圖片格式

a) jpg:有損壓縮格式，靠損失圖片自己的質量來減少圖片的體積，適用於顏色豐富的圖像;(像素點組成的，像素點越多會越清晰 )

b）gif：有損壓縮格式，靠損失圖片的色彩數量來減少圖片的體積，支持透明，支持動畫，適用於顏色數量較少的圖像;

c) png:有損壓縮格式，損失圖片的色彩數量來減少圖片的體積，支持透明，不支持動畫，是fireworks的源文件格式，適用於顏色數量較少的圖像;

1七、浮動屬性：

語法：float:none/left/right;

margin: 0;padding=0清空頁面格式

margin:0 auto 居中

盒模型

1、盒模型的概念和組成

盒模型是CSS佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義全部的元素均可以擁有像盒子同樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。

標準盒子模型：

1）padding的使用方法

填充：padding在設定頁面中一個元素內容到元素的邊緣（邊框）之間的距離，也稱補白。

用法：

1.用來調整內容在容器的位置關係

2.用來調整子元素在父元素中的位置關係

注：padding屬性須要添加在父元素上。

3.padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性

屬性值的4種方式：

四個值：上右下左 {padding:10px 20px 30px 40px;} 記憶方法：順時針

三個值：上左右下{padding:10px 20px 30px;}

兩個值：上下左右{padding:10px 20px;}

一個值：四個方向padding:2px;（定義元素四周填充爲2px）

說明：可單獨設置一個方向填充，如padding-top（bottom、right、left）

2）border的使用方法

border：邊框寬度邊框風格邊框顏色；縮寫

例如：border:1px solid #60c;

邊框：border，網頁中不少修飾性線條都是有邊框來實現的

邊框寬度：border-width

邊框顏色：border-color

邊框樣式：border-style:solid（dashed/dotted/double）

可單獨設置一方向邊框

如底邊框border-bottom:邊框寬度邊框風格邊框顏色

左邊框border-left，右邊框border-right，上邊框border-top

3）margin的使用方法

邊界：margin，在元素外邊的空白區域，被稱爲邊距

屬性值的四種方式：

四個值：上右下左

三個值：上左右下

兩個值：上下左右

一個值：四個方向。margin:2px 定義元素四邊邊界爲2px

margin:2px 4px 定義上下邊界爲2px，左右邊界爲4px

margin:0 auto 定義元素上、下邊界爲0像素，在瀏覽器中橫向居中

說明：可單獨設置一個方向邊界，如margin-top:10px;

4）盒子的實際大小（公式）：

寬=左右margin+左右border+左右padding+width

高=上下margin+上下border+上下padding+height

關於溢出

1）溢出屬性（容器的）

overflow:visible/hidden（隱藏）/scroll/auto（自動）/inherit

visible：默認值，內容不會被修剪，會成如今元素框以外

hidden：內容會被修剪，而且其他內容是不可見的

scroll：內容會被修剪，可是瀏覽器會顯示滾動條，以便查看其他的內容

auto：若是內容被修剪，則瀏覽器會顯示滾動條，以便查看其它的內容

inherit：規定應該從父元素集成overflow屬性的值

2）空餘空間

white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit

該屬性用來設置如何處理元素內的空白

normal：默認值，空白會被瀏覽器忽略

pre：空白會被瀏覽器保留，其行爲方式相似Html中的pre標籤

nowrap：文本不會換行，文本會在同一行上繼續，直到遇到<br/>標籤爲止

pre-wrap：保留空白符序列，可是正常的進行換行

pre-line：合併空白符序列，可是保留換行符

inherit：規定應該從父元素集成white-space屬性的值（IE瀏覽器都不支持此屬性值）

3）文本溢出

text-overflow:clip/ellipsis

取值：

clip：不顯示省略號（...），而是簡單的裁切

ellipsis：當對象文本溢出時，顯示省略號

說明：

text-overflow屬性僅是「...」，當文本溢出時是否顯示省略標記，並不具有其它的樣式屬性，要實現溢出時產生省略號的效果還需定義：

一、容器寬度 width:value

二、強制文本在一行內顯示 white-space:nowrap

三、溢出內容爲隱藏 overflow:hidden

四、溢出文本顯示省略號 text-overflow:ellipsis

4)一個標記能夠設置多個class名

語法：<標記 class=」名稱1 名稱2」></標記>

5）版權 ©

元素類型

1、XHTML元素分類

根據CSS顯示分類，XHTML元素分爲三種類型：塊狀元素，內聯元素，可變元素

1）塊狀元素（block element）

1.塊狀元素在網頁中就是以塊的形式顯示，所謂塊狀元素就是元素顯示爲矩形區域，經常使用的塊狀元素包括塊div，dl，dt，dd，ol，ul，fieldset，h1-h6，p，form，hr，ifame，colgroup，table，tr，td等

2.默認狀況下，塊狀元素都會佔據一行，通俗的說，兩個相鄰的塊狀元素不會出現並列的現象：默認狀況下，塊狀元素會按順序自上而下排列。

3.塊狀元素均可以定義本身的寬度和高度

4.塊狀元素通常都做爲其餘元素的容器，它能夠容納其餘內聯元素和其餘塊狀元素。咱們能夠把這種容器比喻爲一個盒子。

2）內聯元素（inline element）（或者行內元素）

1.常見的內聯元素，如：a，span，strong，b，i等

2.內聯元素的表現形式是始終以行內逐個進行顯示

3.內聯元素沒有本身的形狀，不能定義它的寬度和高度、高度只能更具所包含內容的高度和寬度來肯定，它的最小內容單元也會呈現矩形形狀

4.內聯元素也會遵循盒模型基本原則，如，能夠定義padding,border,margin,background等屬性，但個別屬性不能正確顯示

3）可變元素

須要根據上下文關係肯定塊元素或者內聯元素

4）元素類型的轉換

盒子模型能夠經過display屬性來改變默認的顯示類型

1.display屬性與屬性值（18個屬性值）

display:block/inline/inline-block/none/list-item/table-header-group/table-footer-group;

做用：該屬性設置或檢索對象元素應該生成的盒模型的類型

說明：各屬性值的做用

a）block塊狀顯示：相似在元素後面添加換行符，也就是說其餘元素不能在其後面並列顯示

b）inline內聯顯示：在元素後面刪除換行符，多個元素能夠在一行內並列顯示

c）inline-block行內塊元素顯示：元素的內容以塊狀顯示，與行內的其餘元素顯示在同一行。（只有這一個元素類型支持vertical-align屬性）img，input。注：行內的塊之間默認會有一段空隙，若是要刪除這個空隙，給元素添加float:left;

d）當元素設置了float屬性後，就至關於給該元素加了display:block; 屬性

e）none此元素不會被顯示

f）list-item 將元素轉換成列表，li的默認類型

g）大部分塊元素display屬性默認爲block，其中列表的默認值爲list-item。大部份內聯元素的idsplay屬性值默認爲inline，其中img，input默認爲inline-block

超連接垂直居中

<!doctype html>

<html>

<head>

<title>無標題文檔</title>

<style>

div{width:300px;height:300px;background-color:#ccc;text-align:center;}

a{display:inline-block;vertical-align:middle}

span{display:inline-block;height:100%;vertical-align:middle}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

瀏覽器兼容

1）爲何會出現瀏覽器兼容問題？

因爲各大主流瀏覽器不一樣的廠家開發，全部的核心架構和代碼也很難重合，這就爲各類莫名其妙的bug（代碼錯誤）提供了溫牀。再加上各大廠商出於自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是咱們必須去克服的。

2）關於瀏覽器

1.主流瀏覽器

Internet Explorer、Safari、Mozilla Firefox、Google Chrome、Opera、百度、360、搜狗、遨遊

2.最先的瀏覽器

Mosaic / Netscape Navigator（網景領航者）（1994-2008）簡稱NN

3.瀏覽器大戰

第一次瀏覽器大戰發生在上個世紀90年代，微軟發佈了它的IE瀏覽器，和網景公司的Netscape Navigator大打出手

第二次瀏覽器大戰發生在20世紀。

4.瀏覽器內核及表明做品

瀏覽器最關鍵的部分就是它的渲染引擎（Rendering Engine），也就是你們日常所說的「內核」

a) 五大瀏覽器內核

·Trident / (MSHTML) （三叉戟、三叉線、三尺魚叉） IE

·Gecko （壁虎）火狐

·Presto （迅速的）Opera

·Webkit （Safari內核，Chrome內核原型，它是蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核）

·Blink （由Google 和 Opera Software開發的瀏覽器排版引擎）

b) 五大瀏覽器內核表明做品

·Trident: IE、 Maxthon（遨遊）、騰訊、Theworld世界之窗、360瀏覽器

表明做品IE，由於捆綁在Windows中，因此戰友極高的市場份額，又稱IE內核是MSHTML，此內核只能應用於windows平臺，且是不開源的。

·Gecko：表明做品Mozilla Firefox是開源的，它的最大優點是跨平臺，能在Microsoft Windows、Linux和MacOS X等主要操做系統上運行。

·Webkit：表明做品Safari、Chrome，是一個開源項目

·Presto：表明做品Opera，Presto是由Opera Software開發的瀏覽器排版引擎，它是世界上公認的渲染速度最快的引擎。

·Blink：由google和opera software開發的瀏覽器排版引擎，2013年4月發佈。

3）主流瀏覽器市場份額

4）CSS Bug、CSS Hack和Filter

1.CSS bug：CSS樣式在個瀏覽器中解析不一致的狀況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱爲CSS Bug。

2.CSS Hack：CSS中，Hack是指一種兼容CSS在不一樣瀏覽器中正確顯示的技巧，由於它們都屬於我的對CSS代碼的非官方的修改，或非官方的補丁，有些人更喜歡使用patch（補丁）來描述這種行爲。

3.Filter：表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，Fliter是一種用來過濾不一樣瀏覽器的Hack類型

使用Hack帶來的一些反作用

下降了CSS代碼的可讀性，增長了代碼的負擔

設計CSS Hack和Filter一般有兩種方法

a) 一種是利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明

b) 另外一種是利用瀏覽器對CSS支持的不完善，如對某些規則或語法尚未造成支持，來隱藏或顯示樣式

5）IE6常見CSS解析bug及hack

1.圖片間隙

a) div中的圖片間隙（該bug出如今IE6及更低版本中）

描述：在div中插入圖片時，圖片會將div下方撐大三像素

hack1：將div和img寫在同一行上<div><img src=」」 /></div>

hack2：將img轉爲塊狀元素，給img添加聲明display:block;

b) dt、li中圖片間隙（IE6）

hack：給dt、li添加聲明：overflow:hidden;

2.默認值（IE6）

描述：在IE6及更低版本中，部分塊元素擁有默認高度（低於18px高度）

hack1：給元素添加聲明：font-size:0;

hack2：給元素添加聲明：overflow:hidden;

3.雙倍浮向（IE6）

描述：在IE6及更低版本瀏覽器在解析浮動元素時，會錯誤的把浮向邊邊界加倍顯示

hack：給浮懂元素添加聲明：display:inline;

4.表單行高不一致（IE，MOZ，C，O，S）

描述：表單元素行高對齊方式不一致

hack：給表單元素添加聲明：float:left;

5.按鈕元素默認大小不一

描述：個瀏覽器中按鈕元素大小不一致

hack1：統一大小/（用a標籤模擬）

hack2：input外邊套一個標籤，在這個標籤裏寫按鈕的樣式，把input的邊框和背景色去掉。

hack3：若是這個按鈕是一個圖片，直接把圖片做爲按鈕的背景圖便可

6.百分比bug

描述：IE低版本瀏覽器在解析百分比時，會按四捨五入方式計算從而致使50%加50%大於100%

hack：給右面的浮動元素添加聲明：clear:right; 意思：清除右浮動。

clear:left; 清除左浮動

clear:both; 清除兩邊的浮動

7.鼠標指針bug

描述：cursor屬性的hand屬性值只有在ie6如下瀏覽器識別，其餘瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0及以上版本及其餘內核瀏覽器都識別該聲明

hack：若是統一某鼠標指針形狀爲手型，應添加聲明：cursor:pointer;

鼠標的樣式

auto默認

crosshair加號

text文本

wait等待

help幫助

progress過程

inherit繼承

move移動

ne-resize向上或向右移動

pointer手形

8.透明屬性

IE瀏覽器寫法：filter:alpha(opacity=value); 取值範圍1-100

兼容其餘瀏覽器寫法：opacity:.value（value取值範圍是0-9；或者在點前面加0，例如0.1, 0.2 ~ 0.9）

9.過濾器（filter）
a) 下劃線屬性過濾器

當在一個屬性前面增長了一個下劃線後，因爲符合標準的瀏覽器不能識別帶有下劃線的屬性，而忽略馬上這個聲明。可是在IE6及更低版本瀏覽器中會繼續解析這個規則。

語法：選擇符{_屬性:屬性值;}

b) !important關鍵字過濾器

它表示所附加的聲明具備最高優先級的意思。但因爲IE6及更低版本不能識別它，咱們能夠利用IE6的這個Bug做爲過濾器來兼容IE6和其餘標準瀏覽器。

語法：選擇符{屬性:屬性值!important;}

c) *屬性過濾器

當在一個屬性前增長了*後，該屬性只能被IE7如下瀏覽器識別，其餘瀏覽器忽略該屬性的做用。

語法：選擇符{*屬性:屬性值;}

定位屬性

position定位屬性，檢索對象的定位方式

1、語法：position:static/absolute/relative/fixed

取值：

一、static：默認值，無特殊定位，對象遵循html原則

二、absolute：絕對定位。將對象從文檔流中脫離出來，使用left/right/top/bottom等屬性相對其最接近的一個、並有定位設置的父元素進行絕對定位；若是不存在這樣的父對象，則依據body對象，而其層疊經過z-index屬性定義

例如 position:absolute;left:10px;top:0;

相對於父元素的位置來定義新位置

多個大小同樣的div能夠設置在同一個位置，讓其層疊起來

當移動了以後，本來的位置不佔位置，其餘元素會填充本來的位置

三、relative：相對定位。對依據right，top，left，bottom（相對定位）等屬性在正常文檔流中偏移位置

相對於本身本來的位置來定義新位置

當移動了以後，本來的位置還繼續佔位置，其餘元素不會填充本來的位置

四、fixed：固定定位，對象定位聽從絕對定位方式（absolute）；可是要聽從一些規範。支持性很差

2、絕對定位和相對定位的區別

一、參照物不一樣，絕對定位的參照物是包漢塊，相對定位的參照物是元素自己位置

二、絕對定位將對象從文檔流中脫離出來所以不佔據空間，相對定位不破壞正常的文檔流順序不管是否進行移動，元素任然佔據原來的空間。

3、包含塊的概念和做用

包含塊是絕對定位的基礎，包含塊就是爲決定定位元素提供座標，偏移和顯示範圍的參照物，即肯定絕對定位的偏移起點和百分比長度的參考

默認狀態下，body是一個大的包含塊，全部絕對定位都是根據窗口來本身所處的位置和百分比大小的顯示的，若是咱們定義了包含元素爲包含元素塊之後，對於被包含的絕對元素來講，就會根據最接近的具備定位功能的上級包含元素來定位本身的顯示位置。

定義元素爲包含塊：給絕對定位元素的父元素添加聲明position:relative;

4、定位元素層疊屬性

z-index:auto/number;

檢索或設置對象的層疊順序

auto：默認值，聽從其父對象

number：無單位的整數值，能夠爲負數

說明：

1.較大number值的對象會覆蓋在較小number值的對象之上，如兩個絕對定位對象的此屬性值是相同的number，則依據他們在html文檔中聲明的順序層疊（number值大的覆蓋在上，若是值相等，按照html中的書寫順序，寫在後面的覆蓋在上面）

此屬性僅僅做用於position屬性值爲relative或absolute的對象。

例如 position:relative;z-index:10;

5、命名錨點連接的應用

定義：是網頁製做中超連接的一種，又稱錨記。命名錨記像一個迅速定位器同樣是一種頁面內的超連接，運用至關廣泛。

命名錨點的應用：

一、命名錨點的做用：L在同一頁面內的不一樣位置進行跳轉

二、給元素定義命名錨記名

語法：<標記 id=」命名錨記名」></標記>

三、命名錨記連接

語法：<a href=」#命名錨記名稱」></a>

CSS屬性擴展

1、圓角切圖（圓角的框）

一、純CSS書寫

二、切圖拼接（ps）

2、flash和marquee（滾動字幕）

一、插入flash

1）語法：

說明：flash源文件格式.fla,

導出影片爲.swf,

建立播放器格式爲.exe.

gif格式：.gif

2）將flash背景設置爲透明

給<embed>標記添加屬性：wmode="transparent"

3）IE中不顯示flash,可作以下操做：

A.下載安裝flash player;

B.打開IE瀏覽器，選擇工具菜單--Internet選項----安全----低。

二、滾動字幕的應用：

<marquee

behavior（行爲）="scroll(滾動)/alternate（晃動）"direction（方向）="up(

從下向上)/down（從上向下）/left（從右向左）/right（從左向右）"

scrollamount（滾動速度）="value"height="value(上下滾動範圍)"width=""(左右滾動範圍)>
內容

flash

</object>

</div>

marquee

歡迎你們來學習HTML5課程！！！

</marquee>

3、滾動條

一、overflow內容溢出時的設置

屬性：

overflow 水平及垂直方向內容溢出時設置

overflow-x 水平方向內容溢出時設置

overflow-y 垂直方向內容溢出時設置

以上山歌屬性設置的屬性值：

visible、scroll、hidden、auto

visible默認值。使用該值時，不管設置的width和height的值是多少，其中的內容不管是否超出範圍豆漿杯強制顯示

hidden效果與visible相反。任何超出width和height的內容都會不可見

scroll不管內容是否超越範圍，都將顯示滾動條

auto當內容超出範圍時，顯示滾動條，不然不顯示

應用：

a) 沒有水平滾動條 overflow-x:hidden

b) 沒有垂直滾動條 overflow-y:hidden

c) 沒有滾動條 overflow-x:hidden;overflow-y:hidden或overflow:hidden

d) 自動顯示滾動條 height:100px;width:100px;overflow:auto;

二、本身定義滾動條的顏色

Body {
scrollbar-arrow-color: #f4ae21; /*圖6,三角箭頭的顏色*/
scrollbar-face-color: #333; /*圖5,立體滾動條的顏色*/
scrollbar-3dlight-color: #666; /*圖1,立體滾動條亮邊的顏色*/
scrollbar-highlight-color: #666; /*圖2,滾動條空白部分的顏色*/
scrollbar-shadow-color: #999; /*圖3,立體滾動條陰影的顏色*/
scrollbar-darkshadow-color: #666; /*圖4,立體滾動條強陰影的顏色*/
scrollbar-track-color: #666; /*圖7,立體滾動條背景顏色*/

scrollbar-base-color:#f8f8f8; /*滾動條的基本顏色*/
}

以上適用與<body>、<div>、<textarea>、<iframe>

CSS Sprites（圖片整合技術）

1、CSS Sprites原理（圖片整合技術）

1）將導航背景圖片，按鈕背景圖片等有規則的合併成一張背景圖，即將多張圖片合爲一張整圖，而後用background-position來實現背景圖片的定位技術。

2）圖片整合的優點

一、經過圖片整合來減小對服務器的請求次數，從而提升頁面的加載速度

二、經過整合圖片來減少圖片的體積

2、CSS Sprites的實現方法

1）滑動門技術

一、什麼是滑動門

滑動門是一個形象的稱呼，它利用CSS背景圖像可層疊性，並容許彼此之上進行滑動來創造一些特殊動態效果

二、滑動門特徵：

經過滑動門技術，能夠是CSS設計出來的導航菜單兼具傳統佈局的圖像效果，與CSS佈局的高效擴展性

3、寬高自適應

網頁佈局中常常要定義元素的寬和高。但不少時候咱們但願元素的大小可以根據窗口或子元素自動調整，這就是自適應。元素自適應在網頁佈局中很是中重要，它可以使網頁顯示更靈活，能夠適應不一樣設備、不一樣窗口和不一樣分辨率下顯示。

1）寬度自適應

元素寬度設置爲100%。（塊元素寬度默認爲100%）

2）高度自適應

1.元素高度自適應窗口高度

設置方法：html,body{height:100%}

2.自適應元素高度：height:100%

設置背景圖大小自適應 background-size:100% 100%

3.元素具有最小高度的自適應

min-height屬性，最小高度屬性（IE6瀏覽器不識別該屬性）
hack1：min-height:value; _height:value;

例如：

高版本瀏覽器寫屬性 min-height:200px;

IE6則添加屬性 _height:200px;

hack2：min-height:value; height:auto!important; height:value（建議用這個）

注：height屬性在IE6裏面相似min-height做用

加了!important，高版本只識別!important前height的高度，而IE6不能識別這個，只會識別!important後height的高度

min-height最小高度

max-height最大高度

min-width最小寬度

max-width最大寬度

注：IE6及如下版本不識別該屬性

4.浮動元素父元素高度自適應（高度塌陷）

hack1：給父元素添加聲明over:hidden;

hack2：在浮動元素下添加一個空div，並給該元素添加聲明：clear:both;height:0;overflow:hidden;

hack3：萬能清除浮動法（父元素加）

:after{content:」.」;display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}

visibility:hidden隱藏/visible可見

visibility:hidden和display:none的區別：

visibility:hidden會使對象不可見，但該對象在網頁所佔的空間沒有改變，等譯流出了一塊空白區域，而display:none會使這個對象完全消失。

僞對象選擇符

1、僞對象選擇符：

1）:after與content屬性一塊兒使用，定義在對象後的內容

如 div:after{content:url(logo.jpg);}

div:after{content:」文本內容」;}

2）:before與content屬性一塊兒使用，定義對象前的內容

如 div:before{content:」放其前放內容」}

3）:first-letter{ }定義對象內第一個字符

說明：該僞元素只能用於塊級元素

4）:first-line{ }定義對象內第一行的樣式

說明：該僞元素只能用於塊級元素。IE6如下版本瀏覽器不支持僞對象選擇符。

高級表單、表格

1、表單高級

表單的組成：

表單域<form name=」」 method=」get/post」 action=」「></form>

表單控件（表單元素）<input type=」text」 value>

提示信息

1）表單字段集

<fieldset></fieldset> field領域 set集合

功能：至關於一個方框，在字段集中能夠包含文本和其餘元素。該元素用於對錶單中的元素進行分組並在文檔中區別標出文本

fieldset元素能夠嵌套，在其內部能夠設置多個fieldset對象

2）字段集標題

<legend></legend> legend ['ledʒ(ə)nd]說明

功能：legend元素能夠在fieldset對象繪製的方框內插入一個標題。legend元素必須是fieldset內的第一個元素。

3）提示信息標籤

<label for=」綁定空間id名」></label> label標籤

功能：label元素用來定義標籤，爲頁面上其餘元素指定提示信息。要將label元素綁定到其餘的控件上，能夠將label元素的for屬性這定位與該控件屬性的id屬性值相同

例如

4）表單元素

一、上傳文件框每一個瀏覽器樣式不一樣

文件域<input type=」file」 />

二、圖像域（圖片提交按鈕）支持性很差，不建議使用

2、表格高級

表格做用：顯示屬性

1）關於表格的CSS屬性

一、單元格間距（該屬性必須給table添加）

border-spacing:value;

二、合併相鄰單元格邊框

border-collapse:separate（邊框分開）/collapse（邊框合併）

collapse [kə'læps] 倒塌，瓦解 ['sep(ə)reɪt]

三、無內容單元格顯示、隱藏給tabel加此屬性

empty-cells:show/hide;

四、表格佈局算法（加快運行的速度）

table-layout:auto/fixed（固定寬高，不會隨內容多少改變單元格寬高）

五、表格標題

<caption>標題內容</caption> caption標題

表格標題位置：caption-side:top/right/left/bottom

說明：left、right位置只有火狐識別。top、bottom只有IE6以上版本支持。低版本只識別top，不支持其餘屬性

6.表格佈局元素

a) 表格基本組成

table表格 tr行 td列

th：表格列標題（放在tr裏） th特色：默認居中加粗

重要屬性：

①colspan=」value」合併列

②rowspan=」value」合併行

③valign=」top/middle/bottom/baseline」垂直對齊方式

④rules=」groups/rows/cols/all/none」添加組分隔線寫在table中要給td設置寬高

說明：

rows：位於行之間的線條

cols：位於列之間的線條

all：位於行和列之間的線條

none：沒有線條

groups：位於行組和列組之間的線條

b) 數據行分組

<thead></thead>表頭

<tbody></tbody?>表體

<tfoot></tfoot>表尾

說明：一個table中，只能包含一個thead和一個tfoot，可包含多個tbody

c) 數據列分組

span默認數爲1

說明：

①col和colgroup元素會根據從左到右的順序依次對數據表格進行分組

②span屬性顯示指定相鄰幾列組成一組，span屬性值默認爲1，默認時僅定義一列爲一組

③能夠經過給table添加rules=」groups」屬性來給分組列添加組分割線。

注：col和colgroup具備相同的功能，可是，咱們只能使用colgroup元素來決定表格內容部分分隔線rules應該處於的位置，而col沒有這個功能。

二者區別：

<colgroup></colgroup>必須爲對標籤形式，能夠獨立使用；

<col>必須爲但標籤形式，不能夠寫成<col></col>，須要包含在<colgroup></colgroup>內部。

重要說明：

FF、Chrome、Safari僅支持colgroup元素的span和width屬性；

只有IE六、IE七、Opera支持align屬性，IE8+不支持"

css濾鏡拓展內容

1、CSS濾鏡

2、圖片高級-透明圖片

（一）網頁上經常使用的圖片格式（jpg,png,gif）

支持透明：gif，png(png8,png24,png32)

（二）網頁上的圖片形式（插入圖片和背景圖）

（三）插入圖片透明

A.圖片背景透明：

.gif：支持

.png8：支持(建議使用)

.png24:IE6不支持，其它內核瀏覽器支持（PS製做)

.png32：IE6不支持，其它內核瀏覽器支持

B.圖片自己透明

.png24:IE6不支持（ps製做)，可用filter兼容。

.png32：IE6不支持，可用filter兼容。

半透明插入圖片兼容IE6作法:（使用png32或PS製做的png24半透明圖片）：

樣式：

.alpha{display:none;_display:inline-block;filter:progid:DXImagn eTransform.Microsoft.AlphgeLoaderaIma

(src="圖片路徑",sizingMethod="scale");width:value;height:value;}

.ie6hidden{_display:none;}

</style>

結構：

C、css3新增透明屬性

語法：background:rgba(value,value,value,value);

說明：前三個值是RGB的顏色值，最後一個是透明的數值。

CSS文檔統籌

1.整站裏相同的CSS樣式提取到一個樣式表裏，各個頁面調用相同的樣式文件便可

2.網站較大的狀況下通常會把網站的頭部，尾部單獨分離出來，包括樣式文件

1、根據頁面類型分離文件

2、根據功能模塊分離文件

3、根據標籤類型分離文件

4、根據設備類型分離文件

5、根據代碼規模綜合分離文件

Keywords關鍵字，後面橙色字體部分設置須要的關鍵字，注意關鍵字不要是已有的網站名多個關鍵字之間用「,」隔開

Description 對本頁的一個描述

相關標籤/搜索

htmlcss

HTML

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。