CSS 基础教程：总揽

最新推荐文章于 2024-09-09 20:02:14 发布

m0_65012566

最新推荐文章于 2024-09-09 20:02:14 发布

阅读量40

点赞数

分类专栏： css 文章标签： css

原文链接：https://www.tutorialspoint.com/css/index.htm

版权

css 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

CSS 教程

CSS 是 "层叠样式表（Cascading Style Sheet）"的缩写。它是一种样式表语言，用于描述使用 HTML 等标记语言编写的文档的呈现方式。CSS 帮助网页开发人员控制网页的布局和和视觉。CSS 提供了必要的工具，用来创建视觉上吸引人、可访问和响应式的网站。在现代网页开发中CSS起着至关重要的作用。

CSS 版本

自 CSS 诞生以来，已经出现了几个版本。其中一些显著的版本包括：

CSS1（层叠样式表1级）- CSS 的最初版本，于1996年12月发布。CSS1 为 HTML 文档提供了基本的样式能力，包括文本、颜色、背景、边距和边框属性。
CSS2（层叠样式表2级）- 1998年5月发布，CSS2 引入了新功能，如定位、层叠顺序、媒体类型以及更高级的选择器，如属性选择器和子选择器。
CSS2.1 - 2.1 版本于2011年6月作为 W3C 推荐发布，澄清和完善了 CSS2，在规范中解决了不一致性和模糊性。CSS2.1 专注于改善 Web 浏览器之间的互操作性。
CSS3（层叠样式表3级）- CSS3 是一组模块，扩展了 CSS 的能力。它引入了许多新功能和增强功能，包括高级选择器、多列布局、动画、转换、渐变、阴影等。
CSS4（层叠样式表4级）- CSS4正在不断发展之中，旨在通过新功能特性和增强已有功能特性扩展 CSS3。

每个 CSS 版本都建立在前一个版本的基础上，添加新功能并完善现有功能，以满足 Web 开发人员和设计师不断发展的需求。现在 CSS 被简称为 CSS，不带版本号。

CSS 的优势

响应式设计 - CSS 提供了媒体查询等功能，使开发人员能够创建适应不同屏幕尺寸和设备的响应式布局，确保用户体验一致。
灵活性和控制 - CSS 提供了对 HTML 元素呈现的精确控制，允许开发人员自定义布局、字体排版、颜色和其他视觉属性。
一致性和重用性 - 开发人员可以通过在中心 CSS 文件中定义样式来确保整个网站的一致性。样式可以在多个页面中重用，减少了冗余并简化了更新。
搜索引擎优化（SEO） - CSS 可用于结构化内容，以提高搜索引擎可见性。
易于维护 - 集中的 CSS 文件使得跨网站维护和更新样式更加容易。更改可以全局应用，确保统一性并降低不一致性的风险。
页面加载速度更快 - 外部 CSS 文件可以被浏览器缓存，从而提高后续访问网站的页面加载速度。这种缓存机制减少了服务器负载和带宽消耗。

先决条件

在大量使用 CSS 之前，有必要对以下先决条件有基本的了解：

HTML - 必须对 HTML 标记语言有基本的了解。这包括了解 HTML 元素、属性、标签及其层次结构。
文本编辑器或集成开发环境（IDE） - 为了编写 CSS 代码，需要使用文本编辑器或 IDE。常用选择包括 Visual Studio Code、Sublime Text、Atom，或者 IDE 内置的编辑器，如 IntelliJ IDEA 或 Eclipse。
浏览器开发者工具 - 熟悉浏览器开发者工具可以帮助您了解样式是如何应用的，并解决布局问题。
基本环境设置 - 需要了解如何创建和管理文件，以及在计算机上保存和组织文件。

如果对 HTML 和 XHTML 不熟悉，建议先学习我们的 HTML 或 XHTML 教程。

CSS 的组成部分

CSS 通过将规则与 HTML 元素关联来工作。CSS 规则包含两个主要部分：

选择器，指定要样式化的 HTML 元素。
声明块，包含一个或多个由分号分隔的声明。

每个声明包括一个属性名称和一个值，指定要控制的元素呈现的方面。

示例代码

为了对 CSS 有一点基本理解，看一下下面一个样例 CSS 片段：

<html>
<head>
   <title>CSS 教程</title>
   <style>
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: white;
      }

      div {
         border: 5px inset gold;
         background-color: black;
         width: 300px;
         text-align: center;
      }
   </style>
</head>	
<body>
   <div>
      <h1>Hello World!</h1>
      <p>This is a sample CSS code.</p>
   </div>
</body>	
</html>

在上述的 CSS 片段中：

h1、p 和 div 是选择器，作用于目标元素 <h1>、p 和 <div>。
color、font-size、border、background-color、width 和 text-align 是属性。
#36CFFF、1.5em、white、5px inset gold、black、300px 和 center 是传递给这些属性的相应值。