DIV+CSS课件

DIV+CSS2011.3.1Div+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:CascadingStyleSheets层叠式样式表–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:2em4em}、{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如何在网页中应用css1.行内套用（两种）如：1）headstyletype=text/css/style/head2）直接写在标签内bodypstyle=“color:#FF00FF;font-family:隶书;font-weight:bold;font-size:24px/body2.外部连接套用如：linkrel=“stylesheet”type=“text/css”href=“样式表文件.css如何在网页中应用css3.汇入套用（汇入的做法为利用@import这个指令）使用@import导入，语法：headtitle文档标题/titlestyle@importurl(css.css);@importurl(csss.css);//单引号也可以@importcss,css;@importcss.css;//单引号也可以/style/head内嵌样式的选择器根据选择器的不同，内嵌样式又分为：•HTML选择器•CLASS类选择器•ID选择器•虚类和虚元素selector{property1:value1;property2:value2;…}需要应用的样式的内容样式的属性样式的属性的值HTML选择器HEADSTYLEtype=text/cssP{/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;}H2{background-color:#CCFF33;text-align:center;}/STYLE/HEADbodyH2品种特征方面：/H2P软件协会/PP软件协会/Pbody•类选择器的定义格式为：html标签名{…样式规则;}CLASS类选择器HEADSTYLEtype=text/css.myinput{border:1pxsolid;border-color:#D4BFFF;color:#2A00FF;}/STYLE/HEADBODYFORMINPUTname=textfieldtype=textclass=myinput/PP密 码INPUTname=textfieldtype=passwordclass=myinput/P•类选择器的定义格式为：.类名{…样式规则;}应用类选择器：class＝”类名“ID选择器HEADSTYLETYPE=text/css#fire{color:red;font-size:24px;}/STYLE/HEADBODYH2ID=fire我是二级标题，火是这样的/H2PID=fire我是段落，火是这样的/P/BODY•类选择器的定义格式为：#ID名{…样式规则;}应用ID选择器：ID＝”ID名“虚类和虚元素在html的页面元素中没有这种属性，故称其为虚类，仅在IE5.0以上的浏览器版本才支持虚类选择符。语法如下：页面元素名：元素虚属性名{样式表内容}a:link{color:#000000}a:visited{color:#cccccc}a:hover{color:#000000;font-style:italic}a:active{color:#aaaaaa}:link{color:#000000}:visited{color:#cccccc}:hover{color:#000000;font-style:italic}:active{color:#aaaaaa}CSS样式的组合、继承和关联性样式的组合：把具有相同声明定义的选择符组合在一起，并用逗号隔开。－例如：段落元素p、单元格元素td和类c1可以使用相同样式：p,td,.c1{font-size:12pt;font-family:黑体;color:red}CSS样式的组合、继承和关联性样式的继承：若子元素未定义，则它将继承上级元素的样式的定义。但存在少数属性不能继承。HEADTITLECSS例子/TITLEstyle!--p{color:red;font-size:20px;font-family:华文仿宋,ComicSansMS}b{text-decoration:underline}--/style/HEADCSS样式的组合、继承和关联性样式表的关联性：–样式表的关联性指在某些样式定义中，可以定义某样式仅在某个特定元素范围内才有效。。–例如：pb{font-size:12pt;font-family:黑体;color:red}b元素仅在p元素作用范围内会套用上述的样式设定。而在其他地方不具有这些属性。样式表的6类常用属性–字体属性：字体、字号、行距等。–颜色及背景属性：背景颜色、背景图片等。–文本属性：–区块属性：边框粗细等。–分级属性：各组件的字距、行距、缩排等。–鼠标属性：鼠标形状等。字体属性•Font-family:指定文字的字体–H1{font-family:华文彩云}•Font-style：指定文字是否加粗或使用斜体。取值：normal（正常）、oblique（偏斜体）、italic（斜体）•Font-size：指定文字的大小。•Font：上述样式属性的综合表示法。–P{font:bold16pt}颜色及背景属性•定义颜色–rgb函数：rgb(R,G,B)•R、G、B可用百分比值表示，也可用0~255的整数值表示。–使用十六进制数组：#RRGGBB–直接使用颜色名。•Background-color：指定背景颜色–H1{background-color:#000800}•Background-image：指定Html组件的背景图片，值为url或none。–Body{background-image:url(image1.jpg)}color:rgb(100%,0,0)color:rgb(255,0,0)color:#FF0000color:red文本属性•Text-decoration：设置底线、顶线、闪烁等文字效果。值为none,underline,overline,line-through,blink.•Text-align：指定文字的对齐方式。值为：left,right,center,justify块级属性•定义边界，取值为：长度|百分比|auto–上边界：margin-top；下边界：margin-bottom–左边界：margin-left：右边界：margin-right–P.narrow{margin-right:50%}•定义边框：–Border-color–Border-width–Border-style分级属性•List-style-type：指定项目符号或编号–允许值：disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none•List-style-image：指定项目符号的图形文件名称，值为url或none•LI.square{list-style-type:square}•UL.plain{list-style-type:none}•OL{list-style-type:upper-alpha}/*ABCDEetc.*/•OLOL{list-style-type:decimal}/*12345etc.*/•OLOLOL{list-style-type:lower-roman}/*iiiiiiivvetc.*/鼠标属性•让鼠标移到不同对象上面，显示不同形状。–Cursor属性，取值如下•Auto：自动按默认显示–Crosshair：“＋”•Hand:手形•Text：文本I形•Wait：等待•……CSS定位与显示•CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置•定位与布局密切相关•CSS中有三种基本的定位机制–普通流：显示的位置由元素在HTML文件中的位置决定–浮动：可以左右移动，直到碰到包含框或其它浮动框–绝对定位：可以直接将元素定位在页面上地任何位置•层叠顺序–进行CSS定位时，有可能发生多个元素的重叠–需要设置元素在Z轴上的层叠顺序•与定位相关的属性主要有14个普通流定位机制•按照元素的类型和在HTML源文件中的出现顺序进行定位–就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列–inline元素（如span、strong元素）在行中水平布置•除非特殊的指定，否则所有的框都在普通流中定位相对定位•相对于元素在普通文本流中的初始位置–如果一个元