DIV+CSS.ppt

DIV+CSS 2011.3.1 Div+css的概述 业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用网格 DIV+CSS布局 DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了 DIV的概念 　1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 P/P 是一样的。 3. DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 4. 注意：div标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，paadivbb/divcc/p的结果是不确定的。 SPAN 和 DIV 的区别 SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。SPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容 而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 Css的概念 CSS:Cascading Style Sheets 层叠式样式表 HTML语言并不是真正的版面语言，它只是标记语言，意图把文档的不同部分通过它们的功能作用进行分类，但并不指出这些元素如何在计算机屏幕上显示。 CSS则提供对文档外观的更好更全面的控制，而且不干扰文档的内容。 CSS基本语句的结构： HTML选择符{属性1：值1；属性2：值2；属性n：值n；} 选择符是要对它应用说明的HTML元素名称；属性就是能够被CSS影响的浏览器行为，如字体、背景、边界等；值就是可以为属性设置的任何选项，如“楷体”，“red”等。 如：p {font-size:12pt；color:blue} 盒子模型 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 边缘 margin（边界）(margin-top、margin-right、margin-bottom、margin-left)：外边距顺序依次是上、右、下、左 例如，{margin:2em 4em}、{margin-left:-200px} padding（填充）(padding-top、padding-right、padding-bottom、padding-left)：内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左 布局中的主要样式 font line-height color margin padding border text-align background width: height float: clear display 如何在网页中应用css 1.行内套用（两种） 如：1） head style type=text/css /style /head 2）直接写在标签内body p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px /body 2.外部连接套用 如：link rel=“stylesheet” type=“text/css” href=“样式表文件.css 如何在网页中应用css 3.汇入套用 （汇入的做法为利用@import这个指令） 使用@import导入 ，语法： head 　　title文档标题/title 　　style @import url(css.css); 　　@import url(csss.css) ; //单引号也可以 　　@import css,css; 　　@import css.css; //单引号也可以 　　/style 　　/head 内嵌样式的选择器 根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器 虚类和虚元素