【知识点】
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设计实践的视野基础,同时对样式设计也有了一个更深层次的了解。