现在网页的标准化问题越来越得到业界的重视,DIV+CSS的网页将会大行其道。能否熟练运用CSS就成了在网页设计师和网站建设之间的一个重要问题。大约在2003的时候,许多大的门户的网站建设在都用的是Table,其代码繁多,打开速度较慢。在现认web2.0的行业下,大部分门户都已经改版成DIV+CSS的。因此,成为一名合格的CSSer成了一名网页设计师的入门标准。许多CSSer高手们编写CSS代码时都很规范,对于一些问题的细节都很在乎。青岛网站建设在为客户服务,设计制作网站时也积累了大量的经验并参考许多CSS高手们的网页设计心得,整理出此CSSer高手进阶篇,如果有什么问题可以查阅CSS的一些基础应用帮助文档
如何写出高效的CSS代码必须要注意以下七个方面。
一、尽量使用 link 引入外部样式表
为了对老版本浏览更好的提供支持,在编写CSS代码时尽量使用 link 引入外部样式表的方来代替 @import导入样式的方式.,具体各浏览对于CSS的支持,CSS hack浏览器兼容一览表里有很清楚的说明。
@import和link在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。
例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text
<title>青岛网站建设</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body> ... </body>
</html>
二、使用外联样式替代行间样式或者内嵌样式
高效CSS样式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text
<title>青岛网站建设</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
< /head>
<body> ... </body>
</html>
三、尽量少的使用 !important
慎用写法
#news { background: #ddd !important; }
特定情况下可以使用以下方式提高权重级别
#container #news { background: #ddd; }
body #container #news { background: #ddd; }
四、使用多重选择器
例如以下两CSS代码
低效率的
h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }
高效的避免了重复代码,使代码更加简洁,明了
h1, h2, h3, h4 { color: #236799; }
五、使用多重声明
例如:
低效率的
p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }
高效的
p { margin: 0 0 1em; background: #ddd; color: #666; }
六、使用简记属性
高效CSS代码:
body { font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px;
border: 1px solid red; color: #222; }
七、使用继承
例如以下两个效率的对比
低效率的
p{ font-family: arial, helvetica, sans-serif; }
#container { font-family: arial, helvetica, sans-serif; }
#navigation { font-family: arial, helvetica, sans-serif; }
#content { font-family: arial, helvetica, sans-serif; }
#sidebar { font-family: arial, helvetica, sans-serif; }
h1 { font-family: georgia, times, serif; }
高效的
body { font-family: arial, helvetica, sans-serif; }
body { font-family: arial, helvetica, sans-serif; }
h1 { font-family: georgia, times, serif; }
在使用DIV+CSS编写网页时,我们会经常遇到这些问题,究竟效率怎么样,青岛网站建设建议应该从实践去发现,实例化CSS的学习,这样才能有更好的理解。