MySQL数据库概述配套精品完整课件3.ppt

1、MySQLMySQL数据库概述配套精品完整课件数据库概述配套精品完整课件3 3 HTML的设计与应用 预习检查预习检查 vHTMLHTML的主体结构是怎样的？的主体结构是怎样的？ v创建一个表格都需要哪些标签？创建一个表格都需要哪些标签？ vformform表单都有哪些表单项？表单都有哪些表单项？ 本章任务本章任务 v1.使用XHTML表格 v2.HTML框架结构 v3.HTML表单设计 1. 1. 使用使用HTMLHTML表格表格 v1.1 表格标签常见标签 v1.2 表格标签常见属性 v1.3 综合示例 1.1 1.1 表格中常用标签表格中常用标签 标签标签描述描述 代表HTML表格，ta

2、ble是成对出现的,以开始,以结束 用于定义表格标题的位置，可由align和valign属性来设置。 代表HTML表中的一行，此标签也要求成对出现。 代表HTML表格中的表头，一般位于表格的首行。要求成对。 代表HTML表格中的一个单元格。用于存放具体数据内容。 编号编号姓名姓名年龄年龄备注备注 1小王20 2小李21 列列 行行 单元格单元格 v表格的基本结构：表格的基本结构： 表格首行为表头表格首行为表头 表格的基本语法表格的基本语法 table 单元格内容单元格内容 定义列定义列 定义行定义行 定义表格定义表格 border用来设置表用来设置表 格边框尺寸大小格边框尺寸大小 1.2 1.

3、2 表格标签常见属性表格标签常见属性 vtabletable标签属性标签属性: : widthwidth - 代表表格的宽度 heightheight - 代表表格的高度 borderborder - 代表表格边框(此属性应该使用CSS实现) cellspacingcellspacing - 代表表格边框与表格内容填充的距离,也是内容填充之间 的距离(此属性应该使用CSS实现) cellpaddingcellpadding - 代表内容填充的宽度(此属性应该使用CSS实现) vthth、tdtd标签属性：标签属性： widthwidth与与heightheight 代表宽度与高度 colspa

4、ncolspan - 一行跨越多列 rowspanrowspan - 一列跨越多行 alignalign - 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) valignvalign - 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐)(此属性应该使用CSS实现) vtrtr标签属性：标签属性： alignalign与valignvalign具体解释详见上面。 如何使用填充、间距属性如何使用填充、间距属性 border

5、(边框的厚度边框的厚度) cellpadding (单元格填充单元格填充) cellspacing (单元格间距单元格间距) 1.3 1.3 综合示例综合示例 学员表学员表 学员基本信息学员基本信息 成成 绩绩 姓姓 名名性性 别别 专专 业业课课 程程 分分 数数 小小 峰峰男男 计算机计算机 PHP开发开发 86 小小 影影 女女98 2 HTML2 HTML框架结构框架结构 v2.1 HTML2.1 HTML框架简述框架简述 v2.2 HTML2.2 HTML框架标签框架标签 v2.3 HTML2.3 HTML框架示例框架示例 2.1 HTML2.1 HTML框架简述框架简述 vHTML

6、HTML框架简述框架简述 一个浏览器窗体可以通过几个页面的组合来显示。(框架frames可以把HTML文 档分为多个页面)。也就是将一个浏览器文档窗口分隔成多个窗口，每个窗口 都可以显示一个独立的网页文件。 框架页使用了表格的方式组合，可以分为数行与数列。 v框架的优点框架的优点 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数 据的传输，增加了网页下载速度)。 方便制作导航栏。 v框架的缺点框架的缺点 会产生很多页面，不容易管理。 不容易打印。 浏览器的后退按钮无效。 代码复杂,无法被一些搜索引擎索引到。 多数小型的移动设备（PDA 手机）无法完全显示框架。 多框架的页面

7、会增加服务器的http请求。 由于上面诸多缺点，因此不符合标准网页设计的理念.已被标准网页设计抛弃 2.2 HTML2.2 HTML框架标签框架标签 v标签标签 - - 代替代替bodybody标签定义了框架页标签定义了框架页, ,并且定义了框架并且定义了框架 将分为多少行与多少列。常用属性如下将分为多少行与多少列。常用属性如下: : colscols - 定义了框架含有多少列与列的大小(每个值使用逗号分隔), 取值为象素px或者百分比% rowsrows - 定义了框架含有多少行与行的大小(每个值使用逗号分隔), 取值为象素px或者百分比% borderborder - 定义frame定义的

8、框架页的边框(单位像素),使用css实现 frameborderframeborder - 定义框架页是否边框(此属性应写在frame标签内部, 不应在此出现) framespacingframespacing - 定义框架页之间间隔的距离,使用css实现 v标签标签 可为那些不支持框架的浏览器显示文本，和组合使用 v标签标签 创建一个包含另外一个文档的内联框架，iframe标签内的内容可以做 为浏览器不支持iframe标签时显示 。 vframeframe标签标签 - - 定义定义framesetframeset标签中每个框架页的内容标签中每个框架页的内容 frame标签是单独出现的， 常用

9、属性: nframeborderframeborder - 定义了内容页的边框,取值为(1|01|0),缺省值为1 1 l1 1 - 在每个页面之间都显示边框 l0 0 - 不显示边框 nnamename - 在一个框架页链接到另一框架页时使用(另一个框架页 可以使用targettarget定义链接页) nnoresizenoresize - 定义了浏览者是否可以通过拖拽改变框架页尺寸, 取值为(noresizenoresize) nscrollingscrolling - 定义是否有滚动条,取值为(yes|no|autoyes|no|auto),缺省 值为autoauto lyesyes -

10、 显示滚动条 lnono - 不显示滚动条 lautoauto - 当需要时再显示滚动条 nsrcsrc - 定义了内容页URL nborderborder 设置边框粗细 2.3 HTML2.3 HTML框架示例框架示例 使用框架定义后台管理平台模型使用框架定义后台管理平台模型 您的浏览器不支持框架，请升级浏览器您的浏览器不支持框架，请升级浏览器 3.HTML3.HTML表单设计表单设计 v3.1 HTML的form标签 v3.2 HTML的input标签 v3.3 HTML的textarea标签 v3.4 HTML的select标签 3.1 HTML3.1 HTML的的formform标签标

11、签 v问：网站怎样与用户进行交互问：网站怎样与用户进行交互? ? 答案答案: :使用使用HTMLHTML表单表单(form).(form). v表单表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的 HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比 如,bbs,blog的登陆系统,购物车系统等. vformform 标签标签 - - 代表代表HTMLHTML表单表单 formform标签是成对出现的,以开始,以结束 常用属性. nactionaction - 浏览者输入的数据被传送到的地方,如一个PHP页面(dofm.php) nmethodmet

12、hod - 数据传送的方法 lgetget - 此方式传递数据量少,但是传递的信息显示在网址上。 lpostpost -此方式传送信息多,而且不会把传递信息显示在网址上 nenctypeenctype - 表示将数据发送到服务器时浏览器使用的编码类型 lapplication/x-www-form-urlencodedapplication/x-www-form-urlencoded - 窗体数据被编码为名称/值 对.这是标准的编码格式.默认的。 lmultipart/form-datamultipart/form-data - 窗体数据被编码为一条消息,页上的每个控 件对应消息中的一个部分.

13、 ltext/plaintext/plain - 以纯文本形式进行编码,其中不含任何控件或格式字符 3.2 HTML input3.2 HTML input标签标签 vinputinput 标签标签 - - 代表代表HTMLHTML表单的单行输入域表单的单行输入域 input标签是单独出现的, 属性. ntypetype - 代表一个输入域的显示方式(分为输入型,选择型,点击型) nnamename 此表单项名称 nvaluevalue - 输入域的值 nsizesize - 输入域的长度 nmaxlengthmaxlength - 输入域最多可以输入文字的长度 ncheckedchecked

14、 - 如果是选择型的输入域,代表已经被选择，值为checked nreadonlyreadonly - 输入域可以选择,但是无法修改 ，值为readonly ndisableddisabled - 输入域无法获得焦点,无法选择,以灰色显示,在表单中 不起任何作用。如：disabled=disabled naccesskeyaccesskey - 表单的快捷键访问方式，如值为h即按Alt+h快捷键。 ntabindextabindex - 输入域的tab键遍历顺序 nsrcsrc - 当使用图片来表示按钮时,代表图片的位置(URI) naltalt - 用来替换提交按钮的图片(当在input的s

15、rc属性定义的图片无 法显示时)提示信息。 vtypetype属性属性 - - 代表代表HTMLHTML表单表单, ,单行输入域单行输入域( (框框) )的表现方式的表现方式 vtypetype属性取值属性取值: : texttext - 文字输入域(输入型) passwordpassword - 也是文字输入域,但是输入的文字以密码符号*显示( 输入型) filefile - 可以输入一个文件路径(输入型) checkboxcheckbox - 复选框.可以选择零个或多个(选择型) radioradio - 单选框.只可以选择一个而且必须选择一个(选择型) hiddenhidden - 代表

16、隐藏域,可以传送一些隐藏的信息到服务器 buttonbutton - 按钮(点击型) imageimage - 使用图片来显示按钮,使用src属性指定图像的位置(就像 img标签的src属性)(点击型) submitsubmit - 提交按钮,表单填写完毕可以提交,把信息传送到服务器. 可以使用value属性来显示按钮上的文字(点击型) resetreset - 重置按钮,可以把表单中的信息清空(点击型) 3.3 HTML3.3 HTML的的textareatextarea标签标签 vtextarea textarea 标签标签 - - 代表代表HTMLHTML表单多行输入域表单多行输入域 此

17、标签是成对出现的,即以开始,以结束 属性： ncols cols - 多行输入域的列数 nrowsrows - 多行输入域的行数 nnamename 此表单项名称 naccesskeyaccesskey - 表单的快捷键访问方式 ndisableddisabled 无法获得焦点,无法选择, 灰色显示,表单中无效 nreadonlyreadonly 输入域可以选择,但是无法修改 ntabindextabindex 输入域,使用tab键的遍历顺序 自我评介：自我评介： 3.4 HTML3.4 HTML的的selectselect标签标签 vselectselect 标签标签 - - 选择列表标签选

18、择列表标签 select标签是成对出现的,以开始,以结束 此标签中的每对option标签代表一个选择项 属性: nnamename 表单项名称 nsizesize - 选择域的高度 nmultiplemultiple - 可以有多个选择 ndisableddisabled - 以灰色显示,在表单中不起任何作用 ntabindextabindex - 使用tab键的遍历顺序 voptionoption 标签标签 - - 代表选择列表的一个选择项代表选择列表的一个选择项 option标签是成对出现的,以开始,以结束 属性: nlabellabel - 说明选择项 nvaluevalue - 说明选

19、择项的值 nselectedselected - 此选择项已经被选择 ndisableddisabled - 输入框无法获得焦点,以灰色显示,在表单中表示禁用 ntabindextabindex - 使用tab键的遍历顺序 表单包含的控件表单包含的控件 单行文本输入单行文本输入 框框(text(text) ) 单选按钮单选按钮 ( (radioradio) ) 复选框复选框 ( (checkboxcheckbox) ) 下拉列表下拉列表 ( (selectselect) ) 重置按钮重置按钮 ( (resetreset) ) 提交按钮提交按钮 ( (submitsubmit) ) 多行文本框多

20、行文本框 ( (textareatextarea) ) 密码框密码框 ( (passwordpassword) ) DTD DTD文档类型文档类型 !DOCTYPE html PUBLIC vDTD：（Document Type Definition, DTD） v nHTML指定文档类型的名称，为了说明这个页面使用了何种HTML规则， 或者结构 。 nPUBLIC表明所依据的文件可对任何人公开访问，而不是某个公 司内部的规范文件。 nversion name指定该HTML版本的标识名称。例如，HTML4.0的标识名 称为”-/w3c/DTD HTML 4.01 Transitional/EN

21、”.对于ISO标准的 DTD以”ISO”三个字母开头；被改进的非ISO标准的DTD以加号“” 开头；没被改进的非ISO标准的DTD以“”开头。 nurl指定该HTML语言的定义规范文件在internet上的位置，例如， http:/www.w3.org/TR/html4/loose.dtd. n规范文件：loose.dtd、strict.dtd、frameset.dtd等文件名的区别。 小结小结 v表单中提交数据的方法有那两种及其区别？表单中提交数据的方法有那两种及其区别？ v表单里有哪些常用的表单元素？表单里有哪些常用的表单元素？ v创建一个框架页面至少需要哪两个标签？创建一个框架页面至少需

22、要哪两个标签？ vtargettarget设定目标资源所要显示的窗口，其取值可以为哪些设定目标资源所要显示的窗口，其取值可以为哪些 ？ v简述创建一个多框架页面所需的主要步骤。简述创建一个多框架页面所需的主要步骤。 总总 结结 v本章必须掌握的知识点：本章必须掌握的知识点： HTML的表格应用 HTML框架标签的应用 HTML表单及每一个表单项的使用 谢谢 谢谢 层叠样式表CSS 主讲:赵志亮 QQ:390382430 个人主页:www.li-jie.me 邮箱: 微博: 预习检查预习检查 vCSSCSS的语言的语法？的语言的语法？ v在在HTMLHTML文档中放置文档中放置CSSCSS样式的

23、三种方式？样式的三种方式？ vCSSCSS的的6 6种选择器的作用和使用？种选择器的作用和使用？ 本章任务本章任务 v1. CSS1. CSS简介简介 v2. CSS2. CSS规则的组成规则的组成 v3. 3. 在在HTMLHTML文档中放置文档中放置CSSCSS的几种方式的几种方式 v4. CSS4. CSS选择器选择器 v5. CSS5. CSS常见的样式属性和值常见的样式属性和值 1. CSS1. CSS简介简介 vCSSCSS是用于布局与美化网页的是用于布局与美化网页的. . vCSSCSS是是Cascading Style SheetsCascading Style Sheets的

24、英文缩写的英文缩写, ,即层叠样式表即层叠样式表 vCSSCSS语言是一种标记语言语言是一种标记语言, ,因此不需要编译因此不需要编译, ,可以直接由浏览器执可以直接由浏览器执 行行( (属于浏览器解释型语言属于浏览器解释型语言). ). vCSSCSS文件是一个文本文件文件是一个文本文件, ,它包含了一些它包含了一些CSSCSS标记标记,CSS,CSS文件必须使文件必须使 用用.css.css为文件名后缀为文件名后缀. . vCSSCSS是大小写不敏感的是大小写不敏感的,CSS,CSS与与csscss是一样的是一样的. . vCSSCSS是由是由W3CW3C的的CSSCSS工作组产生和维护的

25、工作组产生和维护的. . 提示：提示：可以通过简单的更改可以通过简单的更改CSSCSS文件文件, ,改变网页的整体表现形式改变网页的整体表现形式, ,可以可以减减 少我们的工作量少我们的工作量, ,所以她是每一个网页设计人员的必修课所以她是每一个网页设计人员的必修课. . vCSSCSS的历史的历史: : 1996年W3C正式推出了CSS1. 1998年W3C正式推出了CSS2. CSS2.1是W3C现在正在推荐使用的. W3C的CSS主页http:/www.w3.org/Style/CSS/ 内内 容容 相相 同同 外外 观观 不不 同同 为什么需要为什么需要CSSCSS样式表样式表 v样式

26、表能实现内容与样式的分离，方便团队开发样式表能实现内容与样式的分离，方便团队开发 2.CSS2.CSS规则的组成规则的组成 v2.1 CSS2.1 CSS语法语法 v2.2 CSS2.2 CSS注释注释 v2.3 2.3 长度单位长度单位 v2.4 2.4 颜色单位和颜色单位和URLURL值值 2.1 CSS2.1 CSS语法语法 v基本语法：基本语法： CSSCSS定义分别由：定义分别由：选择符、属性、属性取值选择符、属性、属性取值组成 格式：格式：selectorproperty:valueselectorproperty:value 选择符可以是HTML中的标记名称，具体下节讲到。 属性

27、和值之间用冒分开，多个属性之间加分号 CSS是大小写不敏感的,在CSS语法中推荐使用小写 如：如：bodycolor:redbodycolor:red设置了页面为红色的文字设置了页面为红色的文字 例：例：ptext-align:center;color:red;font-family:ptext-align:center;color:red;font-family:宋体宋体 样式规则样式规则 style p p colorcolor: :redred; ; font-familyfont-family:隶书隶书; ; font-sizefont-size: :24px24px; 登鹳雀楼登鹳雀

28、楼 白日依山尽，白日依山尽， 黄河入海流。黄河入海流。 欲穷千里目，欲穷千里目， 更上一层楼。更上一层楼。 选选 择择 器器 用用 分分 号号 隔隔 开开 本页面本页面 中所有中所有 的的P标标 签都应签都应 用了此用了此 样式样式 所有的段落所有的段落 都采用都采用P样样 式，保证风式，保证风 格统一格统一 2.2 CSS2.2 CSS注释注释 v样式表里面的注释使用C语言编程中一样的约定方法去指 定，注释的内容会被浏览器忽略，可用于为样式表加注释 及调试使用。 vCSS注释格式如下： /* css注释 */ 2.3 2.3 长度单位长度单位 v在在csscss样式表中可以使用如下长度单位：

29、样式表中可以使用如下长度单位： 相对长度单位： npxpx 像素（Pixel）。 divfont-size:12px; nemem 相对于当前对象内文本的字体尺寸。 divfont-size:1.2em; n% % 百分比 divfont-size:80%; 绝对长度单位： nptpt 点（Point）。 ncmcm 厘米（Centimeter）。 nmmmm 毫米（Millimeter）。 换算比例：1in = 2.54cm = 25.4 mm = 72pt = 6pc 2.4 2.4 颜色单位和颜色单位和URLURL值值 vCSSCSS中的颜色值：中的颜色值： #rrggbb (如： #f

30、fcc00) #rgb（如：#fc0） rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0) rgb(x%,x%,x%) 其中x是一个0-100的整数值,如 rgb(100%,80%,0) vCSSCSS指定指定URLURL地址方式：地址方式： bodybackground-image:url(bg.jpg) bodybackground-image:url(http:/ bodybackground-image:url(bg.jpg) bodybackground-image:url(“bg.jpg”) 3. 3. 在在HTMLHTML文档中放置文档中放置CS

31、SCSS的几种方式的几种方式 v3.1 3.1 内联样式表内联样式表 v3.2 3.2 内嵌样式表内嵌样式表 v3.3 3.3 外部链接样式表外部链接样式表 3.1 3.1 内联样式表内联样式表 v在在HTMLHTML中使用中使用CSSCSS样式的方式一般有三种：样式的方式一般有三种： 内联引用、内部引用和外部引用。 v第一种：内联引用（也叫行内引用）第一种：内联引用（也叫行内引用） 就是把CSS样式直接作用在HTML标签中。 使用CSS内联引用表现段落. 特点：内联的样式比其他方法更加灵活，但需要和 展示的内容混淆在一起，内联样式会失去一些样式 表的优点。 v第二种：内部引用（也叫内嵌式）第

32、二种：内部引用（也叫内嵌式） 使用style标签直接把CSS文件中的内容加载到HTML文 档内部的标签里。 /* 设置本页面p标签中的文字为以下样式*/ p font-size: 10px; color: #FFFFFF; 文档样式表开始， 类型为CSS样式 样式规则 声明文档样 式表结束 选择器 css注释 特点是适合用于一个HTML文档具有独一无二的样式时。 v第三种：第三种：外部引用外部引用 CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能 ,所以用户不用每次都下载此CSS文件. 外部引用相对于内部引用和内联引用来说是高效的是节省宽带的. 外部引用是W3C推荐使用的 v实

33、现外部引用有两种方式：实现外部引用有两种方式： 使用link标签引用CSS 使用import导入CSS link style importimport mystyle2.cssmystyle2.css . . / /* *其它其它CSSCSS定义定义* */ / 使用使用importimport 导入导入CSSCSS 关系类型css文件名 使用使用linklink标签标签 应用应用CSSCSS 多重样式表的叠加多重样式表的叠加 v如果在同一个选择器上使用几个不同的样式表时，这个属如果在同一个选择器上使用几个不同的样式表时，这个属 性值将会性值将会叠加几个样式表叠加几个样式表，遇到冲突的地方会以

34、遇到冲突的地方会以最后定义最后定义 的为准的为准。 v注意：依照后定义的优先，所以优先级最高的是内注意：依照后定义的优先，所以优先级最高的是内联联样式样式 ，内部样式表高于导入外部样式表，链入的外部样式表和，内部样式表高于导入外部样式表，链入的外部样式表和 内部样式表之间是最后定义的优先级高。内部样式表之间是最后定义的优先级高。 4.4. CSSCSS选择器（选择符）选择器（选择符） v4.1 HTML4.1 HTML选择符选择符 v4.2 4.2 类选择符类选择符 v4.3 ID4.3 ID选择符选择符 v4.4 4.4 关联选择符关联选择符 v4.5 4.5 组合选择符组合选择符 v4.6

35、 4.6 伪元素选择符伪元素选择符 4.1 HTML4.1 HTML选择符选择符 vHTML选择符即是HTML标签，用来改变一个指定标签的 样式，任何HTML元素都可以是一个CSS的选择符。 语法：HTML标签名属性：值 p text-indent:3em; /*当中的选择符是p*/ h1 color:red; /*当中的选择符是h1*/ 4.2 4.2 类选择符类选择符 vCSSCSS类选择符类选择符-匹配文档中元素匹配文档中元素E E的的classclass属性的属性值为属性的属性值为 classnameclassname的元素的元素 语法：标记名.类名属性：值 或 .类名属性：值 类选择

36、符名称的定义方式是,.符号，英文dot，后加类名称 classname 类选择符的定义需要有.符号（.符号标明是类选择符），但是 HTML文档中的标签的class属性名不能出现.符号，见下面示例： p.dark-row background:#EAEAEA; /*设置p标签中class属性为dark-row的*/ .note font-size:small /*为note的类可以被用于任何元素*/ 第一段 第二段 第三段 第四段 类类 选选 择择 符符 定定 义义 类类 选选 择择 符符 应应 用用 4.3 ID4.3 ID选择符选择符 vCSS IDCSS ID选择符选择符 - - 匹配文档

37、中元素匹配文档中元素E E的的idid属性的属性值为属性的属性值为 idnameidname的元素的元素 语法：ID名称属性：值 ID选择符名称的定义方式是，#符号，英文pound，后加ID名称 idname ID选择符的定义需要有#符号（#符号标明是ID选择符），但是 HTML文档中的标签的id属性名不能出现#符号，见下面示例 id属性的特殊之处在于，一个文档中只能有一个元素使用一个ID 选择符（与class属性正好相反），id属性可以用来单一地标识一 个元素 。 #main text-indent:3em; /*ID名称main前加上一个#号*/ 文本缩进3em ID 选选 择择 符符 定

38、定 义义 ID选选 择符择符 在在 HTM L中的中的 应用应用 4.4 4.4 关联选择符关联选择符 v关联选择符也称包含选择符关联选择符也称包含选择符, ,可以单独对某种元素包含关可以单独对某种元素包含关 系定义的样式表，元素系定义的样式表，元素1 1里包含元素里包含元素2 2，这种方式只对在元，这种方式只对在元 素素1 1里的元素里的元素2 2定义，对单独的元素定义，对单独的元素1 1或元素或元素2 2无定义无定义 语法：选择符1 选择符2.属性：值 v例如：例如： 在表格内的链接改变了样式，文字大小为12象素，而表格 外的链接的文字仍为默认大小。 table atable afont-

39、sizefont-size: :12px12px 4.5 4.5 组合选择符组合选择符 v组合选择符也叫选择符组，可以把相同属性和值的选择符组合选择符也叫选择符组，可以把相同属性和值的选择符 组合起来书写，用逗号将选择符分开，这样可以减少样式组合起来书写，用逗号将选择符分开，这样可以减少样式 重复定义。重复定义。 语法：选择符1,选择符2,.,.属性：值 v例如：例如： h1, h2, h3, h4, h5, h6h1, h2, h3, h4, h5, h6 colorcolor: : greengreen p, table p, table font-sizefont-size: : 9pt

40、9pt 效果完全等效于： p p font-sizefont-size: : 9pt9pt table table font-sizefont-size: : 9pt9pt 2.6 2.6 伪元素选择符伪元素选择符 v伪元素选择符是指对同一个伪元素选择符是指对同一个HTMLHTML元素不同状态的一种定义元素不同状态的一种定义 方式。例如对于方式。例如对于标签的正常状态、访问状态、选中状标签的正常状态、访问状态、选中状 态、光标移到超链接文本上的状态，就可以使用伪元素选态、光标移到超链接文本上的状态，就可以使用伪元素选 择器来定义。择器来定义。 语法：标签:伪元素属性:值; a:link a:l

41、ink colorcolor: : #FF0000#FF0000; ; text-decorationtext-decoration: : nonenone / /* * 未访问的链接未访问的链接 * */ / a:visited a:visited colorcolor: : #00FF00 #00FF00; ; text-decorationtext-decoration: : nonenone / /* * 已访问的链接已访问的链接 * */ / a:hover a:hover colorcolor: : #FF00FF#FF00FF; ; text-decorationtext-dec

42、oration: : underlineunderline / /* * 鼠标在链接上鼠标在链接上 * */ / a:active a:active colorcolor: : #0000FF#0000FF; ; text-decorationtext-decoration: : underlineunderline / /* * 激活链接激活链接 * */ / 提示：提示：a:hover a:hover 必须被置于必须被置于 a:link a:link 和和 a:visited a:visited 之后之后 ，才是有效的。，才是有效的。 提示：提示：a:active a:active 必须被

43、置必须被置 于于 a:hover a:hover 之后，才是有之后，才是有 效的。效的。 5. 5. 常见的样式属性和值常见的样式属性和值 v5.1 5.1 字体与颜色字体与颜色 v5.2 5.2 背景属性背景属性 v5.3 5.3 文本属性文本属性 v5.4 5.4 边框属性边框属性 v5.5 5.5 鼠标光标属性鼠标光标属性 v5.6 5.6 定位属性定位属性 v5.7 5.7 区块属性区块属性 v5.8 5.8 列表属性列表属性 vCSSCSS中的样式属性比较多，经常使用的属性可以分为这么中的样式属性比较多，经常使用的属性可以分为这么 几类几类: :字体、文本、背景、位置、边框、列表，以

44、及其他字体、文本、背景、位置、边框、列表，以及其他 一些样式属性。每个类中的属性都可以单独使用，如果同一些样式属性。每个类中的属性都可以单独使用，如果同 一类中多个属性在一起使用，还可将它们合为一行解决。一类中多个属性在一起使用，还可将它们合为一行解决。 如：font:|?/? 例：pfont:italic bold 12pt/14pt Times,serif 说明：p标签中的字体为斜体加粗，字体大小为12点行高为14点字 体为Times，无效时用serif。 5.1 5.1 字体与颜色字体与颜色 vCSSCSS中修饰字体的属性中修饰字体的属性 属性属性描述描述 font简写属性。作用是把所有

45、针对字体的属性设置在一个声明中。 font-family 设置字体系列。比如：times、serif font-size 设置字体的尺寸.可以使用绝对大小，相对大小、长度和百分比 font-style 设置字体风格。normal(标准)、italic(斜体)、oblique倾斜 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。 body font: 12px Arial,宋体; /* 设置网页文字大小12个像素Arial或宋体字 */ 5.2 5.2 背景属性背景属性 vCSSCSS中常用的控制背景的属性中常用的控制背景的属性 属性属性描

46、述描述 background简写属性，作用是将背景属性设置在一个声明中。 background-color 设置元素的背景颜色。transparent（透明色） background-image 把图像设置为背景。none(无) background-repeat 设置背景图像是否及如何重复。 repeat、repeat-x、repeat-y、no-repeat background- attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll(滚动)或fixed(固定) background-position 背景图像的起始位置。横向(left,center,right

47、), 纵向(top,center,bottom),百分比和长度。 v除了使用上表中提供的背景属性，控制HTML元素的背景样 式，也可以将其简化使用一行代码解决。通过背景类中的 background属性实现，语法格式如下： background:background:| bodybackground:white url(http:/ /*设定body元素的背景颜色和图片*/ h1background:#7fffd4; /*设定h1元素的背景颜色*/ pbackground:url(./backgrounds/pawn.png) #f0f8ff fixed; /*设定背景图片、颜色和附件固定*/

48、tablebackground:#0c0 url(leaves.jpg) no-repeat bottom right; /*使用全部的背景属性*/ 5.3 5.3 文本属性文本属性 vCSSCSS文本属性主要包括字母间隔、文字修饰、文字排列、文文本属性主要包括字母间隔、文字修饰、文字排列、文 字缩进、行高，以及文字大小写等。字缩进、行高，以及文字大小写等。 属性属性描述描述 letter-spacing 设置字符间距。必须符合长度格式，允许使用负值。 word-spacing 设置字间距。必须符合长度格式，允许使用负值。 text-decoration 向文本添加修饰。underline(下

49、划线),overline(上划 线),line-through(删除线),blink(闪烁)默认使用无 text-align 对齐元素中的文本。left,right,center或justify text-indent 缩进元素中文本的首行。可以为一个长度或百分比 line-height 设置行高。 color设置文本颜色 5.4 5.4 边框属性边框属性 v每个内容或元素外面都可以有一个边框. v边框分上边框(top),下边框(bottom),左边框(left),右边框(right). v每种边框有颜色(color),样式(style),宽度(width)三种属性. v如果上下左右的边框表现

50、不一样,可以分别定义上下左右边框,如果一样可以 统一使用border属性定义. 属性属性描述描述 border 简写属性，用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。 border-left简写属性，用于把左边框的所有属性设置到一个声明中。