如何创建 CSS

如何创建 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 盒模型

..............................................(以下内容省略)