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