Weitere ähnliche Inhalte
Ähnlich wie 高效率的、可维护的Css (20)
高效率的、可维护的Css
- 9. <!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>
- 11. <!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>
- 13. <!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>
- 14. 为了兼容老版本的浏览器,建议使
用link引入外部样式表的方来代替
@import导入样式的方式.
译者注:
@import是CSS2.1提出的所以老的浏览器不支持,点击查看
@import的兼容性。@import和link在使用上会有一些区别,
利用二者之间的差异,可以在实际运用中进行权衡。
关于@import和link方式的比较有几篇文章可以拓展阅读:
@import vs link、don’t use @import 、
Flash of Unstyled Content (FOUC)
.
- 16. <!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>
- 18. <!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>
- 21. 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; }
- 27. h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }
- 32. p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }
译者注:
对于十六进制颜色值,个人偏向于色值不缩写且英文字
母要大写的方式.
- 34. p
{
margin: 0 0 1em;
background: #ddd;
color: #666;
}
- 37. 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-width: 1px;
border-color: red;
color: #222222;
- 39. 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;
}
- 57. #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 { ... }
- 64. 为什么要拆分样式文件?
更易于查找样式规
则.简化维护,方便
管理.还可以针对某
一页面提供特定
的样式.
- 68. <!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>
- 75. header
nav
Home bridge1
footer
home
- 76. header
nav
Section 1 bridge2
footer
Section 1
- 77. header
nav
Section 2 bridge3
footer
Section 2
- 86. header
nav
Home bridge1
footer
home
IE
- 88. <!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>
- 90. header
nav
Home bridge1
footer
home
IE
- 92. header
nav
Home bridge1
footer
home
IE
- 94. header
nav
Home bridge1
footer
home
IE
- 104. <!--[if IE]>
<!--[if IE 5]>
<!--[if IE 6]>
<!--[if lt IE 6]>
<!--[if lte IE 6]>
<!--[if gt IE 6]>
<!--[if gte IE 6]>
- 106. 作者: Russ Weakley
http://www.maxdesign.com.au
翻译: Jeanne
http://webteam.tencent.com