03 CSS样式表(精品).ppt

HTML/CSSHTML/CSS基础基础CSSCSS样式表式表回顾回顾p表格的跨行与跨列的属性名是？表格的跨行与跨列的属性名是？p表格的填充与表格的填充与间距属性是什么意距属性是什么意义？p如何如何实现表格的布局？表格的布局？22023/2/2本章目标本章目标p统一一页面外面外观的字体文本的字体文本p创建特殊的超建特殊的超连接接样式式p创建个性化的表格建个性化的表格32023/2/2为什么要使用为什么要使用CSSCSS样式样式pHTMLHTML标签的的样式比式比较单一一,很很难维护p样式表的切式表的切换可以改可以改变网站整体界面网站整体界面风格格4内容相同内容相同外观不同外观不同2023/2/2为什么要使用为什么要使用CSSCSS样式样式p样式表能式表能实现内容与内容与样式的分离，方便式的分离，方便团队开开发5程序员程序员写代码写代码美工做样式美工做样式内容与样式和谐内容与样式和谐统一的完整网页统一的完整网页2023/2/2样式表的基本语法样式表的基本语法6 p color:red;font-size:30px;font-family:p color:red;font-size:30px;font-family:隶书隶书;声明文档样声明文档样式表结束式表结束文档样式表开始，文档样式表开始，类型为类型为CSSCSS样式样式样式规则样式规则选择器选择器样式规则样式规则p p colorcolor:red;:red;font-sizefont-size:30px;:30px;font-familyfont-family:隶书隶书;属性属性属性的值属性的值2023/2/2样式表的基本语法样式表的基本语法7样式规则样式规则p color:red;font-family:p color:red;font-family:隶书隶书;font-size:24px;font-size:24px;自勉自勉多少白发翁多少白发翁，蹉跎悔歧路蹉跎悔歧路。寄语少年人寄语少年人，莫将少年误莫将少年误。本页面中所有的本页面中所有的p p标签标签都应用了此样式都应用了此样式所有的段落都采用所有的段落都采用p样式，保证风格统一样式，保证风格统一用分号用分号隔开隔开选择器选择器2023/2/2选择器选择器p标签选择器器n根据根据HTMLHTML标签选择样式式应用的属性用的属性n标签名名 p类选择器器n根据根据classclass属性属性选择样式式应用的属性用的属性n .样式式类型名型名 pIDID选择器器n根据根据IDID属性属性选择样式式应用的元素用的元素n#元素元素id id 82023/2/2样式表的基本语法样式表的基本语法9问题：如果希望其他的标签也能采用问题：如果希望其他的标签也能采用P P标签的样式，怎么办？标签的样式，怎么办？解答：其他标签和解答：其他标签和p p标签应该采用相同的样式，所以要为它们标签应该采用相同的样式，所以要为它们定义一个共享样式类型。定义一个共享样式类型。类样式类样式(class)(class).red .red color:red;color:red;font-family:font-family:隶书隶书;font-size:24px;font-size:24px;.类名类名样式规则样式规则2023/2/2样式表的基本语法样式表的基本语法样式规则样式规则 .red.red color:red;color:red;font-family:font-family:隶书隶书;h2 自勉自勉p 多少白发翁多少白发翁，p 蹉跎悔歧路蹉跎悔歧路。寄语少年人寄语少年人，莫将少年误莫将少年误。CLASSCLASS类选类选择器择器应用类选择器应用类选择器class”类名类名”和和标签要应用同一样式标签要应用同一样式2023/2/2常用的文本样式属性常用的文本样式属性文本属性文本属性说说 明明font-sizefont-size字体大小字体大小font-familyfont-family字体类型字体类型font-stylefont-style字体样式字体样式colorcolor设置或检索文本的颜色设置或检索文本的颜色text-aligntext-align文本对齐文本对齐112023/2/2常用的文本样式属性常用的文本样式属性12p p font-size:12px;font-size:12px;font-family:font-family:宋体宋体;text-align:left;text-align:left;.bigFont.bigFont font-size:16px;font-size:16px;color:red;color:red;【新闻新闻】设搜狐为首页设搜狐为首页 9 9月月1 1日日 p 世锦赛刘翔世锦赛刘翔1212秒秒9595夺冠成就大满贯夺冠成就大满贯我国实施不安全食品召回制度我国实施不安全食品召回制度 遏制非法出口遏制非法出口声明声明p p标签标签样式样式声明名称为声明名称为bigFontbigFont类样式类样式,它可被多个标签共享它可被多个标签共享应用类样式用应用类样式用classclass”类名类名”2023/2/2常用的文本样式属性常用的文本样式属性文本属性文本属性说说 明明font-weightfont-weight字体粗细字体粗细line-heightline-height文字行高文字行高word-spacingword-spacing单词间距单词间距letter-spacingletter-spacing字母间距字母间距text-decorationtext-decoration文本样式文本样式132023/2/2常用的文本样式属性常用的文本样式属性 p p color:#888888;color:#888888;font-size:14px;font-size:14px;word-spacing:10px;word-spacing:10px;letter-spacing:2px;letter-spacing:2px;font-weight:700;font-weight:700;line-height:1.5;line-height:1.5;width:500px;width:500px;Abram went north out of Egypt to the southern part of Canaan Abram went north out of Egypt to the southern part of Canaan with his wife and everything he owned,and Lot went with him.with his wife and everything he owned,and Lot went with him.2023/2/2常用的背景样式属性常用的背景样式属性背景属性背景属性说说 明明background-colorbackground-color设置背景颜色设置背景颜色background-imagebackground-image设置背景图像设置背景图像background-repeatbackground-repeat设置一个指定的图像如何被重复设置一个指定的图像如何被重复可取值可取值repeat-xrepeat-x、repeatrepeat、no-no-repeatrepeat、repeat-yrepeat-152023/2/2常用的背景样式属性常用的背景样式属性16 table table background-image:url(images/type_back1.jpg);background-image:url(images/type_back1.jpg);background-repeat:no-repeat;background-repeat:no-repeat;设置背景图像为设置背景图像为imagesimages文件夹下的文件夹下的type_back1.jpgtype_back1.jpg设置背景图像不平铺设置背景图像不平铺2023/2/2方框样式属性方框样式属性17margin-rightmargin-right右边界右边界margin-leftmargin-left左边界左边界margin-topmargin-top上边界上边界margin-bottommargin-bottom下边界下边界marginmarginborderborderpaddingpaddingborder-widthborder-width边框的宽度边框的宽度padding-leftpadding-left左填充左填充padding-bottompadding-bottom下填充下填充2023/2/2常用的方框样式属性常用的方框样式属性18方框属性方框属性属属 性性CSSCSS名称名称说说 明明边界属性边界属性margin-topmargin-top设置对象的上边距设置对象的上边距margin-rightmargin-right设置对象的右边距设置对象的右边距margin-bottommargin-bottom设置对象的下边距设置对象的下边距margin-leftmargin-left设置对象的左边距设置对象的左边距边框属性边框属性border-styleborder-style设置边框的样式设置边框的样式border-widthborder-width设置边框的宽度设置边框的宽度border-colorborder-color设置边框的颜色设置边框的颜色填充属性填充属性padding-toppadding-top设置内容与上边框之间的距离设置内容与上边框之间的距离padding-rightpadding-right设置内容与右边框之间的距离设置内容与右边框之间的距离padding-bottompadding-bottom设置内容与下边框之间的距离设置内容与下边框之间的距离padding-leftpadding-left设置内容与左边框之间的距离设置内容与左边框之间的距离2023/2/2常用的方框样式属性常用的方框样式属性.tableBorder.tableBorder border-right-width:3px;border-right-width:3px;border-right-color:red;border-right-color:red;border-right-style:dashed;border-right-style:dashed;padding-top:20px;padding-top:20px;padding-left:10px;padding-left:10px;tr tr background:yellow;background:yellow;手机冲值手机冲值 电子彩票电子彩票 设置单元格右边框设置单元格右边框宽度为宽度为3 3 像素像素设置单元格右边设置单元格右边框为虚线框框为虚线框设置单元格里文字与左边设置单元格里文字与左边框的距离为框的距离为10 10 像素像素表格行的表格行的背景色背景色2023/2/2伪类伪类20 a a color:blue;color:blue;text-decoration:none;text-decoration:none;a:hover a:hover color:red;color:red;诺基亚诺基亚|摩托罗拉摩托罗拉 联想联想|戴尔戴尔超链接文超链接文本的样式本的样式鼠标在超链接上鼠标在超链接上悬停时，超链接悬停时，超链接文本变为红色文本变为红色如何编写此超如何编写此超链接样式？链接样式？2023/2/2超链接的伪类超链接的伪类21p特殊样式（超连接）特殊样式（超连接）na:link color:#FF0000a:link color:#FF0000 /*/*未被访问的链接未被访问的链接 红色红色*/na:visited color:#00FF00a:visited color:#00FF00 /*/*已被访问过的链接已被访问过的链接 绿色绿色*/na:hover color:#FFCC00a:hover color:#FFCC00 /*/*鼠标悬浮在上的链接鼠标悬浮在上的链接 橙色橙色*/na:active color:#0000FFa:active color:#0000FF /*/*鼠标点中激活链接鼠标点中激活链接 蓝色蓝色*/超链接文超链接文本的样式本的样式2023/2/2超链接的伪类超链接的伪类a:linka:link 设置超置超链接在未被接在未被访问前的前的样式。式。a:hovera:hover 设置超置超链接在其鼠接在其鼠标悬停停时的的样式。式。a:visiteda:visited 设置超置超链接在其接在其链接地址已被接地址已被访问 过时的的样式式a:activea:active 设置超置超链接在被用接在被用户激活激活(在鼠在鼠标点点 击与与释放之放之间发生的事件生的事件)时的的样式。式。222023/2/2段落的伪类段落的伪类“p:first-linep:first-line”、“p:first-leterp:first-leter”：修改所：修改所有段落第一行以及首字母有段落第一行以及首字母样式式23p:first-linep:first-line font-family:Verdana;font-family:Verdana;color:#FF9900;color:#FF9900;p:first-letterp:first-letter text-transform:uppercase;text-transform:uppercase;font-size:24px;font-size:24px;pp width:500px;width:500px;abram went north out of Egypt to the southern part of Canaan abram went north out of Egypt to the southern part of Canaan with his wife and everything he owned,and Lot went with him.with his wife and everything he owned,and Lot went with him.2023/2/2公用样式样式公用样式样式 可以将多个可以将多个选择器器设置置为相同的相同的样式，呈式，呈现一一致的外致的外观24 h1,h2,.p1 h1,h2,.p1 color:red;color:red;行知汇元行知汇元 行知汇元行知汇元 行知汇元行知汇元 2023/2/2选择部分应用样式选择部分应用样式“.p1 a.p1 a”：该样式将式将选择应用用p1p1样式的元素内的式的元素内的所有所有a a标签25 .p1 a .p1 a color:red;color:red;行知汇元行知汇元行知汇元行知汇元行知汇元行知汇元2023/2/2总结总结p样式表的用途与基本式表的用途与基本语法法p样式表的三种式表的三种选择器器p常用常用样式表属性式表属性262023/2/2