CSS 简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

通过使用 CSS 我们可以大大提升网页开发的工作效率！

在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。

CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

CSS id 和 class

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

CSS 创建

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

如何插入样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

背景颜色

background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中。

字体

字体族

通过font-family来指定需要使用到的字体，可以指定多个（最好），当前一个字体浏览器无法使用的时候会尝试使用下一个，可以配置一套通用字体符

其他

可以通过font（简写属性），或对应的各各属性来指定字体的大小，粗细，修饰，等，

line-height，white-space属性分别可以指定文章中行间距和空格的形式。

继承与初始值

大多数属性子元素会继承父元素的相关属性值，如颜色，宽度等。可以通过inherit值来显性的指定继承。

部分属性会有一个初始的值，保证每个属性都有值；

计算值与使用值不同，计算出来的不一定能够被使用。

布局

常规布局

盒子模型：content，padding，border，margin（margin的剪切）

box-sizing：指定盒子大小的计算方式（默认width，height为content的值）

overflow：规定溢出内容如何显示

IFC/BFC：

行级/块级：display：指定元素的形式。（特殊：inline-block 可以指定宽高的行级元素）

总结

CSS是一种非常重要的前端技术，在网页设计中起到了至关重要的作用。了解CSS的基础知识点和实用技巧，可以帮助我们更加高效地编写网页样式，并实现各种复杂的布局和效果。

理解 CSS|青训营笔记