04_CSS样式表.ppt

《04_CSS样式表.ppt》由会员分享，可在线阅读，更多相关《04_CSS样式表.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSSCSS样式表样式表样式表样式表回回顾 表表单中提交中提交数数据的方法有据的方法有哪两种哪两种及其及其区区别？创建一建一个个登登录界面需要界面需要哪哪些表些表单元素？元素？target属属性取性取值可以可以为哪哪些及其含些及其含义？2本章任本章任务美化美化“宝宝贝分分类”页面面制作制作并并美化美化“注注册册”页面面3会会创建建统一外一外观的字体文本的字体文本会会创建无下建无下划划线的超的超连接接样式式会会创建建个个性化的表格性化的表格会会创建建个个性化的表性化的表单本章目本章目标4为什什么么需要需要CSS样式表式表HTML标签的外的外观样式比式比较单一一页面色彩不生面色彩不生动样式修改不方

2、便式修改不方便样式表的作用相式表的作用相当当于于华丽的衣服的衣服内容相同内容相同外观不同外观不同5为什什么么需要需要CSS样式表式表样式表能式表能实现内内容容与与样式的分离，方便式的分离，方便团队开开发程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网页6样式表的基本式表的基本语法法样式表的基本式表的基本结构构 P color:red;font-size:30px;font-family:隶书隶书;声明文档样声明文档样式表结束式表结束文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则选择器选择器样式规则 P colo

3、r:red;font-size:30px;font-family:隶书;属性属性属性的值属性的值7样式表的基本式表的基本语法法样式规则样式规则 P color:red;font-family:隶书隶书;font-size:24px;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。本页面中所有的本页面中所有的P标标签都应用了此样式签都应用了此样式所有的段落都采用所有的段落都采用P样式，保证风格统一样式，保证风格统一用分号用分号隔开隔开选择器选择器如何编写此样式如何编写此样式?字体类型为隶书、字体类型为隶书、大小大小24px8 .red

4、color:red;font-family:隶书隶书;font-size:24px;样式表的基本式表的基本语法法如果希望其他的如果希望其他的标签也能采用也能采用P标签的的样式，式，怎么怎么办？其他标签和其他标签和P标签应该采用相同的样式，所以要为它标签应该采用相同的样式，所以要为它们定义一个共享样式。们定义一个共享样式。类样式(class).类名类名样式规则样式规则9样式表的基本式表的基本语法法样式规则样式规则 .red color:red;font-family:隶书隶书;静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。CLASS类

5、类选择器选择器为类选择器定为类选择器定义的样式规则义的样式规则应用类选择器应用类选择器class“类名类名”和和标签要应用同一样式标签要应用同一样式如何实现这样的样如何实现这样的样式效果？字体类型式效果？字体类型都为隶书都为隶书10常用的常用的样式式属属性性文本文本属属性性文本属性说 明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用使用font-size、font-family、color实现实现 宋体，字体宋体，字体大小大小12px字体大字体大小小16px要实现如下图所示的文本样式，该如何编写

6、？要实现如下图所示的文本样式，该如何编写？11常用的常用的样式式属属性性P font-size:12px;font-family:宋体宋体;text-align:left;.bigFont font-size:16px;color:red;【新闻新闻】设搜狐为首页设搜狐为首页 9月月1日日 世锦赛刘翔世锦赛刘翔12秒秒95夺冠成就大满贯夺冠成就大满贯我国实施不安全食品召回制度我国实施不安全食品召回制度 遏制非法出口遏制非法出口.声明声明P标标签样式签样式声明名称为声明名称为bigFont类样式类样式,它可被多个标签共享它可被多个标签共享应用类样式用应用类样式用class类名类名12小小结1编写

7、写如下如下图所示效果所示效果对应的的HTML代代码黑体，字体大小黑体，字体大小20px字体大小字体大小14px，蓝色，蓝色13常用的常用的样式式属属性性背景背景属属性性背景属性说 明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y table background-image:url(images/type_back1.jpg);background-repeat:no-repeat;设置背景图像为设置背景图像为imag

8、es文件夹下的文件夹下的type_back1.jpg设置背景图设置背景图像不平铺像不平铺14常用的常用的样式式属属性性方框方框属属性性margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界marginborderpaddingborder-width边框的宽度边框的宽度padding-left左填充左填充padding-bottom下填充下填充15常用的常用的样式式属属性性属 性CSS名称说 明边界界属属性性margin-top设置置对象的上象的上边距距margin-right设置置对象的右象的右边距距mar

9、gin-bottom设置置对象的下象的下边距距margin-left设置置对象的左象的左边距距边框框属属性性border-style设置置边框的框的样式式border-width设置置边框的框的宽度度border-color设置置边框的框的颜色色填填充充属属性性padding-top设置置内内容容与与上上边框之框之间的距离的距离padding-right设置置内内容容与与右右边框之框之间的距离的距离padding-bottom设置置内内容容与与下下边框之框之间的距离的距离padding-left设置置内内容容与与左左边框之框之间的距离的距离方框方框属属性性16常用的常用的样式式属属性性 要实现

10、下图所示的效果，该如何编写样式规则？线宽线宽2px、虚线框样式、虚线框样式dashed、颜色为、颜色为red使用使用background、border-right-width、border-right-color、border-right-style、padding-top和和padding-left来实现来实现行的背景色行的背景色为为yellow17常用的常用的样式式属属性性.tableBorder border-right-width:3px;border-right-color:red;border-right-style:dashed;padding-top:20px;padding-

11、left:10px;TR background:yellow;手机冲值手机冲值 电子彩票电子彩票 设置单元格右边框设置单元格右边框宽度为宽度为3像素像素设置单元格右边设置单元格右边框为虚线框框为虚线框设置单元格里文字与左边设置单元格里文字与左边框的距离为框的距离为10像素像素表格行的表格行的背景色背景色18 要要实现下下图细边框的效果，框的效果，该如何如何编写写样式式规则？常用的常用的样式式属属性性文本框宽度为文本框宽度为1px,边框样式为边框样式为solid使用使用border-width和和border-style属性属性19常用的常用的样式式属属性性.textBorderborder-w

12、idth:1px;border-style:solid;名字：名字：密码：密码：文本框为文本框为实线边框实线边框边框宽度边框宽度为为1像素像素看看没有设置样式的文本框的效果看看没有设置样式的文本框的效果20常用的常用的样式式属属性性特殊特殊样式（超式（超链接）接）a:link color:#FF0000/*未被未被访问的的链接接 红色色*/a:visited color:#00FF00/*已被已被访问过的的链接接 绿色色*/a:hover color:#FFCC00/*鼠鼠标悬浮在上的浮在上的链接接 橙色橙色*/a:active color:#0000FF/*鼠鼠标点中激活点中激活链接接 蓝色

13、色*/A color:blue;text-decoration:none;A:hover color:red;诺基亚诺基亚|摩托罗拉摩托罗拉 联想联想|戴尔戴尔 超链接文超链接文本的样式本的样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色如何编写此超如何编写此超链接样式？链接样式？21编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码小小结2细边框细边框solid样式样式无下划线的无下划线的超链接样式超链接样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色22常用的常用的样式式属属性性 要实现下图图片按钮的效果

14、，该如何编写样式规则？按钮的边界、边框、按钮的边界、边框、填充值均为填充值均为0px使用使用background-image、margin、border、padding、height、width和和font-size属性属性按钮背景图像与按钮背景图像与按钮宽度、高度按钮宽度、高度大小一样大小一样字体大小字体大小14px 综合例子：制作图片按钮综合例子：制作图片按钮23常用的常用的样式式属属性性.picButton background-image:url(images/back.jpg);border:0 px;margin:0px;padding:0px;height:23px;width:

15、82px;font-size:14px;.背景图像为背景图像为images文件夹文件夹下的下的back.jpg按钮的边界、边框、按钮的边界、边框、填充均为填充均为0像素像素设定按钮宽度、高设定按钮宽度、高度和图片大小一样度和图片大小一样设置按钮上的字设置按钮上的字体大小为体大小为14像素像素24样式表的三式表的三类应用方式用方式内内嵌嵌样式表式表内内嵌嵌样式表使用格式如下：式表使用格式如下：行行内内（嵌入）（嵌入）样式表式表外部外部样式表文件式表文件 样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内嵌样式。，这时应采用内嵌

16、样式。25内内嵌嵌样式表式表P font-family:隶书隶书;font-size:18px;color:#FF0000;床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。样式规则样式规则所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一选择符选择符样式表样式表26行行内内（嵌入）（嵌入）样式表式表 如果希望某段文字和其他段落文字显示风格不一样，如果希望某段文字和其他段落文字显示风格不一样，该如何解决？该如何解决？使用行内（嵌入）样式表可以解决使用行内（嵌入）样式表可以解决27行行内内（嵌入）（嵌入）样式表式表设置属性设置

17、属性 这个段落应用了样式这个段落应用了样式这个段落按默认样式显示这个段落按默认样式显示为标签为标签p指指定样式定样式本段本段标签采标签采用了行内样式用了行内样式28行行内内（嵌入）（嵌入）样式表式表静夜思静夜思作者：李白作者：李白 床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。行内样式使用范围更小，只适用于行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用某一个标签，对其他标签不起作用本段本段标签采标签采用了行内样式用了行内样式29外部外部样式表文件式表文件 如果希望一个网站中多个页面的样式保持一致，如果希望一个网站中多个页面的样式保

18、持一致，如何解决？如何解决？使用外部样式表文件可以解决使用外部样式表文件可以解决30外部外部样式表文件式表文件根据根据样式文件式文件与网与网页的的关关联方式又分方式又分为：链接（接（LINK）外部）外部样式表式表导入（入（import）外部）外部样式表式表样式文件样式文件.css网页网页2网页网页3网页网页131链接（接（LINK）外部）外部样式表式表使用使用LINK（链接）接）标签:第一步：创建样式表文件第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定第二步：把样式文件和网页绑定第三步：浏览查看各网页第三步：浏览查看各网页样式文件：样式文件：newstyle.css Link_Outcss1.htmlLink_Outcss2.html 引入的样引入的样式文件式文件32导入（入（import）外部）外部样式表式表使用使用import导入入，语法：法：import newstyle.css;引入样式表文件引入样式表文件33总结方框方框属属性有性有哪哪些常用些常用属属性？性？并并分分别说明其含明其含义？超超链接接样式有式有哪哪几几种种？内内嵌嵌样式表、行式表、行内内样式表、外部式表、外部样式表文件分式表文件分别适用适用什什么么场合？合？343535