1、层叠样式表CSS,2,目标,掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层和标签,3,1.1 DHTML 简介,DHTML,=,HTML,脚本语言 JavaScript,+,+,层叠样式表 CSS,指定一个网页的元素,决定元素的大小 颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！,4,1.2 DHTML 的功能,设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小,设计人员可以随用户的输入或事件（如单击鼠标）而更改页面的内容,设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置（绝对位置或相对位置）,
2、设计人员可以将网页中的表格绑定到数据库,设计人员可以将选择的字体和网页一起封装,Web 程序员可以编写脚本以更改网页的样式和内容,在 DHTML 中，每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程,动态样式,动态内容,定 位,数据绑定,可下载字体,脚 本,对象结构,5,2.1 CSS样式表概述,1996年初诞生了层叠样式表CSS技术。 CSS是层叠样式表Cascading Style Sheet 是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。
3、一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。,6,设置属性这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,7,常用的样式属性,8,2.2 CSS的基本规则,1. CSS的基本语法 基本格式： Selector property: value; 说明： 属性和属性值之间用冒号（:）隔开，各定义之间用分号（;）隔开。 Selector : 是选择符 ，指明应用此样式代码的对象。可以是(X)HTML标记、自定义的id或者class对象。 property : 样式属性，如：大小、颜色、
4、定位、边框等。 value : 样式属性值，常见形式有一定范围的可选值或带有单位的数值。eg： P background:yellow; font-family:courier ,9,2.2 CSS的基本规则,2. 注释 利用/* */为代码加上注释。eg： P.first color: green /* green for the first paragraph of every page */,10,2.2 CSS的基本规则,3. CSS选择符的命名规则 （1） 区分大小写在XHTML中，CSS的 id及class选择符名称是区分大小写的，eg：id=“nav“不同于id=“Nav“ （2
5、） 采用合法字符 命名必须以英文字母开始，后接字母、数字、下划线等 （3） 使用具有一定语义的字母组合 （4） 制定统一的命名规则例如：“变量类型_变量名”方式,11,2.2 CSS的基本规则,12,根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式,3 样式的分类,在最后一个声明后面加上一个分号 (;) 是一个好习惯,13,3.1 行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/剩余时间：成交结束新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次另送价值50
6、元的充电器套装！(一个充电器，两节充电电池)可使用半年以 ,14,应用样式Pfont-size:20px;color:blue;text-align:center我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一,3.2 内嵌样式,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,15,3.2.1 内嵌样式-选择器,根据选择器的不同，内嵌样式又分为： HTML 选择器 CLASS 类选择器 ID 选择器,16,/*-关键代码-*/P /*设置样式：字体和背景色*/font-family:
7、 System; font-size: 18px;color: #3333CC; H2 background-color: #CCFF33;text-align: center; 品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛。3、高头：高头.。,3.2.2 内嵌样式- HTML选择器,应用H2样式,应用P样式,17,3.2.3 内嵌样式- class类选择器,.myinput border: 1px solid;border-color:#D4BFFF;color:#2A00FF 用户名密 码,CLASS类选择器,应用类选择器： class”类名“,类选择器的定义格式为： .类名 样式规则;
8、 ,18,#fire color:red;font-size: 24px; 我是二级标题，火是这样的 我是段落，火是这样的 ,3.2.4 内嵌样式- ID选择器,ID选择器,ID选择器的定义格式为： ID名 样式规则; ,应用ID选择器：ID”ID名“,19,A /*设置超链接不带下划线*/color: blue;text-decoration: none; /*文本修饰：无*/ A:hover/*鼠标在超链接上方停留时，带下划线 */color: red;text-decoration:underline; /*文本修饰：下划线*/ HEAD俺是超链接，移过来我就显示下划线,3.2.5 内嵌
9、样式- 特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,20,3.2.6 标记指定样式,基本格式： E1.E2 property: value E1#E2 property: value 说明： 针对于class为E2的E1标记进行样式定义； 针对于id为E2的E1标记进行样式定义； Eg: ul.Bluelifont-family:Arial; color:#369 ,21,3.2.7 包含选择符,基本格式： E1 E2 property: value 注意：E1与E2之间有空格 , 只对E1下的E2的内容指定样式。 E1与E2可以是HTML标记、也可以是类样
10、式或id样式。 Eg: E1与E2为标记 h2 span font-size: 12px;color: blue; span标记h2标记h2 span标记 示例,22,综合示例,h5color:red; h5.rockcolor:blue; h5 .rockcolor:yellow; 注意，多了一个空格only h5 tag content apply class name rock h5 tag content applyspan tagclass name rock h5 tagcontent,23,3.2.8 群组选择符,基本格式： E1,E2,E3 property: value 说明
11、：将同样的定义应用于多个选择符，可以将选择符以逗号（,）分隔的方式并为组。 Eg: h1,h2,h3,h4,h5,spanfont:16px Arial; color:#608000,24,3.2.9 组合选择符,说明：各个选择符可以组合使用，非常灵活。 Eg: p #grey span ,25,3.3 外部样式,根据样式文件与网页的关联方式又分为： 链接（LINK）外部样式表 导入（import）外部样式表,样式文件 P ,网页2,网页3,网页1,26,3.3.1 链接外部样式表,使用LINK（链接）标签 ，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联
12、,样式文件： newstyle.css P ,Onel.htm,another.htm,第三步：浏览查看各网页,演示：链接样式表示例,27,3.3.2 导入外部样式表,使用import导入 ，语法： import 样式表文件.css;,操作步骤同链接样式表,28,外部样式文件,3.4 样式的混合使用,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签： 1）如果有多种样式，如果
13、规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,29,4.1 层标签,关键代码Z-index=1，我是第一层，我是容器，包含图片段落Z-index=2，我是第二层，包含图片和段落 ,使用 Z index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,30,4.2 标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,31,5 CSS 的优点,改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护,32,总结,DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字,
