DW-第9章div+css样式

1、本章目标本章目标9.1 DIV9.1 DIV盒模型介绍盒模型介绍9.2 CSS9.2 CSS概述概述9.3 CSS9.3 CSS语法语法9.4 DIV+CSS9.4 DIV+CSS样式实例布局样式实例布局9.1 div9.1 div盒子模型介绍盒子模型介绍CSSCSS中，中， Box ModelBox Model叫盒子模型（或框模型），叫盒子模型（或框模型），Box ModelBox Model规定了元素框规定了元素框处理元素内容（处理元素内容（element contentelement content）、内边距（）、内边距（paddingpadding）、边框（）、边框（borderbor

2、der） 和和 外边距（外边距（marginmargin） 的方式。在的方式。在HTMLHTML文档中，每个元素（文档中，每个元素（elementelement）都有）都有盒子模型，所以说在盒子模型，所以说在WebWeb世界里（特别是页面布局），世界里（特别是页面布局），Box ModelBox Model无处不在。无处不在。下面是下面是Box ModelBox Model的图示：的图示：一个盒模型包括一个盒模型包括4 4个区个区内容（内容（contentcontent）内边距（内边距（paddingpadding）边框（边框（borderborder）外边距（外边距（marginmargin

3、）9.1 div9.1 div盒子模型介绍盒子模型介绍9.1 div9.1 div盒子模型介绍盒子模型介绍说明说明：上图中，由内而外依次是元素内容（：上图中，由内而外依次是元素内容（contentcontent）、）、内边矩（内边矩（padding-toppadding-top、padding-rightpadding-right、padding-padding-bottombottom、padding-leftpadding-left）、边框（）、边框（border-topborder-top、border-rightborder-right、border-bottomborder-bott

4、om、border-leftborder-left）和外）和外边距（边距（marging-topmarging-top、margin-rightmargin-right、margin-bottommargin-bottom、margin-leftmargin-left）。）。内内边距、边框和外边距可以应用于一个元素的所有边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。值，而且在很多情况下都要使用负值的外边距。9.1 div9.1 div盒子模型介绍盒子模型介绍下图是下

5、图是W3SchoolW3School的的Box Model Box Model 图解图解：9.2 CSS概述概述层叠样式表层叠样式表csscss（ Cascading Style Sheets Cascading Style Sheets ）的）的缩写缩写。也称为级也称为级联样式联样式表表它它是一种用来表现是一种用来表现HTMLHTML（标准通用标记语言的一个（标准通用标记语言的一个应用）或应用）或XMLXML（标准通用标记语言的一个子集）等文（标准通用标记语言的一个子集）等文件样式的计算机语言。件样式的计算机语言。9.2 CSS概述概述CSS-CSS-级联样式表单级联样式表单Cascadin

6、g Style SheetCascading Style Sheet对对WEBWEB页面进行外观控制的机制页面进行外观控制的机制将页面的内容和表现分离将页面的内容和表现分离CSSCSS版本版本目前为止，目前为止，CSSCSS有两个官方标准：有两个官方标准：CSS1CSS1和和CSS2CSS2CSS1CSS1的功能在大多数浏览器中都被支持的功能在大多数浏览器中都被支持nocss.htmlnocss.html、css.htmlcss.html9.2 示例示例-无无CSS9.2 示例示例-有有CSS9.2.1 CSS 优点优点优点优点代码独立，便于控制代码独立，便于控制样式文件可在浏览器中缓存样式文

7、件可在浏览器中缓存便于分工合作便于分工合作提高了可访问性提高了可访问性提供更多的外观控制手段提供更多的外观控制手段9.3 css样式样式CSSCSS样式样式内联样式内联样式嵌入样式嵌入样式外联样式外联样式9.3.1 内联样式内联样式内联样式内联样式inlineCSS.htmlinlineCSS.html把样式代码内联到标记内把样式代码内联到标记内使用使用stylestyle作为属性，样式语句作为属性值作为属性，样式语句作为属性值如：如：控制控制标记的边框样式为不折叠标记的边框样式为不折叠9.3.1 内联样式特点内联样式特点内联样式特点内联样式特点看上去很直观看上去很直观针对个别元素控制针对个别

8、元素控制和传统的外观控制方式没有本质的不同和传统的外观控制方式没有本质的不同不推荐使用不推荐使用9.3.2 嵌入样式嵌入样式嵌入样式嵌入样式internalCSS.htmlinternalCSS.html使用使用标记把样式代码插入到页标记把样式代码插入到页面中面中一般插入到一般插入到标记中标记中如：如：9.3.2 嵌入样式特点嵌入样式特点特点将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改仅针对一个HTML文档进行设置代码是HTML文档的一部分，没有利用浏览器的缓存机制9.3.3 外联样式外联样式外联样式外联样式externalCSS.htmlexternalCSS.html通

9、过外部样式文件对页面进行控制通过外部样式文件对页面进行控制外部的样式文件通过外部的样式文件通过HTMLHTML的的linklink元素连接到元素连接到HTMLHTML文档中文档中9.3.3 外联样式使用外联样式使用使用使用建立外部样式文件（建立外部样式文件（.css.css）外部的样式文件不能含有任何像外部的样式文件不能含有任何像或或这样的这样的HTMLHTML标记标记样式表文件仅仅由样式规则或声明组成样式表文件仅仅由样式规则或声明组成9.3.3 外联样式特点外联样式特点特点特点当样式被应用到很多的网页时，推荐使用外部样式当样式被应用到很多的网页时，推荐使用外部样式表表网页制作者使用外部样式表

10、，在改变整个网站的外网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件观时，仅需要改变一个文件大多数浏览器会保存外部样式表在缓冲区，从而如大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟果样式表在缓冲区就避免了在展示网页时的延迟在实际开发中一般都使用外联样式在实际开发中一般都使用外联样式9.3.4 CSS基本语法基本语法选择符选择符 属性属性1:1:属性值属性值1;1;属性属性2:2:属性值属性值2;2;选择符（选择符（selectorselector）：指定样式适用的标记，）：指定样式适用的标记，除指定标记外，样式不起作用除指定标记外，

11、样式不起作用属性：样式的关键字属性：样式的关键字属性值：描述样式的值；属性值：描述样式的值；格式：属性与属性之间使用分号分隔，属性与格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔属性值之间使用冒号分隔如：如：P font-P font-size:12ptsize:12pt; ; color:redcolor:red;使用html.cssbody color:blackp font-family:”sans serif”p text-align:center;color:redp text-align:center; color:black; font-family:arial如

12、果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好9.4 CSS基本语法基本语法9.5 选择符分类选择符分类选择符分类选择符分类普通选择符普通选择符类选择符类选择符idid选择符选择符9.5.1 普通选择符普通选择符普通选择符普通选择符任意的任意的HTMLHTML标记标记其样式仅仅作用在选择符指定的其样式仅仅作用在选择符指定的HTMLHTML元素上元素上如：如：p color:redp color:red通用选择符（补充）通用选择符（补充）其样式作用在所有元素上其样式作用在所有元素上如：如：* * color:red color:red9.5.2

13、类选择符类选择符类选择符类选择符同一类型的不同元素通过设置不同同一类型的不同元素通过设置不同CLASSCLASS来显示不同来显示不同样式；但一个元素只能设置一个样式；但一个元素只能设置一个CLASSCLASS属性属性HTMLHTML元素名加上类名，中间用元素名加上类名，中间用“.”.”号分开，类名供号分开，类名供该该HTMLHTML元素的元素的CLASSCLASS属性使用属性使用如：使用不同颜色显示，下面例子建立了两个类，如：使用不同颜色显示，下面例子建立了两个类，OddColorOddColor和和EvenColorEvenColor，供，供trtr使用使用tr.OddColor color

14、:redtr.OddColor color:redtr.EvenColor color:bluetr.EvenColor color:blue如果省略如果省略HTMLHTML元素名只写元素名只写“. .类名类名”表示这个类名适表示这个类名适用于所有的用于所有的HTMLHTML元素的元素的CLASSCLASS属性属性下面例子建立了一个类下面例子建立了一个类notenote，可以被任何元素使用，可以被任何元素使用.note font-size:small; color:red.note font-size:small; color:red9.5.3 id选择符选择符idid选择符选择符个别地定义每

15、个元素的成分个别地定义每个元素的成分可以作用到任意可以作用到任意HTMLHTML元素的元素的IDID属性上属性上尽量少用，因为尽量少用，因为idid选择符具有一定的局限（选择符具有一定的局限（严格来说，在一个页面中，每个严格来说，在一个页面中，每个idid只能使用只能使用一次）一次）要有要有“#”#”在名字前面在名字前面如：如：#svp font-size:12pt#svp font-size:12pt9.5.4 关联关联关联关联css_choose.htmlcss_choose.html是一个用空格隔开的两个或更多的单元是一个用空格隔开的两个或更多的单元选择符组成的字符串选择符组成的字符串这

16、些选择符可以指定一般属性，而且因这些选择符可以指定一般属性，而且因为层叠顺序的规则，为层叠顺序的规则，它们的优先权比单它们的优先权比单一的选择符大一的选择符大如：如：p em background:yellowp em background:yellow表示段表示段落（落（p p）中的强调文本（）中的强调文本（emem）是黄色背景）是黄色背景，而其它部分的强调文本不受影响，而其它部分的强调文本不受影响9.5.5 组合使用组合使用组合使用组合使用练习练习建立一个建立一个HTMLHTML文件，其中有文件，其中有h1-h6h1-h6标记的文字；标记的文字；对对h1h1与与h2h2标记使用标记使用类型

17、选择符类型选择符设置样式；设置样式；对对h3h3与与h4h4标记使用标记使用idid选择符选择符设置样式；设置样式；对对h5h5标记使用标记使用通用的类型选择符通用的类型选择符设置样式；设置样式；对对h6h6标记使用标记使用通用的通用的idid选择符选择符设置样式设置样式参考参考 css_choose.html css_choose.html ，样式可以自己定义。，样式可以自己定义。css_exercise.htmlcss_exercise.html9.6 样式就近原则样式就近原则样式就近样式就近并列的定义并列的定义当定义重复时，后出现的定义会覆盖前面的定义当定义重复时，后出现的定义会覆盖前面

18、的定义对同一结点指定样式，但层次结构不一样对同一结点指定样式，但层次结构不一样near.htmlnear.html在层次结构上最接近指定结点的在层次结构上最接近指定结点的CSSCSS起作用起作用9.7 伪类及伪对象伪类及伪对象伪类及伪对象伪类及伪对象由由CSSCSS自动支持，属自动支持，属CSSCSS的一种扩展型类的一种扩展型类名称不能被用户自定义，只能按照标准格式名称不能被用户自定义，只能按照标准格式进行应用进行应用伪类可以应用到不同的元素上，但目前所有伪类可以应用到不同的元素上，但目前所有浏览器只支持浏览器只支持a a元素与超链接操作相关的伪类元素与超链接操作相关的伪类伪对象只应用在特定对

19、象上伪对象只应用在特定对象上9.7.1 超链接伪类超链接伪类a:link font-size: 14px; color: #ffffff; text-decoration: none; a:visited color: #db7093; text-decoration: none; a:hover color: #564b47; a:active color: #000000; /注意必须保持4个伪类的顺序示例不容易演示，同示例不容易演示，同htmlhtml课件中的超链接的样式。课件中的超链接的样式。不建议使用。不建议使用。9.7.2 常用伪对象常用伪对象示例：pseudoLetter.htm

20、l、pseudoLine.htmldiv:first-line color: red; font-size: 16px; p:first-letter color: red; font-size: 16px; 9.8 注释注释注释注释/ /* * * */ /，但要注意不要将注释嵌入到选择器，但要注意不要将注释嵌入到选择器语句里面语句里面常用的样式属性常用的样式属性属 性CSS名称说说 明明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素) border-style边框样式border-width边框宽度 borde

21、r-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴索引号，用于层常用的样式属性值一常用的样式属性值一类型CSS属性值字体属性 font-family Arial，serif，宋体 font-size Small，medium，large或直接指定字体大小 font-style normal, italic font-weight normal, bold, lighter, 100, 200文本属性 text-align left, right, center, justify text-indent 度

22、量或%(表示文本首行缩进 ) text-decoration none, blink, underline, overline, line-through text-transform none, capitalize, uppercase, lowercase vertical-align Baseline, super, sub, top, text-top, middle-bottom, text-bottom word-spacing 度量(增加或减少单词间的空白 ) letter-spacing 度量(增加或减少字符间的空白 )常用的样式属性值二常用的样式属性值二类型CSS属性值框属

23、性 border None, solid, double, ridge, inset, outset, groove, dotted dashed border-style 同上 border-width 度量，thick，medium，thin border-color #RRGGBB，颜色名称 margin-top 度量或% Margin-left 度量或%定位属性 top 度量 width 度量或% height 度量或% left 度量颜色属性 color #RRGGBB，颜色名称 background-color #RRGGBB，颜色名称，transparent background

24、-image url background-repeat repeat, repeat-x, repeat-y, no-repeat9.4 div+CSS布局实例布局实例9.4.1内、外补丁属性内、外补丁属性body margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;td padding: 2px 2px 2px 2px; /*以顺时间方向算，从上开始*/td padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-botto

25、m: 2px;在在html中使用中使用css简单方法简单方法1、关键词、关键词2、外部链接、外部链接9.4.2 CSS布局布局9.4.2 CSS布局布局在在html中使用中使用css简单方法简单方法3、伪类、伪类a:link/*未访问的链接未访问的链接*/a:visted/*已访问的链接已访问的链接*/a:hover/*鼠标移动到链接鼠标移动到链接*/a:active/*选定的链接选定的链接*/9.4.2 CSS布局布局在在html中使用中使用css简单方法简单方法5、ul无序列表无序列表属性属性属性值含义disc实心圆circle空心圆squae实心方块none无样式：样式：list-sty

26、le:none;9.4.2 CSS布局布局在在html中使用中使用css简单方法简单方法6、文字修饰、文字修饰text-decoration属性值含义none无默认underline下划线overline上划线line-through删除线blink闪烁9.4.2 CSS布局布局在在html中使用中使用css简单方法简单方法7、文本修饰、文本修饰 水平对齐：水平对齐：text-align：left right top bottom 段落缩进：段落缩进：text-indent:10px; 文本行高：文本行高：text-height:20px;9.4.2 CSS布局布局在在html中使用中使用cs

27、s简单方法简单方法8、边框、边框border属性值含义none无边框dotted点线式solid直线式9.4.3 布局步骤布局步骤1Div+css部分代码参考部分代码参考1、全局代码、全局代码body margin:0 auto; padding:0; font-family:宋体宋体; font-size:12px;body div margin:0 auto; padding:0; font-family:宋体宋体; font-size:12px;ul li list-style:none;9.4.3 布局步骤布局步骤2Div+css部分代码参考部分代码参考2、头部样式代码、头部样式代码#

28、index width:100%; margin:0 auto; padding:0; height:auto;#index_top width:1425px; height:84px; background:url(image/index_01.jpg) no-repeat center;9.4.3 布局步骤布局步骤3Div+css部分代码参考部分代码参考3、导航代码、导航代码#top_left width:500px; height:80px; float:left; text-align:right; padding-top:4px;#top_right width:900px; hei

29、ght:84px; float:right; text-align:center; font-family:?; font-size:18px;9.4.3 布局步骤布局步骤4Div+css部分代码参考部分代码参考6、导航代码、导航代码#top_right ul li a:hovertext-decoration:none;#top_right ul li:hover ul display:block; margin:0; padding:0;9.4.3 布局步骤布局步骤5Div+cssDiv+css部分代码参考部分代码参考9 9、jsjs代码代码 var imgUrl = new Array();var imgUrl = new Array();var imgText = new Array();var imgText = new Array();var imgLink = new Array();var imgLink = new Array();var imgAlt= new Array();var imgAlt= new Array();var imgWidth=1425;var imgWidth=1425;var imgHeight=250;var imgHeight=250;var _timeOut_=4000;var _timeOut_=4000;