HTML Style 怎么写
HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，HTML 通过使用标签来定义和组织页面上的元素，而 CSS（Cascading Style Sheets）则提供了一种方式来描述这些元素的外观和布局，在本文中，我们将介绍如何编写 HTML 样式，包括如何使用内联样式、内部样式表和外部样式表。
1. 内联样式
1.1 基本语法
在 HTML 元素中使用 style 属性可以为该元素添加内联样式，内联样式是直接添加到 HTML 元素的 style 属性中的 CSS 规则。
<p style="color: red; font-size: 20px;">这是一个带有内联样式的段落。</p>
1.2 示例
以下是一个关于如何使用内联样式的简单示例：
<!DOCTYPE html>
<html>
<head>
<title>内联样式示例</title>
</head>
<body>
<h1 style="text-align: center; color: blue;">欢迎来到我的网站！</h1>
<p style="font-family: Arial, sans-serif; font-size: 16px;">这是一个段落，使用了内联样式。</p>
</body>
</html>
在这个示例中，我们为 <h1> 和 <p> 元素添加了不同的内联样式，如文本对齐方式、颜色和字体等。
2. 内部样式表
2.1 基本语法
内部样式表是在一个单独的 CSS 文件中定义的样式规则，要使用内部样式表，首先需要在 HTML 文件的 <head> 部分添加一个 <link> 标签，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-页面内容 -->
</body>
</html>
在上面的示例中，我们为 HTML 文件添加了一个链接到名为 styles.css 的内部样式表的 <link> 标签，接下来，我们需要创建一个名为 styles.css 的文件，并在其中编写 CSS 规则。
/* styles.css */
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
2.2 示例应用
现在我们可以在 HTML 文件中引用这个内部样式表，并应用其中的样式，以下是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>内部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落，使用了内部样式表。</p>
</body>
</html>
保存上述代码到一个名为 index.html 的文件中，并将 styles.css 文件放在同一目录下，然后在浏览器中打开 index.html，你将看到一个带有蓝色背景和居中标题的页面，段落文本也将显示为蓝色。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/154907.html
微信扫一扫 