CSS 分類 (Classification) · W3School HTML & CSS 教程

# CSS 分類 (Classification) **CSS 分類屬性允許你規定如何以及在何處顯示元素。** ## CSS分類(Classification)實例： [如何把元素顯示為內聯元素](/tiy/t.asp?f=csse_display) ``` <html> <head> <style type="text/css"> p {display: inline} div {display: none} </style> </head> <body> <p>本例中的樣式表把段落元素設置為內聯元素。</p> <p>而 div 元素不會顯示出來！</p> <div>div 元素的內容不會顯示出來！</div> </body> </html> ``` [如何把元素顯示為塊級元素](/tiy/t.asp?f=csse_display_block) ``` <html> <head> <style type="text/css"> span { display: block } </style> </head> <body> <span>本例中的樣式表把 span 元素設置為塊級元素。</span> <span>兩個 span 元素之間產生了一個換行行為。</span> </body> </html> ``` [float 屬性的簡單應用](/tiy/t.asp?f=csse_float) ``` <html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的圖像。結果是這個圖像會浮動到段落的右側。</p> <p> <img src="/i/eg_cute.gif" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> ``` [將帶有邊框和邊界的圖像浮動于段落的右側](/tiy/t.asp?f=csse_float2) ``` <html> <head> <style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p>在下面的段落中，圖像會浮動到右側，并且添加了點狀的邊框。我們還為圖像添加了邊距，這樣就可以把文本推離圖像：上和右外邊距是 0px，下外邊距是 15px，而圖像左側的外邊距是 20px。</p> <p> <img src="/i/eg_cute.gif" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> ``` [帶標題的圖像浮動于右側](/tiy/t.asp?f=csse_float3) ``` <html> <head> <style type="text/css"> div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> 在上面的段落中，div 元素的寬度是 120 像素，它其中包含圖像。div 元素浮動到右側。我們向 div 元素添加了外邊距，這樣就可以把 div 推離文本。同時，我們還向 div 添加了邊框和內邊距。 </p> </body> </html> ``` [使段落的首字母浮動于左側](/tiy/t.asp?f=csse_float4) ``` <html> <head> <style type="text/css"> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> 在上面的段落中，文本的第一個字母包含在一個 span 元素中。這個 span 元素的寬度是當前字體尺寸的 0.7 倍。span 元素的字體尺寸是 400%，行高是 80%。span 中的字母字體是 "Algerian" </p> </body> </html> ``` [創建水平菜單](/tiy/t.asp?f=csse_float5) ``` <html> <head> <style type="text/css"> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> 在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示為行內元素（元素前后沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當前字體尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。 </p> </body> </html> ``` [創建無表格的首頁](/tiy/t.asp?f=csse_float6) ``` <html> <head> <style type="text/css"> div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3School.com.cn</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3School.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> <div class="footer">Copyright 2008 by YingKe Investment.</div> </div> </body> </html> ``` [定位：相對定位](/tiy/t.asp?f=csse_position_relative) ``` <html> <head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style> </head> <body> <h2>這是位于正常位置的標題</h2> <h2 class="pos_left">這個標題相對于其正常位置向左移動</h2> <h2 class="pos_right">這個標題相對于其正常位置向右移動</h2> <p>相對定位會按照元素的原始位置對該元素進行移動。</p> <p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p> <p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p> </body> </html> ``` [定位：絕對定位](/tiy/t.asp?f=csse_position_absolute) ``` <html> <head> <style type="text/css"> h2.pos_abs { position:absolute; left:100px; top:150px } </style> </head> <body> <h2 class="pos_abs">這是帶有絕對定位的標題</h2> <p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p> </body> </html> ``` [定位：固定定位](/tiy/t.asp?f=csse_position_fixed) ``` <html> <head> <style type="text/css"> p.one { position:fixed; left:5px; top:5px; } p.two { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="one">一些文本。</p> <p class="two">更多的文本。</p> </body> </html> ``` [如何使元素不可見](/tiy/t.asp?f=csse_visibility) ``` <html> <head> <style type="text/css"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="visible">這是可見的標題</h1> <h1 class="invisible">這是不可見的標題</h1> </body> </html> ``` [把表格元素設置為 collapse（請在非 IE 的瀏覽器中查看）](/tiy/t.asp?f=csse_visibility_collapse) ``` <html> <head> <style type="text/css"> tr.coll { visibility:collapse } </style> </head> <body> <table border="1"> <tr> <td>Adams</td> <td>John</td> </tr> <tr class="coll"> <td>Bush</td> <td>George</td> </tr> </table> </body> </html> ``` [改變光標](/tiy/t.asp?f=csse_cursor) ``` <html> <body> <p>請把鼠標移動到單詞上，可以看到鼠標指針發生變化：</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"> Crosshair</span><br /> <span style="cursor:default"> Default</span><br /> <span style="cursor:pointer"> Pointer</span><br /> <span style="cursor:move"> Move</span><br /> <span style="cursor:e-resize"> e-resize</span><br /> <span style="cursor:ne-resize"> ne-resize</span><br /> <span style="cursor:nw-resize"> nw-resize</span><br /> <span style="cursor:n-resize"> n-resize</span><br /> <span style="cursor:se-resize"> se-resize</span><br /> <span style="cursor:sw-resize"> sw-resize</span><br /> <span style="cursor:s-resize"> s-resize</span><br /> <span style="cursor:w-resize"> w-resize</span><br /> <span style="cursor:text"> text</span><br /> <span style="cursor:wait"> wait</span><br /> <span style="cursor:help"> help</span> </body> </html> ``` [清除元素的側面](/tiy/t.asp?f=csse_class-clear) ``` <html> <head> <style type="text/css"> img { float:left; clear:both; } </style> </head> <body> <img src="/i/eg_smile.gif" /> <img src="/i/eg_smile.gif" /> </body> </html> ``` ## CSS 分類屬性 (Classification) CSS 分類屬性允許你控制如何顯示元素，設置圖像顯示于另一元素中的何處，相對于其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。 | 屬性 | 描述 | | --- | --- | | [clear](/cssref/pr_class_clear.asp "CSS clear 屬性") | 設置一個元素的側面是否允許其他的浮動元素。 | | [cursor](/cssref/pr_class_cursor.asp "CSS cursor 屬性") | 規定當指向某元素之上時顯示的指針類型。 | | [display](/cssref/pr_class_display.asp "CSS display 屬性") | 設置是否及如何顯示元素。 | | [float](/cssref/pr_class_float.asp "CSS float 屬性") | 定義元素在哪個方向浮動。 | | [position](/cssref/pr_class_position.asp "CSS position 屬性") | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。 | | [visibility](/cssref/pr_class_visibility.asp "CSS visibility 屬性") | 設置元素是否可見或不可見。 |