返回
网页设计css样式.ppt

网页设计css样式.ppt

ID：52116820

大小：1.92 MB

页数：35页

时间：2020-03-31

上传者：简单2019
网页设计css样式.ppt_第1页
网页设计css样式.ppt_第2页
网页设计css样式.ppt_第3页
网页设计css样式.ppt_第4页
网页设计css样式.ppt_第5页
资源描述：

《网页设计css样式.ppt》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

第四章CSS样式表 回顾表单中提交数据的方法有那两种及其区别？创建一个登录界面需要哪些表单元素？target属性取值可以为哪些及其含义？2 预习检查简述样式表的基本结构？常用的样式属性有哪些？3 本章任务美化“宝贝分类”页面制作并美化“注册”页面4 会创建统一外观的字体文本会创建无下划线的超连接样式会创建个性化的表格会创建个性化的表单本章目标5 为什么需要CSS样式表演示示例1：演示能换皮肤的页面HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服内容相同外观不同6 为什么需要CSS样式表样式表能实现内容与样式的分离，方便团队开发程序员写代码美工做样式内容与样式和谐统一的完整网页7 样式表的基本语法样式表的基本结构P{color:red;font-size:30px;font-family:隶书;}……声明文档样式表结束文档样式表开始，类型为CSS样式样式规则选择器样式规则P{color:red;font-size:30px;font-family:隶书;}属性属性的值8 样式表的基本语法样式规则P{color:red;font-family:"隶书";font-size:24px;}

静夜思

床前明月光，

疑是地上霜。

我是郭德刚，

低头思故乡。

查看源代码本页面中所有的P标签都应用了此样式所有的段落都采用P样式，保证风格统一用分号隔开选择器如何编写此样式?字体类型为律书、大小24px9 .red{color:red;font-family:"隶书";font-size:24px;}……样式表的基本语法如果希望其他的标签也能采用P标签的样式，怎么办？其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。类样式(class).类名样式规则10 样式表的基本语法样式规则.red{color:red;font-family:"隶书";}静夜思床前明月光，

疑是地上霜。

我是郭德刚，

低头思故乡。

查看源代码CLASS类选择器为类选择器定义的样式规则应用类选择器class＝”类名“

和

标签要应用同一样式如何实现这样的样式效果？字体类型都为隶书11 常用的样式属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用font-size、font-family、color实现宋体，字体大小12px字体大小16px要实现如下图所示的文本样式，该如何编写？12 常用的样式属性P{font-size:12px;font-family:"宋体";text-align:left;}.bigFont{font-size:16px;color:red;}【新闻】[设搜狐为首页]9月1日·世锦赛刘翔12秒95夺冠成就大满贯

·我国实施不安全食品召回制度遏制非法出口

…..查看源代码声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝”类名“13 小结1编写如下图所示效果对应的HTML代码练习答案黑体，字体大小20px字体大小14px，蓝色练习代码14 常用的样式属性背景属性背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y演示示例2：使用不同的背景属性……table{background-image:url(images/type_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 常用的样式属性属性CSS名称说明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离方框属性17 常用的样式属性要实现下图所示的效果，该如何编写样式规则？线宽2px、虚线框样式dashed、颜色为red使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现行的背景色为yellow18 常用的样式属性.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 要实现下图细边框的效果，该如何编写样式规则？常用的样式属性文本框宽度为1px,边框样式为solid使用border-width和border-style属性20 常用的样式属性.textBorder{border-width:1px;border-style:solid;}……

名字：

密码：

……查看源代码文本框为实线边框边框宽度为1像素看看没有设置样式的文本框的效果21 常用的样式属性特殊样式（超连接）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;}…………查看源代码超链接文本的样式鼠标在超链接上悬停时，超链接文本变为红色如何编写此超链接样式？22 编写如下图所示效果对应的HTML代码小结2细边框solid样式无下划线的超连接样式鼠标在超链接上悬停时，超链接文本变为红色练习答案练习代码23 常用的样式属性要实现下图图片按钮的效果，该如何编写样式规则？按钮的边界、边框、填充值均为0px使用background-image、margin、border、padding、height、width和font-size属性按钮背景图像与按钮宽度、高度大小一样字体大小14px综合例子：制作图片按钮24 常用的样式属性查看源代码.picButton{background-image:url(images/back.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}………….背景图像为images文件夹下的back.jpg按钮的边界、边框、填充均为0像素设定按钮宽度、高度和图片大小一样设置按钮上的字体大小为14像素25 样式表的三类应用方式内嵌样式表内嵌样式表使用格式如下：行内（嵌入）样式表外部样式表文件样式规则如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。26 内嵌样式表P{font-family:"隶书";font-size:18px;color:#FF0000;}……

床前明月光，

疑是地上霜。

我是郭德刚，

低头思故乡。

……查看源代码样式规则所有的段落都采用P样式，保证样式统一选择符样式表27 行内（嵌入）样式表如果希望某段文字和其他段落文字显示风格不一样，该如何解决？使用行内（嵌入）样式表可以解决28 行内（嵌入）样式表设置属性这个段落应用了样式

这个段落按默认样式显示为标签p指定样式查看源代码本段

标签采用了行内样式29 行内（嵌入）样式表

静夜思

作者：李白

床前明月光，
疑是地上霜。
我是郭德刚，
低头思故乡。

查看源代码行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用本段

标签采用了行内样式30 外部样式表文件如果希望一个网站中多个页面的样式保持一致，如何解决？使用外部样式表文件样式表可以解决31 外部样式表文件根据样式文件与网页的关联方式又分为：链接（LINK）外部样式表导入（@import）外部样式表样式文件.css网页2网页3网页1……32 链接（LINK）外部样式表使用LINK（链接）标签:第一步：创建样式表文件newstyle.css第二步：把样式文件和网页绑定第三步：浏览查看各网页样式文件：newstyle.cssLink_Outcss1.htmlLink_Outcss2.html演示示例3：使用外部样式表1使用外部样式表2引入的样式文件33 导入（@import）外部样式表使用@import导入，语法：@importnewstyle.css;引入样式表文件演示示例4：使用外部样式表1使用外部样式表234 总结方框属性有哪些常用属性？并分别说明其含义？超链接样式有哪几种？内嵌样式表、行内样式表、外部样式表文件分别适用什么场合？35

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。
最近更新
更多
大家都在看
近期热门

首页

分享

客服

关闭
诺基亚|摩托罗拉联想|戴尔