胶州网站建设找易讯网络,胶州人信赖的品牌

联系电话:18866237711
  • 【胶州网站建设】
  • 【胶州做网站】
  • 【胶州网页制作】
  • 【胶州网站优化】
  • 【胶州做优化】
  • 【胶州企业建站】
您的位置:首页 > 建站专题 > 建站常识建站常识 > 详细内容

网站建设之CSSer高手进阶篇

来源:黄岛网站建设  作者:易迅网络科技  发布日期:2008-01-12  点击次数:4032

现在网页的标准化问题越来越得到业界的重视,DIV+CSS的网页将会大行其道。能否熟练运用CSS就成了在网页设计师和网站建设之间的一个重要问题。大约在2003的时候,许多大的门户的网站建设在都用的是Table,其代码繁多,打开速度较慢。在现认web2.0的行业下,大部分门户都已经改版成DIV+CSS的。因此,成为一名合格的CSSer成了一名网页设计师的入门标准。许多CSSer高手们编写CSS代码时都很规范,对于一些问题的细节都很在乎。青岛网站建设在为客户服务,设计制作网站时也积累了大量的经验并参考许多CSS高手们的网页设计心得,整理出此CSSer高手进阶篇,如果有什么问题可以查阅CSS的一些基础应用帮助文档

   如何写出高效的CSS代码必须要注意以下七个方面。

一、尽量使用 link 引入外部样式表

为了对老版本浏览更好的提供支持,在编写CSS代码时尽量使用 link 引入外部样式表的方来代替 @import导入样式的方式.,具体各浏览对于CSS的支持,CSS hack浏览器兼容一览表里有很清楚的说明。

@importlink在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。

 

 例如:

<!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的学习,这样才能有更好的理解。


Tags:建设  高手  进阶