Css 简明教程

CSS - Introduction

CSS 是 Cascading Style Sheets 的缩写。它有助于将 HTML 元素的呈现定义为一个单独的文件(称为 CSS 文件),该文件具有 .css 扩展名。

CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension.

What is CSS?

  1. CSS stands for Cascading Style Sheets, used to describe the presentation and design of a web pages.

  2. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used.

  3. CSS can control the layout of multiple web pages all at once.

CSS Styling Example

以下是一个网页的布局,单击下面的按钮,为该页面添加 CSS 样式,看看有 CSS 和没有 CSS 的网页之间的区别。

Following is layout of a webpage, click the button below to add CSS styling to the page and see difference between a webpage with and without CSS.

Why Use CSS?

  1. CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages.

  2. Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.

  3. Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

  4. Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can get a far better look to your HTML page.

  5. Multiple Device Compatibility: For the same HTML document, different versions of a website can be presented for different screen widths

  6. Global Web Standards: Now most of the HTML attributes are being deprecated and it is being recommended to use CSS.

CSS Syntax

CSS 的语法由用于对 HTML 元素应用样式的选择器和声明组成。

Syntax of CSS consist of selectors and declaration used to apply styles to HTML elements.

selector {
    property: value;
}
  1. The selector targets the HTML element/elements that you want to style.

  2. The declaration block contains one or more declarations enclosed in curly braces {}.

  3. Each declaration consists of a property and a value separated by a colon * :*. Declarations are separated by semicolons * ;*.

CSS 中有几种类型的选择器,常用选择器包括类、ID 和标记。要了解选择器的完整列表,请访问 * CSS Selectors* 。

There are several types of selectors available in CSS, commonly used selectors are classes, IDs and tags. To know complete list of selectors visit CSS Selectors article.

CSS History and Versions

CSS3 的当前版本和早期版本分别是 CSS1 和 CSS2。到目前为止,CSS 在不断发展,并不断采用满足当前网站要求的新功能。

Current version of CSS3 and early versions were CSS1 and CSS2. As of now CSS is continuesly evolving and adapting new capabilities that full fills the current website’s requirements.

css versions

层叠样式表 1 级 (CSS1) 于 1996 年 12 月作为建议从 W3C 推出。该版本描述了 CSS 语言以及适用于所有 HTML 标记的简单视觉格式模型。

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 于 1998 年 5 月成为 W3C 建议,并建立在 CSS1 的基础上。该版本增加了对特定媒体样式表(例如打印机和听觉设备)、可下载字体、元素定位和表格的支持。

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

CSS3 于 1999 年 6 月成为 W3C 推荐,并基于旧版本的 CSS 构建。它分为称为模块的文档,并且此处每个模块都有 CSS2 中定义的新扩展功能。

CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2.

CSS3 Modules

CSS3 模块具有旧的 CSS 规范以及扩展功能。

CSS3 Modules are having old CSS specifications as well as extension features.