关于CSS样式的引入有以下几种方法:
内部样式表
内部样式表是指将CSS样式直接写在HTML文档中,使用style标签将CSS样式放在head标签中。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>示例文档</title>
<style>
body {
font-size: 16px;
color: #333;
}
h1, h2, h3 {
color: #f00;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>这是一个示例文档。</p>
</body>
</html>
在这个例子中,我们在head标签中使用了style标签来定义CSS样式,具体样式定义在了style标签内部。这些样式可以应用于文档中的任何元素,例如body、h1、h2和h3。
外部样式表
外部样式表是指将CSS样式写在一个独立的CSS文件中,然后在HTML文档中使用link标签将其引入。这种方式更易于管理和维护,特别在网站中多个页面使用相同的样式时更加方便。
示例代码:
HTML文件:(index.html)
<!DOCTYPE html>
<html>
<head>
<title>示例文档</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<p>这是一个示例文档。</p>
</body>
</html>
CSS文件:(style.css)
body {
font-size: 16px;
color: #333;
}
h1, h2, h3 {
color: #f00;
font-weight: bold;
}
在这个例子中,我们把CSS样式放在了一个单独的文件中(style.css),使用link标签将其引入HTML文件中。这样,我们在多个HTML文件中可以重复使用相同的CSS样式。
内联样式
内联样式是直接将CSS样式写在HTML标签内部的一种方式。它的优点是简单快捷,但是缺点也很明显就是不利于代码维护和管理,同时这种方法也不适用于大规模的网站。
示例代码:
<!DOCTYPE html>
<html>
<head>
<title>示例文档</title>
</head>
<body>
<h1 style="color: #f00; font-weight: bold;">Hello World</h1>
<p style="font-size: 16px; color: #333;">这是一个示例文档。</p>
</body>
</html>
在这个例子中,我们直接在h1和p标签内部使用了style属性来定义CSS样式。需要注意的是,style属性的写法和内部样式表是一样的,只是它是写在标签内部的。
以上就是CSS样式的引入方法,具体使用时应根据实际情况进行选择。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS学习之一 CSS样式的引入 - Python技术站