1、第二讲 CSS编程技术,第3章 CSS编程技术,* 温故 *,HTML标记概述 图像标记是什么？超级链接标记是什么？ 分行、分段、字体标记是什么？ 有序列表、无序列表、标题是什么？ 表格中常用标记是什么？ 表单标记是什么？常用属性有哪些？常用输入标记有哪些？ 框架窗口标记如何使用？ 作业中的问题 用于标记的符号不能是全角或汉字符号，如“”不能写成“h1”,* 知新 *,CSS样式简介 HTML中使用样式的方法 行内样式：style属性的使用 内嵌样式：样式块 外部样式：独立样式文件 样式选择符 组选择符 CLASS选择符 ID选择符 常用的CSS属性 定位相关属性,设置属性h1font-siz
2、e:18px;color:#6600CC; h1改变了样式 h2未改变样式,3.1 什么是CSS样式？,CSSCascading Style Sheet，一种样式定义语言，为HTML中的标记定义样式。,CSS 的优点,页面内容和显示样式分离，便于网站风格的统一，方便网站维护 可以重用样式表,根据样式代码的位置，分为三种： 行内样式：标记的style属性 内嵌样式：style样式块 外部样式：独立样式文件,3.3 HTML中使用CSS的方法,3.3.1行内样式Style属性的使用,单 价：￥3999剩余时间：成交结束新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次另送价
3、值50元的充电器套装！(一个充电器，两节充电电池),如果希望某段文字和其他段落的文字显示风格不一样，可采用“行内样式”。行内样式使用标记的 style 属性定义。,行内样式格式,应用样式的内容,正文,标题1,属性以“名:值“对的形式出现，名与值之间以冒号(:)分隔，各对之间以分号(;)分隔,内嵌样式divbackground-color:#CCCCFF;color:#0000FF;spanfont-size:16px;color:#FF0000,3.3.3内嵌样式style样式块,ASP及其应用机械工业出版社未用样式XML及其应用机械工业出版社,行内样式局限于某个标签，若希望本网页内的所有同类
4、标签都采用统一样式，应采用内嵌样式。 内嵌样式一般在标记内嵌入标记。,3.3.2 外部样式-独立样式文件,样式文件 P ,不管是行内样式还是内嵌样式都只能为一个Html页面服务，若要使样式控制多个HTML文件，则采用外部样式。 外部样式是将样式放在独立的文件中，即样式表文件，通常以css作为类型名。在使用该样式的HTML中通过标记来链接外部样式表文件,链接外部样式表的步骤,使用LINK（链接）标签 ，语法：,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件： newstyle.css P ,第三步：浏览查看各网页,3.2 CSS样式选择符（样式选择器）,C
5、SS样式选择符 浏览器在解析标记时，会根据标记名或标记中的class属性或id属性到样式表中选择样式，因此样式表中的这些标记或属性名又称为CSS的样式选择符。 样式选择符的种类 标记选择符，如以前使用的div、span、p等 组选择符 CLASS 类选择符 ID 选择符,组选择符,将样式规则同时应用于多个标记，则可以将多个选择符用逗号(,)隔开再定义样式规则。,如：文件3-4.css span,p,h1 color:red; font-size:16px ,文件3-3.html组选择器H1标题 H2标题 P段落 span标记,.myinput border: 1px solid;border-
6、color:#D4BFFF;color:#2A00FF 用户名 密 码,应用类选择符：class“类名“,类选择器的定义格式为： 类名样式规则; ,类选择符,标记选择符为特定标记定义样式，而class选择符可以独立于某个具体标记定义，标记在选择样式时可以使用class属性。 在定义class选择符时，选择符名前要加圆点（）标识。, #title color:blue;font-size: 24px; span#errcolor:red;font-size:16px; ID选择符测试 P标记中err选择符不起作用 SPAN标记中err选择符起作用 ,应用ID选择器：id“ID名“,ID选择符,与
7、class选择符应用范围类似，在定义是ID选择符用井号(#)标识。 可通过联合定义来使用，即在ID选择符的前面附加标记符， 如：span#errcolor:red;，表示有被span使用时选择符err才有效。,ID选择符一般定义,ID选择符联合定义,伪类定义超链接样式 A:hover鼠标悬停时的样式属性 A:visited链接地址已被访问过时的样式属性 A:link对象在未被访问前的样式属性 A:active在鼠标点击与释放之间时的样式属性 伪对象 选择符 : first-letter ,补充：特殊的选择器伪类与伪对象,伪类示例,A /*设置超链接不带下划线*/color: blue;text
8、-decoration: none; /*文本修饰：无*/ A:hover/*鼠标在超链接上方停留时，带下划线 */color: red;text-decoration:underline; /*文本修饰：下划线*/ HEAD俺是超链接，移过来我就显示下划线,特殊的伪类：A代表超链接，hover代表鼠标悬停,3.4常用的CSS属性,文字相关属性 color：颜色(十六进制RGB颜色，或颜色名) font-family：字体 font-size：字大小(pt-点，px-像素) font-weight：字体的粗细(bold、light、extra-bold) font-style:normal正常
9、，italic斜体 text-align：字体对齐方式(center、left、right) text-decoration：字体装饰(underline-下划线，line-through中间线) 显示属性display none：不显示信息 block：将内容作为一段显示(对象之后添加新行，div默认) inline：将内容作为一行显示(对象显示完后不换行，span默认),3.4常用的属性设置,背景属性设置background background-image background-repeat background-position 定位相关属性position absolute:绝对定位
10、，以上一级元素左上角为原点 relative:以自己默认位置为原点，给定偏移量,.mybgbackground-image:url(falali.jpg);background-repeat:no-repeat;background-position:center ,.myposfont-size:16px;font-weight:bold;line-height:22px;color:#FF6600;left:30px;top:50px; position:absolute;,背景与定位应用实例,法拉利是世界上最闻名的赛车和运动跑车的生产厂家。菲亚特公司拥有该公司50股权，但该公司却能独立于
11、菲亚特公司运营。法拉利汽车大部分采用手工制造，因而产量很低。年产量只有4，000辆左右。公司总部在意大利的摩德纳。它创建于1929年，创始人是世界著名赛车手，划时代的汽车设计大师恩佐法拉利。这位被誉为“赛车之父”的意大利人，嗜车如命的血液从小就在他的身上沸腾。1898年出生于意大利北部的莫迪那，从小热爱汽车冒险，13岁便开始独自驾车。1919年法拉利参加了他生命中的第一次汽车比赛，表现出色，随后被阿尔法罗米欧公司吸收为阿尔法罗米欧车队的车手。,外部样式文件,CSS样式混和使用规则,合并样式文件 使用import语句合并样式文件 行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混
12、合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式 某张网页内，部分内容“与众不同”，采用行内样式 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,小结,HTML中使用样式的方法 行内样式：style属性的使用 内嵌样式：样式块 外部样式：独立样式文件 样式选择符 单标记选择符 组选择符 CLASS选择符 ID选择符 作业1 查阅几种CSS样式属性，并举例说明其功能,作业2,使用外部独立样式表的形式，设计两个风格一致的调查表，一个用于调查手机游戏阅历，另一个用于调查手机使用情况，内容如图所示，表头、题目、备选答案、背景分别使用不同的样式。,实训二 CSS编程技术应用,训练目的 通过本次技能训练，使学生掌握CSS样式的定义和使用。 训练内容 编写一个样式表文件，设计两个调查表网页，在两个网页中应用样式表文件中的样式，使两个调查表风格统一。 训练要求 总结调试过程中遇到的问题及解决办法。,
