超越css读书笔记
当我们的样式表很大很复杂的时候,组织样式表可以让我们写出更有效率的CSS,并让其他人明白和编辑我们的CSS样式。
有些设计师喜欢用区块来组织他们的样式规则,所有的#branding在一个组里,所有的#content在另外一个组里。
/*=content_main*/
div#content_main { width:70%; }
div#content_main p {font-size:100%; }
div#content_main p > a { text-decoration:underline; }
/*=content_sub*/
div#content_sub { width:30% }
div#content_sub p { color:#666; }
div#content_sub p > strong { font-weight:normal; }
(注意:直接在注释部分标记文本之前添加简单的标记,比如字符"=",能让我们更容易地找到并跳转到那个段落。
/*=p*/。用我们的文本编辑器的寻找命令去寻找"=p",可以忽略list-style-type或padding这样的无效结果,直接跳转到段落部分。
)
有些设计师则更喜欢用元素来组织规则,按标题、段落和列表来分组和组合所有的元素。
/*=p*/
p{ line-height:110%; }
blockquote p{ padding-left:1em; }
div#site_info p{ text-align:center; }
/*=ul*/
ul{ list-style-type:disc; }
div#nav_main ul{ list-style-type:none; }
div#content_sub ul{ border:1px solid #ccc; }
把css分成多个文件
我们可以把CSS拆分到以下的独立文件中。
1、布局样式包含了显示属性、浮动、定位、宽度、高度、填充、和边距(layout.css)。
2、颜色样式包含了背景属性、颜色、图像,以及文本颜色(color.css)。
3、版式信息包含了字体和字体大小,行高,字符间隔和文本装饰。(type.css)。