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