理解CSS|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第2天

什么是CSS？

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

CSS文件扩展名为 .css。

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

CSS 可以同时控制多重网页的样式和布局。

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

在我的理解，CSS便是对页面的元素进行排版，HTML将我们所需要的内容变成页面上一个一个元素，然后CSS通过将这些元素排版，调整大小、位置、字体、宽高、边距、边框等等，使得页面变得整洁干净，就好比只有HTML的页面只是一个人，什么都没有的一个人，而加上了CSS的页面就好比给人穿上了好看的衣服与配饰。

CSS3的优势

节约成本：提供了很多新的特性，简略了很多复杂的代码
提高性能：减少照片、脚本代码，就可以提升网页性能

使用CSS

总共有三种引入CSS的方法：

行内式
内嵌式
链入式

行内式

通过标签的style属性来设置元素样式

<标签名 style="属性1：属性值1;属性2：属性值2";...>内容</标签名>

内嵌式

将CSS代码集中写在HTML文档的head头部标签中，使用style标签定义

<style>

选择器{属性1：属性值1;属性2：属性值2}

</style>

链入式

把所有的样式放在以“.css”为拓展名的外部样式表文件中，通过link标签将文件链接到HTML文件中

一般采用链入式来引入CSS

<link href = "CSS文件路径" type = "text/css" rel = "stylesheet">

href：定义外部样式表文件的URL，可使用相对路径，也可以使用绝对路径
type：定义所链接文件类型，"text/css"表示链接的外部文件为CSS样式表
rel：定义当前文档与被链接文档之间的关系，"stylesheet"表示被链接的文件是一个样式表文件

CSS选择器

选择器的作用就是从HTML页面中找出特定的某类元素

基本选择器

通用选择器*{}：选择所有元素
标签选择器标签名{}：根据标签名选择元素
类选择器.类名{}：根据class值选择元素
id选择器#id值{}：根据id值选择元素
属性选择器[条件]：根据属性选择元素
并集选择器选择器,选择器：同时匹配多个选择器

组合选择器

直接组合AB：满足A同时满足B的元素
后代选择器A B：如果B是A的子孙，选中B
亲子选择器A>B：如果B是A的直接子元素，选中B
兄弟选择器A~B：如果A和B同级且B在A后，选中B
相邻选择器A+B：如果B紧跟在A后面，选中B

伪类选择器

状态伪类：如:hover、:visited、:active
结构伪类：按照在DOM树上的位置，如first-child、last-child

伪类选择器用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。

CSS属性

除了颜色与字体，还有非常多很常用的CSS属性，这里并没有一一列举出来，且每个属性都有许多属性值，这都是大家需要日积月累的使用才能熟练掌握的知识。

颜色color

#十六进制（如#999）、rgba（）、hsla（）、aplha透明度等

字体font-family

设置font-family时建议最后加上一个通用字体族，并且先写英文字体再写中文字体

通用字体族：Serif，Sans-Serif，Cursive，Fantasy，Monospace

font-size、font-style、font-weight、line-height等