上一篇文章简单的介绍了一下css的引入方式，这一篇打算介绍一些基础的样式和盒子模型。
• 其实我们css有很多很多的样式，我们不可能一一记住每一个样式的值，其实我们只需要记住一些常用的样式的意思，然后去http://www.css88.com这个网站去查询样式的具体的值就可以了，当然查询一些样式的作用也是可以的~
一些简单的文字样式
• 首先我们介绍一下样式的构成，样式都是由属性名和属性值构成的，名和值之间用:(冒号)分隔，属性和属性之间用;(分号)分隔。
我们首先来写几个样式。
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
那么我们来分别介绍一下这几条样式：
• font-size属性
这条属性是设置文字的大小的，文字大小默认是16px，我们在例子中就是将p标签里面的文字设置成20px大小，值得注意的是，这条属性其实是设置的文字的高度而不是宽度。
这里我们就要介绍一下px了：px是像素的意思，这是一种相对大小，并不是絶対大小，因为每一个像素点的大小都是不同的，我们的屏幕都是由很多个像素点组成的。
• font-weight属性
这条属性是设置的文字的粗细程度的，默认值是normal，当我们设置成bold的时候，这个p标签就和strong标签没什么区别了，这就是为什么很多标签我们都不用，因为通过修改样式就可以达到和其他标签一样的效果。
这条属性常用的值有lighter、normal、bold、bolder，其次我们还可以写100-900的数字，其中lighter大概是100左右，normal大概是400左右，bold应该是700左右。
• font-family属性
这个属性的作用是设置文字的样式，是黑体还是宋体还是什么其他的字体，默认是arial字体，其他还有很多很多的字体，我们可以到css88上面去查找。不过我们写英文字体的时候，属性值是不需要加引号的，写中文的时候则需要加引号。
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
• font-style属性
这个属性的作用是设置文字是否斜体，italic就是斜体的意思，通过设置这个属性我们就可以让p标签达到和em标签一样的效果了。
• color属性
这个属性的作用是设置文字的颜色，并不是font-color。
文字颜色的色值有三种表达方式。
1.英文单词，比如red、black、blue等等。
2.三位十六进制组成光学三原色红绿蓝 每一个的值都是00-ff，00代表空，ff代表满，例如#000000就是黑色的意思。其中，如果每连续的两位都是一样的并且3组数字都是这种情况的时候，我们就可以两两合并只写一个数值就可以了，比如#ffffff —> #fff、 #55ffcc —> #5fc;
3.通过rgb(xx,xx,xx)属性值来设置颜色，其实和第二种是一个意思，只是把十六进制换成了十进制，rgb就是red、green、blue的缩写，其中的三个数值每一项的范围都是0-255，例如红色就是rgb(255, 0, 0)。
对文字的处理大概就这么多，我们再来介绍一下其他的一些简单的样式。
• text-indent属性
这个属性的作用是设置首行文字的缩进，值有两种单位，一种是px，一种是em。
这里就要提一下em和px的区别了。
• px虽然是一个相对长度单位，但是我们可以变相地理解为它是一个差不多固定长度的单位，我们设置100px的时候，基本上每一个宽度被设置成100px的元素都是一样的宽度。
• em则是一个真正的相对长度单位，它相对的是当前元素内的文字的大小，也就是说 1em = 1 * font-size;如果我们设置font-size是20px的话那么1em也就是20px的大小，我们只要将text-indent设置成2em就可以首行缩进2个文字大小了。
• border属性
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
border是边框的意思，这个属性也是设置元素边框的属性。
这其实是一个复合属性，它是由border-width、border-style、border-color三个属性复合而成的。分别设置的边框的边度，边框的样式，边框的颜色，其中边框的样式有很多种，基本常用的只有solid实线、dotted短虚线、dashed长条虚线三种样式。
border-width也是一个复合属性，它可以按照上右下左的顺序来分别设置四个边框的宽度值。
• text-align属性
这个属性是设置文字的位置的属性，它的值也是有三种，分别是center文字左右居中、left文字左对齐、right文字右对齐。
• line-height属性
这个属性是设置一行文字所占的高度的属性，默认状态是和字体大小一样的值。
• 当我们想要让单行文字在容器内部上下居中的时候，我们只需要让height = line-height即可。
• 多行文字居中我们现在还没有专门的属性可以做到这一点，不过我本人一般是在文字部分外面包裹一层div标签，然后让div标签在父级元素水平上下居中来实现的。（并不知道这么做对不对…）
• text-decoration属性
这个属性的意思是文字装饰的意思，可以来设置文字是否有下划线、上划线、中划线，分别对应的属性值是underline、overline、line-through。
• cursor属性
这个属性则是设置我们的鼠标移入到这个元素中的时候，鼠标会变成什么样子。它的值有很多很多，我们同样可以到css88上去查看。不过一般常用的是cursor: pointer;这一条属性，它会让我们鼠标移入这个元素的时候，鼠标变成可以点击的小手的状态。
现在我们就可以来模拟一下a标签的样式了。
<p>www.baidu.com</p>
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
这个时候www.baidu.com的样式和我们直接用a标签写一个www.baidu.com的样式基本是一模一样的。
伪类
下面介绍一下伪类。
我们可以通过在标签名后面添加伪类来达到一些效果。
• hover伪类
这个伪类可以让我们设置当鼠标移入元素的时候会改变元素的样式。
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
hover: 当鼠标以移入时候的动作和样式。
给a标签设置这样一个伪类之后，我们就可让鼠标移入a标签之后，文字放大改变颜色了。
伪类当然不止hover一个，还有很多其他的伪类，我就不一一介绍了，暂时hover用的最多。
• 值得一提的是，伪类也有权重值的，它的权重值和class一样是10点，也就是说如果伪类的权重值达不到前面的权重值的话，那么样式也是不会修改的哟~
<a href=”www.baidu.com”>www.baidu.com</a>
这个时候如果我们再用上面设置的那个伪类样式的话，鼠标移入只会有文字放大效果而不会有变色效果，因为行间样式的权重值有1000点，而a+hover也只有1+10=11点，所以颜色是不会生效的。
盒子模型
最后我们再来介绍一下盒模型的相关知识。
我们要知道，一个元素是由四部分组成的：margin、border、padding、content，分别是外边距、边框、内边距、内容区的意思，其中content不是由属性构成的，而是由我们写的东西和width、height属性构成的。
• margin：它设置的是这个元素距离外面靠近它的其他元素或者浏览器边框的距离。这是一个复合属性，它其实是由margin-top、margin-right、margin-bottom、margin-left组成的，当然也可以分开设置每一个属性的属性值。这个复合属性的值也有4种写法：
1.4个值。如果写的是四个值，如margin: 10px 20px 30px 50px;这样的话，其分别按照上右下左的顺序来设置四个外边距的大小。
2.3个值。如果写的是三个值，如margin: 10px 20px 30px;这样的话，其分别按照上、左右、下的顺序来设置四个外边距的大小，中间的那个属性值设置的是左右的外边距。
3.2个值。如果写的是两个值，如margin: 10px 20px;这样的话，其分别按照上下、左右的顺序来设置四个外边距的大小。
4.1个值。这个没什么好说的…四个方向都是这个值。
• margin其实不属于一个盒子的模型部分，一个元素的盒子模型只有border、padding、content。
盒模型的计算问题
我们现在一个盒子有10px的margin、5px的border、10px 20px 30px 40px的padding和100px的content，那么这个盒子的宽高分别是多少呢？
答案是：
width = 5 + 40+ 100 + 20+ 5 = 170px;
height = 5 + 10 + 100 + 30 + 5 = 150px;
• 宽度的计算是：5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px；
• 高度的计算是： 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px；
那么怎么查看我们设置的元素的样式呢？
只需要鼠标在页面上右键审查元素或者查看，或者是按住F12（windows系统的）就可以打开，这个时候找到我们所要查看样式的元素就可以了。
• 这个时候我们会发现，body元素竟然有一个默认的8px的margin！同时我们还发现p标签默认的也有一些margin，这对于我们是非常不利的，因为这些样式都是在我们意料之外的样式，可能对我们的布局造成影响，那么我们怎么去掉这些默认样式呢？
• *，通配符选择器的作用就体现出来了。我们在开发中一般将通配符选择器用来初始化样式。因为通配符的优先级最低，只有0点，我们在后面如果想要加样式，随便一个样式设定都会高于通配符选择器，但是如果没有设置的话，浏览器就会默认样式为我们设置的初始化样式。一般初始化的样式有以下几种：
CSS; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
那么今天总结的东西就这些哟~希望对大家有所帮助。