网页设计css样式_第1页
网页设计css样式_第2页
网页设计css样式_第3页
网页设计css样式_第4页
网页设计css样式_第5页
已阅读5页，还剩30页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

章CSS样式表2021/5/91回顾表单中提交数据的方法有那两种及其区别？创建一个登录界面需要哪些表单元素？target属性取值可以为哪些及其含义？2021/5/92预习检查简述样式表的基本结构？常用的样式属性有哪些？2021/5/93本章任务美化“宝贝分类”页面制作并美化“注册”页面2021/5/94会创建统一外观的字体文本会创建无下划线的超连接样式会创建个性化的表格会创建个性化的表单本章目标2021/5/95为什么需要CSS样式表演示示例1：演示能换皮肤的页面HTML标签的外观样式比较单一颜色只有黑白字体类型和大小无变化样式表的作用相当于华丽的衣服内容相同外观不同2021/5/96为什么需要CSS样式表样式表能实现内容与样式的分离，方便团队开发程序员写代码美工做样式内容与样式和谐统一的完整网页2021/5/97样式表的基本语法样式表的基本结构<STYLEtype="text/css"> P{color:red;

font-size:30px;

font-family:隶书;} ……</STYLE>声明文档样式表结束文档样式表开始，类型为CSS样式样式规则选择器样式规则

P{color:red;font-size:30px;font-family:隶书;}属性属性的值2021/5/98样式表的基本语法<HTML><HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">P{color:red;font-family:"隶书";font-size:24px;}</STYLE></HEAD><BODY><H2>静夜思</H2><P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德刚，</P><P>低头思故乡。</P></BODY></HTML>查看源代码本页面中所有的P标签都应用了此样式所有的段落都采用P样式，保证风格统一用分号隔开选择器如何编写此样式?字体类型为律书、大小24px2021/5/99 <STYLEtype="text/css">.red{color:red;font-family:"隶书";font-size:24px;}

…… </STYLE>样式表的基本语法如果希望其他的标签也能采用P标签的样式，怎么办？其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。类样式(class).类名样式规则2021/5/910样式表的基本语法<HEAD><TITLE>样式规则</TITLE><STYLEtype="text/css">.red{color:red;font-family:"隶书";}</STYLE></HEAD><BODY><H2class="red">静夜思</H2><Pclass="red">床前明月光，</P><Pclass="red">疑是地上霜。</P><P>我是郭德刚，</P><Pclass="red">低头思故乡。</P></BODY>查看源代码CLASS类选择器为类选择器定义的样式规则应用类选择器class＝”类名“<H2>和<P>标签要应用同一样式如何实现这样的样式效果？字体类型都为隶书2021/5/911常用的样式属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用font-size、font-family、color实现宋体，字体大小12px字体大小16px要实现如下图所示的文本样式，该如何编写？2021/5/912常用的样式属性<STYLEtype="text/css">P{font-size:12px; font-family:"宋体"; text-align:left;}.bigFont

{font-size:16px; color:red;}</STYLE></HEAD><BODY>【新闻】[设搜狐为首页]9月1日<Pclass="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P><P>·我国实施不安全食品召回制度遏制非法出口</P>…..查看源代码声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝”类名“2021/5/913小结1编写如下图所示效果对应的HTML代码练习答案黑体，字体大小20px字体大小14px，蓝色练习代码2021/5/914常用的样式属性背景属性背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y演示示例2：使用不同的背景属性<STYLEtype="text/css"> ……table{ background-image:url(images/type_back1.jpg);

background-repeat:no-repeat;

}</STYLE> ……设置背景图像为images文件夹下的type_back1.jpg设置背景图像不平铺2021/5/915常用的样式属性方框属性margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界marginborderpaddingborder-width边框的宽度padding-left左填充padding-bottom下填充2021/5/916常用的样式属性属性CSS名称说明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离方框属性2021/5/917常用的样式属性

要实现下图所示的效果，该如何编写样式规则？线宽2px、虚线框样式dashed、颜色为red使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现行的背景色为yellow2021/5/918常用的样式属性<STYLEtype="text/css">.tableBorder{ border-right-width:3px; border-right-color:red;

border-right-style:dashed; padding-top:20px;

padding-left:10px; }TR{background:yellow;}<TABLE><TR><TDclass="tableBorder">手机冲值</TD><TDclass="tableBorder">电子彩票</TD></TR>……查看源代码设置单元格右边框宽度为3像素设置单元格右边框为虚线框设置单元格里文字与左边框的距离为10像素表格行的背景色2021/5/919

要实现下图细边框的效果，该如何编写样式规则？常用的样式属性文本框宽度为1px,边框样式为solid使用border-width和border-style属性2021/5/920常用的样式属性<STYLEtype="text/css">.textBorder{border-width:1px;border-style:solid;

}</STYLE>……<FORMname="form1"method="post"action=""><P>名字：

<INPUTname="fname"type="text"class="textBorder"></P><P>密码：

<INPUTname="pass"type="password"class="textBorder"size="21"></P></FORM>……查看源代码文本框为实线边框边框宽度为1像素看看没有设置样式的文本框的效果2021/5/921常用的样式属性特殊样式（超连接）a:link{color:#FF0000}/*未被访问的链接红色*/a:visited{color:#00FF00}/*已被访问过的链接绿色*/a:hover{color:#FFCC00}/*鼠标悬浮在上的链接橙色*/a:active{color:#0000FF}/*鼠标点中激活链接蓝色*/<STYLEtype="text/css">A{ color:blue; text-decoration:none; }A:hover{ color:red; }</STYLE>……<TR><TD><Ahref="#">诺基亚</A>|<Ahref="#">摩托罗拉</A></TD><TD><Ahref="#">联想</A>|<Ahref="#">戴尔</A></TD></TR>……查看源代码超链接文本的样式鼠标在超链接上悬停时，超链接文本变为红色如何编写此超链接样式？2021/5/922编写如下图所示效果对应的HTML代码小结2细边框solid样式无下划线的超连接样式鼠标在超链接上悬停时，超链接文本变为红色练习答案练习代码2021/5/923常用的样式属性

要实现下图图片按钮的效果，该如何编写样式规则？按钮的边界、边框、填充值均为0px使用background-image、margin、border、padding、height、width和font-size属性按钮背景图像与按钮宽度、高度大小一样字体大小14px

综合例子：制作图片按钮2021/5/924常用的样式属性查看源代码.picButton{background-image:url(images/back.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;

font-size:14px; }……<INPUTname="Rt1"type="reset"class="picButton"value="重填"><INPUTname="Bt1"type="submit"class="picButton"value="提交">…….背景图像为images文件夹下的back.jpg按钮的边界、边框、填充均为0像素设定按钮宽度、高度和图片大小一样设置按钮上的字体大小为14像素2021/5/925样式表的三类应用方式内嵌样式表内嵌样式表使用格式如下：行内（嵌入）样式表外部样式表文件<HEAD>

<STYLEtype="text/css">

样式规则

</STYLE></HEAD>如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。2021/5/926内嵌样式表<STYLEtype="text/css">P{font-family:"隶书";font-size:18px;color:#FF0000;}</STYLE></HEAD>……<P>床前明月光，</P><P>疑是地上霜。</P><P>我是郭德刚，</P><P>低头思故乡。</P>……查看源代码样式规则所有的段落都采用P

样式，保证样式统一选择符样式表2021/5/927行内（嵌入）样式表

如果希望某段文字和其他段落文字显示风格不一样，该如何解决？

使用行内（嵌入）样式表可以解决2021/5/928行内（嵌入）样式表<HTML><HEAD><TITLE>设置属性</TITLE></HEAD><BODY><Pstyle="color:red;font-size:30px;font-family:隶书;">这个段落应用了样式<P>这个段落按默认样式显示</BODY></HTML>为标签p指定样式查看源代码本段<P>标签采用了行内样式2021/5/929行内（嵌入）样式表<BODYstyle="background-color:#CCCCCC"><P><IMGsrc="libai.jpg"width="140"height="170"align="left"></P><H2>静夜思</H2><H3>作者：李白</H3>

<Pstyle="color:#FF0000;font-size:18px;font-family:隶书;border-bottom-style:dashed">

床前明月光，<BR>

疑是地上霜。<BR>

我是郭德刚，<BR>

低头思故乡。</P>查看源代码行内样式使用范围更小，只适用于某一个标签，对其他标签不起作用本段<P>

人人文库> 全部分类> 应用文书 > 研究报告

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论