CSS初学者指南

如果您目前有一个网站或计划建立一个网站，CSS肯定是您遇到的一个术语。但是对于那些不知道如何编码并且没有任何开发经验的人来说，这可能有点令人困惑。

让我从基础开始。

CSS代表级联样式表。它是描述网站外观或呈现的样式表语言。从本质上讲，CSS告诉Web浏览器应该如何显示HTML文档中的每个元素。

除了JavaScript和HTML，CSS也是Internet上每个网页的重要组成部分。

CSS的主要优点是能够将网站内容与设计元素分开，只需更改CSS文件中的规则即可。

在使用CSS之前，几乎每个与HTML文档显示方式相关的属性都是用HTML标记编写的。这意味着必须在整个HTML代码中重复这么多规则。

但CSS使开发人员可以将该信息移动到样式表中，从而简化了HTML。

因此，HTML更短，更轻，更不容易出错。它还使您的HTML更容易维护。

在本指南中，我将为您提供CSS的一些常见用例，并向您展示我最喜欢的在线学习CSS的方法。

CSS常用

在您的网站上使用CSS有很多种不同的方法。但我想向您展示一些更基本和常见的应用程序，以便您熟悉CSS的工作原理。

一旦掌握了这些通用原则和用例，您将来能够处理更复杂的CSS元素。

字体样式

您可以使用CSS创建字体样式。写下以下元素的属性：

• 字体类型
• 颜色
• 重量
• 尺寸
• 对准
• 案件
• 线高

CSS还可用于添加下划线和删除线等效果。让我举个例子来告诉你这是如何工作的。

看看我用这个CSS风格写的三条规则。属性A是普通字体样式，属性B是斜体字体样式，所有H1都是红色。

现在，当您查看正文时，您可以看到我编写的HTML与这些属性相对应。根据这些信息，您可以通过查看拆分屏幕的右侧来查看它在网页上的显示方式。

有了这样一个简单的例子，您可能无法立即看到CSS的好处。

但现在尝试想象一个包含30或40个H1的文档。根据此示例中的属性，所有H1都将自动为红色，而无需在HTML中添加任何其他代码。如果我想将它们更改为蓝色，我所要做的就是更改CSS，而不是单独浏览文档中的40个H1。

位置属性

可以使用CSS位置属性定义网站布局。您可以编写规则来专门指示HTML文档中某些元素的位置。

共同财产价值包括：

• 静态 – 元素按顺序排列，基于它们在文档中的显示方式。
• 固定 – 元素位于与浏览窗口相关的位置。
• 绝对 – 元素相对于其第一个位置定位。
• 粘性 – 元素相对于网站用户的滚动位置定位。

如果使用position属性创建网站布局，则会出现页面上的元素与其他项重叠的情况。因此，这种方法可能存在潜在问题。

还有其他方法可以定义页面上元素的位置，我们接下来会介绍它们。

浮动属性

float属性的主要用途是将HTML中的元素发送到另一个元素的右侧或左侧，而不更改文档的流。这是为网站创建布局的最佳方法之一。

当你在网上浏览时，你肯定已经看过使用过浮标，即使你不知道你在看浮标。

它最常用于图像。图像可以定位在文本块内，不会在流动文本之间产生分离。

这是用于图像的float属性的示例。

如您所见，CSS属性表示图像将向右浮动。因此，在输入图像时，HTML的主体中会自动应用float属性。

浮动也常用于创建网站菜单。菜单中的项目以某种方式浮动，因此它们可以显示在水平线上，而不是项目符号列表。

清晰的属性

CSS的clear属性通常用于清除浮动。正如您刚刚了解到的那样，当一个元素浮动时，所有后续元素都会被调整，以便它们根据float属性正确对齐。

如果您希望那些后续元素在浮动元素下面开始，而不是在它旁边，那么您将应用clear属性来在新行上启动元素。

这是一个可视化表示，向您展示图像的外观。

clear属性也可以应用于其他元素，但是您可以看到上面的图像肯定是更常见的做法之一。

盒子模型

每个HTML元素都可以视为一个框。使用CSS时，框模型指的是页面的设计和布局。

描述这个模型的最好方法是在HTML的每个元素周围都有一个包装盒。盒子模型有三个主要组件。

• 余量
• 边界
• 填充

这是一个如何为盒子模型编写CSS规则的示例。

P {

填充：10px;

边框：20px实心蓝;

保证金：20px;

}

这些CSS属性将在文本的每一侧转换为10像素的填充。这将是段落周围的空白区域。填充物周围还有一个20像素的纯蓝色边框。最后，边框和任何其他周围元素之间将有20个像素的边距。

使用CSS的响应式网页设计

今天，我们市场上有数百种（如果不是数千种）不同的屏幕。这意味着访问您网站的用户可以通过无数种设备，屏幕尺寸，显示尺寸和分辨率进行访问。

拥有一个只有一个小设备的额外设计的全尺寸网站已不再是一种选择。因此，您需要使用CSS来创建响应式设计。

为了实现这一点，您需要遵循一些原则，以确保您的CSS能够在任何设备的任何屏幕上响应。

您的整个布局和网格需要流畅。您需要确保图像自动调整大小以从任何屏幕进行美学渲染。

解决响应式网页设计最流行的方法之一是采用移动优先方法。这意味着设计首先考虑最小屏幕，然后随着尺寸变大而添加样式。

这种方法有很多好处。

移动优先设计迫使您确定网站最重要的功能。一旦确定了这些，您将使用它们作为网站设计的基础和构建块。

通常，全尺寸网站具有在网站的移动版本上无法查看的其他元素。但是，移动优先方法确保所有主要用途和功能都处于设计的最前沿。

值得注意的是，这种方法意味着移动用户在从移动设备访问网站时不会下载尽可能多的网站资源和CSS规则。这将节省用户的数据使用，创建更快的加载时间，以及整体更好的用户体验。

CSS学习资源

到目前为止，我所涵盖的所有内容都只是用CSS轻描淡写。我只想给你一个介绍，以便你更好地了解它是如何工作的。

但对于那些想要超越初学者级别学习CSS的人来说，网上有一些很棒的工具和资源可供您利用。我已经缩小了几个我最喜欢的选项。

Codecademy网站

Codecademy是学习在线编码的顶级平台之一。在过去七年中，已有超过4500万人学习使用他们的系统进行编码。

这些人中有近50万人参加了CSS课程。大约需要15个小时才能完成，您需要将他们的HTML课程介绍作为先决条件。总而言之，您正在寻找大约22小时的时间来学习CSS。

Codecademy将教您如何使用文件结构，文本编辑，颜色和各种布局来设置网页样式。您可以使用这些技能来自定义您的网页。

该课程还包括：

• CSS选择器
• 视觉规则
• 盒子模型
• 显示器
• 定位
• 活版印刷
• CSS网格

正如您从此列表中看到的，我们在本指南中讨论了其中一些主题。因此，您已经对某些原则有了基本的了解，这将为您提供一个良好的开端。

您可以免费访问其中一些课程，但为了获得完整的体验，我建议您升级到Codecademy的专业版。

年度合同的定价为每月19.99美元，这是他们最好的交易。否则，您将分别支付29.99美元或39.99美元的六个月或每月合约。

W3Schools的

W3Schools拥有大量免费的编码资源。事实上，我使用他们的免费编辑器两次作为本指南中的示例。我之前展示的字体样式和浮动CSS都是在W3Schools平台上编写的。

我喜欢这个资源，因为它非常简单并且动手实践。

首先，他们解释某个功能或属性是如何工作的，然后他们会给你一个例子。之后，通过自行更改CSS，您可以轻松地练习这些示例。

W3Schools网站上有300多个不同的CSS示例。您可以使用他们的编辑器测试所有这些。

利用他们的CSS模板，CSS练习和CSS测验。

对于那些有兴趣从事网页开发或网页设计的人，您还可以从W3Schools获得CSS证书。虽然这是你必须付出的代价。

完成培训后，您可以参加70个问题的考试，您将有70分钟的时间完成考试。如果你有75％的问题是正确的，你将通过并获得认证。如果你得到95％的答案是正确的，那么你也可以在证书中添加一个优秀的记号。

W3Schools的CSS证书课程费用为95美元。