《Web前端技术（HTML+CSS+JavaScript）》课件_第5章 CSS选择器与常用属性.pptx

第5章CSS选择器与常用属性

学习目标123能够正确使用三种样式单实现元素效果能够正确使用元素选择器、id选择器、类选择器实现元素效果能够正确使用CSS背景及简写属性4能够正确使用CSS字体及简写属性

学习目标567能够正确使用CSS文本属性能够正确使用CSS尺寸属性能够正确使用CSS列表属性8能够正确使用CSS表格属性

本章架构★★★5.1应用CSS样式单实现元素效果5.2应用CSS选择器实现元素效果5.3应用CSS实现背景属性设置★5.4应用CSS实现字体属性设置

本章架构★★★5.5应用CSS实现字体属性设置5.6应用CSS实现尺寸属性设置5.7应用CSS实现列表属性设置★5.8应用CSS实现表格属性设置★5.9综合案例

5.1应用CSS样式单实现元素效果

5.1应用CSS样式单实现元素效果⒈CSS概述CSS（CascadingStyleSheets，英文全称），中文名称为级联样式单，也有人称其为层叠样式单。层叠就是样式可以层层叠加，可以对一个元素多次设置样式，后面定义的样式会对前面定义的样式进行重写，在浏览器中看到的效果是使用最后一次设置的样式。CSS是一种表现语言，是对网页结构语言的补充。CSS主要用于网页的风格设计。在HTML网页中加入CSS，可以使网页展现更丰富的内容。1CSS介绍

5.1应用CSS样式单实现元素效果⒉CSS历史CSS1.0版本：1996年12月发布，该版本提供了文字、颜色、位置、文本属性等基本信息。CSS2.0版本：1998年5月发布，该版本提供了比CSS1.0更强的XML和HTML文档的格式化功能。CSS2.1版本：是对CSS2.0版本的修订，纠正了CSS2.0版本中的一些错误，删除和修改了一些属性和行为，2011年成为标准。1CSS介绍

5.1应用CSS样式单实现元素效果⒈CSS概述内联样式单内联样式单将样式属性放置在HTML元素style属性中，适用于当特殊的样式需要应用到某个HTML元素。⑴语法style属性值为一组或多组属性键值对，多个属性键值对使用分号分隔。元素style=“属性1:值1;属性2:值2;…属性n:值n”/元素2CSS三种样式单的使用

5.1应用CSS样式单实现元素效果例5-1chapter05_01.html!DOCTYPEhtmlhtmlheadmetacharset=utf-8title内联样式单/title/headbody!--案例：实现将h1元素文本颜色设置为红色--!--实现方式：内联样式--h1style=color:red;测试文本/h1/body/html2CSS三种样式单的使用⑵案例本案例应用内联样式单，实现将h1元素文本颜色设置为红色。

5.1应用CSS样式单实现元素效果⒉内部样式单内部样式单将样式属性放置在head部分的style元素内，适用于当特殊的样式需要应用到某个文件。⑴语法style元素内可以有多个选择器，每个选择器内有一组或多组属性键值对。styletype=text/css选择器1{属性1:值1;属性2:值2;...属性n:值n}选择器2{属性1:值1;属性2:值2;...属性n:值n}……/style2CSS三种样式单的使用

5.1应用CSS样式单实现元素效果例5-2chapter05_02.html!DOCTYPEhtmlhtmlheadmetacharset=utf-8title内部样式单/title!--实现方式：内部样式--styletype=text/css/*元素选择器*/h1{color:red;}/style/headbody!--案例：实现将h1元素文本颜色设置为红色--h1测试文本/h1/body/html2CSS三种样式单的使用⑵案例本案例应用内部样式单，实现将h1元素文本颜色设置为红色。

5.1应用CSS样式单实现元素效果⒊外部样式单外部样式单将所有样式属性放置在单独的CSS文件内，适用于