入门css-装饰你的网页

MengZe2 · 发表于 2023-11-2 13:21:25

本帖最后由 MengZe2 于 2023-11-2 17:30 编辑

CSS3的创建史

CSS（层叠样式表）是一种用于描述网页样式的语言。它最早由Håkon Wium Lie和Bert Bos于1996年提出，并在1997年成为W3C推荐标准。

随着互联网的发展，人们对网页设计的要求越来越高。为了满足用户对美观和交互性的需求，CSS不断发展演进，而CSS3则是CSS的最新版本。

CSS3的诞生可以追溯到2001年，当时W3C发布了CSS2.1规范。由于CSS2.1并没有包含所有计划中的特性，因此W3C决定将未完成的特性整理为一个新的模块，即CSS3。

CSS3采用了模块化的结构，每个模块都专注于特定的功能或效果。这样做的好处是，开发者可以根据需要选择使用哪些模块，而不必全部加载。

随着时间的推移，CSS3的各个模块逐渐被加入到CSS规范中。其中一些重要的模块包括：

- CSS Selectors Level 3：新增了更多的选择器，使得开发者可以更精确地选择元素。
- CSS Box Model Level 3：引入了弹性盒子布局（Flexbox）和网格布局（Grid）等新的布局方式。
- CSS Transitions：通过过渡效果，实现元素在状态之间平滑地变化。
- CSS Animations：通过关键帧动画，创建更复杂的动画效果。
- CSS Transforms：允许开发者对元素进行旋转、缩放和倾斜等变换操作。
- CSS Media Queries：根据设备的不同，为不同的屏幕尺寸和分辨率提供适配的样式。

这些模块的引入丰富了CSS的功能，使得开发者能够实现更多样化、更丰富的网页设计效果。CSS3的出现标志着Web开发进入了一个全新的时代，为网页设计带来了更多可能性。

创建CSS文件

在开始之前，我们需要先创建一个CSS文件。首先，打开你喜欢的文本编辑器（例如：Notepad++、Sublime Text等），然后创建一个新文件，并将其保存为`style.css`。确保文件扩展名为`.css`，这样浏览器才能正确识别它。

如何使用CSS

CSS可以通过三种方式应用于HTML文档中的元素：内联样式、嵌入样式和外部样式表。

内联样式

内联样式是直接在HTML元素的`style`属性中设置CSS属性。例如，如果要将一个段落的文字颜色设置为红色，可以这样实现：

<p style="color: red;">这是一段红色的文字。</p>

复制代码

内联样式的缺点是它与HTML紧密耦合，不利于样式的复用和维护。

嵌入样式

嵌入样式是将CSS代码写在HTML文档的`[head]`标签内的`[style]`标签中。例如：

<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>

复制代码

嵌入样式将CSS代码与HTML文档分离，但仍然不够灵活，无法在多个HTML文件中重用。

外部样式表

外部样式表是最常用和推荐的方式。通过将CSS代码放置在一个独立的`.css`文件中，然后在HTML文档中链接到该文件，可以实现样式的复用和维护。

首先，在创建的`style.css`文件中编写CSS代码，例如：

p {
color: red;
}

复制代码

然后，在HTML文档的`[head]`标签内添加以下代码，将外部样式表链接到HTML文档：

<head>
<link rel="stylesheet" href="style.css">
</head<>
<body>
<p>这是一段红色的文字。</p>
</body>

复制代码

现在，段落的文字颜色将会变为红色。

编写第一个CSS代码

现在让我们来编写第一个CSS代码，并解释每一行代码的作用。

/* style.css */
/* 选择器 */
p {
/* 属性和值 */
color: red;
font-size: 20px;
font-weight: bold;
text-align: center;
}

复制代码

- `/* style.css */`：这是CSS注释，用于向开发者描述CSS文件的用途或版本信息等。
- `p`：这是一个选择器，用于选择HTML文档中的所有`[p]`标签。
- `color: red;`：这是一个属性和值的声明，将所选元素的文字颜色设置为红色。
- `font-size: 20px;`：这是另一个属性和值的声明，将所选元素的文字大小设置为20像素。
- `font-weight: bold;`：这是将所选元素的文字加粗的属性和值声明。
- `text-align: center;`：这是将所选元素的文字水平居中对齐的属性和值声明。

以上每一行代码都有其特定的作用，通过组合使用不同的属性和值，我们可以实现更多样式效果。

小研Y · 发表于 2023-11-2 17:00:32

注意 HTML标签使用小于号和大于号而不是中括号
例如
<p>段落</p>

Crigo · 发表于 2023-11-2 18:44:46

感谢分享！

[开发教程] 入门css-装饰你的网页

评分

QQ群

访问手机版