摘在:
www.qysoft.net
一.使用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可以在页面中多次使用。你限定某个元素毫无意义。例如:
div#content { /* declarations */
}
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
五.默认值
通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:
* {
margin:0;
padding:0;
}
六.不需要重复定义可继承的值
CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。
七.最近优先原则
如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中,你已经定义了元素p,又定义了一个classupdate
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的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中,我们可以这样调用
<div class=one two></div>
这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。
九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码:
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item
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定义是:
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.subnavitemselected a.subnavitemselected { /* Some
styling */ }
你可以用下面的方法替代上面的代码
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a>
</li>
<li> <a href=#> Item 1</a> </li>
</ul>
样式定义是:
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
十.不需要给背景图片路径加引号
为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:
background:url(images/***.gif) #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号,反而会引起一些浏览器的错误。
十一.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如:定义所有标题的字体、颜色和margin,你可以这样写:
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时,有个别元素需要定义独立样式,你可以再加上新的定义,可以覆盖老的定义,例如:
h1 { font-size:2em; }
h2 { font-size:1.6em; }
十二.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link
:visited :hover :active。抽取第一个字母是LVHA,你可以记忆成LoVe
HAte(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望聚焦效果替代:hover效果,你就把:focus放在:hover后面。
十三.清除浮动
一个非常常见的CSS问题,定位使用浮动的时候,下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素,例如一个div或者一个br,并且定义它的样式为clear:
both。这个办法有一点牵强,幸运的是还有一个好办法可以解决,参看这篇文章《How To Clear Floats Without Structural
Markup》(注:本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题,但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性,这个方法最初的发表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing
floats》中被广泛讨论。
上面那一种clear方法更适合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》
十四.横向居中(centering)
这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:CSS如何横向居中?你需要定义元素的宽,并且定义横向的margin,如果你的布局包含在一个层(容器)中,就象这样:
<!-- 你的布局这里开始 -->
你可以这样定义使它横向居中:
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center;
规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中)
,第二个text-align:left;是将#warp中的文字居左。
十五.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS,一个通常的做法是使用@import技巧来把CSS隐藏起来。例如:
@import url(main.css);
然而,这个方法对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:
@import main.css;
这样就可以在IE4中也隐藏CSS了,呵呵,还节省了5个字节呢。想了解@import语法的详细说明,可以看这里《centricle’s css filter chart》
十六.针对IE的优化
有些时候,你需要对IE浏览器的bug定义一些特别的规则,这里有太多的CSS技巧(hacks),我只使用其中的两种方法,不管微软在即将发布的IE7
beta版里是否更好的支持CSS,这两种方法都是最安全的。
- 1.注释的方法
- (a)在IE中隐藏一个CSS定义,你可以使用子选择器(child
selector):
html>body p {
/* 定义内容 */
}
- (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
-
(c)还有些时候,你希望IE/Win有效而IE/Mac隐藏,你可以使用反斜线技巧:
/* */
* html p {
declarations
}
/* */
- 2.条件注释(conditional comments)的方法
另外一种方法,我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional
comments)。用这个方法你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:
<!--[if IE]>
<link rel=stylesheet type=text/css href=ie.css />
<![endif]-->
十七.调试技巧:层有多大?
当调试CSS发生错误,你就要象排版工人,逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色,这样就能很明显看到层占据多大空间。有些人建议用border,一般情况也是可以的,但问题是,有时候border
会增加元素的尺寸,border-top和boeder-bottom会破坏纵向margin的值,所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性,我所知道的只有Safari、OmniWeb、和Opera。
十八.CSS代码书写样式
在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我决定采用下面这样的书写样式:
selector1,
selector2 {
property:value;
}
当使用联合定义时,我通常将每个选择器单独写一行,这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。
我习惯在每个属性值后面都加分号,虽然规则上允许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好。
最后,关闭的大括号}单独写一行。
空格和换行有助与阅读。
相关推荐
17. **使用reset CSS**:通过重置浏览器默认样式,可以创建更一致的基础样式环境,如Eric Meyer的Reset或 Normalize.css。 18. **性能优化**:避免过度使用复杂的布局技术,如浮动和定位,以及过多的JavaScript操作...
总结来说,Postcss-css-variables插件是前端开发者处理CSS Variables的有效工具,它增强了CSS Variables的浏览器兼容性,简化了样式管理,提高了代码的可维护性和效率。结合PostCSS的其他插件,可以构建出强大的CSS...
总之,CSS Usage插件是Web开发者优化网站性能的有力工具,它能够有效地减小CSS文件的体积,提高页面加载速度,同时保持网页的正确显示。通过学习和运用这个插件,开发者可以更好地管理和维护他们的CSS代码库。
压缩后的CSS代码能够节省流量,加快网页加载速度,尤其是在带宽有限或按流量计费的服务器环境下,压缩CSS能有效降低成本。例如,如果一个网站每天有100万次页面浏览,压缩CSS可以显著降低流量消耗,减少服务器资源的...
5. **CSS选择器和属性**:了解CSS选择器(如类选择器、ID选择器、标签选择器等)以及各种属性(如颜色、字体、边距、背景等)对于有效使用CSS模板至关重要。例如,`.class`选择器用于选取具有特定类名的元素,`#id`...
AST可以有效地帮助我们识别并修正潜在的问题,如过度嵌套的选择器、未使用的变量或冗余的样式。 在重构过程中,可能需要关注以下几个方面: 1. **选择器优化**:查找过长或过于复杂的链式选择器,并尝试简化它们,...
css module目的为所有类名重新生成类名,有效避开了css权重和类名重复的问题。相比于scoped为类名添加一个hash标识效果优秀不少,但相对的书写会繁琐一些。 项目基于cli3搭建,讲真的,我也是被cli3鬼迷心窍了。...
本“CSS手册 CSS帮助字典 CSS帮手”提供的正是这样一个资源,它包含了CSS 2.0的详细信息,这是一个早期但仍然广泛使用的CSS版本。下面我们将深入探讨CSS 2.0中的核心概念和关键知识点。 1. **选择器**: 选择器用于...
CSS Sprite是优化网页性能的有效手段,通过合理使用和优化,可以提升用户体验,降低服务器压力。本示例源码提供了一个实际操作的例子,帮助理解并掌握CSS Sprite技术。通过学习,你可以更好地在项目中运用这一技术,...
css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code,如果浏览器不支持css3...
【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及...通过阅读本书,读者不仅能了解到CSS3的最新进展,还能学习到如何在实际项目中有效地应用这些新特性,实现更精细、更具表现力的样式设计。
本文将深入探讨如何使用CSS3来创建一个动态且具有吸引力的公司发展历程时间轴。 首先,我们需要理解CSS3的核心特性。CSS3是层叠样式表的第三个主要版本,它引入了许多新功能,如选择器增强、边框和背景的高级控制、...
“CSS处理器新时代V4”可能是一个关于这个主题的讲座或教程,其中可能详细介绍了上述的CSS处理器,以及如何在实际项目中有效地使用它们。key文件可能是演示文稿的源文件,而PDF文件则是供参与者阅读的讲义。文件名中...
学习如何有效地使用WEBSTORM可以提升开发效率。 4. **阶段任务实践**:课程中的阶段任务可能包括从创建简单的静态页面到构建复杂的交互式网页,逐步提高开发者的实战能力。这些任务可能涵盖响应式设计、表单处理、...
**CSS(层叠样式表)**是网页设计中不可或缺的一部分,它用于定义网页元素...通过掌握以上知识点,你就能在ADF中有效地创建和管理CSS,提升你的应用程序界面的用户体验。不断实践和学习,你将成为CSS和ADF应用的专家。
学习CSS教程可以帮助开发者掌握如何有效地控制网页的布局和视觉效果。从基础的文本样式、盒模型到更复杂的布局技术(如Flexbox和Grid),以及过渡、动画和响应式设计,全面理解CSS能提升网站的专业性和用户体验。...
【海洋淡蓝色CSS模板】是一种常见的网页设计资源,主要用于创建具有海洋元素和淡蓝色调的...在网页设计过程中,掌握CSS的基本原理和技巧,以及如何有效地利用模版资源,对于提高工作效率和提升网页设计质量至关重要。
此外,了解如何有效地组织CSS以减少重绘和回流也是提升页面加载速度的关键。 7. **CSS动画和过渡** CSS3引入了动画和过渡功能,使网页元素的动态效果更加平滑。`transition`属性用于控制属性值变化时的过渡效果,...
同时,Peter Gasston还关注到了前端开发中的一个普遍挑战——浏览器兼容性问题,并在书中给出了有效的解决方案和技巧。此外,作者也对CSS预处理器如Sass和Less进行了介绍,这些工具通过提供变量、混合、函数和逻辑...
通过学习这个教程,你可以了解到PostCSS如何简化CSS开发,如何利用插件解决常见的样式问题,以及如何更有效地管理你的前端样式。记住,掌握PostCSS不仅可以提升你的前端技能,还能让你更好地适应快速变化的Web开发...