第一章、css和文档

一、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也不建议使用。

最后编辑于：2017.12.07 07:10:31

第一章、css和文档

推荐阅读更多精彩内容