📄 css_classification.asp@output=print
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Classification Properties</title>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="xml,tutorial,html,dhtml,css,xsl,xhtml,javascript,asp,ado,vbscript,dom,sql,colors,soap,php,authoring,programming,training,learning,beginner's guide,primer,lessons,school,howto,reference,examples,samples,source code,tags,demos,tips,links,FAQ,tag list,forms,frames,color table,w3c,cascading style sheets,active server pages,dynamic html,internet,database,development,Web building,Webmaster,html guide" />
<meta name="Description" content="Free HTML XHTML CSS JavaScript DHTML XML DOM XSL XSLT RSS AJAX ASP ADO PHP SQL tutorials, references, examples for web building." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "../../https@ssl./default.htm" : "../../www./default.htm");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</head>
<body>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
<h1>CSS Classification</h1>
<a href="css_dimension.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_positioning.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<p class="intro">The CSS classification properties allow you to specify how and
where to display an element.</p>
<hr />
<h2>Examples</h2>
<p><a target="_blank" href="tryit.asp@filename=trycss_display">How to display an
element as an inline element.</a><br />
This example demonstrates how to display an element as an inline element.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_display_block">How to
display an element as a block element</a><br />
This example demonstrates how to display an element as a block element.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float">A simple use of the float property</a><br />
Let an image float to the right in a paragraph.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float2">An image with border and margins that floats to the right in a paragraph</a><br />
Let an image float to the right in a paragraph. Add border and margins to the image.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float3">An image with a caption that floats to the right</a><br />
Let an image with a caption float to the right.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float4">Let the first letter of a paragraph float to the left</a><br />
Let the first letter of a paragraph float to the left and style the letter.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float5">Creating a horizontal menu</a><br />
Use float with a list of hyperlinks to create a horizontal menu.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_float6">Creating a homepage without tables</a><br />
Use float to create a homepage with a header, footer, left content and main content.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_relative">Position:relative</a><br />
This example demonstrates how to position an element relative to its normal position.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_position_absolute">Position:absolute</a><br />
This example demonstrates how to position an element using an absolute value.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_visibility">How to make an element invisible</a><br />
This example demonstrates how to make an element invisible. Do you want the element to show or not?</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_visibility_collapse">How
to make a table element collapse</a><br />
This example demonstrates how to make a table element collapse.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_cursor">Change the cursor</a><br />
This example demonstrates how to change the cursor.</p>
<p><a target="_blank" href="tryit.asp@filename=trycss_class-clear">Clear the
sides of an element</a><br />
This example demonstrates how clear the sides of other floating elements.</p>
<hr />
<h2>CSS Classification Properties</h2>
<p>The CSS classification properties allow you to control how to display an element, set where an image will appear in another
element, position an element relative to its normal position, position an element
using an absolute value, and how to control the visibility of an element.</p>
<p>
<b>Browser support:</b> IE: Internet Explorer, F: Firefox, N: Netscape.</p>
<p>
<b>W3C:</b> The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).</p>
<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
<tr>
<th width="25%" align="left">Property</th>
<th width="30%" align="left">Description</th>
<th width="25%" align="left">Values</th>
<th width="5%" align="left">IE</th>
<th width="4%" align="left">F</th>
<th width="4%" align="left">N</th>
<th width="7%" align="left">W3C</th>
</tr>
<tr>
<td valign="top"><a href="pr_class_clear.asp">clear</a></td>
<td valign="top">Sets the sides of an element where other floating elements are not allowed</td>
<td valign="top">left<br />
right<br />
both<br />
none</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top"><a href="pr_class_cursor.asp">cursor</a></td>
<td valign="top">Specifies the type of cursor to be displayed</td>
<td valign="top"><span class="value-inst-uri noxref"><i>url</i><br />
</span>auto<br />
crosshair<br />
default<br />
pointer<br />
move<br />
e-resize<br />
ne-resize<br />
nw-resize<br />
n-resize<br />
se-resize<br />
sw-resize<br />
s-resize<br />
w-resize<br />
text<br />
wait<br />
help</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">6</td>
<td valign="top">2</td>
</tr>
<tr>
<td valign="top"><a href="pr_class_display.asp">display</a></td>
<td valign="top">Sets how/if an element is displayed</td>
<td valign="top">none<br />
inline<br />
block<br />
list-item<br />
run-in<br />
compact<br />
marker<br />
table<br />
inline-table<br />
table-row-group<br />
table-header-group<br />
table-footer-group<br />
table-row<br />
table-column-group<br />
table-column<br />
table-cell<br />
table-caption</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top"><a href="pr_class_float.asp">float</a></td>
<td valign="top">Sets where an image or a text will appear in another element</td>
<td valign="top">left<br />
right<br />
none</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">1</td>
</tr>
<tr>
<td valign="top"><a href="pr_class_position.asp">position</a></td>
<td valign="top">Places an element in a static, relative, absolute or fixed position</td>
<td valign="top">static<br />
relative<br />
absolute<br />
fixed</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">4</td>
<td valign="top">2</td>
</tr>
<tr>
<td valign="top"><a href="pr_class_visibility.asp">visibility</a></td>
<td valign="top">Sets if an element should be visible or invisible</td>
<td valign="top">visible<br />
hidden<br />
collapse</td>
<td valign="top">4</td>
<td valign="top">1</td>
<td valign="top">6</td>
<td valign="top">2</td>
</tr>
</table>
<br />
<hr />
<a href="css_dimension.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_positioning.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<p>From <b>http://www.w3schools.com</b> (Copyright Refsnes Data)</p>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -