如何在 HTML 页面中包含 CSS

百变鹏仔 4周前 (09-19) #CSS

文章标签页面

我们可以通过三种方式在 html 页面中包含 css。它们是 -

Inline
这里我们在元素的 style 属性中指定 CSS 样式。不过，建议通过 CSS 的内部或外部链接来模块化文件。
内部
我们可以在标签中包含我们的 CSS 规范HTML 文档的内部。
外部
我们可以使用链接可以放置在本地或服务器上的 .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=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;></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

语法

示例

内联 CSS

输出

示例

内部链接

输出

示例

外部链接

HTML 文件

CSS 文件

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写