1、第三章 CSS层叠样式表,张俊,2,万策实训,回顾 2-1, 我的表格12345,代码阅读,3,万策实训,回顾 2-2,要求密码文本框不超过10个字符，请补全html代码。 密码 下面有关单选按钮的html代码正确吗？ 女 按钮分为哪三类，类型(type)分别是？ 下拉列表框中显示的超级女生是？最佳超级女生是1号 2号 3号,4,万策实训,目标,掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层和标签,5,万策实训,DHTML 简介,DHTML,=,HTML,脚本语言 JavaScript,+,+,层叠样式表 CSS,指定一个网页的元素,决定元素的
2、大小 颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！可以说是DOM 0版本,6,万策实训,设置属性这个段落应用了样式这个段落按默认样式显示,什么是样式？,指定显示样式,7,万策实训,CSS的名词与产生原因,CSS 指层叠样式表 (Cascading Style Sheets) HTML 标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。由于主流浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点
3、变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。,8,万策实训,CSS 的优点,改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护,9,万策实训,常用的样式属性,10,万策实训,根据样式代码的位置，可以将样式分为三类： 行内样式 内嵌样式 外部样式,样式的分类,在最后一个声明后面加上一个分号 (;) 是一个好习惯,11,万策实训,行内样式,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE
4、属性定义。,剩余时间：成交结束新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 ,12,万策实训,应用样式p font-size:20px;color:blue;text-align:center我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一,内嵌样式-1,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,13,万策实训,内嵌样式-2 选择器,样式格式：选择器 属性:值;属性:值* 根据选择
5、器的不同，样式又可分为： HTML 选择器 CLASS 类选择器 ID 选择器 派生选择器 分组选择其,14,万策实训,/*-关键代码-*/p /*设置样式：字体和背景色*/font-family: system; font-size: 18px;color: #3333cc; h2 background-color: #ccff33;text-align: center; 品种特征方面：1、蛋鱼：蛋鱼.。2、龙睛：龙睛。3、高头：高头.。,内嵌样式-3 HTML选择器,应用h2样式,应用p样式,15,万策实训,内嵌样式-4 class类选择器,.myinput border: 1px sol
6、id;border-color:#d4bfff;color:#2a00ff 用户名密 码,CLASS类选择器,应用类选择器： class”类名“,类选择器的定义格式为： .类名 样式规则; ,16,万策实训,#fire color:red;font-size: 24px; 我是二级标题，火是这样的 我是段落，火是这样的 ,内嵌样式-5 ID选择器,ID选择器,ID选择器的定义格式为： ID名 样式规则; ,应用ID选择器：id”ID名“,17,万策实训,内嵌样式6 派生选择器,如果只希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器 ：这样，只有列表的s
7、trong元素受到选择器影响。而其它strong元素不受影响。,li strong font-style: italic;font-weight: normal;,18,万策实训,内嵌样式7 分组选择器,对选择器可以进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。,h1,h2,h3,h4,h5,h6color:#dddddd;text_,19,万策实训,a /*设置超链接不带下划线*/color: blue;text-decoration: none; /*文本修饰：无*/ a:hover/*鼠标在超链接上方停留时，带下划线 */color: red;text
8、-decoration:underline; /*文本修饰：下划线*/ head俺是超链接，移过来我就显示下划线,内嵌样式-8 特殊的选择器,HTML选择器,特殊的伪类：A代表超链接，hover代表鼠标悬停,20,万策实训,外部样式,根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,样式文件 p ,网页2,网页3,网页1,21,万策实训,链接外部样式表,使用link（链接）标签 ，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件： newstyle.css p ,Onel.htm,another.h
9、tm,第三步：浏览查看各网页,22,万策实训,导入外部样式表,使用import导入 ，语法： import 样式表文件.css;,操作步骤同链接样式表,23,万策实训,外部样式文件,样式的混合使用(继承),行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式
10、显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,24,万策实训, 层标签,关键代码z-index=1，我是第一层，我是容器，包含图片段落z-index=2，我是第二层，包含图片和段落 ,使用 z-index指定是哪一层,是块级容器标签，可以包含图片、标题、段落、文字等,图片,段落,top,left,25,万策实训, 标签,所有韩款童装10元/件起拍喽,是行级容器标签，不可以包含图片、标题、段落等，只能包含文字内容,26,万策实训,CSS常用长度单位,相对长度单位： em 字体高度，如果是12pt的字体，则1em=12pt ex
11、字体中字母x的高度 px 像素，代表屏幕上的点 百分比 绝对长度单位： pt 相当于1/72英寸 pc 相当于12pt mm毫米；cm厘米；in 英寸。,27,万策实训,CSS颜色与url,颜色： CSS颜色可以用RGB法或16进制数来表示，还可以使用已经定义好的关键字 RGB法：rgb(r,g,b) r,g,b可取值范围0255,也可以使用百分比法0100。 16进制法，在16进制的数字前面加 URL的格式为：url(value), value可以使用绝对路径也可以使用相对路径，value可以用”括起来也可以不用。,28,万策实训,CSS字体属性,字体属性font-family:“宋体”;
12、Arial;可以排序先后，用”,”间隔。 大小属性font-size: 36px; 粗细属性font-weight:normal（正常）或bold（加粗） 字体颜色color:#55555; 样式属性font-style:normal（正常）、italic（斜体）或oblique（倾斜） 行高line-height:normal;,29,万策实训,CSS文本属性,文本缩进text-indent：为段落设置首行缩进 文本对齐text-align：align属性相同，有left, right, center, justify(两端对齐) 文本装饰text-decoration：underline(
13、下划线), overline(上划线), line-through(删除线) 字符间距letter-spacing：3px 文本转换text-transform：首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。,30,万策实训,CSS背景属性,背景颜色background-color 背景图片background-image：url(bg.gif); 背景重复background-repeat：repeat-x, repeat-y, repeat, no-repeat;可以控制图片的重复效果 固定背景background-attachmen
14、t：scroll 图片随用户区域滚动，fixed 图片固定。 图片位置background-position：位置使用x y来表达，x，y可以是长度单位，也可以为百分比，亦可以采用left,right,center,top,bottom这些值。 背景设置background：提供了一行设置全部属性方式，各个值应按下列次序来写：background-color background-image background-repeat background-attachment background-position,31,万策实训,列表样式,列表样式list-style-type属性可针对元素，可选
15、的值主要有：disc（实点） circle（空心圆）square（方块）decimal（数字） list-style-image属性，可以使用图片作为标记 list-style-position属性 outside：标记显示在文本外，换行后的文本不和标记对齐 inside：标记显示在文本内，换行后文本与标记对齐。,32,万策实训,框模型,CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作,33,万策实训,CSS外边距和内边距,几乎所有元素都可以设置外
16、边距： 设置四个属性margin-top,margin-right, margin-bottom, margin-left 用margin属性一次设置，顺序top right bottom left 内边距（padding）也可以被理解成“填充物”。只定义元素的内容与元素边框之间的距离 设置四个属性: padding-top, padding-right, padding-bottom, padding-left 使用padding一次设置，顺序top right bottom left,34,万策实训,CSS边框样式,top, right, bottom, left width, style
17、, color 以上两个分类可以使用-连接起来，以border开头，设置某类属性，也可以单独使用。 边框的width：可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值 边框的style：,35,万策实训,其它属性1,width, height：宽度和高度 float：设置对象相对浮动位置，其它对象可跟上。可选left, right, none clear：设置对象哪边不能有其它对象，可选none, left, right, both position：取absolute时，可以通过属性left、right、top和bottom来设定放置位置；设为rel
18、ative时，为相对定位，是通过将元素从原来的位置向右、向左、向上或向下移动来定位,36,万策实训,其它属性2,display：可以设为inline,block,和none。即便不显示也会占用页面空间。 inline就像它的本意显示为inline的元素为行。 block元素前后换行符。标题和段落元素是块元素。 none意思不显示元素。 visibility：属性设置元素是否可见或不可见。 visible元素是可见的。 hidden元素是不可见的 collapse当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上
19、，会呈现为 “hidden“。,37,万策实训,z-index,z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！,38,万策实训,总结,DHTML 是网页中 HTML、样式表和脚本的组合应用程序，增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则，选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 和都是容器标签，是块级标签，可包含段落、标题等，是行级标签，不能包含段落、标题等，只能包含部分文字,
