|
本节咱们要学习一下 CSS 样式的几种形式，在实质应用中向 HTML 中引入 CSS 样式的办法有三种，分别是行内样式、内部样式、外边样式。咱们会依次学习这三种方式的优缺点以及应用场景，本节咱们先来讲一下行内样式。
什么是行内样式
行内样式，其实从它的名字就能够看出来它的特点，便是直接在 HTML 标签中运用 style 属性设置 CSS 样式。例如像下面这般的：
<p style="font-size: 18px;">行内样式</p>
HTML 中的 style 属性供给了一种改变所有 HTML 元素样式的经过办法，语法格式如下所示：
<标签 style="样式声明1;样式声明2;样式声明3"></标签>
要记得用在每一个样式声明之间运用分号 ; 分隔哟，否则样式会失效的。
示例：
例如下面这段代码，经过 CSS 行内样式，将第1个段落中的字体设置成为了 20px，颜色为红色，加粗表示。第二个段落中的字体体积设置为 16px，颜色为绿色，倾斜表示：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
</head>
<body>
<p style="font-size: 20px;color: red;font-weight: bold;">侠课岛欢迎你！</p>
<p style="font-size: 16px;color: green;font-style: italic;">侠课岛欢迎你！</p>
</body>
</html>
在浏览器中演示效果：
什么是内嵌样式
内嵌样式便是将 CSS 代码写在 HTML 页面中的 <head> 标签中的 <style> 标签内。由于它与 HTML 内容位置于同一个文件中，因此叫做内嵌样式表。
示例：
例如下面这个例子便是运用了内嵌样式：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<style>
h2{
color: lightsalmon;
}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
</style>
</head>
<body>
<h2>《木兰花令 拟古决绝词》</h2>
<p>人生若只如初见，何事秋风悲画扇</p>
<p>等闲变却故人心，却道故人心易变。</p>
<p>骊山语罢清宵半，泪雨零铃终不怨。</p>
<p>何如薄幸锦衣郎，<span>比翼连枝当日愿。</span></p>
</body>
</html>
在浏览器中的演示效果：
| 
发表于 2024-6-30 08:08:55
楼主