)
inherit 規定應該從父元素繼承 display 屬性的值。
10.[分類屬性]
「空白」(white-space),用於決定元素內的空格
Normal(將多個空格折疊成一個)
Pre(不折疊成空格)
Nowrap(不允許換行,除非遇到 標記)
「目錄樣式類型」(list-style-type),帶有顯示值目錄項元素
「目錄樣式圖像」(list-style-image),帶有顯示值目錄項元素
list-style-image:url(圖片地址)
「目錄樣式位置」(list-style-position),帶有顯示值目錄項元素
Inside (內部) | outside(外部—初始值)
「目錄樣式」(list-style),帶有顯示值目錄項元素
《目錄樣式類型》| 《目錄樣式類型》| 《目錄樣式圖像》
11.css 單位
[長度單位]
有效的相對單位
em(元素字體的高度)
ex(x-height,字母“x”的高度)
px(像素,相對於屏幕的分辨率)
有效的絕對單位
in(英寸,1英寸=2.54厘米)
cm(厘米,1厘米=10毫米)
mm(米)
pt(點,1點=1/72英寸)
pc(帕,1帕=12點)
[百分比單位]
百分比值是相對於其他數值,同樣地用於定義每個屬性,最經常使用
的百分比值是相對於元素的字體大小。
[顏色單位]
顏色值是一個關鍵字或一個RGB格式的數字
#rrggbb | #rgb | rgb(x,x,x)x是一個介乎0到255之間的整數(如,rgb(0,204,0))
Rgb(y%,y%,y%)y是一個介乎0.0到100.0之間的整數(如,rgb(0%,80%,0%))
這例子指定的是同一個顏色
12.css hack
由於不同的瀏覽器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,對CSS的解析認識不一樣,因此會導致生成的頁面效果不一樣,得不到我們所需要的頁面效果。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS,讓它能夠同時兼容不同的瀏覽器,能在不 同的瀏覽器中也能得到我們想要的頁面效果。
這個針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。
CSS Hack的原理是什么?
由於不同的瀏覽器對CSS的支持及解析結果不一樣,還由於CSS中的優先級的關 系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
比如 IE6能識別下划線""和星號" * ",IE7能識別星號" * ",但不能識別下划線" ",而firefox兩個都不能認識。等等
書寫順序,一般是將識別能力強的瀏覽器的CSS寫在后面。
CSS Hack的寫法!
比如要分辨IE6和firefox兩種瀏覽器,可以這樣寫:
我在IE6中看到是紅色的,在firefox中看到是綠色的。
解釋一下:
上面的css在firefox中,它是認識不了后面的那個帶星號的東東是什么的,於是將它過濾 掉,不予理睬,解析得到的結果是:div{background:green},於是理所當然這個div的背景是綠色的。
在IE6中呢,它兩個background都能識別出來,它解析得到的結果 是:div{background:green;background:red;},於是根據優先級別,處在后面的red的優先級高,於是當然這個div 的背景顏色就是紅色的了。
CSS hack:區分IE6,IE7,firefox
區別不同瀏覽器,CSS hack寫法:
區別IE6與FF:
background:orange;*background:blue;
區別IE6與IE7:
background:green !important;background:blue;
區別IE7與FF:
background:orange; *background:green;
區別FF,IE7,IE6:
background:orange;*background:green;_background:blue;
background:orange;background:green !important; background:blue;
注:IE都能識別;標准瀏覽器(如FF)不能識別 ;
IE6能識別*,某些情況下不能識別 !important,
IE6支持重定義中的!important,例如:
.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}
你將會發現定義了樣式class="yuanxin"時,在IE下,字體顯示為紅色 (#e00)。
但不支持同一定義中的!important。例如:
.yuanxin {color:#e00!important;color:#000}
此時在IE6下不支持,你將會發現定義了樣式class="yuanxin"時,字體顯示為黑 色(#000)。
IE7能識別*,也能識別!important;
FF不能識別*,但能識別!important;
IE6 IE7 FF
!important × √ √
瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序一般為FF IE7 IE6
以: " #demo {width:100px;} "為例;
demo {width:100px;} /被FIREFOX,IE6,IE7執行. /
html #demo {width:120px;} / 會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */
+html #demo {width:130px;} / 會被IE7執行*/
所以最后,#demo的寬度在三個瀏覽器的解釋為:
FIREFOX:100px;
ie6:120px;
ie7:130px;
IE8 最新css hack:
"\9" 例:"border:1px \9;".這里的"\9"可以區別所有IE和FireFox.
"*" IE6、IE7可以識別.IE8、FireFox不能.
"" IE6可以識別" ",IE7、IE8、FireFox不能.
在程序里加上這句話的意思就是:IE8里顯示的布局和IE7里一樣!
常用的css屬性大全
一、html標簽
... 文字格式化
......
列塊容器
字體大小變化 想輸入的字
字體顏色 想輸入的字
字體變粗 想輸入的字
字體變斜 想輸入的字
字體加下划線 想輸入的字
對正中央ㄉ語法
內容
對正左邊ㄉ語法
內容
對正右邊ㄉ語法
內容
字體刪除線 想輸入的字
字體設置 <font">字體名稱">想輸入的字
打字機字體 想輸入的字
上標字 想輸入的字
下標字 想輸入的字
水平線
換行輸入 想輸入的字 想輸入的字
超鏈接 鏈接地的名稱
要顯示的字打這里 網絡郵寄標簽
貼圖
跑馬燈(循環)
想輸入的字
外部文件導入格式標簽
CSS外部導入格式:
直接引用:
javascript - 加載外部.js獨立文件:
二、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符號屬性:
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; /縮進 /
四、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; /居中對齊 /
五、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; /右框線 /
以上是建議書寫方式,但也可以使用常規的方式 如下:
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邊框空白
padding-top:10px; /上邊框留空白 /
padding-right:10px; /右邊框留空白 /
padding-bottom:10px; /下邊框留空白 /
padding-left:10px; /左邊框留空白 /
基本語法
規則
選擇符
任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如, P { text-indent: 3em }
當中的選擇符是P。
類選擇符
單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁制作者也許希望視其語言而定,用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類,例如,
例如,code.html.proprietary是無效的。
類的聲明也可以無須相關的元素:
.note { font-size: small }
在這個例子,名為note的類可以被用於任何元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。
ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:
svp94O { text-indent: 3em }
這點可以參考HTML中的ID屬性:
文本縮進3em
關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因為層疊順序的規則,它們的優先權比單一的選擇符大。例如, 以下的上下文選擇符
P EM { background: yellow }
是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。
聲明
屬性
一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。
值
聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。
組合
為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:
H1, H2, H3, H4, H5, H6 {
color: red;
"" class=MsoNormal> 繼承
實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色值也會應用到段落的文本中。
有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。
注解
樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:
/* COMMENTS CANNOT BE NESTED */
偽類和偽元素
偽類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。
偽類或偽元素規則的形式如
選擇符:偽類 { 屬性: 值 }
或
選擇符:偽元素 { 屬性: 值 }
偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 偽元素 { 屬性: 值 }
定位錨偽類
偽類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。
一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
首行偽元素
通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用於任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:
P:first-line {
font-variant: small-caps;
font-weight: bold }
首個字母偽元素
首個字母偽元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用於任何塊級元素。例如:
P:first-letter { font-size: 300%; float: left }
會比普通字體加大三倍。
層疊順序
當使用了多個樣式表,樣式表需要爭奪特定選擇符的控制權。在這些情況下,總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。
! important
規則可以用指定的! important 特指為重要的。一個特指為重要的樣式會凌駕於與之對立的其它相同權重的樣式。同樣地,當網頁制作者和讀者都指定了重要規則時,網頁制作者的規則會超越讀者的。以下是! important 聲明的例子:
BODY { background: url(bar.gif) white;
background-repeat: repeat-x ! important }
Origin of Rules (Author's vs. Reader's)
正如以前所提及的,網頁制作者和讀者都有能力去指定樣式表。當兩者的規則發生沖突,網頁制作者的規則會凌駕於讀者的其它相同權重的規則。而網頁制作者和讀者的樣式表都超越瀏覽器的內置樣式表。
網頁制作者應該小心地使用! important 規則,因為它們會超越用戶任何的! important 規則。例如,一個用戶由於視覺關系,會要求大字體或指定的顏色,而且這樣的用戶會有可能聲明確定的樣式規則為! important,因為這些樣式對於用戶閱讀網頁是極為重要的。任何的! important 規則會超越一般的規則,所以建議網頁制作者使用一般的規則以確保有特殊樣式需要的用戶能閱讀網頁。
選擇符規則: 計算特性
基於它們的特性級別,樣式表也可以超越與之沖突的樣式表,一個較高特性的樣式永遠都凌駕於一個較低特性的樣式。這只不過是計算選擇符的指定個數的一個統計游戲。
統計選擇符中的ID屬性個數。
統計選擇符中的CLASS屬性個數。
統計選擇符中的HTML標記名格式。
最后,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位數。( 注意,你需要將數字轉換成一個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。以下是一個按特性分類的選擇符的列表:
id1 {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
LI.red {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
LI {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */
特性的順序
為了方便使用,當兩個規則具同樣權重時,取后面
有很多方法將樣式表加入到HTML中,每個都帶有自己的優點和缺點。新的HTML元素和屬性已被加入以允許樣式表與HTML文檔更簡易地組合起來。
連接到一個外部的樣式表
嵌入一個樣式表
輸入一個樣式表
內聯樣式
CLASS屬性
ID屬性
SPAN元素
DIV元素
關於認證的備注
連接到一個外部的樣式表
一個外部的樣式表可以通過HTML的LINK元素連接到HTML文檔中:
標記是放置在文檔的HEAD部分。可選的TYPE屬性用於指定媒體類型--text/css是一個層疊樣式表--允許瀏覽器忽略它們不支持的樣式表類型。為CSS文件配置服務器而將text/css當作Content-type內容發送出去也是一個好注意。
外部樣式表不能含有任何像或
STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用於指定媒體類型,LINK元素也一樣。同樣地,TITLE和MEDIA屬性也可以用STYLE指定。
舊版本的瀏覽器,並不能識別STYLE元素,會將其當作BODY的一部分照常展示其內容,從而使這些樣式表對用戶是可見的。要防止這樣做,STYLE元素的內容要包含一個SGML注解(
)在里面,像上述例子那樣。
嵌入的樣式表可用於當一個文檔具有獨一無二的樣式的時候。如果多個文檔都使用同一樣式表,那么外部樣式表會更適用。
輸入一個樣式表
一個樣式表可以使用CSS的@import 聲明被輸入。這個聲明用於一個CSS文件或內部的STYLE元素:
注意其它的CSS規則應該仍然包括在STYLE元素中,但所有的@import 聲明必須放在樣式表的開始部分。任意在樣式表中指定了的規則,其自身超越在輸入樣式表中對立的規則。例如上例,即使一個輸入的樣式表包含DT { background: aqua },定義項(definition terms)依然會是黃色的背景。
被輸入的樣式表的順序對於它們怎樣層疊是很重要的。在上述的例子中,如果style.css輸入的樣式表指定了STRONG元素會顯示為紅色而punk.css樣式表指定了STRONG元素顯示為黃色的話,那么后面的規則會獲勝,而STRONG元素會顯示為黃色。
輸入的樣式表對於模塊性效果很有用處。例如,一個網站可以通過使用了的選擇符分類樣式表。一個simple.css樣式表給出公共的元素像BODY、P、H1和H2。此外,一個extra.css樣式表給出較少共通的元素像CODE、BLOCKQUOTE和DFN。一個tables.css樣式表可以用於定義變革元素的規則。這三個樣式表在需要的時候可以使用@import 聲明包括在HTML中。三個樣式表也可以通過LINK元素組合。
內聯樣式
樣式可以使用STYLE屬性內聯。STYLE屬性可以應用於任意BODY元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。這個屬性將任何數量的CSS聲明當作自己的值,而每個聲明用分號隔開。以下是一個例子:
這段的樣式是紅色的New Century Schoolbook字,如果字體可用的話。
注意在STYLE中New Century Schoolbook包含在單引號中,因為雙引號被用作包含樣式聲明。
內聯的樣式比其他方法更加靈活。要使用內聯樣式,必須使用Content-Style-Type HTTP頁眉擴展對整個文檔進行單獨的樣式表語言聲明。使用內聯CSS的網頁制作者必須將text/css作為Content-Style-Type HTTP頁眉,或在HEAD部分包括以下標記:
因為和需要展示的內容混合在一起,內聯樣式會失去一些樣式表的優點。同樣地,內聯樣式默認地接受所有媒體,因為沒有任何的為內聯樣式指定明確的媒體的語句。這種方法應該盡量少用,如當一個樣式會應用在所有媒體到一個元素的個別情況。如果樣式會被應用到單一元素的場合,但只能使用確認的媒體的話,使用ID屬性代替STYLE屬性。
CLASS屬性
CLASS屬性用於指定元素屬於何種樣式的類。例如,樣式表可以加入punk和warning類:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
這些類可以使用CLASS屬性在HTML中引用:
在這個例子中,punk類可以用於任何BODY元素因為它在樣式表中沒有HTML元素關聯。而在這個例子的樣式表,warning類只能用於P元素。
一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的warning類也可以命名為red,但如果網頁制作者決定改變這個類的樣式為別的顏色,或希望為那些使用PC喇叭的人定義為aural(聽覺)樣式的話,那么這個名字就變得毫無意義了。
類會是應用樣式到HTML文檔中在結構上一樣的部分的有效的辦法。例如,本頁使用類給CSS源代碼和HTML源代碼使用不同的樣式。
ID屬性
ID屬性用於定義一個元素的獨特的樣式。一個CSS規則如
wdg97 { font-size: larger }
可以通過ID屬性應用到HTML中:
歡迎訪問Web Design Group及TV water 168!
整個文檔當中的每個ID屬性的值都必須是唯一的。其值必須是一個以字母開頭緊接字母、識字或連字符。字母限於A-Z和a-z。
注意HTML 4.0允許在ID屬性中有句號,但CSS1不允許在ID選擇符中有句號。也要注意CSS1允許Unicode字符161-255而且忽略Unicode字符為一個數字代碼,但HTML 4.0不允許這些字符在一個ID屬性值當中。
當一個樣式只需要在任何文檔中應用一次時,使用ID是很適合的。 ID與STYLE屬性相比,在於ID允許指定媒體的樣式,而且也可以被應用於多個文檔(雖然每個文檔只用一次)。
SPAN元素
SPAN元素被加入到HTML中以允許網頁制作者給出樣式但無須附加在一個HTML的結構元素上。SPAN在樣式表中作為一個選擇符使用,而且它也能接受STYLE、CLASS和ID屬性。
SPAN是一個內聯元素,所以它可以作為HTML中的元素如EM和STRONG使用。最重要的差別在於雖然EM和STRONG帶有結構的意義,但SPAN就沒有這樣的意義。它的存在純粹是應用樣式,所以當樣式表失效時它就沒有任何的作用。
一些SPAN例子如下:
SPAN的例子
前面是
段落中少數的文字,會是小型大寫字母。樣式也可以內聯,如改變文
字的樣式為Arial .
DIV元素
DIV元素在功能上與SPAN元素相似,最主要的差別在於DIV ("division","部分"的簡稱)是一個塊級元素。DIV可以包含段落、標題、表格甚至其它部分。這使DIV便於建立不同集成的類,如章節、摘要或備注。例如:
Divisions/部分
DIV元素在HTML 3.2中有定義,但HTML 3.2中只有ALIGN屬性能兼容。HTML 4.0在屬性中加入CLASS、STYLE、和ID屬性。
因為DIV可以包含其他塊級集成,在用於建立文檔的大型章節例如本備注是很有用的。
要求關閉標記。
關於認證的備注
少數使用了CSS樣式的文檔能在HTML3.2 (Wilbur)層(在WDG網站,譯者注)得到認證。HTML3.2不會解釋SPAN元素,也不解釋CLASS、STYLE或ID屬性,而且在LINK和STYLE元素中也很少支持TYPE和MEDIA屬性。
這些有關的樣式元素和屬性對不支持的瀏覽器不會有害,因為它們能安全地忽略。文檔使用這些元素和屬性可以被認證防御於HTML 4.0。
流氓報-流氓人生活的故事!流氓人的家園 !流氓人自己的報刊!http://www.t128qq.bokee.com/
顯示
語法: display: <值>
允許值: block | inline | list-item | none
初始值: block
適用於: 所有對象
向下兼容: 否
顯示屬性允許使用四個值中的一個來定義一個元素:
block (在元素的前和后都會有換行)
inline (在元素的前和后都不會有換行)
list-item (與block相同, 但增加了目錄項標記)
none (沒有顯示)
每個元素都典型地由瀏覽器基於HTML規格建議的展示形式給出一個缺省的顯示值。
顯示屬性可能並不安全,因為它使用另外的不合適的格式顯示元素。使用值none將關閉指定元素及其子元素的顯示!
空白
語法: white-space: <值>
允許值: normal | pre | nowrap
初始值: normal
適用於: 塊級元素
向下兼容: 是
空白屬性將決定如何處理元素內的空格. 該屬性的值取以下三個中的一個:
normal (將多個空格折疊成一個)
pre (不折疊空格)
nowrap (不允許換行,除非遇到 標記)
目錄樣式類型
語法: list-style-type: <值>
允許值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
適用於: 帶有顯示值的目錄項元素
向下兼容: 是
目錄樣式項屬性指定目錄項標記的類型,當目錄樣式圖象值為none或當圖象載入選項被關閉時使用。
例如:
LI.square { list-style-type: square }
UL.plain { list-style-type: none }
OL { list-style-type: upper-alpha } /* A B C D E etc. */
OL OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL OL OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
目錄樣式圖象
語法: list-style-image: <值>
允許值:
| none
初始值: none
適用於: 帶有顯示值的目錄項元素
向下兼容: 是
當圖象載入選項打開時,目錄樣式圖象屬性在指定目錄項標記使用哪個圖象代替由目錄樣式類型屬性指定的標記。
例如:
UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x { list-style-image: url(x.png) }
目錄樣式位置
語法: list-style-position: <值>
允許值: inside | outside
初始值: outside
適用於: 帶有顯示值的目錄項元素
向下兼容: 是
目錄樣式位置屬性可以取值inside(內部) or outside(外部),其中outside是缺省值。整個屬性決定關於目錄項的標記應放在那里。如果使用inside值,換行會移到標記下,而不是縮進。應用的例子如下:
Outside rendering:
second line of list item
Inside rendering:
second line of list item
目錄樣式
語法: list-style: <值>
允許值: <目錄樣式類型> || <目錄樣式位置> ||
初始值: 未定義
適用於: 帶有顯示值的目錄項元素
向下兼容: 是
目錄樣式屬性是目錄樣式類型、目錄樣式位置,和目錄樣式圖象屬性的略寫。
例如:
LI.square { list-style: square inside }
UL.plain { list-style: none }
UL.check { list-style: url(/LI-markers/checkmark.gif) circle }
OL { list-style: upper-alpha }
OL OL { list-style: lower-roman inside }
上邊界
語法: margin-top: <值>
允許值: <長度> | <百分比> | auto
初始值: 0
適用於: 所有元素
向下兼容: 否
上邊界屬性用一個指定的長度或百分比值來設置元素的上邊界。百分比值參考上級元素的寬度。允許使用負值邊際。
例如,以下的規則將消除文件的上邊界。
BODY { margin-top: 0 }
注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。
右邊界
語法: margin-right: <值>
允許值: <長度> | <百分比> | auto
初始值: 0
適用於: 所有元素
向下兼容: 否
右邊界屬性用一個指定的長度或百分比值來設置元素的右邊界。百分比值參考上級元素的寬度。允許使用負值邊際。
例如:
P.narrow { margin-right: 50% }
注意如果邊界在水平方向鄰接(重疊)了,不會改用其它邊界值。
下邊界
語法: margin-bottom: <值>
允許值: <長度> | <百分比> | auto
初始值: 0
適用於: 所有元素
向下兼容: 否
下邊界屬性用一個指定的長度或百分比值來設置元素的下邊界。百分比值參考上級元素的寬度。允許使用負值邊際。
例如:
DT { margin-bottom: 3em }
注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。
左邊界
語法: margin-left: <值>
允許值: <長度> | <百分比> | auto
初始值: 0
適用於: 所有元素
向下兼容: 否
左邊界屬性用一個指定的長度或百分比值來設置元素的左邊界。百分比值參考上級元素的寬度。允許使用負值邊際。
例如:
ADDRESS { margin-left: 50% }
注意如果邊界在水平方向鄰接(重疊)了,不會改用其它邊界值。
邊界
語法: margin: <值>
允許值: [ <長度> | <百分比> | auto ]{1,4}
初始值: 未定義
適用於: 所有元素
向下兼容: 否
邊界屬性用一到四個值來設置元素的邊界,每個值都是長度、百分比或者自動。百分比值參考上級元素的寬度。允許使用負值邊際。
如果四個值都給出了,它們分別被應用於上、右、下和左邊界。如果只給出一個值,它被應用於所有邊界。如果兩個或三個值給出了,省略了的值與對邊相等。
邊界聲明包括以下例子:
BODY { margin: 5em } /* 所有邊界設為5em */
P { margin: 2em 4em } /* 上和下邊界為2em,左和右邊界為4em */
DIV { margin: 1em 2em 3em 4em } /* 上邊界為1em,右邊界為2em,下邊界為3em,左邊界為4em */
注意如果邊界在垂直方向鄰接(重疊)了,會改用其中最大的那個邊界值。而水平方向則不會。
使用邊界屬性可以一次性地設置所有邊界;也可以選擇使用上邊界、下邊界、左邊界和右邊界屬性。
上補白
語法: padding-top: <值>
允許值: <長度> | <百分比>
初始值: 0
適用於: 所有對象
向下兼容: 否
上補白屬性描述上邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。
右補白
語法: padding-right: <值>
允許值: <長度> | <百分比>
初始值: 0
適用於: 所有對象
向下兼容: 否
右補白屬性描述右邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。
下補白
語法: padding-bottom: <值>
允許值: <長度> | <百分比>
初始值: 0
適用於: 所有對象
向下兼容: 否
下補白屬性描述下邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。
左補白
語法: padding-left: <值>
允許值: <長度> | <百分比>
初始值: 0
適用於: 所有對象
向下兼容: 否
左補白屬性描述左邊框和選擇符的內容之間有多少間隔。該值可以是一個長度或百分比。百分比的值參考上級元素的寬度。不能使用負值。
posted @
2019-06-24 02:32
WinkJie 閱讀(
435 ) 評論(
)
編輯
收藏
/* 點擊爆炸效果*/
/* 鼠標點擊求贊文字特效 */
/*鼠標跟隨效果*/