drafts: css-style-attr/Overview.src.html@83624f165e30 (annotated)

css-style-attr/Overview.src.html@83624f165e30 (annotated)

css-style-attr/Overview.src.html

Wed, 09 Dec 2009 20:13:33 +0000

author: Elika Etemad <fantasai.cvs@inkedblade.net>
date: Wed, 09 Dec 2009 20:13:33 +0000
changeset 1563: 83624f165e30
child 1564: fec7e9f33df5
permissions: -rwxr-xr-x

Copy out css-style-attr draft

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>Syntax of CSS rules in HTML's "style" attribute</title>
 <style type="text/css">
   .emph-code {text-decoration: underline}
   table.tprofile th.title { background: gray; color: white }
   table.tprofile th { width:29% }
   table.tprofile td { width:71% }
   table.tprofile td ul { margin:0; list-style:none }
 </style>
 <link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet" type="text/css">
 </head>
 <body>
 <div class="head">
 <p><a href="http://www.w3.org/"><img alt="W3C" height="48"
 src="http://www.w3.org/Icons/w3c_home" width="72"></a>
 <h1 id="syntax">Syntax of CSS rules in HTML's "style" attribute</h1>
 <h2 class="no-num no-toc" id="w3c-working">W3C Working Draft 15 May 2002</h2>
 <dl>
 <dt>This version:
 <dd><a
 href="http://www.w3.org/TR/2002/WD-css-style-attr-20020515">http://www.w3.org/TR/2002/WD-css-style-attr-20020515</a>
 <dt>Latest version:
 <dd><a
 href="http://www.w3.org/TR/css-style-attr">http://www.w3.org/TR/css-style-attr</a>
 <dt>Previous version:
 <dd><a
 href="http://www.w3.org/TR/2001/WD-css-style-attr-20010305">http://www.w3.org/TR/2001/WD-css-style-attr-20010305</a>
 <dt>Editors:
 <dd><span lang="tr">Tantek &Ccedil;elik</span>
 (<a href="http://www.microsoft.com/">Microsoft</a>),
 &lt;<a href="mailto:tantekc@microsoft.com">tantekc@microsoft.com</a>&gt;
 <dd><a href="http://www.w3.org/People/Bos/">Bert Bos</a>
 (<a href="http://www.w3.org/">W3C</a>),
 &lt;<a href="mailto:bert@w3.org">bert@w3.org</a>&gt;
 <dd>Marc Attinasi (AOL/Netscape),
 &lt;<a href="mailto:attinasi@netscape.com">attinasi@netscape.com</a>&gt;
 </dl>
 <!--begin-include "../css3-src/copyright.inc"-->
 <p class="copyright"><a
 href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Copyright">
 Copyright</a> &copy;2002 <a href="http://www.w3.org/"><abbr title="World Wide
 Web Consortium">W3C</abbr></a><sup>&reg;</sup> (<a
 href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of
 Technology">MIT</abbr></a>, <a href="http://www.inria.fr/"><abbr lang="fr"
 title="Institut National de Recherche en Informatique et
 Automatique">INRIA</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>),
 All Rights Reserved. W3C <a
 href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#Legal_Disclaimer">liability</a>,
 <a
 href="http://www.w3.org/Consortium/Legal/ipr-notice-20000612#W3C_Trademarks">trademark</a>,
 <a
 href="http://www.w3.org/Consortium/Legal/copyright-documents-19990405">document
 use</a> and <a
 href="http://www.w3.org/Consortium/Legal/copyright-software-19980720">software
 licensing</a> rules apply.
 <!--end-include-->
 <hr title="Separator for header">
 </div>
 <h2 class="no-num no-toc" id="abstract">Abstract</h2>
 <p>HTML provides a "style" attribute on most elements, to hold a fragment of
 a style sheet that applies to those elements. One of the possible style sheet
 languages is CSS. This draft describes the syntax of the CSS fragment that
 can be used in the "style" attribute.
 <h2 class="no-num no-toc" id="status">Status of this document</h2>
 <p><em>This section describes the status of this document at the time of its
 publication.</em>
 <p>This draft has been produced by the CSS working group as part of the <a
 href="/Style/">style</a> activity (see <a
 href="/Style/Activity">summary</a>). It is a public W3C
 Working Draft for review by W3C members and other interested parties. As a
 draft document it may be updated, replaced, or obsoleted by other documents
 at any time. It is inappropriate to use W3C Working Drafts as reference
 material or to cite them as other than "work in progress."
 <p>Comments are invited and may be sent to the public mailing list <a
 href="http://www.w3.org/Mail/Lists#www-style">www-style@w3.org</a> (see <a
 href="http://www.w3.org/Mail/Request">instructions</a> for subscribing), or
 to the editors. Discussions should take place on the mailing list.
 <p>A list of current public W3C Working Drafts can be found at <a
 href="http://www.w3.org/TR/">http://www.w3.org/TR</a>.
 <h2 class="no-num no-toc" id="table">Table of contents</h2>
 <div> <!--begin-toc-->
 <ul class="toc">
 <li><a href="#history"><span class="secno">1. </span>History</a>
 <li><a href="#examples"><span class="secno">2. </span>Examples</a>
 <li><a href="#grammar"><span class="secno">3. </span>Grammar</a>
 <li><a href="#cascading"><span class="secno">4. </span>Cascading order</a>
 <li><a href="#profiles"><span class="secno">5. </span>Profiles</a>
 <ul class="toc">
 <li><a href="#basic"><span class="secno">5.1. </span>Basic 'style' attribute
 profile</a>
 <li><a href="#pseudo-rules"><span class="secno">5.2. </span>Pseudo-rules
 'style' attribute profile</a>
 <li><a href="#complete"><span class="secno">5.3. </span>Complete style sheet
 'style' attribute profile</a>
 </ul>
 <li><a href="#acknowledgments"><span class="secno">6.
 </span>Acknowledgments</a>
 <li><a href="#references"><span class="secno">7. </span>References</a>
 <ul class="toc">
 <li><a href="#normative"><span class="secno">7.1. </span>Normative
 References</a>
 <li><a href="#informative"><span class="secno">7.2. </span>Informative
 References</a>
 </ul>
 </ul>
 <!--end-toc--> </div>
 <hr>
 <h2 id="history"><span class="secno">1. </span>History</h2>
 <p><a href="/TR/REC-html40/">HTML 4.0</a> introduced the <a
 href="/TR/REC-html40/present/styles#h-14.2.2">"style" attribute</a>, whose
 contents could contain any styling language (through the use of META
 http-equiv <a
 href="/TR/REC-html40/present/styles#h-14.2.1">Content-Style-Type</a>), but by
 default, and in practice, has only contained CSS. <a
 href="/TR/xhtml-modularization/">XHTML Modularization</a> introduced the <a
 href="/TR/xhtml-modularization/abstract_modules#s_styleattributemodule">
 Style Attribute Module</a> which also has a "style" attribute whose semantics
 are the same as that in HTML 4. <a href="/TR/SVG/">SVG</a> also has a
 language neutral <a href="/TR/SVG/styling#StyleAttribute">"style"
 attribute</a>, whose language is specified with the contentStyleType
 attribute which has the default value of "text/css". <a
 href="/TR/REC-MathML/">MathML</a> states that all MathML elements accept the
 "style" attribute to facilitate <a
 href="/TR/REC-MathML/chapter2#sec2.3.4">compatibility with CSS</a>.
 <p>Not all XML-based document formats have a "style" attribute to permit the
 user to use CSS to style documents and specific elements in documents, but in
 case a certain format has a "style" attribute and the attribute accepts CSS
 as its value, then this specification describes the attribute's syntax and
 interpretation.
 <h2 id="examples"><span class="secno">2. </span>Examples</h2>
 <p>Here are a few examples:
 <ol>
 <li>Only setting properties on the element itself, no pseudo-elements or
 pseudo-classes:
 <pre>&lt;p style="<span class="emph-code">color: #090; line-height: 1.2</span>"&gt;...&lt;/p&gt;</pre>
 <li>Setting properties on the element, as well as on the first letter of the
 element, by means of the '::first-letter' pseudo-element. Note that curly
 braces ({...}) are required in this case:
 <pre>&lt;p style="<span class="emph-code">{color: #090; line-height: 1.2}</span>
           <span class="emph-code">::first-letter {color: #900}</span>"&gt;...&lt;/p&gt;</pre>
 <li>Setting properties on a source anchor for each of its dynamic states,
 using pseudo-classes:
 <pre>&lt;a href="http://www.w3.org/"
           style="<span class="emph-code">{color: #900}</span>
           <span class="emph-code">:link {background: #ff0}</span>
           <span class="emph-code">:visited {background: #fff}</span>
           <span class="emph-code">:hover {outline: thin red solid}</span>
           <span class="emph-code">:active {background: #00f}</span>"&gt;...&lt;/a&gt;</pre>
 <li>Importing a style sheet to apply as a scoped style sheet:
 <pre>&lt;div class="navigation"
           style="<span class="emph-code">@import url(navigationstyles.css);</span>"&gt;...&lt;/div&gt;</pre>
 </ol>
 <p class="note">Note: in CSS1 and CSS2, the spelling of '::first-letter' and
 '::first-line' is ':first-letter' and ':first-line' respectively, i.e., with
 a single colon, but Selectors recommends using double colons for
 pseudo-elements.
 </p>
 <p>This document defines both the simple case (only properties on the element
 itself, example 1), as well as more complex cases such as rules that apply only to the element
  (e.g. properties on the element's pseudo-elements and pseudo-classes, examples 2 and 3),
  and scoped style sheets (the use of @import which apples the referenced style sheet
  to the subdocument consisting of the element and its children with the element as the root,
  example 4).
 </p>
 <h2 id="grammar"><span class="secno">3. </span>Grammar</h2>
 <p class=issue>[The grammar is ambiguous, e.g., for ":hover {color:
 red}". See
 http://lists.w3.org/Archives/Public/www-style/2008Jan/0419.html]
 <p>The syntax of the CSS fragment that is allowed in the HTML "style"
 attribute can be formally specified as follows:
 <pre>
 inline-stylesheet
   : S* [ declarations | declarations-block | inline-ruleset* | stylesheet ]
   ;
 declarations
   : declaration [ ';' S* declaration ]*
   ;
 declarations-block
   : '{' S* declarations '}' S*
   ;
 inline-ruleset
   : [ pseudo* S* [ ',' S* pseudo* S* ]* ]?
     declarations-block
   ;
 </pre>
 <p>Please refer to the grammar in <a href="/TR/REC-CSS2/grammar">appendix D
 of the CSS2 specification</a> <a href="#CSS2" rel="biblioentry">[CSS2]</a>
 for the definition of the symbols not defined here.
 <p>The same rules for forward-compatible parsing apply to the inline style
 sheet as to a normal style sheet. See <a href="/TR/REC-CSS2/syndata">chapter
 of the CSS2 specification</a>.
 <h2 id="cascading"><span class="secno">4. </span>Cascading order</h2>
 <p>CSS already <a href="/TR/REC-CSS2/cascade#specificity">defines</a> how
 style sheets and "style" attributes are cascaded together for the case where
 the inline fragment consists of declarations only.
 <p>In addition to simple declarations, the style attribute is now permitted
 to take rulesets. These rules have the additive specificity of their
 selectors in addition to the specificity of the style attribute. The examples
 indicate what is added to each of the specificity components using the
 familiar '+=' notation.
 <p>Example:
 <pre>&lt;p style="<span class="emph-code">{color: green; width: 10em}</span>                   /* a+=0 b+=0 c+=0 */
           <span class="emph-code">::first-letter {float: left; font-size: 300%}</span>   /* a+=0 b+=0 c+=1 */
          "&gt;
   This is an example of a paragraph with inline style attribute rules
   to create a spot effect, in this case, a drop-cap first letter.
 &lt;/p&gt;</pre>
 <p>Example:
 <pre>&lt;a href="http://www.w3.org/Style/CSS"
    style="<span class="emph-code">{color: blue; background: white}</span>  /* a+=0 b+=0 c+=0 */
           <span class="emph-code">:visited {color: green}</span>           /* a+=0 b+=1 c+=0 */
           <span class="emph-code">:hover {background: yellow}</span>       /* a+=0 b+=1 c+=0 */
           <span class="emph-code">:visited:hover {color: purple}</span>    /* a+=0 b+=2 c+=0 */
          "&gt;
   Example of a hyperlink to the CSS home page with special one-off
   visited and hover effects.
 &lt;/a&gt;</pre>
 <h2 id="profiles"><span class="secno">5. </span>Profiles</h2>
 <p>Several profiles are provided for implementation conformance. The profiles
 are of increasing power and complexity. Each profile is a superset of, and
 backwards compatible with, all profiles that preceed it. This permits
 implementations to first implement simpler profiles, and later implement more
 powerful ones. An implementation must implement at least one profile in order
 to be conformant.
 <p> Each profile defines a subset of CSS syntax that a 'style' attribute
 allows and excludes by listing both the grammar productions for
 inline-stylesheet which are accepted, and those which are excluded.
 Productions which are excluded by a profile are to be treated as
 unrecognized, and ignored, according to the rules for forward-compatible
 parsing. See <a href="http://www.w3.org/TR/REC-CSS2/syndata">chapter 4 of the
 CSS2 specification</a>.
 <div class="profile">
 <h3 id="basic"><span class="secno">5.1. </span>Basic 'style' attribute
 profile</h3>
 <table border="1" class="tprofile" width="75%">
 <tbody>
 <tr>
 <th class="title" colspan="2">Basic profile
 <tr>
 <th>Accepts
 <td>
 <ul>
 <li>declarations
 <li>declarations-block
 </ul>
 <tr>
 <th>Excludes
 <td>
 <ul>
 <li>inline-ruleset
 <li>stylesheet
 </ul>
 <tr>
 <th>Extra constraints
 <td>
 <p>Implementations are required to support the declarations-block syntax.
 This was ambiguous/unclear in CSS1 and CSS2, and is made explicit by this
 document.
 <tr>
 <th>Comments
 <td>This profile corresponds to CSS level 1 &amp; 2.
 </table>
 </div>
 <div class="profile">
 <h3 id="pseudo-rules"><span class="secno">5.2. </span>Pseudo-rules 'style'
 attribute profile</h3>
 <table border="1" class="tprofile" width="75%">
 <tbody>
 <tr>
 <th class="title" colspan="2">Pseudo-rules profile
 <tr>
 <th>Accepts
 <td>
 <ul>
 <li>declarations
 <li>declarations-block
 <li>inline-ruleset
 </ul>
 <tr>
 <th>Excludes
 <td>
 <ul>
 <li>stylesheet
 </ul>
 <tr>
 <th>Extra constraints
 <td>
 <p>None.
 <tr>
 <th>Comments
 <td>This profile is new and defined by CSS level 3.
 </table>
 </div>
 <div class="profile">
 <h3 id="complete"><span class="secno">5.3. </span>Complete style sheet
 'style' attribute profile</h3>
 <table border="1" class="tprofile" width="75%">
 <tbody>
 <tr>
 <th class="title" colspan="2">Complete style sheet profile
 <tr>
 <th>Accepts
 <td>
 <ul>
 <li>declarations
 <li>declarations-block
 <li>inline-ruleset
 <li>stylesheet
 </ul>
 <tr>
 <th>Excludes
 <td>
 <p>N/A.
 <tr>
 <th>Extra constraints
 <td>
 <p>None.
 <tr>
 <th>Comments
 <td>This profile is new and defined by CSS level 3.
 </table>
 </div>
 <h2 id="acknowledgments"><span class="secno">6. </span>Acknowledgments</h2>
 <p>Thanks to feedback from Daniel Glazman, Ian Hickson, Eric A. Meyer,
 Bj&ouml;rn H&ouml;hrmann.
 <h2 id="references"><span class="secno">7. </span>References</h2>
 <h3 id="normative"><span class="secno">7.1. </span>Normative References</h3>
 <dl class="bibliography">
 <dt id="CSS2">[CSS2]
 <dd>Bert Bos; H&aring;kon Wium Lie; Chris Lilley; Ian Jacobs. <cite>Cascading
 Style Sheets, level 2.</cite> 12 May 1998. W3C Recommendation. URL: <a
 href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2</a>
 <dt id="HTML40">[HTML40]
 <dd>Raggett, D.; Le Hors, A.; Jacobs, I.. <cite>HTML 4.0
 Specification.</cite> 8 July 1997. W3C Recommendation. URL: <a
 href="http://www.w3.org/TR/REC-html40/">http://www.w3.org/TR/REC-html40</a>
 </dl>
 <h3 id="informative"><span class="secno">7.2. </span>Informative References</h3>
 <dl class="bibliography">
 <dt id="MathML">[MathML]
 <dd>Patrick Ion; Robert Miner. <cite> Mathematical Markup Language
 (MathML<span class="tm">&#8482;</span>) 1.01</cite> 7 July 1999. W3C Recommendation.
 URL: <a
 href="http://www.w3.org/TR/REC-MathML/">http://www.w3.org/TR/REC-MathML</a>
 <dt id="SVG10">[SVG10]
 <dd>Jon Ferraiolo ed. <cite> Scalable Vector Graphics (SVG) 1.0
 Specification.</cite> 5 September 2001. W3C Recommendation. URL: <a
 href="http://www.w3.org/TR/SVG/">http://www.w3.org/TR/SVG</a>
 <dt id="XHTMLMOD">[XHTMLMOD]
 <dd><cite>Modularization of XHTML<span class="tm">&#8482;</span>.</cite>
 April 2001. W3C Recommendation. URL: <a
 href="http://www.w3.org/TR/xhtml-modularization/">http://www.w3.org/TR/xhtml-modularization</a>
 </dl>
 </body>
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
 sgml-declaration:"~/SGML/HTML4.decl"
 sgml-default-doctype-name:"html"
 sgml-minimize-attributes:t
 sgml-nofill-elements:("pre" "style" "br")
 End:
 -->

Mercurial > drafts / annotate

css-style-attr/Overview.src.html@83624f165e30 (annotated)

css-style-attr/Overview.src.html