如何创建 CSS
1. 引入 CSS
要使用 CSS,首先需要将 CSS 文件引入到 HTML 文件中。可以使用以下三种方法:
1.1 行内样式
行内样式指的是将 CSS 属性直接写在 HTML 元素的 style 属性中。这种方法适用于对单个元素进行样式设置。
<h1 style="color: red; font-size: 24px;">Hello World!</h1>
1.2 内部样式表
内部样式表是将 CSS 代码写在 HTML 文件的头部的 style 标签中。这种方法适用于对整个页面进行样式设置。
<head>
<style>
h1 {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
1.3 外部样式表
外部样式表是将 CSS 代码写在一个单独的 CSS 文件中,并在 HTML 文件中引入该文件。这种方法适用于多个页面共享样式。
在一个名为 styles.css 的 CSS 文件中:
h1 {
color: red;
font-size: 24px;
}
在 HTML 文件的头部引入外部样式表:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
2. CSS 选择器
CSS 选择器用于选择想要样式化的 HTML 元素。
CSS 选择器的类型有很多,下面介绍几种常见的例子:
2.1 元素选择器
元素选择器通过 HTML 元素的名称选择元素。例如,使用 p 选择器选择所有的段落元素。
p {
color: blue;
}
2.2 类选择器
类选择器选取具有相同类名的元素。
例如,HTML 中的一个元素:
<p class="highlight">This paragraph is highlighted.</p>
对该元素使用类选择器:
.highlight {
background-color: yellow;
}
2.3 ID 选择器
ID 选择器选取具有相同 ID 的元素,ID 在整个 HTML 文档中应该是唯一的。
例如,HTML 中的一个元素:
<p id="intro">This is an introduction.</p>
对该元素使用 ID 选择器:
#intro {
font-size: 20px;
}
3. CSS 盒模型
..............................................(以下内容省略)