CSS 教程

表中的内容

CSS 教程
CSS 示例
为什么要学习CSS？
CSS的应用
谁应该学习 CSS
学习 CSS 的先决条件
CSS 在线测验
CSS 在线测验
有关 CSS 的常见问题

CSS 教程

CSS是Cascading Style Sheet的缩写，由Hökon Wium Lie于 1996 年创建，供 Web 开发人员更改其网站的布局、颜色和字体。

CSS 是一种样式表或表示语言，用于对以 HTML 编写的文档进行布局、格式化和样式设置，以使它们看起来更漂亮。CSS 通常与 HTML 一起使用来改变网页和用户界面的样式。您可以使用 CSS 更改 Web 文档中 HTML 元素的颜色、背景、边框、填充、边距、字体、图标、位置和各种其他属性。

本教程涵盖了 CSS 的所有版本，包括 CSS1、CSS2 和 CSS3，从基础知识到高级概念，全面了解 CSS。本教程将教您有关 CSS 框模型、选择器、级联、颜色、大小单位、布局、Flexbox、网格、伪元素和伪类、边框、阴影、焦点、函数、渐变、动画、过滤器、列表、过渡、溢出、背景、文本和版式。

CSS 示例

本教程借助合适的示例向您介绍每个 CSS 概念，您可以在浏览器本身中执行这些示例，而无需任何外部 HTML 编辑器。

下面的 HTML 和 CSS 代码是可编辑的，您可以在其中更改代码的值。您可以单击该图标查看以下代码的输出。尝试更改宽度、字体大小和填充等值，然后再次运行以查看修改后的结果。

<html>
<head>
   <style>
      div{ background-color: lightgrey; width:100%; padding:5px}

      h1{color: #40a944; text-align: center;}

      p{ font-family: verdana;font-size: 20px;}
   </style>
</head>
<body>
   <div>
      <h1>CSS Example</h1>
      <p>This is a paragraph.</p>
   </div>
</body>
</html>

为什么要学习CSS？

层叠样式表（Cascading Style Sheets），俗称CSS，是一种简单的设计语言，旨在简化使网页呈现的过程。

CSS是学生和职业人士成为一名出色的软件工程师所必须的，特别是当他们在 Web 开发领域工作时。我将列出学习 CSS 的一些主要优势：

创建令人惊叹的网站- CSS 处理网页的外观和感觉部分。使用 CSS，您可以控制文本的颜色、字体样式、段落之间的间距、列的大小和布局方式、使用什么背景图像或颜色、布局设计、不同设备和屏幕尺寸的显示变化以及各种其他效果。
成为一名网页设计师- 如果您想成为一名专业网页设计师，HTML 和 CSS 设计是一项必备技能。
控制网络- CSS 易于学习和理解，但它提供了对 HTML 文档呈现的强大控制。最常见的是，CSS 与标记语言 HTML 或 XHTML 相结合。
学习其他语言- 一旦您了解了 HTML 和 CSS 的基础知识，其他相关技术（例如 javascript、php 或 Angular）就会变得更容易理解。

CSS的应用

如前所述，CSS 是网络上使用最广泛的样式语言之一。我将在这里列出一些 CSS 应用程序：

CSS 节省时间- 您可以编写一次 CSS，然后在多个 HTML 页面中重复使用同一个工作表。您可以为每个 HTML 元素定义一种样式，并将其应用到任意数量的网页。
页面加载速度更快- 如果您使用 CSS，则无需每次都编写 HTML 标记属性。只需编写一个标签的一条 CSS 规则并将其应用于该标签的所有出现位置。因此，更少的代码意味着更快的下载时间。
易于维护- 要进行全局更改，只需更改样式，所有网页中的所有元素都会自动更新。
优于 HTML 的样式- CSS 具有比 HTML 更广泛的属性，因此与 HTML 属性相比，您可以为 HTML 页面提供更好的外观。
多设备兼容性- 样式表允许针对多种类型的设备优化内容。通过使用相同的 HTML 文档，可以为手持设备（例如 PDA 和手机）或打印呈现不同版本的网站。
全球网络标准- 现在 HTML 属性已被弃用，建议使用 CSS。因此，最好开始在所有 HTML 页面中使用 CSS，以使它们兼容未来的浏览器。

观众

本CSS 教程将帮助那些希望使自己的网站或个人博客更具吸引力的学生和专业人士。我们建议按照左侧菜单中列出的顺序阅读本教程。

如今，HTML 和 CSS 是参与 Web 开发过程的任何人（包括 Web 开发人员、Web 设计师、图形设计师、内容经理和项目经理等）必须学习的基本语言。

先决条件

别担心，你真的不需要成为一名计算机极客才能学习 CSS。这是非常简单的样式和演示语言，任何人都可以随时随地学习。您只需要熟悉：

使用任何文本编辑器进行基本文字处理。
如何创建目录和文件。
如何浏览不同的目录。
使用 Internet Explorer 或 Firefox 等流行浏览器进行 Internet 浏览。
使用 HTML 或 XHTML 开发简单的网页。

如果您不熟悉 HTML 和 XHTML，那么我们建议您首先阅读我们的 HTML 教程或 XHTML 教程。

CSS 在线测验

本 CSS 教程可帮助您为各种软件开发公司和其他 IT 相关公司进行的技术面试做好准备。我们提供了各种 CSS 测验和作业来检查您的学习水平。给定的测验有多种选择类型的问题及其答案和简短的解释。

以下是一个示例测验，请尝试尝试给出的任何答案：

问题 1 - CSS 是由以下哪项创建的：

A ——1994年的谷歌

B - 微软 1993 年

C - Hákon Wium 谎言，1994 年

D - 以上都不是

答案：C

解释

Hökon Wium Lie 在 1994 年提出了 CSS 的想法，并于 1996 年发明了 CSS 的第一个版本。

开始在线测验开始 CSS 测验。

CSS 工作和机会

随着全球 Web 开发呈指数级增长，CSS 专业人员的需求量始终很高。几乎每个大公司或小公司都希望拥有自己的网站，因此他们正在招聘具有 CSS、HTML 和其他前端开发技术丰富经验的 IT 专业人员。

Web 开发人员的平均年薪约为 150,000 美元。尽管它可能会根据地点和公司的不同而有所不同。以下是不断招募优秀网页设计师和开发人员的优秀公司：

印孚瑟斯
谷歌
TCS
亚马逊
Netflix
马恒达科技
维普罗
兴趣
教程点
还有很多...

因此，您可能成为这些大公司中任何一家的下一个潜在员工。我们开发了一份很棒的 CSS 和 HTML 学习材料，它将帮助您学习完整的 Web 开发。因此，完全按照您的节奏，随时随地使用我们简单而有效的教程开始学习 CSS。

有关 CSS 的常见问题

有一些关于 CSS 的常见问题（FAQ），本节试图简要回答它们。

CSS 有哪些不同版本？雪佛龙

CSS 共有三个版本——CSS1、CSS2 和 CSS3。CSS1 是最古老的，于 1996 年发布；CSS3 是最新的，包含新的特性和功能，于 2012 年发布。

CSS 的最新版本是什么？雪佛龙

CSS的最新版本是3.0。截至 2012 年 6 月，CSS-3 工作组发布了 50 多个 CSS 模块。

我们在哪里使用 CSS？雪佛龙

CSS 的应用无处不在，包括网页、RSS 源、网络聊天、嵌入式设备等。

我们会有 CSS4 吗？雪佛龙

CSS4 将会出现是一个神话。从来没有CSS4。永远不会有CSS4。CSS4 并不存在。

在网页中包含 CSS 的不同方法有哪些？雪佛龙

我们可以通过三种不同的方式包含 CSS (a) 使用外部 CSS 文件 (b) 通过包含在 <style>...</style> 标签内 (c) 使用HTML 元素的style属性。

CSS 的语法是什么？雪佛龙

CSS 语法由选择器{ property1: value1, property2: value2...}组成。选择器用于选择需要应用 CSS 样式的 HTML 元素。CSS 属性以分号分隔。

因此，CSS 规则由两个主要部分组成：选择器（'h1'）和声明（'color: red'）。

CSS 使用什么标签？雪佛龙

CSS 中有多少个属性？雪佛龙

CSS 中有超过 100 个不同的属性，并且可以为这些属性分配无数不同的值。

学习 CSS 需要多长时间？雪佛龙

CSS 非常容易学习。您只需一到两周即可学会 CSS。然而，您可能需要几个月的练习才能成为 CSS 专家。确定学习 CSS 需要多长时间还取决于您计划如何使用它。遵循我们的 CSS 教程将使您有足够的信心使用 CSS 并设计和开发一个出色的网站。

我如何开始学习 CSS？雪佛龙

以下是您可以开始学习 CSS 的技巧总结列表。

首先也是最重要的是下定决心学习CSS。
从头开始一步步遵循我们的教程。
阅读更多文章、观看在线课程或购买有关 CSS 和 Web 开发的书籍来增强您的知识。
尝试使用 CSS 和 HTML 开发一个小型网站。

哪个是学习 CSS 的最佳地点？雪佛龙

您可以使用我们简单且最好的 CSS 教程来学习 CSS。我们在教您 CSS 概念时消除了所有不必要的复杂性。您现在就可以开始学习开始学习 CSS。