CSS.DIV网页样式与布局学习总结

         在学习牛腩时我们对CSS层叠样式表有了初步的认识，这一阶段，我们通过学习一些asp.net网页样式设计的实例。即是对牛腩阶段中css样式设计的回顾，也是对以后项目实践中css设计的实践视野基础，下面总结一些CSS样式设计知识点。
         【知识点】
         1、什么是CSS?DIV?CSS+DIV?
          CSS是英语Cascading Style Sheets(层叠样式表单)的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。 CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、表框等。使用CSS能够简化网页的格式代码，加快下载显示速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。
          DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
          DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位，实现网页页面内容与表现相分离。"DIV+CSS"其实是错误的叫法，而标准的叫法应是XHTML+CSS。因为DIV与Table都是XHTML或HTML语言中的一个标记，而CSS只是一种表现形式。
         视频中通过例子主要讲解了，CSS的基础语法、选择器、继承、优先级、样式、框模型，下面具体总结一下：
        2、CSS基础语法
         CSS语法规则由两个主要的部分构成：选择器和一条或多条声明。选择器一般是需要改变样式的HTML元素，每一条声明有一个属性和一个值组成，属性和值用冒号隔开。

示意图如下：

                                 

        3、选择器

          要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

         CSS选择器常用的有：HTML选择器、ID选择器、Class选择器，当然还有很多其他的就不一一说了。

         HTML选择器：就是以HTML标签作为选择器，其作用域是所有符合条件的HTML标签

         ID选择器：可以为标有特定 id 的 HTML 元素指定特定的样式，ID选择器选择器以 "#" 来定义，ID属性只能在每个 HTML 文档中出现一次。

       

        Class选择器：使用HTML标签的Class属性设置值的选择器，有关联类选择器和独立类选择器：

         关联类选择器：可以为同一元素定义不同的样式

             

         独立类选择器：可以为多个不同的元素定义相同的样式

               

            优先级为：ID选择器>Class选择器>HTML标签选择器

        4、CSS设置方式

          外部样式、内联样式（在HTML元素内部）、嵌入样式（位于标签内部）

                     

           优先级：内联样式表>嵌入样式表>外部样式表

         5、继承：所有嵌套在某个HTML标签中的HTML标签都会自动继承外层标签设置的样式规则。

         6、CSS样式

              类型：字体、字号、样式、行高、颜色、修饰

                          

        背景：颜色、图片、重复、位置、是否固定

                          

          区块：水平对齐、垂直对齐、缩紧、空白、显示类型

                            

         方框：宽高、填充、边界、浮动、清除

                            

        边框：样式、大小、颜色

                             

        7、盒子模型

         CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，盒子模型具有内容(content)、填充(padding)、边框(border)、边界(margin)这四个属性。

          【小结】

        视频中讲解的知识点很多，有表格表单的设置、页面浏览器、菜单制作等等，以及CSS与XML，JS，Ajax等等。20段小视频的学习，既是对牛腩中CSS样式设计学习的回顾，也是对以后项目实践中CSS设计实践的视野基础，同时对样式设计也有了一个更深层次的了解。