首页 > web前端 > css教程 > 正文

如何在 HTML 页面中包含 CSS

WBOY
发布: 2023-09-19 18:57:02
转载
964人浏览过

我们可以通过三种方式在 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>
登录后复制

输出

这给出了以下输出 -

如何在 HTML 页面中包含 CSS

示例

内部链接

 实时演示

<!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 页面中包含 CSS

示例

外部链接

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

以上就是如何在 HTML 页面中包含 CSS的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
相关标签:
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号