应用方式
有三种方式可以将 CSS 作用于 HTML:
- 内联(inline)
- 内部(internal)
- 外部(outernal)
内联Permalink
内联的方式最简单,但也最难以维护,因为它直接通过 style
属性内嵌于 html 的标签之上。
例如:
<p style="color: red">text</p>
这段代码会让段落内的文本颜色变为红色。
虽然这种写法简单粗暴,但将 CSS 文件和 HTML 文件进行隔离的方式才是最佳实践。
内部Permalink
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
嵌入,或者说内部样式会作用于整个页面。它位于 head
标签内,用 style
包裹起来。
外部Permalink
外部样式可以作用于所有网站,要用到一个额外的文件,用于存放 css 内容。
p {
color: red;
}
a {
color: blue;
}
然后在 html 文件的 <head>
标签中定义一个 <link>
标签:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...
注意,这里的
style.css
文件和当前文件夹处在同一文件夹下,否则要需要修改文件路径。