CSS样式表应用详解-优快云博客

1.当浏览器解析到一个样式表时，就会按照此样式表对文档进行格式化，有三种方法进行插入样式表：

（1）外部样式表：如果样式要被应用到很多页面，此为最佳选择，可以通过更改一个文件来改变整个站点的外观；

示例代码：

<span style="font-family:Microsoft YaHei;"><html>

<head>
<style type="text/css">
    h1 {color: red}
    p {color: blue}
    h2{color: yellow}
</style>
</head>

<meta charset="utf-8">

<body>

<h1>Header  1  头12345头</h1>
<h2>Header  2  第2个航头</h2>
<p>A  paragraph.</p>

<h1>另一个header 1</h1>

</body>
</html>
</span>

展示效果：

（2）内部样式表

示例代码：

<span style="font-family:Microsoft YaHei;"><html>

<head>
<style type="text/css">
    h1 {color: red}
    p {color: black}
    h2{color: yellow}

    body {background: pink}
</style>
</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h1>Header  1  头12345头</h1>
<h2>Header  2  第2个航头</h2>
<p>A  paragraph.</p>

<h1>另一个header 1</h1>

</body>
</html></span>

展示效果：

（3）内联样式表

示例代码：

<span style="font-family:Microsoft YaHei;"><html>

<head>
<style type="text/css">
    h1 {color: red}
    p {color: black}
    h2{color: yellow}

    body {background: pink}
</style>

</head>

<meta charset="utf-8">

<body style="background-color:green;color:white">

<h1 style="background-color:red;color:grey;font-size:50px">Header  1  头12345头</h1>
<h2 style="color:yellow">Header  2  第2个航头</h2>
<p style="background-color:blue">A  paragraph.</p>

<h1>另一个header 1</h1>

</body>
</html></span>

展示效果：