UI

CSS注意事项

为了给标题做标记, 要用<h1>、<h2>、 <h3>、<h4>、<h5>或者 <h6>,这完全取决于标题的等级。<h1>是最高的等级。

用<p>来标记段落。不要使用 <br /> 来生成段落间的空行。用CSS来控制段落间的空隙(Margins),这个空隙可以确保段落标记的正确无误。

一些事物的罗列应使用列表来显示。在XHTML中有三种列表的方法:无序、有序和自定义。
无序列表, 就是我们所熟知的圆圈列表, 以 <ul>开始,以</ul>结束。每一个列表项都包含在<li>之中。
有序列表,以<ol>开始,以 </ol>结束。
自定义列表有一些不同,可以用来标记一些列表项和描述,以<dl>开始,以 </dl>结束。每一个被描述的项目,要包含在<dt>中,而描述的内容要包含在<dd>中。

用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是,IE不能识别,并且有些时候, <q>会引起一些可访问性的问题。正因为如此,一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag 关于处理<q>相关问题的看法。
对于那些一段或者好几段的长篇引用,就应当使用 <blockquote>了。CSS可以用来定义引用的样式。注意,一段文章是不可以直接放在 <blockquote>中的,引用的内容还必须包含在一个元素中,通常是<p>。
属性cite既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。需要注意的是,如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。

<em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。

XHTML中的表格不应用来布局。然而如果是为了标记列表的数据,就应该使用表格了。为了使数据表格有更强的访问性,了解和使用各种构造表格的组件就很重要了。比如表格标题 (<th>)、摘要(summary 属性)和首部说明 ( <caption>标签).

永远使用小写字母,让引号伴随者属性: 所有元素和属性的名字都必须使用小写,所有属性值必须使用双引号。

关闭所有的元素:在HTML中一些元素没有必要被关闭。当下一个元素开始的时候,上一个元素就自动被关闭。XHTML中是不允许这样的。所有元素都必须被关闭,即使其中没有内容(如 <img>)

属性不能被缩减: 在HTML里,一些属性可以被缩减。而XHTML则不允许这样做。

不要使用被排斥的元素: 一些元素和属性在HTML 4.01 Transitional和XHTML 1.0 Transitional是被允许的,而在XHTML 1.0 Strict下则不被支持(还有in HTML 4.01 Strict)。比如<font>、<center>、 alink、align、width、 height (对于某些元素)和 background。

按照如下顺序为链接定义伪类:Link, Visited, Hover, Active.

当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。

以其功能给CLASS和ID命名,而不是它的表现: 如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本,使其为大号、红色,那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构,如.copyright和.im portant。

检查你的ID:文档中一个元素只能使用一个id,且id必须唯一,而class可以被多个元素所共享。

CSS是个敏感的东西:当HTML属性中的 class和id与CSS一起使用时,那可就要小心了。

使用合法的字符为class和 id命名: Class和id的名字只能由数字、字母和连字符组成,数字和连字符是不可以开头的。

正确的注释:CSS的注释是以/*开头,以*/结尾的

常用CSS缩写语法总结
作者:阿捷 2005-4-8 15:28:00

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸

通常有下面四种书写方法:

* property:value1; 表示所有边都是一个值value1;
* property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
* property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
* property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;
边框(border)

边框的属性如下:

* border-width:1px;
* border-style:solid;
* border-color:#000;

可以缩写为一句:border:1px solid #000;

语法是border:width style color;
背景(Backgrounds)

背景的属性如下:

* background-color:#f00;
* background-image:url(background.gif);
* background-repeat:no-

分类: UI标签:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部