CSS的初步认识

                             

1、CSS基本概念

1)   定义

CSS（CascadingStyle Sheet 译为“级联样式表”）用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言；用来进行网页设计的；它也是一种用来表现HTML或XML等文件样式的计算机语言；

2)   CSS语法

Selector{property:value} (选择符{属性：值})

3)   CSS中选择器

ID选择器：在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式，所以一种标签只能设置一种样式。

类选择器：你能够把相同的元素分类定义不同的样式一种类别则可以通过“空格”添加多重样式。

      选择器的优先级别：

ID选择器（id）>类别选择器（class）>HTML标签选择器

4）span和div

DIV(division)是一个块级元素，作用域为一整“行”（用DIV修饰的盒子的作用域为一整行）。可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。

SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式。

但是我们倡导多用div，因为用span修饰的盒子，我们在改其属性时（如border、margin等）经常会没有效果（尤其是IE内核不同的浏览器，对行内元素支持的效果不好）。但是我们并不是说就不用span，我们用div无法实现效果时，就可以使用SPAN，因此span对于div是一个很好的补充。

 

2、CSS的核心

1)   标准流

标准流其实就是标签的排列方式（即代码编写顺序），就像流水一样，以此类推，它是有顺序的。

2)   盒子模型

         

           

一个页面是所有盒子的集合，每个标签就是一个盒子，而class、id选择器是对盒子属性的具体描述。

3)   浮动

这因为div作用的范围是一正行，所以按控制流的方案，下一个div块只能下移。如果我们需要将两个div块放到同一行时，就对布局有了很高的要求，这时遵守控制流就有很有局限性。

所以便有了浮动的概念：被设为浮动的盒子将会脱离控制流方案，成为一个独立各体。比如：博客支持内容块的自由布局，每个内容块就是一个“浮动”的独立个体，能够改变位置。

4)   定位

定位：将浮动定位某一具体规则。

由于盒子浮动离开了原有的“约束”，所以我们在设计页面布局的时候会与原有的控制布局方案产生冲突，所以我们需要为浮动加上一个符合规定的“约束”，使之能良好的兼容而不至于产生意想不到的结果。

    

3、 CSS优点

在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

它的优点表现在：

1)   样式和内容分离

将样式部分抽取出来放到独立的样式表中，HEML文件中只存放文本信息。

2)   提高浏览器的浏览速度  

对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3)   易于维护和改版

只要简单的修改CSS文件就可以重新设计整个网站的页面。

4)   几乎所有的浏览器都可以使用。

支持大部分IE、非IE内核的浏览器。

5)   单个样式表可以控制多个页面文档。

6)   很容易编写，语言简单明确。

7)        使用CSS布局更符合现在的W3C标准。