如何美化你的页面？认识css

相信大家通过上一篇文章的学习已经成功的创建了自己的第一个网页。虽然只有一句话，但这个仍然是一个网页。但是我相信你，一定觉得这个页面不好看，想自己美化一下，今天就可以实现这个愿望，让我们来认识一下CSS。

什么是css呢？css是指层叠样式表 (Cascading Style Sheets)，简单来说就是帮你美化页面的。

如上图所示，在head标签下面写一对"style"标签。这个"style"标签就是用来写css样式的，把你写的样式放到这对标签里他才会生效。格式就像“选择器{样式名1：样式；样式名2：样式；}”这样。 咱们的网页都是要经过浏览器渲染的，才会出现不同的样式，所以你得告诉浏览器你要给哪个地方添加样式，“选择器”就是用来做这件事的。仔细看你会发现，我写的选择器名称和标签名一样，这就叫做“标签选择器”，我选择的是“h1”标签。

大括号里写的是具体样式。其中这几个样式都是用来设置字体的，“color”是用来设置字体颜色的，“font-size”是用来设置字体大小的，“font-weight”是用来设置字体粗细程度的。字体颜色你可以设置“red”、“blue”等英文单词，当然有其他写法，这个咱们以后再说。字体大小可以设置“数字+px”，"px"就是像素。

什么是像素呢？像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。比如，你得手机或者电脑显示器都有分辨率吧，比如“736*128”就是分辨率，这代表着你得设备每一行有736个像素，共有128行。你拿着放大镜或者滴一滴水在你的显示屏上，就会发现一个一个小方块，每个方块有三种颜色组成“红绿蓝”（光的三原色），这一个方块就是一个像素。咱们设置12px，意思就是一个字站的面积是“12像素*12像素”。

“font-weight”可以设置100-800不同的数值，但是要注意必须是100的整数倍，比如100,200……这样。当然你可以不设置字体粗细，怎这个字默认粗细是400，由于"h1"标签自身的特性，在这个标签中的字体已经被加粗了，可以设置400，看看有什么不同。

这是设置签的效果

这是设置后的效果

是不是比之前漂亮多了呢。自己动手试试吧。

品略图书馆 http://www.pinlue.com/