规划样式表的权威性指南

分享于 

6分钟阅读

Web开发

  繁體 雙語

我们越依赖 CSS,就越能得到更大更复杂的样式表文件。 规划和组织样式表对于创建精益的。可以管理的网站非常重要。 组织CSS代码有很多方法,但下面是最佳实践。

注释样式表

注释样式表使查找信息或者你寻找的命令变得更容易。

有意义的注释包括:

  • 上次更新的这里信息可以快速让开发人员了解对 file: 所做的最新更改
    /* WEBCREDIBLE<br/> Updated: Thu 1 Jan 2008<br/> Author: John Doe<br/> Updates: Add new section 'Forum'<br/>-------------------------------------------*/
  • 参考 - 注释也可以用作整个站点应用的主要样式指南的快速参考:
    /* COLORS<br/> Body Background: #ffffff<br/> Main Text: #000000<br/> Link: #F0F0F0<br/> etc.. .<br/> */
  • 组织 - 使用注释来标识样式表的不同部分:

    /* =HEADER-------------------------------------------

    */

    /* =FOOTER-------------------------------------------

    */
  • 为你的和其他开发人员留下提醒和笔记,以便避免混淆。
    /* The width is overwritten for IE 6 in: cssIE.css */<br/> div {width: 150px;}

在样式表的顶部定义一般规则和主要类

设置通用HTML元素的样式,例如:

body<br/>{<br/>background: #fff;<br/>font: arial, sans-serif 75%;<br/>}<br/>h1 {<br/>font-size: 1.2em;<br/>color: #000;<br/>}<br/>h2 {<br/>font-size: 1em;<br/>color: #f0f0f0;<br/>}<br/>img {border: 0;<br/>}

然后,列出将在整个站点中最常用的类,例如:

.hide<br/>
{<br/>position: absolute;<br/>left: -9000px;<br/>
}<br/>
.required {<br/>background: url(#)no-repeat 100% 0;<br/>
}<br/>
.fl<br/>
{<br/>float: left;<br/>
}<br/>
.fr<br/>
{<br/>float: right;<br/>
}<br/>

按与HTML相同的顺序订购 CSS

HTML的顺序应该用来确定CSS节的顺序。 CSS文件有时很大,命令很难找到。 HTML和CSS文件之间有一些相关性,这使得定位元素的方式变得更加容易。

了解什么时候使用元素,id和类

使用正确的选择器类型意味着你的CSS文件可以显著减小大小:

  • 元素 - body。( <body> )。段落。( <p> ) 和标题等元素,应该使用(。<h1><h2> 等等 ) 来定义一般规则
  • 这些是唯一标识符,应该只在文档中使用一次。 id应用于对网页的主要结构节( 如 header 或者页脚) 进行样式化。
  • - 可以在任何类型的HTML元素上使用。

过多的id或者类可以不必要地重载HTML和CSS文件。 通过嵌套选择器来引用元素和/或者id来定义尽可能多的规则。

设想下面的HTML代码:

<ulid="nav"><br/><li><ahref="#">Item 1</a></li><br/></ul>

因为每个列表项都有一个共同的父级,后代选择器可以简化CSS标记,如下所示:

#nav { properties listed here }<br/>#nav li { properties listed here }<br/>#nav li a { properties listed here }<br/>

逻辑上命名类和 id

根据类和id的颜色或者位置来命名它们,因为它们可能会发生时间变化。 试着给他们一个 NAME,它可能会在一段时间内保持相关。 另外,如果某些旧浏览器很难理解后者,则在下划线前面使用连字符。

在类和ids中使用通用命名系统。 它将在开发。调试和更新文档时节省大量的时间和困惑。

嵌套CSS选择器

通过嵌套CSS选择器( 例如。 我们可以在一个命令中使用多个CSS选择器:通过导航HTML文档树来应用样式。 例如,要将红色的颜色应用于div中的所有段落,可以使用以下规则:

div p {color: red;}

利用继承

一些CSS命令从它们的父命令中删除,而其他的则不是。 使用嵌套意味着不必反复声明相同的属性。

一般而言,文本相关的CSS命令( 比如。 font-sizecolor ) 由子代元素继承,而布局相关的命令( 比如。 floatwidth ) 不被继承。

使用通用的CSS声明组选择器

通过组合共享相同CSS声明的选择器,你可以多次避免指定相同的属性集。 例如:

h1, h2, h3<br/>{<br/>color: black;<br/>padding:. 2em;<br/>}

本文是由 Brigitte Simard编写的。 美国疯狂地为用户提供辅助功能和 CSS - - 疯狂地工作于 Webcredible,为业界带来了业界领先的用户体验顾问,帮助人们更好地了解互联网。 她非常擅长运行的CSS培训,并且花费大量的时间工作在世界上最受欢迎的CMS。


style  gui  DEF  GUID  样式  Stylesheet  
相关文章