书写高效CSS
1、使用外联样式替代行间样式或者内嵌样式。
不推荐使用行间样式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>
不推荐使用内嵌样式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>
推荐使用外联样式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>
2、为了兼容老版本的浏览器，建议使用link引入外部样式表的方来代替@import导入样式的方式。
不推荐@import导入方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css"); </style> </head> <body> ... </body> </html>
推荐引入外部样式表方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>
3、使用继承
低效率的:
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; }
h1 {
font-family: georgia, times, serif; }
4、使用 多重选择器
低效率的:
h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }
高效的:
h1, h2, h3, h4 { color: #236799; }
5、使用 多重声明
低效率的:
p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }
高效的:
p{
margin: 0 0 1em;
background: #ddd;
color: #666;
}
6、使用 简记属性
低效率的:
body{
font-size: 85%;
font-family: arial, helvetica, sans-serif;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: 0 100%;
margin-top: 1em;
margin-right: 1em;
margin-bottom: 0;
margin-left: 1em;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
border-style: solid;
border- 1px;
border-color: red;
color: #222222;
}
高效的:
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;
}
7、避免使用 !important
慎用写法:
#news { background: #ddd !important; }
特定情况下可以使用以下方式提高权重级别:
#container #news { background: #ddd; }
body #container #news { background: #ddd; }
书写可维护的CSS样式
1、在样式表开头添加一个注释快，用以描述这个样式表的创建日期、创建者、标记等备注信息。
/*
---------------------------------
Site: Site name
Author: Name
Updated: Date and time
Updated by: Name
---------------------------------
*/
2、包括公用颜色标记。
/*
---------------------------------
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
---------------------------------
*/
3、给ID和Class进行有意义的命名。
4、将关联的样式规则进行整合。
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }
5、给样式添加清晰的注释。
/*
---------------------------------
header styles
---------------------------------
*/
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
/*
---------------------------------
navigation styles
---------------------------------
*/
#navigation { ... }
如何管理整站的CSS文件？
组件化 CSS
1、将主样式表拆分成独立的样式文件。
为什么要拆分样式文件?
更易于查找样式规则.简化维护，方便管理.还可以针对某一页面提供特定的样式。
2、添加一个桥接样式文件。
为什么要添加桥接样式？
你可以随时添加或移除样式而不需要修改HTML文档。
3、引入桥接样式文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection"> </head> <body> ... </body> </html>
为什么要定义两种媒体类型？
NN4不支持@import，故识别不到桥接样式。
4、将(分离的)CSS文件导入桥接样式中。
@import ‘header.css’;
@import ‘content.css’;
@import ‘footer.css’;
@imports 如何工作?
它将所有CSS规则从一个文件导入到另外一个文件。@import 不能被老的浏览器所识别。
Hack-free CSS
处理诸如IE这样烦人的浏览器的兼容性是我们最头疼的事儿之一。
很多朋友使用CSShack来解决这些问题，问题是当IE版本进行升级更替，改进对CSS的支持后，之前使用的hacks将会无效!
你是怎么解决这个问题的呢？
如何在不使用CSShacks 的情况下更新你的页面.假如你想针对IE或者避开IE，你可以使用条件注释.”
条件注释如何工作？
1、针对IE，创建一个新的样式文件。
2、在HTML文档的开头添加条件注释代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link href="css/import1.css" rel="stylesheet" <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> </head> <body> ... </body> </html>
只有指定的IE浏览器版本识别这个心的样式，其它的浏览器将会彻底忽略它。
为什么条件注释是一个好的解决方案呢？
1、No hacks
特定的CSS规则仅出现在新的样式表里。
2、文件分离
针对特定版本的IE定义的样式脱离了主样式表，可以在IE浏览器升级更新对属性支持时轻松移除这些文件。
3、 针对性
可对不同版本的IE浏览器有针对性的进行相关属性的定义。
<!--[if IE]> <!--[if IE 5]> <!--[if IE 6]> <!--[if lt IE 6]> <!--[if lte IE 6]> <!--[if gt IE 6]> <!--[if gte IE 6]>