Html嵌入CSS的四种方法

最新推荐文章于 2024-07-08 17:28:27 发布

༺ཌༀཉི 噬刹༃ༀད༻

最新推荐文章于 2024-07-08 17:28:27 发布

阅读量403

点赞数

文章标签： html css

原文链接：https://m.jb51.net/web/list220_1.html

版权

1、行内式（适用于少量属性值）即利用Html属性定义。

例：<p style=:"background_color:black"></p>

<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>

2、内嵌样式

内嵌样式通过将 CSS 写在网页源文件的头部，即在 <head> 和 <head> 之间，通过使用 HTML 标签中的 <style> 标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

例：

<head>
<meta charset="utf-8">
<title>内嵌式</title>
<style type="text/css">
p{
text-align: left; /*文本左对齐*/
font-size: 18px; /*字体大小 18 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进2个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
margin-bottom: 20px; /*段落下边距 20 像素*/
}
</style>
</head>

style 不仅可定义 CSS 样式，还可以定义 JavaScript 脚本，故使用 style 时需要注意。当 style 的 type 值为text/css时，内部编写 CSS 样式；若 style 的 type 值为text/javascript时，内部编写 JavaScript 脚本。

3、链接式

链接式通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

例：<head>
<meta charset="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</head>

4、导入样式

导入样式使用 @import 命令导入外部样式表。导入样式有 6 种书写方式

例：

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>

༺ཌༀཉི 噬刹༃ༀད༻

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html嵌入CSS的四种方法

行内元素，控制段落-2</p><h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>例：<p style=:"background_color:black">
复制链接

扫一扫