一、html结构化 -> html结构化 + 外在表现(样式标签) -> 混乱
W3C 1995 CSS计划
1996 成熟推荐草案
二、术语
1.替换和非替换：替换元素、非替换元素
2.元素显示角色：块级元素、块内元素
display:影响显示角色的基本功能
display: block;
display: inline;
三、文档使用css
1.直接嵌入文档
<!DOCTYPE html>
<html>
<head>
<title>测试导入css样式表</title>
<style type="text/css"><!--
h1 {
color: purple;
}
--></style>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
</body>
</html>
2.link导入外部样式表,link必须要在head中
<!DOCTYPE html>
<html>
<head>
<title>测试导入css样式表</title>
<link rel="stylesheet" type="text/css" href="testcss.css">
<link rel="alternate" type="text/css" href="alternate.css">
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
</body>
</html>
3.@import
<!DOCTYPE html>
<html>
<head>
<title>测试导入css样式表</title>
<style type="text/css"><!--
/*必须放在最上面*/
@import url(testcss.css);
h1 {
color: purple;
}
--></style>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
</body>
</html>
三、内联样式style
<p style="color: maroon; background: white;"></p>
如果把样式放在style属性中，会抵消CSS的一些重要要点。XHTML1.1也不建议使用。
网友评论