CSS - 快速指南

欢迎，有抱负的网页开发者们！今天，我们将深入探索CSS的多彩世界。系好安全带，因为我们即将踏上一段将永远改变你对网站看法的旅程！

CSS - Quick Guide

什么是CSS？

CSS，即层叠样式表（Cascading Style Sheets），就像是网络世界的时尚设计师。如果HTML是网站的骨架，那么CSS就是皮肤、衣服和化妆品。它让网站看起来美丽且独特。

想象你正在建造一栋房子。HTML会是砖块和砂浆，而CSS则是油漆、墙纸和家具。它将一个简单的结构变成了一个家。

让我们从一个简单的例子开始：

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

这段CSS告诉浏览器将整个页面涂成浅灰色（#f0f0f0）并使用Arial作为默认字体。如果Arial不可用，它会使用任何无衬线字体。

CSS - 语法

CSS语法就像一个食谱。它有两个主要部分：选择器和声明块。

selector {
property: value;
}

选择器指向你想要样式的HTML元素。声明块包含一个或多个用分号分隔的声明。每个声明包括一个CSS属性名和一个值，用冒号分隔。

让我们看一个更复杂的例子：

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

在这里，我们针对所有的<h1>元素。我们将文本设置为蓝色，将其大小设置为24像素，并将其居中对齐。

CSS - 引入

有三种方法可以在HTML中引入CSS：

内联CSS
内部CSS
外部CSS

内联CSS

内联CSS直接通过style属性应用于HTML元素。就像给一个人提供时尚建议。

<p style="color: red; font-size: 16px;">这是一个红色的段落。</p>

内部CSS

内部CSS放置在HTML页面的<head>部分，位于<style>标签内。就像为派对上的每个人设定着装规则。

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

外部CSS

外部CSS存储在一个单独的文件中，文件扩展名为.css。它通过<link>标签链接到HTML文件。就像创建一本每个人都可以参考的时尚杂志。

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - 测量单位

CSS有几个表示长度的单位。让我们看看最常见的一些：

单位	描述
px	像素（1px = 1/96英寸）
%	百分比
em	相对于元素字体大小（2em表示当前字体的两倍大小）
rem	相对于根元素的字体大小
vw	相对于视口宽度的1%
vh	相对于视口高度的1%

下面是一个使用不同单位的例子：

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - 颜色

CSS中的颜色可以以多种方式指定：

通过名称：red、blue、green等
通过RGB值：rgb(255, 0, 0)表示红色
通过十六进制代码：#FF0000表示红色

让我们看看这些是如何使用的：

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - 背景

背景可以让你的网站更加醒目。你可以设置背景颜色、图像或者两者都设置！

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

这段CSS设置了一个浅灰色的背景颜色，添加了一个居中显示的图像，确保图像不重复，并使其覆盖整个视口。

CSS - 字体

字体对于可读性和风格至关重要。以下是如何设置字体的方法：

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

这设置了Helvetica为首选字体，Arial和任何无衬线字体为备选字体。它还将大小设置为16像素，权重设置为正常，风格设置为斜体。

CSS - 文本

文本属性控制文本的显示方式：

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

这段CSS使文本颜色为深灰色，对齐方式为两端对齐，装饰为下划线，文本大小写为大写，行高为正常行高的1.5倍。

CSS - 使用图像

图像可以像其他任何元素一样进行样式设置：

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

这使得图像响应式（宽度最多为500px），保持其宽高比，并使其具有圆形形状。

CSS - 链接

链接可以根据它们的状态进行不同的样式设置：

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

这会将链接颜色设置为蓝色，去除下划线，在悬停时变为红色并添加下划线，将访问过的链接颜色设置为紫色。

记住，CSS都是关于创造力和实验的。不要害怕尝试不同的属性和值。你练习得越多，你就越擅长创建美丽、响应式的网页设计。快乐编码！

Credits: Image by storyset