初识CSS

        使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为将所有的样式都写在标签中，这样既不利于代码阅读，又使将来的代码维护非常困难。如果想让自己制作的页面美观大方又方便维护，就需要使用CSS实现结构和表现的分离。结构和表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。

        CSS（Cascading Style Sheets，层叠样式表）是一种用于（增强）控制网页样式并且允许将样式信息与网页内容分离的标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本格式（字体、大小、对齐方式等等）、图片的外形（宽高、边框样式、边距等等）和版面的布局等外观显示样式。

        CSS定义的规则具体如下：

选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......}

        在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，大括号内的属性是对该对象设置的具体样式。其中属性和属性值以“属性:属性值”形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）链接，多个键值对之间用“;”（英文分号）进行分隔。

        下面通过CSS样式对<div>标签进行设置，示例如下：

div{ border: 1px solid red; width: 600px; height: 400px;}

         上述代码里，div为选择器，表示CSS样式作用的HTML对象；border（边框）、width（宽度）和height（高度）为CSS属性。其中，border属性有3个值，分别代表1像素、实心边框线、红色。

        在CSS中，通常使用像素（px）作为计量文本、边框等元素的标准量，px是相对于显示器屏幕分辨率而言的，而百分比（%）是相对于父对象而言的。例如，一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。

        在CSS中颜色的取值方式有以下三种：

        （1）预定义的颜色值，例如red、green、blue等

        （2）十六进制形式的值。例如#FF0000、#FF6600、#29D794等。实际工作中，十六进制的值是常用的定义颜色的方式。

        （3）RGB代码，例如红色可以用rgb（255，0，0）或者rgb（100%，0%，0%）来表示。如果使用RGB代码百分比方式取颜色值，即使值为0，也不能省略百分号，必须写为0%。