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元素内部)、嵌入样式(位于<head>标签内部)

                     

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

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

         6、CSS样式

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

                          

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

                          

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

                            

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

                            

        边框:样式、大小、颜色

                             

        7、盒子模型

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


          【小结】

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


相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页