在 HTML 中创建样式定义
在 HTML 中，<style> 标签用于以时尚的形式呈现文档中的信息。它包含开始和结束标签:<style> </style>。浏览器根据样式表中的信息格式化 HTML 文档。我们还可以在当前文档中使用 <link> 标签链接外部样式表。
语法
以下是 HTML 中 <style> 标签的用法 -
<style> …… </style>
以下是属性
属性 |
值和说明 |
|---|---|
type |
text/CSS 将样式表语言指定为内容类型(MIME 类型)。 |
media |
screen 指定文档的显示设备。 |
示例
以下是示例，演示 HTML 中的样式定义 -
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
color: blue;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Ranking</h3>
<table>
<th>Rank</th>
<th>grade</th>
<tr>
<td>One</td>
<td> A </td>
</tr>
<tr>
<td>Two</td>
<td>B</td>
</tr>
</table>
</body>
</html>
在 HTML 文档中，样式标签可以通过三种方式实现 −
内联样式
嵌入样式
外部样式
让我们通过一个示例详细讨论每个样式标签 −
内联样式
内联样式属性是指样式标签在 HTML 起始标签内使用。它包含一系列 CSS 属性和值。
语法
以下是在 HTML 起始标签内使用 <style> 标签的方法。
<h1 style=" ">text</h1> <p style=" ">text</p>
示例
以下示例演示了内联样式标签的用法。
<!DOCTYPE html>
<html>
<head>
<title>Style Tag</title>
</head>
<body>
<h1 style="color:orange;font-size:30px;">
TutorialsPoint
</h1>
</h2 style="color: blue; font-size:15px;">
Usage of Inline Style Tag
</h2>
<p style="color:red;">Statement 1</p>
<p style="color:green;font-size:20px;"> Statement 2 </p>
</body>
</html>
嵌入样式标签
样式在 head 部分的 <style> 标签内定义。此处，样式将应用于该属性的所有元素，而不是特定元素。
示例
以下是嵌入样式标签的示例 -
<html>
<head>
<title></title>
<!---embedded styling --->
<style>
p{
color:red;
font-style:italic;
font-size:25px;
}
</style>
</head>
<body>
<p>tutorialspoint</p>
<p>embedded tag demonstration</p>
</body>
</html>
外部样式表
在这里，我们创建一个单独的样式表，然后在 head 部分添加该样式表的链接。
语法
假设包含样式的文件是 mystyle.css，则在 html 中
<head> <link rel="stylesheet" href="mystyle.css"> </head>
在外部 CSS 中，样式属性通过一些属性放置在单独的 CSS 文件中。该文件的扩展名为 .css，应使用 <link> 标签链接到 HTML 文档。
示例
以下是外部样式表的示例。
<html>
<head>
<link rel="stylesheet" href="example.css" />
<style>
body {
font-style: bold;
}
h1 {
color: #000000;
}
p {
color: #0000FF;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<p>HTML5 Tutorial</p>
</body>
</html>
内联、嵌入和外部 CSS 之间的区别
当样式只需要应用于特定元素，而不是应用于整个网页或某个属性的所有元素时，可以使用内联 CSS。
当样式需要应用于页面中某个属性的所有元素时，可以使用嵌入 CSS。
外部 CSS 用于将样式应用于网页或整个网站。具体方法取决于具体需求。
外部 CSS 是最佳实践。因为它更容易修改或更新一个 CSS 文件，而不是修改每个元素或属性，并且样式会反映在所有页面中。但是，有一些注意事项。
当 HTML 文档包含上述所有类型的 CSS 时，内联 CSS 会覆盖外部 CSS 和嵌入式 CSS;或者，当文档同时包含外部 CSS 和嵌入式 CSS 时，嵌入式 CSS 会覆盖外部 CSS。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
