Back To Computer_Languages

See Also W3C颁布的互联网技术标准/XSLT、HTML、XHTML

Cascading Style Sheets

Contents

  1. CSS 学习
    1. Introduction to CSS
    2. 文本样式
    3. 样式框
    4. Layout Modes
  2. History
  3. 页面开发
    1. 基础样式
      1. W3C Core(W3C指导样式)
      2. Normalize.css(跨浏览器统一样式)
    2. CSS Frameworks
    3. CSS Authoring Methodologies
      1. OOCSS
      2. ACSS
      3. oCSS
      4. SMACSS
      5. BEM
        1. 多语言机制
  4. Browser support
  5. Reference

重叠样式表 (CSS) 是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发过程中。

1. CSS 学习

https://developer.mozilla.org/docs/Learn/CSS

层叠样式表 — 也就是CSS — 是在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。

比如，可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。

对于第一次接触前端设计的人来说，建议按次序学习和掌握以下内容。

1.1. Introduction to CSS

CSS 介绍 包含了使用 CSS 的基础知识，如选择器和属性，编写 CSS 的规则，将CSS 应用于 HTML 的方法，以及如何在 CSS 中指定长度、颜色和其他单位，层叠与继承，盒模型基础以及 CSS 的调试。

1.2. 文本样式

文本样式 介绍基础的文本样式，包括字体属性的设置，粗体和斜体，行和字母间距，阴影和其他文本功能。我们通过在网页上设置特定的字体，指定列表和链接的样式来完成这一模块。

1.3. 样式框

样式框 是进行网页布局的基本元素之一。 这一模块我们重新学习框模型，并通过设置内边距、边框、外边距，指定自定义背景颜色、图像和其他特性以及在框上显示阴影和滤镜等奇特功能来控制样式框。

1.4. Layout Modes

CSS 布局模式, 有时简称为布局, 是一种基于Box的交互方式来确定盒子的位置和框的大小的算法. 有以下几种不同形式:

http://zh.learnlayout.com/

2. History

跟 CSS 有关的其他规范：

3. 页面开发

http://www.webstyles-chinese.info/Style/CSS/learning.html

3.1. 基础样式

3.1.1. W3C Core(W3C指导样式)

http://www.w3.org/StyleSheets/Core/

核心样式为非设计师们提供了一个简单的途径来开始使用样式表. 在你文件的最上方加入一个连结至W3C的服务器,当阶层样式表浏览器与你的文件相遇它就会去W3C的服务器取得你选择好的样式表. 不是阶层样式表的浏览器会显示HTML文件.

请按以下步骤来开始使用W3C核心样式:

  1. 请从8个选项中挑选出你最喜欢的样式表: 巧克力,午夜,现代,古典,钢铁,瑞士,传统,深海

  2. 在你文件的最上方加入炼结原素. 这里是一个如何在HTML 4.01做的例子 
    <!doctype html public '-//W3C//DTD HTML 4.01//EN'
  'http://www.w3.org/TR/html4/strict.dtd'>
<html>
  <head>
    <title>Document title</title>
    <link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css">
  </head>
  ...
    或是在XHTML 1.0 
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
  'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
  <head>
    <title>Document title</title>
    <link rel="stylesheet" href="http://www.w3.org/StyleSheets/Core/Modernist" type="text/css" />
  </head>
  ...

3.1.2. Normalize.css(跨浏览器统一样式)

Normalize.css是由Nicolas Gallagher和Jonathan Neal创建的一个开源项目。用他们的话来说：

Normalize.css是一个小巧的CSS文件，提供样式重置功能，使各浏览器的HTML元素的默认样式一致。这是一个现代的，为HTML5准备的，替代传统样式的css重置文件。

Normalize.css提供了丰富的文档说明和一个全面的指南去解释它是跟传统的样式重置有何不同。这是一个可以定制的CSS文件，现代的CSS框架，很多都是以此为基础的。

3.2. CSS Frameworks

所谓CSS框架，就是事先定义好的一组CSS样式（包括排版布局、按钮、表单等）和一些简单的使用规则（你只需要按照它的规则作用好类名）。按照使用规则应用这些样式，可以达到降低前端设计从图片到页面的工作量，方便团队快速实现Web站点的UI的目的。例如使用Bootstrap、Pure这些框架，只需要给你的html元素加上一些特定的类，就可以快速的实现网站的整体风格以及得到各种想要的效果。

一些实用的CSS框架：

3.3. CSS Authoring Methodologies

随着项目中CSS资源的使用规模不断增加，开发团队需要决定一个通用方法来组织CSS资源。 目标是易于开发、易于开发期间的协作和部署到生产环境的效能。或者表述为：

3.3.1. OOCSS

面向对象的CSS

3.3.2. ACSS

atomic CSS

3.3.3. oCSS

organic Cascade Style Sheet

3.3.4. SMACSS

Scalable & Modular Architecture for CSS

SMACSS Categories

Module

SMACSS Module Rules

3.3.5. BEM

https://en.bem.info/

BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。BEM代表块（Block），元素（Element），修饰符（Modifier）。

BEM是一个编程方法论，是一种用代码和一系列模式来描述现实情况的方法，它只考虑程序实体而无所谓使用什么编程语言。

可以与之进行类比的是面向对象编程（OOP）。BEM统一了前端的数据域。

一个Block(块)是一个独立的实体，就像应用的一块“积木”。一个块既可以是简单的也可以是复合的（包含其他块）。例如在页面上一般可以划分为Head Block/Main Block/Foot Block. 大的块还可以细化出小块；

一个Element(元素)是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。例如一个输入域和一个按钮是Search块的中的元素。

块和元素构成了页面的内容。它们不仅仅是被呈现在一个页面上，它们的排列顺序也同样重要。

在BEM树里，修饰符是用来描述一个块或者是一个元素实体的属性的。

3.3.5.1. 多语言机制

多语言描述一个块的时候涉及实现这个块的外观和功能的所有编程语言（技术）。

想让一个块像一个UI元素一样展现在页面上，我们需要用下面这些技术来实现它：

构成一个块的每样东西都可以作为一种块技术。

4. Browser support

浏览器使用 layout engine 来渲染页面。样式是通过布局引擎来生效的，一般常见的样式引擎有：

5. Reference

MainWiki: Cascading_Style_Sheets (last edited 2009-11-25 18:21:25 by twotwo)