如何在 HTML 页面中包含 CSS

前端开发教程 2025-01-16 0

我们可以通过三种方式在 HTML 页面中包含 CSS。它们是 –

Inline
这里我们在元素的 style 属性中指定 CSS 样式。不过，建议通过 CSS 的内部或外部链接来模块化文件。
内部
我们可以在
外部
我们可以使用链接可以放置在本地或服务器上的 .css 文件标签。通过使用文件的外部链接来重构文件，我们可以拥有一个可以在多个网页上使用的通用 CSS 文件。

语法

语法在HTML中包含CSS文件如下

/*inline*/
<element style=/*declarations*/></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel=stylesheet href=#location>
</head>

示例

以下示例说明了如何将 CSS 文件包含在 HTML 页面中

内联 CSS

实时演示

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=background-color:mistyrose; height: 50px;></div>
<p style=letter-spacing: 16px; font-size: 1.3em;>
<u>Demo text here</u>
</p>
</body>
</html>

输出

这给出了以下输出 –

示例

内部链接

实时演示

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
   border: 5px double green;
   margin: auto;
   padding: 20px;
}
tr {
   box-shadow: 0 0 0 3px red;
}
td {
   border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

输出

这给出了以下输出 –

示例

外部链接

HTML 文件

实时演示

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

CSS 文件

div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 50%;
}
div > div {
   border-color: green;
}
div > div > div {
   border-color: red;
}

输出

这给出了以下输出 –

以上就是如何在 HTML 页面中包含 CSS的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。