Back
Featured image of post CSS基础概述

CSS基础概述

CSS是什么

层叠样式表Cascading Style Sheets,简称:CSS),是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。CSS不能单独使用,必须与HTML或XML一起协同工作,为HTML或XML起装饰作用。

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前,几乎所有的HTML文件内都包含文件显示的信息,必须在HTML文件内列出,有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来,简化HTML文件,这些信息被放在一个辅助的,用CSS语言写的文件中。HTML文件中只包含结构和内容的信息,CSS文件中只包含样式的信息。

CSS的历史

  • CSS1: 1994年,哈肯·维姆·莱伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。
  • CSS2-2.1: 1998年5月,W3C发表了CSS2,其中包括新的内容如: 绝对的、相对的和固定的定比特素、媒体型的概念、 双向文件和一个新的字体。
  • CSS3: CSS3标准已部分公布,但仍未全部制订完毕,还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展。CSS3分成了不同类别,称为 modules 。而每一个 modules 都有于CSS2中额外增加的功能,以及向后兼容。

CSS的语法内容

CSS由多组 规则 组成。每个规则由 选择器(selector)属性(property)值(value) 组成:

  • 选择器(Selector): 多个选择器可以半角逗号 , 隔开。
  • 属性(property): CSS1、CSS2、CSS3规定了许多的属性,目的在控制选择器的样式。
  • 值(value): 指属性接受的设置值,多个关键字时大都以空格隔开。

属性和值之间用半角冒号 : 隔开,属性和值合称为 特性。多个特性间用 ; 隔开,最后用 { } 括起来。

示例:

p/*选择器*/{
font-size/*属性*/: 110%;/*值*/
font-size: 110%;
}

CSS的层叠指的是什么?

  • 样式层叠: 可以多次对同一选择器进行样式声明。
  • 选择器层叠: 可以用不同选择器对同一个元素进行样式声明。
  • 文件层叠: 可以用多个文件进行层叠。

文档流

Normal Flow,正常流动方向。文档流方向为从左到右,从上到下。

  • 块级元素(block) 总是占据水平方向上所有的空间(能有多大就多大),多个块元素从上到下流动。

  • 内联元素(inline) 仅占据自身大小(能有多小就多小),多个内联元素从左到右流动。

盒模型

编写 CSS 时你会发现,你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置,等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性:

  • content: 即内容本身。
  • padding: 即内边距,围绕着内容(比如段落)的空间。
  • border: 即边框,紧接着内边距的线。
  • margin: 即外边距,围绕元素外部的空间。

两种盒模型

  • content-box: 内容盒,内容就是盒子的边界。
  • border-box: 边框盒,边框是盒子的边界。

两种盒子组成部分均为 margin + border + padding + content

  • content-box 的设置的宽度 = 内容宽度
  • border-box 的设置的宽度 = 内容宽度 + padding + border

CSS基本单位

  • 长度单位: px像素、em相对于自身font-size的倍数、% 百分数、整数、remvwvh、其他。
  • 颜色: 十六进制 #FFFFFF 、RGBA颜色 rgba(255,255,255,1) 、hsl颜色 hsl(360,100%,100%)

 

资料来源:饥人谷、MDN、WikiPedia