html +　CSS

時間 2019-12-17

標籤 html css 欄目 HTML 简体版

原文原文鏈接

Htmlcss

1 html基本標籤html

1.1 html文件結構jquery

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">css3

<htmlxmlns="http://www.w3.org/1999/xhtml">web

<head>api

<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>瀏覽器

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

</head>安全

<body>ruby

</body>

</html>

1.1.1 DOCTYPE

定義和使用方法

<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標籤以前。

<!DOCTYPE> 聲明不是 HTML標籤。它是指示web瀏覽器關於頁面使用哪一個 HTML版本號進行編寫的指令。

在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，因爲 HTML 4.01 基於 SGML。

DTD 規定了標記語言的規則，這樣瀏覽器才幹正確地呈現內容。

(Standard Generalized Markup Language(SGML即標準通用置標語言))

提示：請始終向HTML文檔加入 <!DOCTYPE>聲明。這樣瀏覽器才幹獲知文檔類型。

HTML 元素和文檔類型（Doctype）

Strict 嚴格型

Transitional過渡類型

Frameset 框架

HTML 4.01

該 DTD 包括所有 HTML 元素和屬性，但不包括展現性的和棄用的元素（比方 font）。不一樣意框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

該 DTD 包括所有 HTML 元素和屬性。包括展現性的和棄用的元素（比方 font）。不一樣意框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

該 DTD 等同於 HTML 4.01 Transitional，但贊成框架集內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

該 DTD 包括所有 HTML 元素和屬性，但不包括展現性的和棄用的元素（比方 font）。

不一樣意框架集（Framesets）。必須以格式正確的 XML 來編寫標記。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

該 DTD 包括所有 HTML 元素和屬性，包括展現性的和棄用的元素（比方 font）。不一樣意框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

該 DTD 等同於 XHTML 1.0 Transitional，但贊成框架集內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5

<!DOCTYPE html>

請參閱這個 HTML 元素表。當中列出了每種元素會出現在哪一個文檔類型中。

提示和凝視

凝視：<!DOCTYPE> 聲明沒有結束標籤。

提示：<!DOCTYPE> 聲明對大寫和小寫不敏感。

提示：請使用 W3C 的驗證器來檢查您是否編寫了有效的 HTML / XHTML 文檔！

XHTML 1.1

該 DTD 等同於 XHTML 1.0 Strict，但贊成加入模型（好比提供對東亞語系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML1.0是HTML4.0的又一次組織,算是HTML4.01的修正版,發行命名爲XHTML1.0。

1.所有卷標元素名稱都使用小寫

2.所有沒有成對的空標籤必須以 />結尾，<br /> <hr />

3.不一樣意使用target="_blank"(但XHTML1.0是不被贊成的,你可以改寫爲 target="new)

4.所有屬性都必須有值 XHTML1.0規定所有屬性都必須有值,若沒有就必須反覆屬性做爲值

5.把所有<和&特殊符號用編碼表示

6.同一個id選擇器不可反覆使用

7.絕對不可省略雙引號或單引號

8.標籤必須是一對

9.圖片卷標加上文字說明alt="說明"

10.正確的卷標順序

11. XHTML 1.0文件類別宣告的正確寫法 (不可小寫)

W3C標準測試網址 http://validator.w3.org/

網頁本身主動測試網址 http://validator.w3.org/check?uri=referer

測試時必定要有「16.文件類別宣告」還有指定文件編碼

1.1.2 meta

提示和凝視：

凝視：<meta> 標籤永遠位於 head 元素內部。

凝視：元數據老是以名稱/值的形式被成對傳遞的。

屬性

值

描寫敘述

http-equiv

content-type

expires

refresh

set-cookie

把 content 屬性關聯到 HTTP 頭部。 content 屬性關聯到一個名稱。

name

author

description

keywords

generator

revised

others

content 屬性關聯到一個名稱。

1.1.3 xmlns

xmlns是xml namespace的縮寫。也就是XML命名空間，xmlns屬性可以在文檔中定義一個或多個可供選擇的命名空間。該屬性可以放置在文檔內不論什麼元素的開始標籤中。該屬性的值相似於URL。它定義了一個命名空間，瀏覽器會將此命名空間用於該屬性所在元素內的所有內容。

爲何需要這個xmlns呢，多是這種。比方在xhtml中，贊成你使用各個不一樣的DTD文件，有可能不一樣的DTD文件裏包括了一樣的標識，那麼這種話就會出現標誌衝突的問題，假設使用xmlns的話就可以差異開在不一樣文件裏的一樣的標誌。好比在a.dtd中和b.dtd中都包括了table，但是假設一個xhtml文件同一時候包括了這兩個dtd文件。而且使用了標誌table，這樣就會出現標誌衝突問題。爲了解決標誌衝突問題。就可以使用xmlns例如如下：

<htmlxmlns:a="http://www.a.com">

<htmlxmlns:b="http://www.b.com">

<a:table...>

<b:table...>

這樣就可以區分開了使用的是哪一個dtd文件裏的標誌。

還有個問題，依據定義：用來標識命名空間的網絡地址並不被XML解析器調用，XML解析器不需要從這個網絡地址中查找信息，該網絡地址的做用不過給命名空間一個惟一的名字，所以這個網絡地址也可以是虛擬的。那麼對於瀏覽器來講，怎樣知道a:table...應該是哪一個dtd文件裏的標誌呢？應該是在每個xml的dtd文件裏都會規定xmlns這個值，假設dtd文件裏的xmlns的值與xhtml中的值相等，則以爲是匹配的。

1.1.4 html

根節點

1.1.5 head

頭節點

1.1.6 body

網頁的主題部分

1.2 塊級標籤

: 指能夠獨立存在, 通常的塊級元素之間以換行(如一個段落結束後另起一行)分隔.

1.2.1 h1~~h6

1.2.2 p

<p></p>

1.2.3 hr

<hr/>

1.2.4 ol li

1.2.5 ul li

1.2.6 dl dt dd

1.2.7 table

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

1.2.8 from

<p>First name: <inputtype="text" name="fname" /></p>

</form>

屬性	值	描寫敘述
action	url	規定當提交表單時向何處發送表單數據。
enctype (EncodeType )	•application/x-www-form-urlencoded •multipart/form-data •text/plain	規定在發送表單數據以前怎樣對其進行編碼
method	get/post	提交方式
name		表單名稱
target	_blank _self _parent	規定在何處打開 action URL。

值	描寫敘述
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不正確字符編碼。在使用包括文件上傳控件的表單時，必須使用該值。
text/plain	不正確特殊字符編碼。

屬性	GET方法	POST方法
歷史：	一般使用GET方法發送的數據做爲URL的一部分將會被瀏覽器保存起來	使用POST方法提交的數據則不會做爲URL的一部分。固然不會瀏覽器保存。
書籤：	GET方法可能被瀏覽器看成書籤(bookmark)保存	POST方法則不會
回退與又一次提交：	使用GET方法的頁面可以被回退並又一次運行而不通知用戶	POST方法會通知用戶再次提交
Form編碼類型：	GET提交數據僅僅支持	POST支持application/x-www-form-urlencoded與multipart/form-data

	application/x-www-form-urlencoded
參數：	因爲GET的參數通常都跟在URL後面。支持的數據大小通常在2K。有些server可以支持到64K。這個就是很是多網頁超過64K就掛掉的真實緣由。因爲server限制了。	發送參數。還可以是文件，大小在理論上沒有限制。
被攻擊：	GET方法提交數據很是easy被黑客攻擊，實施腳本綁架。	POST方法相對GET方法不是那麼easy被黑客攻擊
數據類型限制：	GET方法提交數據僅僅能是文本數據	POST方法則不受限制。二進制文件也可以。
安全性：	GET方法的安全性比POST方法要低一些，緣由是數據作爲URL的一部分是可見的。而且被瀏覽器存在歷史訪問記錄中。	POST方法的安全性相對GET要高一些。因爲參數數據不能被瀏覽器做爲URL的一部分而存入歷史訪問記錄中。
表單數據長度：	由於表單數據作爲URL的一部分而URL長度通常是有限制的。	POST方法沒有限制。
可用性：	GET方法一般不被用來發送password與敏感信息。但是我發現仍是有很多站點用GET來實現login。比方XXXX社區，它把login方法放在一個jquery完畢JavaScript腳本中。用GET請求完畢。	POST方法可以用來發送password與其它敏感信息。
可見性：	GET方法對所有人可見	POST方法的變量是不可見的在URL中
緩存：	GET方法默認被緩存。這個就是很是多時候用GET方法獲取數據後面要跟個時間戳的緣由	POST方法默認不被緩存。

		除非Response頭設置了Cache-Control或者Expires屬性值。
最大的變量值：	GET支持最大爲7607個字符	POST方法支持最大值爲8MB
應用場合：	GET最常用的場合是獲取數據，瀏覽器獲取網頁時候絕大多數經過GET方法實現。大多數瀏覽器下載也是使用GET方法獲取文件	POST主要用來向server提交數

1.2.9 div

1.3 行級標籤

指依附其它塊級元素存在, 緊接於被聯元素之間顯示, 而不換行.

1.3.1 img

<imgsrc="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" />

兩個屬性

height px %

width

1.3.2 span

<p><span>sometext.</span>some other text.</p>

1.3.3 br

1.3.4 a

<ahref="./index.html" title="asd" target="_new">超連接</a>

_blank

_new

_parent

_self

_top

framename

規定在何處

錨連接

<ahref="#name"></a>

郵件

1.3.5 input

type	功能	樣例
text	單行文本輸入	<input type="text" name="username" />
password	password	<input type="password" name="password" />
radio	單選	<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女
checkbox	多選	<input type="checkbox" name="hobby" value="書" />書 <input type="checkbox" name="hobby" value="畫" />畫
reset	重置表單數據	<input type="reset" value="重置" />
file	文件上傳	<input type="file" name="files" />
submit	提交表單數據	<input type="submit" value="提交" />
image	圖形提交button	<input type="image" src="images/button.gif" />
button	普通button	<input type="button" value="播放音樂" />

1.3.6 textarea

<textarea name="... " cols="列寬" rows="行寬">

文本內容

</textarea>

1.3.7 select

<select name="bmon">

<option value="" selected="selected">[選擇月份]</option>

<option value="0">一月</option>

<option value="1">二月</option>

<option value="2">三月</option>

<option value="3">四月</option>

</select>

1.4 w3c標準

1.4.1 內容和表現分離

1.4.2 內容結構要求語義化

1.4.3 遵循xhtml1.0的規範

1.5 a標籤

參閱: a

1.6 凝視特殊符號

空格： 

大於(>)：>

小於(<）: <

引號（」）："

版權號() ：©

1.7 表單

參閱: from

2 表格

2.1 表格基礎

參閱: table

2.2 跨行

跨行使用的是rowspan

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.3 誇列

跨行使用的是colspan

<tablewidth="200" border="1">

<tr>

<tdcolspan="3"> </td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

2.4 表格佈局

表格佈局通常用於數據展現頁

和表單頁面

3 框架

什麼是框架?

經過使用框架，你可以在同一個瀏覽器窗體中顯示不止一個頁面。

框架用途?

在同一個瀏覽器窗體顯示多個頁面

可以實現複用

實現典型的文件夾結構

框架分爲哪兩種類型

3.1 frameset

特色

結構清晰

兩種

列

<framesrc="frame_a.html" />

<framesrc="frame_b.html" />

<framesrc="frame_c.html">

</frameset>

<noframes><body>您的瀏覽器沒法處理框架！

</body></noframes>

行

<framesrc="frame_a.html" />

<framesrc="frame_b.html" />

<framesrc="frame_c.html">

</frameset>

<noframes><body>您的瀏覽器沒法處理框架！</body></noframes>

屬性

屬性	值	描寫敘述
frameborder	0,1	規定是否顯示框架周圍的邊框。
name	name	規定框架的名稱。
noresize	noresize	規定沒法調整框架的大小。
scrolling	yes no auto	規定是否在框架中顯示滾動欄。

3.2 IFrame

<iframe src="引用頁面地址"name="框架標識名"

frameborder="邊框" scrolling="no" />

屬性	值	描寫敘述
frameborder	0,1	規定是否顯示框架周圍的邊框。
height	pixels %	高度
width	pixels %	寬度
src	URL	路徑
scrolling	yes no auto	規定是否在 iframe 中顯示滾動欄。

3.3 a

參閱: a

4 css樣式表

使用了css

沒有使用css

4.1 什麼是css

CSS即層疊樣式表（Cascading StyleSheet）

4.2 爲何使用css

1.實現內容和樣式分離,利於團隊開發.

2.實現樣式複用,提升開發效率

3.實現頁面的精確控制

4.更利於搜索引擎的搜索

4.3 css 版本號

css3 和css

CSS3是CSS2.0技術的升級版本號，CSS3語言開發是朝着模塊化發展的。

曾經的規範做爲一個模塊實在是太龐大而且比較複雜，因此，把它分解爲一些小的模塊，不少其它新的模塊也被增長進來。

這些模塊包含：盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等。

當中最重要的 CSS3 模塊包含：

選擇器

框模型

背景和邊框

文本效果

2D/3D 轉換

動畫

多列布局

用戶界面

4.4 css 怎麼寫

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>css樣式表</title>

li{ font-size:80px;}

</style>

</head>

<body>

<ul>

<li>全部商品分類</li>

</ul>

</body>

</html>

4.5 選擇器

選擇器{

對象的屬性1:值1;

對象的屬性2:值2;

}

4.5.1 標籤選擇器

標籤名{

屬性名1:屬性值1;

屬性名2:屬性值2;

}

4.5.2 類選擇器

.類名{

屬性名1:屬性值1;

屬性名2:屬性值2;

}

4.5.3 id選擇器

#id{

屬性名1:屬性值1;

屬性名2:屬性值2;

}

4.5.4 高級選擇器

"CSS" 列指示該屬性是在哪一個 CSS 版本號中定義的。（CSS一、CSS2 仍是 CSS3。

）

選擇器	樣例	樣例描寫敘述	CSS
.class	.intro	選擇 class="intro" 的所有元素。	1
#id	#firstname	選擇 id="firstname" 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。	1
element>element	div>p	選擇父元素爲 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素以後的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包括單詞 "flower" 的所有元素。	2
[attribute\|=value]	[lang\|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的連接。	1
:visited	a:visited	選擇所有已被訪問的連接。	1
:active	a:active	選擇活動連接。	1
:hover	a:hover	選擇鼠標指針位於其上的連接。	1
:focus	input:focus	選擇得到焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。	2
:before	p:before	在每個 <p> 元素的內容以前插入內容。	2
:after	p:after	在每個 <p> 元素的內容以後插入內容。	2
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包括 "abc" 子串的每個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素惟一的 <p> 元素的每個 <p> 元素。	3
:only-child	p:only-child	選擇屬於其父元素的惟一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計數。	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包含文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啓用的 <input> 元素。	3
:disabled	input:disabled	選擇每個禁用的 <input> 元素	3
:checked	input:checked	選擇每個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

4.6 樣式修飾

字體屬性：(font)

大小 {font-size: x-large;}(特大) xx-small;(極小) 通常中文用不到，僅僅要用數值就可以，單位：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 fixed lefttop;} /*簡寫·這個在閱讀代碼中經常出現。要認真的研究*/

區塊屬性： (Block) /*這個屬性第一次認識，要多多研究*/

字間距 {letter-spacing: normal;} 數值 /*這個屬性彷佛實用。多實踐下*/

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

縮進 {text-indent: 數值px;}

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

詞間距word-spacing: normal; 數值

空格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;(表格標題) /*display 屬性的瞭解很是模糊*/

方框屬性： (Box)

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

邊框屬性： (Border)

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

border-width:; 邊框寬度

border-color:#;

簡寫方法border：width style color; /*簡寫*/

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) 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; /*文字垂直向下對齊*/

2、CSS邊框空白

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

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

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

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

3、CSS符號屬性：

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

list-style-type:decimal; /*阿拉伯數字*/

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

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

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; /*縮進*/

4、CSS背景樣式：

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

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

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

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

background-repeat : repeat; /*反覆排列-網頁默認*/

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; /*居中對齊*/

5、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;}

6、CSS框線一覽表：

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

border-bottom : 1px solid #6699cc; /*下框線*/

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

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

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

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

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

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

其它框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

7、CSS表單運用：

文字方塊

button

複選框

選擇鈕

多行文字方塊

下拉式菜單選項1選項2

8、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-sizefont-family}

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

3 字體大小 {font-size:數值|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:數值;}

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

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

9 字間距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|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:數值|inherit|normal;}

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

3 段首空格 {text-indent:數值|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:數值}

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:數值|top|bottom|left|right|center}

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

框架樣式(Box Style)

序號中文說明標記語法

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

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

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

寬度值： thin|medium|thick|數值

4 邊框顏色 {border-color:數值數值數值數值}　　數值：分別表明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-stylecolor}

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

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

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

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

8 高　　度 {height:數值|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}

4.6.1 文本屬性

屬性名	含義	應用場景
line-height	行高行間距	多行佈局
text-align	對其方式(left,right,center)	各類元素對齊
text-decoration	下劃線( underline)	下劃線
white-space	規定怎樣處理空白	文本溢出時不斷行

4.6.2 字體屬性

字體屬性

屬性名	含義	舉例	應用場景
font	在一個聲明中設置所有的字體屬性	font:bold 12px 宋體;	字體樣式縮寫
font-family	字體類型	font-family宋體;	字體樣式
font-size	字體大小	font-size:14px;	字體大小
font=weight	字體粗細	font-weight:bold;	加粗

4.6.3 背景屬性

屬性	含義	舉例
background	在一個聲明中設置所有的背景屬性	background:#ccc url(img/bg.pn) repeat-x 20px -10px;
background-color	背景顏色	background-color:red;
background-repeat	設置背景圖片平鋪方式	background-repeat:no-repeat;
background-position	設置背景圖片位置	background-position:10px 10px;

background-repeat

repeat	縱向,橫向都平鋪	小方塊圖,設置背景
repeat-x	橫向平鋪	細長小條設置漸變效果
repeat-y	縱向平鋪	小圖設置特殊邊框
no-repeat	背景圖片不平鋪	大圖作背景圖片,使用廉價亮控制

4.6.4 list-style

屬性值	事例
none
disc	●
circle	○
square	■
decimal	阿拉伯數字
lower-roman	小寫羅馬數字
upper-roman	大寫羅馬數字
lower-alpha	小寫英文字母
upper-alpha	大寫英文字母

4.7 盒子模型

4.8 浮動

4.9 超連接僞類

4.10 樣式優先級

1，內聯樣式 [1.0.0.0]

A：<span id="demo" style="color:red"></span>

B：還有就是JS控制的內聯樣式style對象。document.getElementById("demo").style.color="red";

這二者屬於同一級別。只是普通狀況是JS控制的內聯樣式優先級高，這與前後順序申明有關係與本質無關，因爲每每DOM操做是在DOM樹載入完成以後。

2，ID選擇器 [0.1.0.0]

3。類，屬性，僞類選擇器 [0.0.1.0]

4。元素標籤，僞元素選擇器 [0.0.0.1]

接下來看下!important 這個詭異的東西。

<styletype="text/css">

div{background: red !important;background: blue}

3 </style>

4.11 佈局典型

5 常見問題

5.1 frameset

frameset

不呢放到body裏面,僅僅能是獨立的

6 特殊標籤

6.1 marquee

behavior

設定滾動的方式：

alternate：表示在兩端之間來回滾動。

scroll：表示由一端滾動到還有一端。會反覆。

slide：表示由一端滾動到還有一端。不會反覆。

代碼例如如下:

<marqueebehavior="alternate">alternate：表示在兩端之間來回滾動。 </marquee>

<marqueebehavior="scroll">scroll：表示由一端滾動到還有一端，會反覆。</marquee>

<marqueebehavior="slide">slide：表示由一端滾動到還有一端。不會反覆。</marquee>

bgcolor

設定活動字幕的背景顏色。背景顏色可用RGB、16進制值的格式或顏色名稱來設定。

代碼例如如下:

<marquee bgcolor="#006699">設定活動字幕的背景顏色 bgcolor="#006699"</marquee>

<marqueebgcolor="RGB(10%,50%,100%,)">設定活動字幕的背景顏色bgcolor="rgb(10%,50%,100%,)"</marquee>

<marquee bgcolor="red">設定活動字幕的背景顏色 bgcolor="red"</marquee>

direction

設定活動字幕的滾動方向

代碼例如如下:

<marquee direction="down">設定活動字幕的滾動方向direction="down"：向下</marquee>

<marquee direction="left">設定活動字幕的滾動方向direction="left"：向左</marquee>

<marquee direction="right">設定活動字幕的滾動方向direction="right"：向右</marquee>

<marquee direction="up">設定活動字幕的滾動方向direction="up"：向上</marquee>

height

設定活動字幕的高度

代碼例如如下:

<marquee height="500"direction="down" bgcolor="#CCCCCC">設定活動字幕的高度height="500"</marquee>

width

設定活動字幕的寬度

代碼例如如下:

<marquee width="500"bgcolor="#CCCCCC">設定活動字幕的寬度width="500"</marquee>

hspace

設定活動字幕裏所在的位置距離父容器水平邊框的距離

This controls the horizontal（水平）space around the display box.

代碼例如如下:

<tr>

<td><marquee hspace="100"bgcolor="#CCCCCC">hspace="100"</marquee></td>

</tr>

</table>

vspace

設定活動字幕裏所在的位置距離父容器垂直邊框的距離

This controls the vertical（垂直） space around the display box.

代碼例如如下:

<marquee vspace="100"bgcolor="#CCCCCC">hspace="100"</marquee>

loop

設定滾動的次數，當loop=-1表示一直滾動下去，默以爲-1

代碼例如如下:

<marquee loop="-1"bgcolor="#CCCCCC">我會不停地走。

</marquee>

<marquee loop="2"bgcolor="#CCCCCC">我僅僅走兩次哦</marquee>

scrollamount

設定活動字幕的滾動速度。單位pixels

代碼例如如下:

<marquee scrollamount="10">scrollamount="10" </marquee>

<marquee scrollamount="20">scrollamount="20" </marquee>

<marquee scrollamount="30">scrollamount="30" </marquee>

scrolldelay

設定活動字幕滾動兩次之間的延遲時間，單位millisecond（毫秒）

值大了會有一步一停頓的效果

代碼例如如下:

<marquee scrolldelay="10">scrolldelay="10" </marquee>

<marquee scrolldelay="100"> scrolldelay="100"</marquee>

<marqueescrolldelay="1000">scrolldelay="1000" </marquee>

6.2 object

1. base html / div / css / HTML / DIV / CSS
2. HTML+CSS vs HTML
3. HTML vs HTML+CSS
4. HTML/CSS
5. HTML+CSS
6. html,css
7. html&&css
8. HTML CSS
9. HTML & CSS
10. html css
更多相關文章...
• CSS 指南 - 網站建設指南
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 適用於PHP初學者的學習線路和建議
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

html+css+javascript+html

html+css+mysql+php

html&&css&&javascript

每日一句

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

html + CSS

html +　CSS