一些核心样式

 在昨天的文章中，我们了解到了一些CSS基础的样式，今天我们在昨天基础上继续来了解一些核心样式的表达以及使用方法。·

一、一些文本规则

1.文本规则的含义

文本规则，顾名思义，作用于文本的一些规则，例如，文本的粗细、倾斜、颜色等等。

2.大小规则

大小规则，即是对文本字体的大小进行修改的规则，其需要用到的属性为：font-size。

值得一提的是，如果你并未对相应文本进行大小上的修改，那么该文本中的字体将会以默认大小16px进行显示。

该属性后跟的属性值不仅可以使用px作为单位，还可以使用em作为单位，而em的大小则等于一倍大小的父元素字体大小，同样在下方例子中演示：

以下是对该属性的使用演示。

可以看到，第一句话中我对其直接进行了大小设置；第二句话和第三句话未进行设置，则直接默认的16px的大小；第四句话则使用em作为单位来设定文本中的字体大小，最后一句则作为第四句话的参照存在。

3.字体规则

字体规则是用来对文本的字体进行修改的规则，需要用到的属性为：font-family。

如下所示。

对于部分中文字体类型来说可以直接书写汉字，同时，如果未对其进行字体上的定义的话，那么系统就会自动默认其为微软雅黑，如图中d4部分所示。

4.文本文字的加粗和倾斜样式规则

加粗需要使用的属性为：font-weight

斜体需要使用的属性为：font-style

在加粗中常用的属性值有：bolder（加粗）、normal（恢复正常）、lighter（变细）

在倾斜中用的属性值有：italic（倾斜）、normal（恢复正常）

以下是对其使用的演示。

5.颜色规则

在前面的文章中我们已经了解到了文本颜色的一部分规则了，在这里我再为大家叙述两个color属性的使用方法。

1）

首先第一个就是简单在color属性后写上一个颜色，例如red、green、blue，等等。

2）

除去第一种简单粗暴的方法外，我们有时候会发现简单输入的颜色无论怎样都不能达到我们的要求，这时候我们就需要一种更为精细的color的属性值的表示方法。

这里介绍一种方法，那就是使用rgb（   ， ，  ）这个属性值进行选取，在括号内天上三个相应的数值，具体的数值，我们可以使用Photoshop中的吸管工具得到（相应的操作不再进行演示）

3）

同样的，在使用吸管工具得到值以后，我们也可以使用color:#111111这样的方式进行表示，其中前两位数字为2）得到的第一位数字的十六进制，以此类推。当一二、三四、五六两两相等时，我们可以将其进行简写，一二写成一个数字……

具体表示如下：

可以看出3和4的区别只是进行了简写。

6.大小写转换以及小型大写字母

注意：此转换只能应用于字母的大小写转换，无法将1转换成一，亦不可将一转换成壹。

大小写所需的属性：text-transform

小型大写字母的属性：word-spacing

以下是对其进行的相应演示。

7.间距

以英文为例，间距单词与单词之间的间距以及字母与字母之间的间距

第一种所需要的属性为：word-spacing

第二种则是：letter-spacing

对其进行相应的演示。

二、一些背景规则

对于背景来说，我们不仅可以调整它的大小、颜色，甚至还可以使用图片作为背景

在调整背景颜色时，同样也可以使用上面调整字体颜色时的规则（这里不做演示）

如下所示：

三、浮动的相应规则

1.浮动规则

1)

如上，如果我们正常不加操作的话，那么我们给两个块标签加上背景属性，它们就会呈竖直方向上的排列，这时，如果我们想要其水平排列，那么就可以考虑使用浮动。

浮动所需的属性为：float

以下是使其进行水平排列的演示。

2)

若只浮动第一个块，则会出现第一个将第二个盖住的情况，反之则不会。

例如：

3）

若在块上再添加文字，则文字不会浮动，因为文字只因为浮动操作脱离了文档流，而并未脱离文本流。

例如：