以下是 <style> 标签的基本用法:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: navy;
}
p {
margin: 10px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
在上面的例子中,<style> 标签包含了一些 CSS 规则,用于设置文档中 <body>、<h1> 和 <p> 元素的样式。CSS 规则定义了字体、背景颜色、文字颜色等属性。
通常,<style> 标签放置在文档的 <head> 部分,以便在页面加载时首先应用样式。此外,你也可以将样式代码放置在外部样式表文件中,然后通过 <link> 元素将其链接到 HTML 文档中。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
在这个例子中,样式规则被放置在名为 "styles.css" 的外部样式表文件中,并通过 <link> 元素引用到 HTML 文档中。这种方式有助于将样式与内容分离,提高代码的可维护性。
转载请注明出处:http://www.zyzy.cn/article/detail/3769/HTML5