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

前言

上文提到了CSS的相关概念，本文具体介绍CSS的基础用法。希望能对你学习前端有所帮助：）

2 CSS基础用法

属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。

color  //文本的颜色属性
font-size  //文本的字体大小

想要掌握一个属性的用法需要注意以下几个方面：

该属性的合法属性值

font-size : 15px;  //字体大小可由表示像素的单位确定
background-color : red; //背景颜色可由rgb等确定

该属性的默认值

当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
```
color  //默认值是black
```
该属性所适用元素

有的属性只适用于某些个别的元素
```
white-space //只适用于块级元素
```
该属性的值是否被下一级继承

该属性取百分值时是如何解释的

margin:50% //50%是相对于margin所存元素的容器的宽度

属性值有以下几个分类：

整数和实数

在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。
长度量

一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。

相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；px——一个像素的长度，其实际的长度由显示器的设置决定。

ps.子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
百分数量

百分数量是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

使用这种选择器，可以向这种元素类型的每个实例上应用声明。如：

H1 {color:red;}  //此选择器作用于文档中所有的H1元素

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。

类选择器以标志符（.）开头。

.class {color:red;}

2. ID属性

ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

ID选择器的标志符是散列符号（#）。

#id {color:red;}

3. STYLE属性

STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。

使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。

这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。

CSS就介绍到这里啦，希望你看完本文能对CSS有更深刻的了解。学习前端还是要多加练习，多去实践。切记不可纸上谈兵噢！

下篇我讲介绍三剑客的最后一剑客——JS。