CSS

  • 版本网址缩略名: CSS
  • 版本标题: CSS
  • 版本 id: 468267
  • 创建于:
  • 创建者: yan
  • 是否是当前版本?
  • 评论

修订内容

层叠样式表(Cascading Style Sheets), 常缩写为 CSS, 是一种样式表(stylesheet)语言,用来描述HTMLXML(包括各种 XML 语言如 SVGXHTML)文档的呈现。CSS 描述怎样在屏幕、电子纸、音频或其它媒体上渲染结构化元素

CSS 是开放网络 open web  的核心语言之一,由 W3C 规范 进行标准化。CSS 分为 不同等级,现在 CSS1 已经废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块,正在标准化中。

CSS 参考手册

一份详细参考手册适合有经验的 Web 开发者,讲述 CSS 各个属性与概念。

CSS 教程

一份教程 ,一步步地帮助初学者 入门,涵盖了所有必需的基础知识。

CSS3 示例

一些 示例,演示 CSS 最新技术,激发创新。

文档和教程

CSS 关键概念
讲述 语法 与基础知识,比如 权重(specificity)继承(inheritance), 盒模型(box model)外边距合并(margin collapsing), 堆叠(stacking )与 块格式化上下文(block-formattin contexts), 初始值(initial)计算值(computed)应用值 (used)实际值(actual values),还有 CSS 复合属性(shorthand properties)等概念。
CSS 开发者指南
CSS 技术文章。

CSS 开发工具

  • W3C CSS Validation Service 检查 CSS 是否有效, 是重要的调试工具.
  • Firefox Firebug 扩展,很流行的扩展,可以实时编辑网站的 CSS。对于测试很实用,当然不止于此。
  • Firefox Web Developer 扩展,可以实时编辑网站的CSS,尽管不如 Firebug 强大,但比它简单,
  • Firefox EditCSS 扩展,可在边栏编辑 CSS。

 

 
 

 

从社区获得帮助

需要CSS相关问题的帮助,并且在文档中找不到解决办法?

  • 查看 CSS 常见问题 。
  • 去 Stack Overflow —— 一个协作问答网站, 可以找到你的问题的答案,如果没有找到,可以在上面提问。
  • 在CSS、HTML 论坛里提问: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

不要忘了 网络礼仪...

 

修订版来源

<p><strong>层叠样式表</strong>(Cascading Style Sheets), 常缩写为&nbsp;<strong>CSS,</strong>&nbsp;是一种<a href="/zh-CN/docs/DOM/stylesheet">样式表(stylesheet)</a>语言,用来描述<a href="/zh-CN/docs/HTML" title="The HyperText Mark-up Language">HTML</a>、<a href="/zh-CN/docs/XML" title="zh-CN/docs/XML">XML</a>(包括各种 XML 语言如&nbsp;<a href="/zh-CN/docs/SVG" title="zh-CN/docs/SVG">SVG</a>、<a href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a>)文档的呈现。CSS 描述怎样在<span style="line-height: inherit;">屏幕、电子纸、音频或其它媒体上渲染</span><span style="line-height: inherit;">结构化元素</span><span style="line-height: inherit;">。</span></p>
<p>CSS 是开放网络&nbsp;<em style="line-height: 21px;">open web</em><span style="line-height: 21px;">&nbsp;&nbsp;</span><span style="line-height: inherit;">的核心语言之一,由&nbsp;</span><a class="external" href="http://w3.org/Style/CSS/#specs" style="line-height: inherit;">W3C 规范</a>&nbsp;进行标准化<span style="line-height: inherit;">。CSS 分为 不同等级,现在 CSS1 已经废弃, CSS2.1 是推荐标准,&nbsp;</span><a href="/zh-CN/docs/CSS/CSS3" style="line-height: inherit;" title="CSS3">CSS3</a><span style="line-height: inherit;">&nbsp;分成多个小模块,正在标准化中。</span></p>
<div style="margin: auto; text-align: center;">
  <div class="callout-box action-driven">
    <div>
      CSS 参考手册</div>
    <p>一份<a href="/zh-CN/docs/CSS/CSS_Reference" style="line-height: inherit;" title="zh-CN/docs/CSS/CSS_Reference">详细参考手册</a>,<span style="line-height: inherit;">适合</span><u style="line-height: inherit;">有经验的 Web 开发者</u><span style="line-height: inherit;">,讲述 CSS 各个属性与概念。</span></p>
  </div>
  <div class="callout-box action-driven">
    <div>
      CSS 教程</div>
    <p><a href="/zh-CN/docs/CSS/%E5%BC%80%E5%A7%8B" title="zh-CN/docs/CSS/Getting_Started">一份教程</a>&nbsp;,一步步地帮助<u>初学者</u> 入门,涵盖了所有必需的基础知识。</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      CSS3 示例</div>
    <p>一些 <a href="/zh-CN/demos/tag/tech:css3" title="https://developer.mozilla.org/zh-CN/demos/tag/tech:css3"> 示例</a>,演示&nbsp;<u>CSS 最新技术</u>,激发创新。</p>
  </div>
</div>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">文档和教程</h2>
    <dl>
      <dt>
        CSS 关键概念</dt>
      <dd>
        讲述&nbsp;<a href="/zh-CN/docs/CSS/Syntax" title="/zh-CN/docs/CSS/Syntax">语法</a>&nbsp;与基础知识,比如 <a href="/zh-CN/docs/CSS/Specificity" title="Specificity">权重(specificity)</a>与 <a href="/zh-CN/docs/CSS/inheritance" title="inheritance">继承(inheritance)</a>, <a href="/zh-CN/docs/CSS/box_model" title="Box model">盒模型(box model)</a>与 <a href="/zh-CN/docs/CSS/margin_collapsing" title="Margin collapsing">外边距合并(margin collapsing)</a>, <a href="/zh-CN/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">堆叠(stacking</a> )与 <a href="/zh-CN/docs/CSS/block_formatting_context" title="block formatting context">块格式化上下文(block-formattin contexts</a>), <a href="/zh-CN/docs/CSS/initial_value" title="initial value">初始值(initial)</a>、 <a href="/zh-CN/docs/CSS/computed_value" title="computed value">计算值(computed)</a>与 <a href="/zh-CN/docs/CSS/used_value" title="used value">应用值 (used)</a> 与 <a href="/zh-CN/docs/CSS/actual_value" title="actual value">实际值(actual</a> values),还有 <a href="/zh-CN/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS 复合属性(shorthand properties)</a>等概念。</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">CSS 开发者指南</a></dt>
      <dd>
        CSS 技术文章。</dd>
    </dl>
    <h2 class="Tools" id="Tools" name="Tools">CSS 开发工具</h2>
    <ul>
      <li><a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> 检查 CSS 是否有效, 是重要的调试工具.</li>
      <li>Firefox <a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/1843">Firebug</a>&nbsp;扩展,<span class="external">很流行的扩展,可以实时编辑网站的 CSS。对于测试很实用,当然不止于此。</span></li>
      <li><span class="external">Firefox </span><a class="link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/60">Web Developer</a>&nbsp;扩展,可以实时编辑网站的CSS,尽管不如 Firebug&nbsp;强大,但比它简单,</li>
      <li>Firefox <a class="external link-https" href="https://addons.mozilla.org/zh-CN/firefox/addon/179">EditCSS </a>扩展,可在边栏编辑 CSS。</li>
    </ul>
    <p>&nbsp;</p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">相关主题</h2>
    <ul>
      <li>Mozilla&nbsp; <a href="/zh-CN/learn/css" title="https://developer.mozilla.org/zh-CN/learn/css">CSS 学习资料</a></li>
      <li>常常与 CSS 一块使用的开放网络语言: <a href="/zh-CN/docs/HTML" title="zh-CN/docs/HTML">HTML</a>, <a href="/zh-CN/docs/SVG" title="SVG">SVG</a>, <a href="/zh-CN/docs/XHTML" title="zh-CN/docs/XHTML">XHTML</a>, <a href="/zh-CN/docs/XML" title="zh-CN/docs/XML">XML</a></li>
      <li>Mozilla CSS 扩展用途:&nbsp;<a href="/zh-CN/docs/XUL" title="zh-CN/docs/XUL">XUL</a>,Firefox、Thunderbird <a href="/zh-CN/docs/Extensions" title="zh-CN/docs/Extensions">扩展</a>&nbsp;与&nbsp;<a href="/zh-CN/docs/Themes" title="zh-CN/docs/Themes">主题</a></li>
    </ul>
    <dl>
      <dt>
        &nbsp;</dt>
      <dt>
        &nbsp;</dt>
    </dl>
    <p>&nbsp;</p>
  </div>
  <div class="section">
    <h2 class="Community" id="Community" name="Community">从社区获得帮助</h2>
    <p>需要CSS相关问题的帮助,并且在文档中找不到解决办法?</p>
    <ul>
      <li>查看 <a href="/zh-CN/docs/CSS/Common_CSS_Questions" title="zh-CN/docs/CSS/Common_CSS_Questions">CSS 常见问题</a>&nbsp;。</li>
      <li>去&nbsp;<a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>&nbsp;——&nbsp;一个协作问答网站, 可以找到你的问题的答案,如果没有找到,可以在上面提问。</li>
      <li>在CSS、HTML 论坛里提问: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
        <ul>
          <li>在Mozilla IRC channel 提问: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
          <li>在<a class="external" href="http://www.css-discuss.org/">CSS-Discuss 站点和邮件列表</a>&nbsp;提问。</li>
        </ul>
      </li>
    </ul>
    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">不要忘了 <em>网络礼仪</em>...</a></span></p>
  </div>
</div>
<p>&nbsp;</p>
恢复到这个版本