IT新时空教育学院IT新时空教育学院

咨询热线:027-8739 6663

网页设计教程
您当前所在的位置:主页 > 学习教程 > 网页设计教程 >

分享到:

分享9个网页制作常用的CSS技巧

来源:IT新时空教育中心

点击量:

推荐指数:★★★★★

下面总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。 
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。
二.明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比如:" 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; 
}
[next]
六.不需要重复定义可继承的值
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{;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更加简洁、更加容易阅读。

想知道更加详细的内容请点击这里>>

有问题?专业咨询团队为您解答!

周老师

课程顾问 周老师

对话周老师
王老师

课程顾问 王老师

对话王老师
吴老师

课程顾问 吴老师

对话吴老师
吕老师

课程顾问 吕老师

对话吕老师
韩老师

课程顾问 韩老师

对话韩老师
李老师

课程顾问 李老师

对话李老师
刘老师

课程顾问 刘老师

对话刘老师
报名送3000元学习礼包

EXP
经验导入教学

毕业等于两年工作经验

采用EXP8.0工作经验导入教学法在学习过程中直接接受老师的工作经验,让整个学习过程更加富有实战性,学习的内容更加贴近实际工作的需要,学成之后可以直接胜任各种设计工作,提高对于工作的自信心。【了解更多】

MTS
6对1保障式教学

学不会才是奇迹

总监面对面授课保障教学质量,在线同步视频加远程同步视频让你全天随时随地学,面对面总监辅导一遍学不会的内容反复讲,班主任心理辅导规划你未来的职业人生,丰富课余活动,劳逸结合让学习更加有效率。【了解更多】

OPR
有偿项目开发教学

学习也可以拿工资

IT新时空与上万家企业合作,引入全真企业项目,使用全新的OPR有偿项目开发教学阶段,不但可以学习到真实的企业工作项目,还可以拿到一定量的报酬,让学员学习赚钱两不误。【了解更多】

IT新时空倾力打造三大教学模式让我们的学员在职场上竞争力提高更多

测试题

设计学习报名常见问题解答

在线咨询
全国免费咨询电话:027-8739 6663
IT新时空设计师高级实训基地

联系电话:027-87396663
咨询QQ:51481188 200911884
地址:武汉市洪山区珞狮南路 南国雄楚广场
(南国大家装)A1栋8楼
版权所有©1998-2017  鄂ICP备09001907号-2