层叠样式表.ppt

,层叠样式表,2,回顾2-1,我的表格12345,代码阅读,3,回顾2-2,要求密码文本框不超过10个字符，请补全HTML代码。密码下面有关单选按钮的HTML代码正确吗？女按钮分为哪三类，类型(type)分别是？下拉列表框中显示的超级女生是？最佳超级女生是1号2号3号,4,目标,掌握样式表的语法规则样式表的分类：行内样式表内嵌样式表外部样式表掌握常用的样式了解层和标签,5,DHTML简介,DHTML,=,HTML,脚本语言JavaScript,+,+,层叠样式表CSS,,指定一个网页的元素,决定元素的大小颜色和位置,,,操纵网页的元素,DHTML是制作动态HTML页面的技术！,6,DHTML的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用x座标和y座标来指定网页元素的确切位置（绝对位置或相对位置）,设计人员可以将网页中的表格绑定到数据库,设计人员可以将选择的字体和网页一起封装,Web程序员可以编写脚本以更改网页的样式和内容,在DHTML中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定位,数据绑定,可下载字体,脚本,对象结构,7,DHTML示例,闪烁文本,移动文本,消隐文本,8,设置属性这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,,9,常用的样式属性,10,根据样式代码的位置，分为三类：行内样式内嵌样式外部样式,样式的分类,在最后一个声明后面加上一个分号(;)是一个好习惯,11,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的STYLE属性定义。,/*－－关键代码--*/剩余时间：成交结束新旧程度：全新所在地：北京宝贝数量：5件浏览量：220次另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,,12,应用样式P{font-size:20px;color:blue;text-align:center}我是段落1我是段落2我是段落3我们的样式绝对统一,内嵌样式-1,所有的段落都采用P样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,13,内嵌样式-2选择器,根据选择器的不同，内嵌样式又分为：HTML选择器CLASS类选择器ID选择器,14,/*--关键代码--*/P{/*设置样式：字体和背景色*/font-family:System;font-size:18px;color:#3333CC;}H2{background-color:#CCFF33;text-align:center;}品种特征方面：1、蛋鱼：蛋鱼…….。2、龙睛：龙睛……..。3、高头：高头….。,内嵌样式-3HTML选择器,应用H2样式,应用P样式,15,内嵌样式-4class类选择器,.myinput{border:1pxsolid;border-color:#D4BFFF;color:#2A00FF}用户名密码,CLASS类选择器,应用类选择器：class＝”类名“,类选择器的定义格式为：.类名{…样式规则;},16,#fire{color:red;font-size:24px;}我是二级标题，火是这样的我是段落，火是这样的,内嵌样式-5ID选择器,ID选择器,ID选择器的定义格式为：＃ID名{…样式规则;},应用ID选择器：ID＝”ID名“,17,A{/*设置超链接不带下划线*/color:blue;text-decoration:none;/*文本修饰：无*/}A:hover{/*鼠标在超链接上方停留时，带下划线*/color:red;text-decoration:underline;/*文本修饰：下划线*/}HEAD>俺是超链接，移过来我就显示下划线,内嵌样式-6特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,18,外部样式,根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（import）外部样式表,样式文件P{…..},网页2,网页3,网页1,,,,19,链接外部样式表,使用LINK（链接）标签，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件：newstyle.cssP{…..},Onel.htm,another.htm,第三步：浏览查看各网页,,,演示：链接样式表示例,20,导入外部样式表,使用@import导入，语法：@import样式表文件.css;,操作步骤同链接样式表,21,外部样式文件,样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,22,层标签,…关键代码…Z-index=1，我是第一层，我是容器，包含图片段落Z-index=2，我是第二层，包含图片和段落…,,,,,,使用Z－index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,,,top,left,23,标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,,24,CSS的优点,改变浏览器的默认显示风格页面内容和显示样式分离可以重用样式表方便网站维护,25,总结,DHTML是网页中HTML、样式表和脚本的组合应用程序，增强网页的交互性样式分为行内样式、内嵌样式、外部样式样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字,