📄 css_syntax.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 Syntax</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 Syntax</h1>
<a href="css_intro.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_howto.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>
<hr />
<h2>Syntax</h2>
<p>The CSS syntax is made up of three parts: a selector, a property and a value:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>selector {property: value}</pre></td></tr></table>
<p>The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and value
are separated by a colon, and surrounded by curly braces:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>body {color: black}</pre>
</td></tr></table>
<p><b>Note:</b> If the value is multiple words, put quotes around the value:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p {font-family: "sans serif"}</pre>
</td></tr></table>
<p> <b>Note:</b> If you wish to specify more than one property, you must separate each
property with a semicolon. The example
below shows how to define a center aligned paragraph, with a red text color:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p {text-align:center;color:red}</pre>
</td></tr></table>
<p>To make the style definitions more readable, you can describe one
property on each line, like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p
{
text-align: center;
color: black;
font-family: arial
}</pre>
</td></tr></table>
<br />
<hr />
<h2>Grouping</h2>
<p>You can group selectors. Separate each selector with a comma. In the
example below we have grouped all the header elements. All header elements will
be displayed in green text color:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>h1,h2,h3,h4,h5,h6
{
color: green
}</pre>
</td></tr></table>
<br />
<hr />
<h2>The class Selector</h2>
<p>With the class selector you can define
different styles for the same type of HTML element.</p>
<p>Say that you would like to have two types of
paragraphs in your document: one right-aligned paragraph, and one center-aligned
paragraph. Here is how you can do it with styles:
</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p.right {text-align: right}
p.center {text-align: center}</pre>
</td></tr></table>
<p>You have to use the class attribute in your HTML document:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre><p class="right">
This paragraph will be right-aligned.
</p></pre>
<pre><p class="center">
This paragraph will be center-aligned.
</p></pre>
</td></tr></table>
<p><b>Note: </b>To apply more than one class per given element, the syntax is:</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table4"><tr><td>
<pre><p class="center bold">
This is a paragraph.
</p></pre>
</td></tr></table>
<p>The paragraph above will be styled by the class "center" AND the class
"bold".</p>
<p>You can also omit the tag name in the selector to define a style that
will be used by all HTML elements that have a certain class. In the example
below, all HTML elements with class="center" will be center-aligned:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>.center {text-align: center}</pre>
</td></tr></table>
<p>In the code below both the h1 element and the p element have class="center". This means that both elements will follow the
rules in the ".center" selector: </p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre><h1 class="center">
This heading will be center-aligned
</h1></pre>
<pre><p class="center">
This paragraph will also be center-aligned.
</p> </pre>
</td></tr></table>
<br />
<table class="tip" width="100%" border="0" id="table3">
<tr>
<td><img border="0" src="../images/lamp.gif" alt="Remark" />
Do <b>NOT</b> start a class name with a number! It will not work in Mozilla/Firefox.</td>
</tr>
</table>
<br />
<hr />
<h2>Add Styles to Elements with Particular Attributes</h2>
<p>You can also apply styles to HTML elements with particular attributes.</p>
<p>The style rule below will match all input elements that have a type attribute with a value
of "text":</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table5"><tr><td>
<pre>input[type="text"] {background-color: blue}</pre>
</td></tr></table>
<br />
<hr />
<h2>The id Selector</h2>
<p>You can also define styles for HTML elements with the id selector. The id
selector is defined as a #.</p>
<p>The style rule below will match the element that has an id attribute with a value
of "green":</p>
<table width="100%" border="1" class="ex" cellspacing="0" id="table1"><tr><td>
<pre>#green {color: green}</pre>
</td></tr></table>
<p>The style rule below will match the p element that has an
id with a value of "para1":</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p#para1
{
text-align: center;
color: red
}</pre></td></tr></table>
<br />
<table class="tip" width="100%" border="0" id="table3">
<tr>
<td><img border="0" src="../images/lamp.gif" alt="Remark" />
Do <b>NOT</b> start an ID name with a number! It will not work in Mozilla/Firefox.</td>
</tr>
</table>
<br />
<hr />
<h2>CSS Comments</h2>
<p>Comments are used to explain your code, and may help you when
you edit the source code at a later date. A comment will be ignored by
browsers. A CSS comment begins with "/*", and ends with "*/", like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}</pre>
</td></tr></table>
<br />
<hr />
<a href="css_intro.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
<a href="css_howto.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 + -