《CSS样式表》PPT课件.ppt

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

1、第四章第四章第四章第四章CSSCSS样样式表式表式表式表为什么需要为什么需要CSS样式表样式表样式表能实现内容与样式的分离，方便团队开发样式表能实现内容与样式的分离，方便团队开发程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网页什么是什么是CSS样式表样式表CSS 指层叠样式表（指层叠样式表（Cascading Style Sheets），层叠），层叠的意思是：多重样式定义被层叠为一。的意思是：多重样式定义被层叠为一。在网页制作时采用在网页制作时采用CSS技术，可以有效地对页面的布局、技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现

2、更加精确的控制。字体、颜色、背景和其它效果实现更加精确的控制。样式表的基本语法样式表的基本语法样式表的基本结构样式表的基本结构 P color:red;font-size:30px;font-family:隶书隶书;声明文档样声明文档样式表结束式表结束文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则选择器选择器样式规则样式规则 P color:red;font-size:30px;font-family:隶书隶书;属性属性属性的值属性的值 .red color:red;font-family:隶书隶书;font-size:24px;样式表的基本语法样式表的基本语

3、法如果希望其他的标签也能采用如果希望其他的标签也能采用P标签的样式，怎么办？标签的样式，怎么办？其他标签和其他标签和P标签应该采用相同的样式，所以要为它标签应该采用相同的样式，所以要为它们定义一个共享样式。们定义一个共享样式。类选择器类选择器(class).类名类名样式规则样式规则样式表的基本语法样式表的基本语法样式规则样式规则 .red color:red;font-family:隶书隶书;静夜思静夜思CLASS类类选择器选择器为类选择器定为类选择器定义的样式规则义的样式规则应用类选择器应用类选择器class”类名类名“常用的样式属性常用的样式属性文本属性文本属性文本属性文本属性说说 明明f

4、ont-size字体大小字体大小font-family字体类型字体类型font-style字体样式字体样式color设置或检索文本的颜色设置或检索文本的颜色text-align文本对齐文本对齐使用使用font-size、font-family、color实现实现 宋体，字体宋体，字体大小大小12px字体大字体大小小16px要实现如下图所示的文本样式，该如何编写？要实现如下图所示的文本样式，该如何编写？常用的样式属性常用的样式属性方框属性方框属性margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界margin

5、borderpaddingborder-width边框的宽度边框的宽度padding-left左填充左填充padding-bottom下填充下填充常用的样式属性常用的样式属性属属 性性CSS名称名称说说 明明边界属性边界属性margin-top设置对象的上边距设置对象的上边距margin-right设置对象的右边距设置对象的右边距margin-bottom设置对象的下边距设置对象的下边距margin-left设置对象的左边距设置对象的左边距边框属性边框属性border-style设置边框的样式设置边框的样式border-width设置边框的宽度设置边框的宽度border-color设置边框的颜

6、色设置边框的颜色填充属性填充属性padding-top设置内容与上边框之间的距离设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离设置内容与左边框之间的距离方框属性方框属性常用的样式属性常用的样式属性 要实现下图所示的效果，该如何编写样式规则？要实现下图所示的效果，该如何编写样式规则？线宽线宽2px、虚线框样式、虚线框样式dashed、颜色为、颜色为red使用使用background、border-right-w

7、idth、border-right-color、border-right-style、padding-top和和padding-left来实现来实现行的背景色行的背景色为为yellow常用的样式属性常用的样式属性.tableBorder border-right-width:3px;border-right-color:red;border-right-style:dashed;padding-top:20px;padding-left:10px;TR background-color:yellow;手机冲值手机冲值 电子彩票电子彩票 设置单元格右边框设置单元格右边框宽度为宽度为3像素像素设置

8、单元格右边设置单元格右边框为虚线框框为虚线框设置单元格里文字与左边设置单元格里文字与左边框的距离为框的距离为10像素像素表格行的表格行的背景色背景色 要实现下图细边框的效果，该如何编写样式规则？要实现下图细边框的效果，该如何编写样式规则？常用的样式属性常用的样式属性文本框宽度为文本框宽度为1px,边框样式为边框样式为solid使用使用border-width和和border-style属性属性常用的样式属性常用的样式属性.textBorderborder-width:1px;border-style:solid;名字：名字：密码：密码：文本框为文本框为实线边框实线边框边框宽度边框宽度为为1像素

9、像素看看没有设置样式的文本框的效果看看没有设置样式的文本框的效果常用的样式属性常用的样式属性特殊样式（超连接）特殊样式（超连接）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:re

10、d;诺基亚诺基亚|摩托罗拉摩托罗拉 联想联想|戴尔戴尔 超链接文超链接文本的样式本的样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色如何编写此超如何编写此超链接样式？链接样式？常用的样式属性常用的样式属性 要实现下图图片按钮的效果，该如何编写样式规则？要实现下图图片按钮的效果，该如何编写样式规则？按钮的边界、边框、按钮的边界、边框、填充值均为填充值均为0px使用使用background-image、margin、border、padding、height、width和和font-size属性属性按钮背景图像与按钮背景图像与按钮宽度、高度按钮宽度、高度大小一样

11、大小一样字体大小字体大小14px 综合例子：制作图片按钮综合例子：制作图片按钮样式表的三类应用方式样式表的三类应用方式内部样式表内部样式表内部样式表使用格式如下：内部样式表使用格式如下：内联样式表内联样式表外部样式表文件外部样式表文件 样式规则样式规则 如果希望本网页内的所有同类标签都采如果希望本网页内的所有同类标签都采用用统一样式统一样式，这时应采用内部样式。，这时应采用内部样式。内部样式表内部样式表P font-family:隶书隶书;font-size:18px;color:#FF0000;床前明月光，床前明月光，疑是地上霜。疑是地上霜。样式规则样式规则所有的段落都采用所有的段落都采用

12、P 样式，保证样式统一样式，保证样式统一选择符选择符样式表样式表内联样式表内联样式表 如果希望某段文字和其他段落文字显示风格不一样，如果希望某段文字和其他段落文字显示风格不一样，该如何解决？该如何解决？使用内联样式表可以解决使用内联样式表可以解决内联样式表内联样式表设置属性设置属性 这个段落应用了样式这个段落应用了样式这个段落按默认样式显示这个段落按默认样式显示为标签为标签p指指定样式定样式本段本段标签采标签采用了内联样式用了内联样式内联样式使用范围更小，只适用于内联样式使用范围更小，只适用于某一个标签，对其他标签不起作用某一个标签，对其他标签不起作用外部样式表文件外部样式表文件 如果希望一个

13、网站中多个页面的样式保持一致，如果希望一个网站中多个页面的样式保持一致，如何解决？如何解决？使用外部样式表文件样式表可以解决使用外部样式表文件样式表可以解决外部样式表文件外部样式表文件根据样式文件与网页的关联方式又分为：根据样式文件与网页的关联方式又分为：链接链接（LINK）外部样式表）外部样式表导入（导入（import）外部样式表）外部样式表样式文件样式文件.css网页网页2网页网页3网页网页1链接（链接（LINK）外部样式表）外部样式表使用使用LINK（链接）标签（链接）标签:第一步：创建样式表文件第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定第二步：把样式文

14、件和网页绑定第三步：浏览查看各网页第三步：浏览查看各网页样式文件：样式文件：newstyle.css Link_Outcss1.htmlLink_Outcss2.html 引入的样引入的样式文件式文件23外部样式文件外部样式文件样式的混合使用样式的混合使用内联样式表、内部样式表、外部样式表各有优势，实际的开发中常常内联样式表、内部样式表、外部样式表各有优势，实际的开发中常常需要混合使用：需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内部样式某些样式不同的页面，除了

15、链接外部样式文件，还需定义内部样式某张网页内，部分内容某张网页内，部分内容”与众不同与众不同“，采用内联样式，采用内联样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑内联样式表显示，如果没有，再考虑内部样式显示，如果还没有，最后采用外部样式表显示，否则就按HTML的默认样式显示；内部样式内部样式 内联样式内联样式 某个HTML标签24 层标签层标签关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 使用 Z index指定是哪一层，数值小的在下，数值大在上是块级容器标签，可以包含图片、标题、段落、文字等 图片段落topleft25 标签标签所有韩款童装10元/件起拍喽是行级容器标签，不应该包含图片、标题、段落等，只能包含文字内容