《网页设计css样式文档资料》由会员分享，可在线阅读，更多相关《网页设计css样式文档资料（35页珍藏版）》请在金锄头文库上搜索。
1、第四章第四章第四章第四章CSSCSS样式表样式表样式表样式表1回顾回顾 表单中提交数据的方法有那两种及其区别？表单中提交数据的方法有那两种及其区别？创建一个登录界面需要哪些表单元素？创建一个登录界面需要哪些表单元素？target属性取值可以为哪些及其含义？属性取值可以为哪些及其含义？2预习检查预习检查简述样式表的基本结构？简述样式表的基本结构？常用的样式属性有哪些？常用的样式属性有哪些？3本章任务本章任务美化美化“宝贝分类宝贝分类”页面页面制作并美化制作并美化“注册注册”页面页面4会创建统一外观的字体文本会创建统一外观的字体文本会创建无下划线的超连接样式会创建无下划线的超连接样式会创建个性化的
2、表格会创建个性化的表格会创建个性化的表单会创建个性化的表单本章目标本章目标5为什么需要为什么需要CSS样式表样式表演示示例演示示例1 1：演示能换皮肤的页面演示能换皮肤的页面HTML标签的外观样式比较单一标签的外观样式比较单一颜色只有黑白颜色只有黑白字体类型和大小无变化字体类型和大小无变化样式表的作用相当于华丽的衣服样式表的作用相当于华丽的衣服内容相同内容相同外观不同外观不同6为什么需要为什么需要CSS样式表样式表样式表能实现内容与样式的分离，方便团队开发样式表能实现内容与样式的分离，方便团队开发程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网
3、页7样式表的基本语法样式表的基本语法样式表的基本结构样式表的基本结构 P color:red; font-size:30px; font-family:隶书隶书; 声明文档样声明文档样式表结束式表结束文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则选择器选择器样式规则样式规则 P color:red; font-size:30px; font-family:隶书隶书;属性属性属性的值属性的值8样式表的基本语法样式表的基本语法样式规则样式规则 P color:red; font-family:隶书隶书; font-size:24px;静夜思静夜思床前明月光，床前明
4、月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。查看源代码查看源代码本页面中所有的本页面中所有的P标标签都应用了此样式签都应用了此样式所有的段落都采用所有的段落都采用P样式，保证风格统一样式，保证风格统一用分号用分号隔开隔开选择器选择器如何编写此样式如何编写此样式?字体类型为律书、字体类型为律书、大小大小24px9 .red color:red; font-family:隶书隶书; font-size:24px; 样式表的基本语法样式表的基本语法如果希望其他的标签也能采用如果希望其他的标签也能采用P标签的样式，怎么办？标签的样式，怎么办？其他标签和其他标签和P标签
5、应该采用相同的样式，所以要为它标签应该采用相同的样式，所以要为它们定义一个共享样式。们定义一个共享样式。类样式类样式(class).类名类名样式规则样式规则10样式表的基本语法样式表的基本语法样式规则样式规则 .red color:red; font-family:隶书隶书; 静夜思静夜思床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。查看源代码查看源代码CLASS类类选择器选择器为类选择器定为类选择器定义的样式规则义的样式规则应用类选择器应用类选择器class”类名类名“和和标签要应用同一样式标签要应用同一样式如何实现这样的样如何实现这样的样式
6、效果？字体类型式效果？字体类型都为隶书都为隶书11常用的样式属性常用的样式属性文本属性文本属性文本属性文本属性说说 明明font-size字体大小字体大小font-family字体类型字体类型font-style字体样式字体样式color设置或检索文本的颜色设置或检索文本的颜色text-align文本对齐文本对齐使用使用font-size、font-family、 color实现实现 宋体，字体宋体，字体大小大小12px字体大字体大小小16px要实现如下图所示的文本样式，该如何编写？要实现如下图所示的文本样式，该如何编写？12常用的样式属性常用的样式属性P font-size: 12px;fo
7、nt-family: 宋体宋体;text-align:left; .bigFont f ont-size: 16px; color:red; 【新闻】【新闻】设搜狐为首页设搜狐为首页 9月月1日日 世锦赛刘翔世锦赛刘翔12秒秒95夺冠成就大满贯夺冠成就大满贯我国实施不安全食品召回制度我国实施不安全食品召回制度 遏制非法出口遏制非法出口.查看源代码查看源代码声明声明P标标签样式签样式声明名称为声明名称为bigFont类样式类样式,它可被多个标签共享它可被多个标签共享应用类样式用应用类样式用class”类名类名“13小结小结1 1编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码练习
8、答案练习答案 黑体，字体大小黑体，字体大小20px字体大小字体大小14px，蓝色，蓝色练习代码练习代码14常用的样式属性常用的样式属性背景属性背景属性背景属性背景属性说说 明明background-color设置背景颜色设置背景颜色background-image设置背景图像设置背景图像background-repeat设置一个指定的图像如何被重复设置一个指定的图像如何被重复可取值可取值repeat-x、 repeat、 no-repeat、repeat-y演示示例演示示例2 2：使用不同的背景属性使用不同的背景属性 table background-image: url(images/typ
9、e_back1.jpg);background-repeat:no-repeat; 设置背景图像为设置背景图像为images文件夹下的文件夹下的type_back1.jpg设置背景图设置背景图像不平铺像不平铺15常用的样式属性常用的样式属性方框属性方框属性margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界marginborderpaddingborder-width边框的宽度边框的宽度padding-left左填充左填充padding-bottom下填充下填充16常用的样式属性常用的样式属性属属 性性CS
10、S名称名称说说 明明边界属性边界属性margin-top设置对象的上边距设置对象的上边距margin-right设置对象的右边距设置对象的右边距margin-bottom设置对象的下边距设置对象的下边距margin-left设置对象的左边距设置对象的左边距边框属性边框属性border-style设置边框的样式设置边框的样式border-width设置边框的宽度设置边框的宽度border-color设置边框的颜色设置边框的颜色填充属性填充属性padding-top设置内容与上边框之间的距离设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离设置内容与右边框之间的距离pa
11、dding-bottom设置内容与下边框之间的距离设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离设置内容与左边框之间的距离方框属性方框属性17常用的样式属性常用的样式属性 要实现下图所示的效果，该如何编写样式规则？要实现下图所示的效果，该如何编写样式规则？线宽线宽2px、虚线框样式、虚线框样式dashed、颜色为、颜色为red使用使用background、border-right-width、border-right-color、border-right-style、padding-top和和padding-left来实现来实现行的背景色行的背景色为为yellow
12、18常用的样式属性常用的样式属性.tableBorder border-right-width: 3px;border-right-color:red;border-right-style:dashed;padding-top:20px; padding-left:10px;TR background:yellow; 手机冲值手机冲值 电子彩票电子彩票 查看源代码查看源代码设置单元格右边框设置单元格右边框宽度为宽度为3像素像素设置单元格右边设置单元格右边框为虚线框框为虚线框设置单元格里文字与左边设置单元格里文字与左边框的距离为框的距离为10像素像素表格行的表格行的背景色背景色19 要实现下图细
13、边框的效果，该如何编写样式规则？要实现下图细边框的效果，该如何编写样式规则？常用的样式属性常用的样式属性文本框宽度为文本框宽度为1px,边框样式为边框样式为solid使用使用border-width和和border-style属性属性20常用的样式属性常用的样式属性.textBorderborder-width:1px;border-style:solid; 名字：名字： 密码：密码： 查看源代码查看源代码文本框为文本框为实线边框实线边框边框宽度边框宽度为为1像素像素看看没有设置样式的文本框的效果看看没有设置样式的文本框的效果21常用的样式属性常用的样式属性特殊样式（超连接）特殊样式（超连接）
14、a:link color: #FF0000 /* 未被访问的链接未被访问的链接 红色红色 */a:visited color: #00FF00 /* 已被访问过的链接已被访问过的链接 绿色绿色 */a:hover color: #FFCC00 /* 鼠标悬浮在上的链接鼠标悬浮在上的链接 橙色橙色 */a:active color: #0000FF /* 鼠标点中激活链接鼠标点中激活链接 蓝色蓝色 */ A color: blue;text-decoration: none; A:hover color: red; 诺基亚诺基亚 | 摩托罗拉摩托罗拉 联想联想 | 戴尔戴尔 查看源代码查看源代码
15、超链接文超链接文本的样式本的样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色如何编写此超如何编写此超链接样式？链接样式？22编写如下图所示效果对应的编写如下图所示效果对应的HTML代码代码小结小结2 2细边框细边框solid样式样式无下划线的无下划线的超连接样式超连接样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色练习答案练习答案 练习代码练习代码 23常用的样式属性常用的样式属性 要实现下图图片按钮的效果，该如何编写样式规则？要实现下图图片按钮的效果，该如何编写样式规则？按钮的边界、边框、按钮的边界、边框、填充值均为填充
16、值均为0px使用使用background-image、 margin、 border、padding、height、width和和font-size属性属性按钮背景图像与按钮背景图像与按钮宽度、高度按钮宽度、高度大小一样大小一样字体大小字体大小14px 综合例子：制作图片按钮综合例子：制作图片按钮24常用的样式属性常用的样式属性查看源代码查看源代码.picButton background-image: url(images/back.jpg); border:0 px; margin: 0px; padding: 0px; height: 23px; width: 82px; font-si
17、ze: 14px; .背景图像为背景图像为images文件夹文件夹下的下的back.jpg按钮的边界、边框、按钮的边界、边框、填充均为填充均为0像素像素设定按钮宽度、高设定按钮宽度、高度和图片大小一样度和图片大小一样设置按钮上的字设置按钮上的字体大小为体大小为14像素像素25样式表的三类应用方式样式表的三类应用方式内嵌样式表内嵌样式表内嵌样式表使用格式如下：内嵌样式表使用格式如下：行内（嵌入）样式表行内（嵌入）样式表外部样式表文件外部样式表文件 样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内嵌样式。，这时应采用内嵌样式。
18、26内嵌样式表内嵌样式表P font-family:隶书隶书; font-size:18px; color:#FF0000;床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。查看源代码查看源代码样式规则样式规则所有的段落都采用所有的段落都采用 P 样式，保证样式统一样式，保证样式统一选择符选择符样式表样式表27行内（嵌入）样式表行内（嵌入）样式表 如果希望某段文字和其他段落文字显示风格不一样，如果希望某段文字和其他段落文字显示风格不一样， 该如何解决？该如何解决？ 使用行内（嵌入）样式表可以解决使用行内（嵌入）样式表可以解决28行内（嵌入）样式表行
19、内（嵌入）样式表设置属性设置属性 这个段落应用了样式这个段落应用了样式这个段落按默认样式显示这个段落按默认样式显示为标签为标签p指指定样式定样式查看源代码查看源代码本段本段标签采标签采用了行内样式用了行内样式29行内（嵌入）样式表行内（嵌入）样式表静夜思静夜思作者：李白作者：李白 床前明月光，床前明月光，疑是地上霜。疑是地上霜。我是郭德刚，我是郭德刚，低头思故乡。低头思故乡。查看源代码查看源代码行内样式使用范围更小，只适用于行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用某一个标签，对其他标签不起作用本段本段标签采标签采用了行内样式用了行内样式30外部样式表文件外部样式表文件 如果
20、希望一个网站中多个页面的样式保持一致，如果希望一个网站中多个页面的样式保持一致， 如何解决？如何解决？使用外部样式表文件样式表可以解决使用外部样式表文件样式表可以解决31外部样式表文件外部样式表文件根据样式文件与网页的关联方式又分为：根据样式文件与网页的关联方式又分为：链接（链接（LINK ）外部样式表）外部样式表导入（导入（import）外部样式表）外部样式表样式文件样式文件.css网页网页2网页网页3网页网页132链接（链接（LINK ）外部样式表）外部样式表使用使用LINK（链接）标签（链接）标签 :第一步：创建样式表文件第一步：创建样式表文件newstyle.css 第二步：把样式文件
21、和网页绑定第二步：把样式文件和网页绑定第三步：浏览查看各网页第三步：浏览查看各网页样式文件：样式文件：newstyle.css Link_Outcss1.htmlLink_Outcss2.html 演示示例演示示例3 3：使用外部样式表使用外部样式表1 1 使用外部样式表使用外部样式表2 2引入的样引入的样式文件式文件33导入（导入（import）外部样式表）外部样式表使用使用import导入导入 ，语法：，语法： import newstyle.css;引入样式表文件引入样式表文件演示示例演示示例4 4：使用外部样式表使用外部样式表1 1 使用外部样式表使用外部样式表2 234总结总结方框属性有哪些常用属性？并分别说明其含义？方框属性有哪些常用属性？并分别说明其含义？超链接样式有哪几种？超链接样式有哪几种？内嵌样式表、行内样式表、外部样式表文件分别适用内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？什么场合？35
