css如何作用于html?
浏览器将CSS规则应用到文档上,使CSS影响文档的显示。CSS规则由选择器和一系列的属性对组成。一系列的CSS规则就可以形成一个层叠样式表。
1外部样式表( External stylesheet)
将CSS规则写到一个以“.css”为后缀的文件中,然后使用HTML中的标签将CSS文件应用到HTML文档中,或者在style标签的第一行使用@import ‘style.css’;导入
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
```css
@charset ”utf-8”;
h1 { color: blue; background-color: yellow; border: 1px solid black; }
2内部样式表
将CSS规则写到style标签内,在不能直接更改CSS文件情况下,这种方式有效,但是一般不推荐使用,修改起来不方便。
<head>
<meta charset="utf-8">
<style>
/*放在style的第一行去导入外部样式表*/
@import 'style.css';
h1 { color: blue; background-color: yellow; border: 1px solid black; }
p { color: red; }
</style>
</head>
3行内样式表
将CSS规则写到元素的style属性中,只能作用于一个元素,一般不推荐使用。
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
<p style="color:red;">This is my first CSS example</p>
</body>