网站重构 CSS样式表的优化与技巧

2016-01-29 11:48 3 1 收藏

网站重构 CSS样式表的优化与技巧,网站重构 CSS样式表的优化与技巧

【 tulaoshi.com - Html 】

一、使用css缩写

　　使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。

　　二.明确定义单位，除非值为0

　　忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。

　　三.区分大小写

　　当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

　　class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

　　四.取消class和id前的元素限定

　　当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如:

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）　　div#content { /* declarations */ }
　　fieldset.details { /* declarations */ }

　　可以写成

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）　　#content { /* declarations */ }
　　.details { /* declarations */ }

　　这样可以节省一些字节。

　　五.默认值

　　通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样:

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）　　* {
　　margin:0;
　　padding:0;
　　}

　　六.不需要重复定义可继承的值

　　CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。

　　七.最近优先原则

　　如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码

　　Update: Lorem ipsum dolor set

　　在CSS文件中，你已经定义了元素p，又定义了一个classupdate

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）　　p {
　　margin:1em 0;
　　font-size:1em;
　　color:#333;
　　}
　　.update {
　　font-weight:bold;
　　color:#600;
　　}

　　这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》了解更多。

　　八.多重class定义

　　一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有10 px的边框。

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）　　.one{width:200px;background:#666;}
　　.two{border:10px solid #F00;}

　　在页面代码中，我们可以这样调用

　　这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

　　九.使用子选择器(descendant selectors)

　　CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）<div id=subnav
<ul
<li class=subnavitem <a href=# class=subnavitemItem 1</a</li
<li class=subnavitemselected <a href=# class=subnavitemselected Item 1</a </li
<li class=subnavitem <a href=# class=subnavitem Item 1</a </li
</ul
</div
　　这段代码的CSS定义是： [next]

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemsel

来源:https://www.tulaoshi.com/n/20160129/1483407.html

上一篇： CSS编写攻略
下一篇： JavaScript 小技巧(第二集)

看过《网站重构 CSS样式表的优化与技巧》的人还看了以下文章更多>>

CSS样式表空格与不空格的关系

标签： Web开发

这可能是一个非常简单的问题，但是今天花一点点时间把这个简单的问题在说清晰一点，相信大家对ＣＳＳ的学习和认识会很有帮助，强化一些概念的东西，对以后的工作效率的提高是很有裨益的。我们看过一些样式表文件的样式名都写的很长，比如：body #header .topbar.Logo{...}，这是因为利用了元素的继承关系，利用元素名，或者ＩＤ名和类...

CSS基础教程:CSS样式表与具体设备

标签： Web开发

HTML代码如下： link type="text/css" rel="stylesheet" href="css/style.css" media="screen" / media=指定这个CSS用于何种设备。具体参数如下： screen (缺省值)，提交到计算机屏幕； print，输出到打印机； projection，提交到投影机； aural，扬声器； braille，提交到凸字触觉感知设...

应用CSS样式表技巧两则

标签： Web开发

一、去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下，用DreamWeaver设计的网页中的超级链接都有下划线，看上去不大美观。要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码，其实在DreamWeave中很容易去除链接的下划线。首先在DreamWeaver的Document Windows中随便建立一个链接...

CSS样式表中的类

标签： Web开发

类为了对网页格式的定义更为精确，有必要让相同的选择符也能分类，并能按照不同的类别来进行不同的样式设计。基本格式如下：选择符.类别名 {属性：值} 类别名将可以在HTML的标识符里引用：标识符 class=类别名网页内容实例：＜html＞＜head＞＜title＞CSS例子＜/title＞＜style type="t...

CSS样式表设计的十条技巧

标签： Html CSS布局 Div+CSS XHTML

1.CSS 字体简写规则当使用css定义字体时你可能会这样做: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif; 事实上你可以简写这些属性: font: 1em/1.5em bold italic small-caps verdana,serif 现在好...

查看更多精彩>>