html-第三章

第三章CSS主要内容掌握样式表的语法规则样式表的分类：行内样式表内嵌样式表外部样式表掌握常用的样式DHTML简介DHTML=HTML脚本语言JavaScript++层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML是制作动态HTML页面的技术！DHTML的功能设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容设计人员可以用x座标和y座标来指定网页元素的确切位置（绝对位置或相对位置）设计人员可以将网页中的表格绑定到数据库设计人员可以将选择的字体和网页一起封装Web程序员可以编写脚本以更改网页的样式和内容在DHTML中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程动态样式动态内容定位数据绑定可下载字体脚本对象结构什么是样式？CSS是CascadingStyleSheets（层叠样式表单）的简称。用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。HTMLHEADTITLE设置属性/TITLE/HEADBODYPstyle=color:red;font-size:30px;font-family:隶书;这个段落应用了样式P这个段落按默认样式显示/BODY/HTML什么是样式？指定显示样式样式规则常用的样式属性属性CSS名称说明颜色color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度border-color边框颜色定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层根据样式代码的位置，分为三类：行内样式内嵌样式外部样式样式的分类在最后一个声明后面加上一个分号(;)是一个好习惯行内样式您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的STYLE属性定义。/*－－关键代码--*/p剩余时间：成交结束BR新旧程度：全新BR所在地：北京BR宝贝数量：5件BR浏览量：220次/ppstyle=“color:#FF00FF;font-family:隶书;font-weight:bold;font-size:24px另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以/pHTMLHEADTITLE应用样式/TITLESTYLETYPE=text/cssP{font-size:20px;color:blue;text-align:center}/STYLE/HEADBODYP我是段落1/PP我是段落2/PP我是段落3/PP我们的样式绝对统一/P/BODY/HTML内嵌样式样式表样式规则所有的段落都采用P样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。选择器用分号隔开内嵌样式根据选择器的不同，内嵌样式又分为：HTML选择器CLASS类选择器ID选择器/*--关键代码--*/HEADSTYLEtype=text/cssP{/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;}H2{background-color:#CCFF33;text-align:center;}/STYLE/HEADBODYH2品种特征方面：/H2P1、蛋鱼：蛋鱼…….。/PP2、龙睛：龙睛……..。/PP3、高头：高头….。/P内嵌样式HTML选择器应用H2样式应用P样式内嵌样式HEADSTYLEtype=text/css.myinput{border:1pxsolid;border-color:#D4BFFF;color:#2A00FF}/STYLE/HEADBODYFORMP用户名INPUTname=textfieldtype=textclass=myinput/PP密 码INPUTname=textfieldtype=passwordclass=myinput/PPINPUTtype=submitname=Submitvalue=重填INPUTtype=submitname=Submitvalue=提交/PCLASS类选择器应用类选择器：class＝”类名“类选择器的定义格式为：.类名{…样式规则;}HEADSTYLETYPE=text/css#fire{color:red;font-size:24px;}/STYLE/HEADBODYH2ID=fire我是二级标题，火是这样的/H2PID=fire我是段落，火是这样的/P/BODY内嵌样式ID选择器ID选择器的定义格式为：＃ID名{…样式规则;}应用ID选择器：ID＝”ID名“HEADSTYLEtype=text/cssA{/*设置超链接不带下划线*/color:blue;text-decoration:none;/*文本修饰：无*/}A:hover{/*鼠标在超链接上方停留时，带下划线*/color:red;text-decoration:underline;/*文本修饰：下划线*/}/STYLE/HEADBODYAhref=aa.html从此，我们的HTML世界变得如此精彩/A/BODY/HTML内嵌样式HTML选择器特殊的伪类：A代表超链接，hover代表鼠标悬停外部样式根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（@import）外部样式表样式文件P{…..}网页2网页3网页1链接外部样式表使用LINK（链接）标签，语法：HEADLINKrel=“stylesheet”type=”text/css”href=”样式表文件.css”/HEAD第一步：创建样式表文件newstyle.css第二步：把样式文件和网页关联样式文件：newstyle.cssP{…..}One.htmanother.htm第三步：浏览查看各网页演示：链接样式表示例外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式行内样式某个HTML标签DIV层标签…关键代码…DIVid=Layer1style=position:absolute;left:149px;top:110px;width:357px;height:87px;z-index:1;IMGsrc=talk.gifwidth=91height=76PZ-index=1，我是第一层，我是容器，包含图片段落/P/DIVDIVid=Layer2style=“….;z-index:2;….IMGsrc=bbs_logo.gifwidth=101height=43PZ-index=2，我是第二层，包含图片和段落/P/DIV…使用Z－index指定是哪一层DIV是块级容器标签，可以包含图片、标题、段落、文字等图片段落topleftSPAN标签HTMLBODYH2所有韩款童装SPANstyle=“color:#FF66FF;font-size:50px;”10/SPAN元/件起拍喽/H2IMGsrc=show.gifwidth=360height=195BR/BODY/HTMLSPAN是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容无序列表htmlheadtitlecssExample/titlestyletype=text/cssul{margin:0;}li{margin:20px;padding:0px;border:0pxsolid#000000;line-height:30px;font-size:12px;color:#000000;list-style-type:none;list-style-image:url(img/cd.gif);}/style/headbody奥运会项目包括ulli羽毛球li乒乓球li游泳/ul/body/htmlCSS的优点改变浏览器的默认显示风格页面内容和显示样式分离可以重用样式表方便网站维护总结DHTML是网页中HTML、样式表和脚本的组合应用程序，增强网页的交互性样式分为行内样式、内嵌样式、外部样式样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类DIV和SPAN都是容器标签，DIV是块级标签，可包含段落、标题等，SPAN是行级标签，不能包含段落、标题等，只能包含部分文字作业使用样式修改我们的个人简历使用样式修改“就业与择业调查表”