14个常见的CSS技巧及常见问题


1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。
如:


div{
    border-top:1px solid #cccccc;
    border-left:1px solid #cccccc;
    border-right:1px soli #cccccc;
    border-bottom:1px solid #cccccc;
}

可以写为


p{border:1px solid #cccccc}

再如:


div{
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
}

可以改写为:


/*注意上、右、下、左的书写顺序*/
div{margin:10px 20px 30px 40px}
/*注意,数值与单位不能有空格,每个值之间用空格隔开*/

(详细请参考:css2参考手册、常用css缩写总结)

2、可以同时为一个html元素的class属性设定多个规则(多重class定义)。
通常我们写法为:<p class=”a”></p>
实际上我们可以为p元素指定多个规则,如:


CSS:
.a{…}
.b{….}
HTML:
<p class="a b">该元素同时包括a和b中设定的样式</p>

注意:多个规则之间用空格分开。

3、明确定义单位,除非值为0
忘记定义尺寸是css初学者新手普遍存在的问题。在html我们可以写width=”100”,但在css中应该给出一个准确的单位。如:width:100px;height:50px;font-size:9pt ,0值除外,因为不论对于任何单位。0值的大小都是相等的。

注意:不要在数值和单位之间加空格。

4、区分大小写
在xhtml中,css定义的元素名称是区分大小写的,class和id的值在html和xhtml中也是区分大小写的,所以为了避免错误,推荐一律使用小写。
如#aaa,与#AAA是不同的,在xhtml中,p和P也是不同的.他们之间不会覆盖。
如果在css中定义了#aaa,在html元素中使用AAA来应用将不能得到#aaa中定义的样式。
示例代码:


CSS:
#aaa{border:1px solid #ccc} 
HTML:
<div id="AAA">显示不出来1个像素的边线</div>

5、CSS的最近优先原则
如果对一个元素定义了多次样式,则以最近的一级优先,最近一级的样式将覆盖其他的样式定义。
如:


CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此处显示为红色</p>
<p class="blue">此处显示为蓝色</p>
<p class="blue" style="color:green">此处显示为绿色</p>
<p class="blue yellow">此处显示为黄色</p>

注意:
(1)注意样式的几个优先顺序(优先级由上至下递减):
--元素style设定
--head区<style></style>中的设定
--外部引用css文件
(2)优先级不是按访问顺序来设定的,而是又css中的声明顺序来设定的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色,因为在css定义中.yellow在.blue的后面。

6、使用子选择器减少id和class的定义
例如:


#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
    <ul id="contain_ul">
        <li class="contain_li"></li>
        <li class="contain_li"></li>
    </ul>
</div>

可以更改为:


#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
    <li></li>
    <li></li>
</ul>
</div>

7、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。

8、背景图片的路径是相对与当前css页面的路径。

例如:
有如下目录结构
|--images
   |--xxx.gif
|--css
   |--xx.css
|--index.html
代码内容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)

9、使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素,字体粗体

10、书写正确的链接样式
当用css定义链接的各种状态时,一定要注意其书写顺序,即::link :visited :hover :active。
如果不按照该顺序书写可能无法达到自己希望的效果。为了记忆该顺序我们抽取每个单词的首字母:L V H A,你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

11、禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。
禁止换行:white-space:nowrap
强制换行:word-wrap: break-word; word-break: normal;

12、区别relative和absolute
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

13、区别div和span
div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

14、区别display和visibility
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除,其占用位置也将被删除

本文作者:



相关阅读:
在solrais下编译安装MySQL
Vista SP1更新补丁带给用户新的体验
Windows下MySQL安全权限设置
mysql字符集和数据库引擎修改方法分享
SuSE Linux 自动注销设置
修改注册表在右键菜单中添加清空文件夹命令
自动分页的不完整解决方案
PHP数组实例总结与说明
php addslashes 函数详细分析说明
一个PHP模板,主要想体现一下思路
安全性秘诀: 设置使用 Exchange 2000 访问权限的组
CSS高级技巧:滑动门技术
参照学习表 DOS和Linux常用命令的对比
spool导出实例
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 特别的一天作文1200字 做好事200字 只想哭一下【序】作文900字 彩色的日子 那些年你不知道的事(生活白描) 恋爱风水中的“桃花运” 瓠叶 不开心作文100字 黯然酸楚的伤感语句 祝福——祥林嫂之死作文1000字 喜欢秋天作文600字 高考倒计时祝福语 美丽侨乡我的家作文300字 要过瘾就得先牺牲 迎新晚会活动总结 公司党员2012年工作总结报告范文 海口 搞笑结婚祝福语 日本野田所谓的“和解”是悔改还是骗局? 工业园区建国60年优秀征文 《交河风景》杨羽仪 难忘少时买年画 泪落心离只有你_美丽夜晚 六一儿童节日记50字 好汉不提当年勇,高举队旗儿童团 我的本领150字 情人读后感 小学四年级作文500字:暂时的伙伴 烨忆录-致青春 美丽的夜晚作文600字 安全生产管理责任书 小谈生活 税务局保持共产党员先进性教育活动学习阶段情况小结 小学六年级作文550字:嘿,奇妙仙子 老师,美丽的天使作文 浅谈现代中国反腐治理 33句关于励志的句子:批评行为本身,但不要批评行为者。 艰难困苦玉汝于成作文 食堂物资采购管理职责 干部任职转正述职报告模板 医科大学毕业生求职信 一朝破樊笼,他日恣意踏天行 最近有点烦650字 读点经典心得体会 教师节班会主持人串词 我愿选择沉默的方式来爱你 没有秘密长不大读后感800字 父亲的伟大作文500字 邻家的奶奶 读<<假如给我三天光明>>有感 小学四年级作文350字:声音的王国

Copyright © 2016 phpStudy |