📄 syndata.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>CSS2 syntax and basic data types</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="conform.html"><link rel="next" href="selector.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="conform.html">previous</a> <a href="selector.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">4 CSS2 syntax and basic data types</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="syndata.html#syntax" class="tocxref">4.1 Syntax</a> <ul class="toc"> <li class="tocline3"><a href="syndata.html#tokenization" class="tocxref">4.1.1 Tokenization</a> <li class="tocline3"><a href="syndata.html#keywords" class="tocxref">4.1.2 Keywords</a> <li class="tocline3"><a href="syndata.html#q4" class="tocxref">4.1.3 Characters and case</a> <li class="tocline3"><a href="syndata.html#q5" class="tocxref">4.1.4 Statements</a> <li class="tocline3"><a href="syndata.html#at-rules" class="tocxref">4.1.5 <span class="index-def" title="at-rule"> At-rules</span></a> <li class="tocline3"><a href="syndata.html#block" class="tocxref">4.1.6 Blocks</a> <li class="tocline3"><a href="syndata.html#q8" class="tocxref">4.1.7 Rule sets, declaration blocks, and selectors</a> <li class="tocline3"><a href="syndata.html#declaration" class="tocxref">4.1.8 Declarations and properties</a> <li class="tocline3"><a href="syndata.html#comments" class="tocxref">4.1.9 Comments</a> </ul> <li class="tocline2"><a href="syndata.html#parsing-errors" class="tocxref">4.2 Rules for handling parsing errors</a> <li class="tocline2"><a href="syndata.html#values" class="tocxref">4.3 Values</a> <ul class="toc"> <li class="tocline3"><a href="syndata.html#q13" class="tocxref">4.3.1 Integers and real numbers</a> <li class="tocline3"><a href="syndata.html#length-units" class="tocxref">4.3.2 Lengths</a> <li class="tocline3"><a href="syndata.html#percentage-units" class="tocxref">4.3.3 Percentages</a> <li class="tocline3"><a href="syndata.html#uri" class="tocxref">4.3.4 URL + URN = URI</a> <li class="tocline3"><a href="syndata.html#counter" class="tocxref">4.3.5 Counters</a> <li class="tocline3"><a href="syndata.html#color-units" class="tocxref">4.3.6 Colors</a> <li class="tocline3"><a href="syndata.html#q19" class="tocxref">4.3.7 Angles</a> <li class="tocline3"><a href="syndata.html#q20" class="tocxref">4.3.8 Times</a> <li class="tocline3"><a href="syndata.html#q21" class="tocxref">4.3.9 Frequencies</a> <li class="tocline3"><a href="syndata.html#strings" class="tocxref">4.3.10 Strings</a> </ul> <li class="tocline2"><a href="syndata.html#q23" class="tocxref">4.4 CSS document representation</a> <ul class="toc"> <li class="tocline3"><a href="syndata.html#q24" class="tocxref">4.4.1 Referring to characters not represented in a character encoding</a> </ul> </ul></div><H2>4.1 <a name="syntax">Syntax</a></H2><P>This section describes a grammar (and <a name="x0"><span class="index-def"title="forward-compatible parsing"><dfn>forward-compatibleparsing</dfn></span></a> rules) common to any version of CSS (includingCSS2). Future versions of CSS will adhere to this core syntax,although they may add additional syntactic constraints.<P>These descriptions are normative. They are alsocomplemented by the normative grammar rules presented in <ahref="grammar.html">Appendix D</a>.<H3>4.1.1 <a name="tokenization">Tokenization</a></H3><P>All levels of CSS -- level 1, level 2, and any future levels -- usethe same core syntax. This allows UAs to parse (though not completelyunderstand) style sheets written in levels of CSS that didn't exist atthe time the UAs were created. Designers can use this feature tocreate style sheets that work with older user agents, while alsoexercising the possibilities of the latest levels of CSS.<P>At the lexical level, CSS style sheets consist of a sequence of tokens.The list of tokens for CSS2 is as follows. The definitions use Lex-styleregular expressions. Octal codes refer to ISO 10646 (<a href="refs.html#ref-ISO10646" rel="biblioentry" class="noxref"><span class="normref">[ISO10646]</span></a>). As inLex, in case of multiple matches, the longest match determines the token.<TABLE><THEAD><TR><TH>Token <TH>Definition</THEAD><TR><TD colspan=2><HR><TR><TD>IDENT <TD><code><var>{ident}</var></code><TR><TD>ATKEYWORD <TD><code>@<var>{ident}</var></code><TR><TD>STRING <TD><code><var>{string}</var></code><TR><TD>HASH <TD><code>#<var>{name}</var></code><TR><TD>NUMBER <TD><code><var>{num}</var></code><TR><TD>PERCENTAGE <TD><code><var>{num}</var>%</code><TR><TD>DIMENSION <TD><code><var>{num}{ident}</var></code><TR><TD>URI <TD><code>url\(<var>{w}{string}{w}</var>\)<br> |url\(<var>{w}</var>([!#$%&*-~]|<var>{nonascii}</var>|<var>{escape}</var>)*<var>{w}</var>\)</code><TR><TD>UNICODE-RANGE <TD><code>U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?</code><TR><TD>CDO <TD><code><!--</code><TR><TD>CDC <TD><code>--></code><TR><TD>; <TD><code>;</code><TR><TD>{ <TD><code>\{</code><TR><TD>} <TD><code>\}</code><TR><TD>( <TD><code>\(</code><TR><TD>) <TD><code>\)</code><TR><TD>[ <TD><code>\[</code><TR><TD>] <TD><code>\]</code><TR><TD>S <TD><code>[ \t\r\n\f]+</code><TR><TD>COMMENT <TD><code>\/\*[^*]*\*+([^/][^*]*\*+)*\/</code><TR><TD>FUNCTION <TD><code><var>{ident}</var>\(</code><TR><TD>INCLUDES <TD><code>~=</code><TR><TD>DASHMATCH <TD><code>|=</code><TR><TD>DELIM <TD><var>any other character not matched bythe above rules</var></TABLE><P>The macros in curly braces ({}) above are defined as follows:<TABLE><THEAD><TR><TH>Macro <TH>Definition</THEAD><TR><TD colspan=2><HR><TR><TD>ident <TD><code><var>{nmstart}{nmchar}*</var></code><TR><TD>name <TD><code><var>{nmchar}+</var></code><TR><TD>nmstart <TD><code>[a-zA-Z]|<var>{nonascii}</var>|<var>{escape}</var></code><TR><TD>nonascii<TD><code>[^\0-\177]</code><TR><TD>unicode <TD><code>\\[0-9a-f]{1,6}[ \n\r\t\f]?</code><TR><TD>escape <TD><code><var>{unicode}</var>|\\[ -~\200-\4177777]</code><TR><TD>nmchar <TD><code>[a-z0-9-]|<var>{nonascii}</var>|<var>{escape}</var></code><TR><TD>num <TD><code>[0-9]+|[0-9]*\.[0-9]+</code><TR><TD>string <TD><code><var>{string1}</var>|<var>{string2}</var></code><TR><TD>string1 <TD><code>\"([\t !#$%&(-~]|\\{nl}|\'|<var>{nonascii}</var>|<var>{escape}</var>)*\"</code><TR><TD>string2 <TD><code>\'([\t !#$%&(-~]|\\{nl}|\"|<var>{nonascii}</var>|<var>{escape}</var>)*\'</code><TR><TD>nl <TD><code>\n|\r\n|\r|\f</code><TR><TD>w <TD><code>[ \t\r\n\f]*</code></TABLE><P>Below is the core syntax for CSS. The sections that follow describehow to use it. <a href="grammar.html">Appendix D</a> describes amore restrictive grammar that is closer to the CSS level 2 language.<PRE>stylesheet : [ CDO | CDC | S | statement ]*;statement : ruleset | at-rule;at-rule : ATKEYWORD S* any* [ block | ';' S* ];block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;selector : any+;declaration : property ':' S* value;property : IDENT S*;value : [ any | block | ATKEYWORD S* ]+;any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;</PRE><P><a name="comment">COMMENT</a> tokens do not occurin the grammar (to keep it readable), but any number of these tokensmay appear anywhere between other tokens.<p>The token S in the grammar above stands for <Aname="whitespace">whitespace</a>. Only the characters "space" (Unicodecode 32), "tab" (9), "line feed" (10), "carriage return" (13), and"form feed" (12) can occur in whitespace. Other space-like characters,such as "em-space" (8195) and "ideographic space" (12288), are neverpart of whitespace.<H3>4.1.2 <a name="keywords">Keywords</a></H3><P>Keywords have the form of identifiers. Keywords must not be placedbetween quotes ("..." or '...'). Thus,<pre>red</pre><p>is a keyword, but<pre>"red"</pre>is not. (It is a <a href="#strings">string</a>.) Other illegal examples:<div class="illegal-example"><P style="display:none">Illegal example(s):</P><P><pre>width: "auto";border: "none";font-family: "serif";background: "red";</pre></div><H3><a name="q4">4.1.3 Characters and case</a></H3><P> The following rules always hold:</p><UL> <LI> All CSS style sheets are <a name="x1"><span class="index-inst" title="case sensitivity">case-insensitive</span></a>, except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML. <LI> In CSS2, <span class="index-def" title="identifier|identifier, definition of"><a name="value-def-identifier"><dfn>identifiers</dfn></a></span> (including element names, classes, and IDs in <a href="selector.html">selectors</a>) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). <span class="example">For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".</span> <P>Note that Unicode is code-by-code equivalent to ISO 10646 (see <a href="refs.html#ref-UNICODE" rel="biblioentry" class="noxref"><span class="normref">[UNICODE]</span></a> and <a href="refs.html#ref-ISO10646" rel="biblioentry" class="noxref"><span class="normref">[ISO10646]</span></a>). <LI> In CSS2, a backslash (\) character indicates three types of <span class="index-def" title="backslash escapes"> <a name="escaped-characters">character escapes</a></span>. <P>First, inside a <a href="#strings">string</a>, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). <P>Second, it cancels the meaning of special CSS characters. Any character (except a hexadecimal digit) can be escaped with a backslash to remove its special meaning. For example, <samp>"\""</samp> is a string consisting of one double quote. Style sheet preprocessors must not remove these backslashes from a style sheet since that would change the style sheet's meaning. <P>Third, backslash escapes allow authors to refer to characters they can't easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 (<a href="refs.html#ref-ISO10646" rel="biblioentry" class="noxref"><span class="normref">[ISO10646]</span></a>) character with that number. If a digit or letter follows the hexadecimal number, the end of the number needs to be made clear. There are two ways to do that: <ol> <li>with a space (or other whitespace character): "\26 B" ("&B") <li>by providing exactly 6 hexadecimal digits: "\000026B" ("&B") </ol> <p>In fact, these two methods may be combined. Only one whitespace character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must itself either be escaped or doubled. <LI>Backslash escapes are always considered to be part of an <a href="#value-def-identifier">identifier</a> or a string (i.e., "\7B" is not punctuation, even though "{" is, and "\32" is allowed at the start of a class name, even though "2" is not). </UL><H3><a name="q5">4.1.4 Statements</a></H3><P> A CSS style sheet, for any version of CSS, consists of a list of<a name="x5"><span class="index-inst" title="statements"><em>statements</em></span></a>(see the grammar above). There are two kinds of statements: <a name="x6"><spanclass="index-inst" title="at-rules"><em>at-rules</em></span></a>and <a name="x7"><span class="index-inst" title="rule sets"><em>rulesets.</em></span></a> There may be <a href="#whitespace">whitespace</a>around the statements.<P>In this specification, the expressions "immediately before" or"immediately after" mean with no intervening whitespace or comments.<H3>4.1.5 <span class="index-def" title="at-rule"><a name="at-rules">At-rules</a></span></H3><P> At-rules start with an <DFN>at-keyword</DFN>, an '@' characterfollowed immediately by an <ahref="#value-def-identifier">identifier</a> (for example, '@import','@page').<P> An at-rule consists of everything up to and including the nextsemicolon (;) or the next <a href="#block">block,</a> whichever comesfirst. A CSS user agent that encounters an unrecognized at-rule must<span class="index-inst" title="ignore"><a name="x9" href="#ignore">ignore</a></span>the whole of the at-rule and continue parsing after it.<P>CSS2 user agents must <span class="index-inst" title="ignore"><a name="x10"href="#ignore">ignore</a></span> any <ahref="cascade.html#at-import">'@import'</a> rule that occurs inside a <ahref="#block">block</a> or that doesn't precede all rule sets.<div class="illegal-example"><P style="display:none">Illegal example(s):</P><P>Assume, for example, that a CSS2 parser encounters this style sheet:<PRE>@import "subs.css";H1 { color: blue }@import "list.css";</PRE><P> The second '@import' is illegal according to CSS2. The CSS2 parser<span class="index-inst" title="ignore"><a name="x11" href="#ignore">ignores</a></span>the whole at-rule, effectively reducing the style sheet to:<PRE>@import "subs.css";H1 { color: blue }</PRE></div>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -