CSS样式表在网页设计中的特性
想成为一名CSS专家,仅仅熟练使用CSS选择符(selectors)是远远不够的。还在于对工作的整体规划,工作流程的掌握以及提高样式表的可维护性和效率。用CSS可以创建出我们想要的美妙绝伦的网站,而写CSS本身就是一种享受。 那么我们应该如何创建更具吸引力的样式表?你的样式表应该具有哪些特性呢?通过学习并结合我自己的工作经验,总结出一套制作精美样式表的好方法。
一、不要让CSS有过多的标记
链接或者导入样式表听起来好像是一种无头绪的工作。我看过很多的网站开发都有着整洁的、组织严密的css文档,但是慢慢的,由于可能达不到在短期内快速更新,或者懒得再去管理,这使得先前创建的精致的样式表变成了垃圾。如果我们工作在需要发布上百条内容的庞大网站上面。因为时间有限,所以你需要通过嵌套或者排列css来进行快速修改或更新。随着时间的推移,这种习惯维持着,直到有一天你被告知这个网站要完全推翻重新设计而且你只有一周的时间去创建。一般来说,更新样式表还算是一个非常简单的方法,除非你长时间对网站零散的区域做修改,你就不能对网站样式表结构有一个整体的把握。
链接或者导入你的样式表不是随意的事情。创建干净整洁的样式表并保持下去,工作就会更开心。注意:如果你试图在每次更新或者添加新内容的时候创建新的样式表,那你肯定是自找麻烦。过多的链接和导入样式表会使消除bug变得异常困难,让样式表很难维持。大一点的网站分别建立不同部分的样式表这是可以理解的。就是小心不要走极端。添加很多的样式表,会增加更多的http请求,可能还会影响到后面的工作。
二、语义定义明确易懂
除了选择最合适的,最有意义的元素来表述外,还要确定选择class 和id属性值。定义明确可以让维护变得简单,小组里的成员都会看懂。看这个定义:
.l10k { color: #369; } ,.left-blue { color: #369; } ,如果是我做的我可能知道是啥意思,但是别人人不一定就懂了。即使今天知道它的意思,但是能保证很多年后还知道它的意思吗? 最好不要在类属性里面去加入颜色或者长宽的尺寸。更恰当的命名规范:. work-description { color: #369; }
三、知道什么时候添加有条件的注释和运用技巧
很多文章写过一些关于问题解决的技巧,有条件的注释是控制IE发布的一个好方法。我同意有条件的注释比在你的css文档里乱写要好得多,但是最近我开始慢慢意识到,很多证据表明,这并不是最好的解决办法。想在一个元素中设置�
相关文档:
text-align 水平对齐 right left center
vertical-align 垂直对齐 top middle bottom
属性:
AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。
AbsMiddle 图像的中间与同一行中最大元素的中间对齐。
Baseline 图像的下边缘与第一行文本的下边缘对齐。
Bottom 图像的下边缘与第一行文本的下� ......
应用样式的方法有三种:外部(external)、内部(internal)和内联(inline)。其中前两者的基本格式为:
selector { property : value; }
CSS中可以使用不同的selector(选择符)来应用样 ......
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height ......
为单个标签定义:
br{
text-align: center;
color: #000000;
font-family:宋体;
}
为br标签指定了3个样式属性,包含对其方式、文字颜色及字体。
在网页中一个每个ID只能使用一次,如:
<div id="main"></div>
在CSS样式表中,ID� ......
这个“浏览器默认HTML的CSS样式属性”,在你需要还原默认值的时候,比较有用。开始的时候应用通配选择器 *
{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。
但通配选择器在大型网站的构建中,影
响性能,可以参考52CSS.com的相关文章,大家还是需要谨慎一些。
� ......