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

CSS基础

什么是CSS？

CSS的定义

我们可以在任何博客论坛中看到如下定义（此处以菜鸟教程中的定义为例）：

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。

CSS解释.png

CSS的优缺点

HTML 的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）

CSS整体感知

CSS整体感知.png

我们先来看一段简单的 css 代码：

在页面中使用CSS.png

其中，我们如果要将CSS嵌套在HTML中需要（建议）有以下一行代码：

<style type="text/css"></style>

我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。当然了，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。

需要注意的是：css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

CSS如何工作

CSS如何工作.png

CSS选择器

CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

选择器.png

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

1、标签选择器：选择器的名字代表 html 页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

p{ font-size:14px; }

上方选择器的意思是说：所有的<p>标签里的内容都将显示 14 号字体。

需要注意的是：

（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID 选择器：规定用`#`来定义

针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。

举例：

#mytitle{ border:3px dashed green; }

id 选择器的选择符是“#”。

任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如 id 不能叫做 body、img、a。

另外，特别强调的是：HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！

3、类选择器：规定用圆点`.`来定义

、针对你想要的所有标签使用。优点：灵活。

css 中用.来表示类。举例如下：

.one{ width:800px; }

和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：

特性 1：类选择器可以被多种标签使用。
特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）

<h3 class="teshu  zhongyao">我是一个h3</h3>

初学者常见的错误，就是写成了两个 class。举例如下：（错误）

<h3 class="teshu" class="zhongyao">我是一个h3</h3>

类选择器的使用，能够决定一个人的 css 水平。

伪类（伪类选择器）

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。

伪类.png

静态伪类和动态伪类

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后

PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

超链接a标签

超链接的四种状态

a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

对应的代码如下：

<style type="text/css">
	/*让超链接点击之前是红色*/
	a:link{
		color:red;
	}

	/*让超链接点击之后是绿色*/
	a:visited{
		color:orange;
	}

	/*鼠标悬停，放到标签上的时候*/
	a:hover{
		color:green;
	}

	/*鼠标点击链接，但是不松手的时候*/
	a:active{
		color:black;
	}
</style>

记住，在css中，这四种状态必须按照固定的顺序写：

a:link 、a:visited 、a:hover 、a:active

如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。

组合

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

组合.png

选择器组

选择器组.png

CSS颜色

在计算机中，颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。

RGB 表示法

颜色RGB.png

RGB 表示三原色“红”red、“绿”green、“蓝”blue。

光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。比如红色：

background-color: rgb(255,0,0);

黑色：

background-color: rgb(0,0,0);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

示例链接：cdpn.io/webzhao/deb…

HSLA 表示法

颜色HSL.png

举例：

	background-color: hsla(240,50%,50%,0.4);

解释：

H 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
S 饱和度，取值范围 0%~100%。值越大，越鲜艳。
L 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
A 透明度，取值范围 0~1。

关于设置透明度的其他方式：

（1）opacity: 0.3; 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。

（2）background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

CSS字体

CSS字体属性定义字体，加粗，大小，文字样式。

font 字体属性

CSS中，有很多非布局样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。

这一段，我们先来讲一下字体属性。

css样式中，常见的字体属性有以下几种：

p{
	font-size: 50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight: bold;	/*粗体*/
	font-variant: small-caps;  /*小写变大写*/
}

行高

CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

`vertical-align: middle;` 属性

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

代码举例：

vertical-align: middle; /*指定行级元素的垂直对齐方式。*/

字号、行高、字体三大属性

（1）字号：

	font-size:14px;

（2）行高：

	line-height:24px;

（3）字体：（font-family就是“字体”，family是“家庭”的意思）

	font-family:"宋体";

是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）

格式：

	font: 加粗 字号/行高/ 字体

举例：

	font: 400 14px/24px "宋体";

PS：400是nomal，700是bold。

上面这几个属性可以连写，但是有一个要求，font属性连写至少要有字号和字体，否则连写是不生效的（相当于没有这一行代码）。

2、字体属性的说明：

（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：

	font-family: "华文彩云";

上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。

页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。

（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）

	font-family: "微软雅黑","宋体";

上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。

（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：

	font-family: "Times New Roman","微软雅黑","宋体";

上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于smyhvae哈哈哈这段文字，smyhvae会采用Times New Roman字体，而哈哈哈会采用微软雅黑字体。

可是，如果我们把中文字体写在前面：(错误写法)

	font-family: "微软雅黑","Times New Roman","宋体";

上方代码会导致，中文和英文都会采用微软雅黑字体。

（4）所有的中文字体，都有英语别名。

微软雅黑的英语别名：

	font-family: "Microsoft YaHei";

宋体的英语别名：

	font-family: "SimSun";

于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：

	font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

（5）行高可以用百分比，表示字号的百分之多少。

一般来说，百分比都是大于100%的，因为行高一定要大于字号。

比如说， font:12px/200% “宋体”等价于font:12px/24px “宋体”。200%可以理解成word里面的2倍行高。

反过来， font:16px/48px “宋体”;等价于font:16px/300% “宋体”。

字体的常见格式

不同浏览器所支持的字体格式是不一样的，所以了解一下字体格式的知识是必要的。

TureTpe格式：( .ttf)

.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。

OpenType格式：( .otf)

.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。

支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。

Web Open Font Format格式：( .woff)

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。

Embedded Open Type格式：( .eot)

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。

SVG格式：( .svg)

.svg字体是基于SVG字体渲染的一种格式。

支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。

理解CSS之屠龙宝刀 | 青训营笔记