《网站前端技术》621-7（梁玲）课件 第三章 css与css3_第1页
《网站前端技术》621-7（梁玲）课件 第三章 css与css3_第2页
《网站前端技术》621-7（梁玲）课件 第三章 css与css3_第3页
《网站前端技术》621-7（梁玲）课件 第三章 css与css3_第4页
《网站前端技术》621-7（梁玲）课件 第三章 css与css3_第5页
已阅读5页，还剩265页未读， 继续免费阅读

下载本文档

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

文档简介

《网站前端技术》签到扫码下载文旌课堂APP扫码签到（2022.3.2515:00至2022.3.2515:10）签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。全课导航第1章网站建设概述第2章HTML与HTML5第3章CSS与CSS3第4章JavaScript基础第5章JQuery常用函数第6章开发者商务网站建设03PARTONE

第3章CSS与CSS301*12熟悉CSS样式的基本语法和将CSS样式引入HTML文档的四种方式。熟悉CSS的五大选择器和选择器语法，以及CSS样式中的尺寸和颜色表达方式。熟悉CSS样式中的文本控制、列表控制、多列控制属性。了解网站建设行业的优势与前景。掌握CSS盒子模型、浮动和定位布局、弹性布局、表格控制功能。掌握CSS过渡、2D/3D转换、动画控制、自适应屏幕功能。掌握CSS的相关知识，加深学生对网页制作的进一步了解，提升学生的知识储备。制作婚礼策划机构首页，实现理论与实践相结合，锻炼学生的动手能力。知识目标素质目标学习目标CSS多列控制目录CONTNETS本章导航16CSS动画控制17自适应屏幕@mediascreen18综合案例—制作婚礼策划机构首页07CSS文本控制CSS样式的引用方法0305CSS的继承性、层叠性与优先级CSS样式语法0208CSS盒子模型09CSS浮动和定位布局10CSS弹性布局（flex）11CSS表格控制12CSS列表控制1314CSS过渡152D或3D转换CSS选择器04了解CSS样式01CSS尺寸与颜色0601*01了解CSS样式01*3.1.1什么是CSS样式CSS是指层叠样式表（CascadingStyleSheets），主要用于定义如何显示HTML元素，包括设置HTML页面中文本内容的格式（字体、大小、对齐方式等）、图形图像的外形（宽高、边框、边距等）及版面布局等。CSS实现了网页结构（HTML）与样式（CSS）相分离，不仅使网页外观和布局设置更加灵活、高效，而且使网页外观更加多彩。01*CSS1是CSS的第一个标准，发布于1996年12月，包含了字体、颜色与背景、文本、盒子等相关属性，用于定义HTML元素的一些样式。此外，还包含了ID选择器、类选择器和派生选择器，用于定义希望应用样式的HTML元素。CSS2于1998年5月正式发布。CSS2是基于CSS1开发的，其包含了CSS1的所有功能，添加了一些高级属性，如浮动和定位等；还添加了一些高级选择器，如子选择器和相邻选择器等。此外，CSS2还支持多媒体样式表，使得网页设计者能够根据不同的输出设备为网页文档制定不同的表现形式。CSS3目前仍在继续开发，各主流浏览器已支持其中的绝大部分特性。CSS3除增加了更多的选择器和属性外，其最大的特点是语言模块化，其中重要的模块包括盒子模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面等。模块化的开发有助于提高代码重用率和减小最终文件的大小，以及提高开发效率和便于代码维护等。1.2.2Web前端开发方向CSS1CSS2CSS3随着CSS的广泛应用，CSS技术也越来越成熟。CSS的发展经历了3个不同的标准，即CSS1、CSS2和CSS302*02CSS样式语法02*3.2.1CSS样式基本语法CSS样式由两个主要的部分构成：选择器、一条或多条声明。设置CSS样式的具体语法规则如下：选择器{属性1:属性值1;属性2:属性值2;……}在上面的规则中，选择器用于选择需要设置样式的HTML元素；{}内部是一条或者多条声明，每条声明由一个属性和属性值组成，以键值对的形式出现。多条声明之间用英文分号“;”分隔，属性和属性值之间用英文冒号“:”分隔。图3-2-1为CSS样式的基本结构示例。图3-2-1CSS样式的基本结构示例02*3.2.1CSS样式基本语法p是CSS中的选择器名称，它指向要设置样式的HTML元素——段落标签<p>。font-weight是属性名称，bold是属性值，表示把段落文字设置为加粗。font-size也是属性名称，30px是属性值，表示把段落文字的字号设置为30px。（1）CSS样式中的选择器严格区分大小写，声明不需要区分大小写，一般习惯小写。（2）CSS样式中的属性值如果由多个单词组成且中间包含空格，则必须为该属性值加上英文的引号""。例如：p{font-family:"arealblack";}（3）CSS样式中的空格不被浏览器解析，但是属性值的数字和单位之间不允许出现空格。例如：p{font-size:20px;}此处20和px之间有空格，浏览器解析会出错。小提示02*对CSS代码进行注释，使用“/*注释语句*/”，注释文本不会显示在浏览器窗口中。在CSS中，无论多行注释还是单行注释均被“/*”“*/”包括。3.2.2CSS注释【示例3-2-1】编辑HTML文档<body>标签的内容，代码如下：<div>CSS注释</div> 在<style>标签内写入以下CSS代码： div{color:#B91720;width:800px;/*height:300px;background:red;*/}【效果】页面文本“CSS注释”，只应用了文本颜色（color:#B91720）属性和宽度属性（width:800px），没有应用高度属性（height:300px）和背景颜色属性（background:red）。03*03CSS样式的引用方法03*内部样式02引入外部样式文件03引用方法3.3

CSS样式的引用方法04导入外部样式文件内联样式（也称为行内样式）01CSS样式的引用方法03*3.3.1

内联样式内联样式：内联样式用于设置当前HTML元素的样式，只可应用一次。使用内联样式时，需要在相关HTML标签内使用style属性。style属性值可以包含任何CSS声明。【示例3-3-1】

编辑HTML文档<body>标签的内容，代码如下：<pstyle="width:100px;height:40px;background:blue;color:#FFF;">我的段落</p>【效果】设置当前段落的宽度为100px、高度为40px，背景颜色为blue，文本颜色为白色，如图3-3-1所示。图3-3-1内联样式应用效果（1）属性和属性值之间用英文标点冒号“:”隔开；多对属性之间用英文标点分号“;”隔开。（2）内联样式只能设置当前标签样式，书写烦琐，没有实现网页结构与表现的分离，不推荐大量使用。小提示03*3.3.2

内部样式内部样式：内部样式也称为内嵌式，是指将CSS样式集中写到HTML文档的<style></style>标签之间。内部样式可以放置在HTML文档的任意位置，但为了结构清晰，一般放在<head></head>标签内部。其语法格式如下：<head><styletype="text/css"> 选择器{属性1:属性值1;属性2:属性值2;……}</style></head>03*3.3.2

内部样式【示例3-3-2】在HTML文档中输入以下代码：<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>内嵌式练习</title> <styletype="text/css"> p{ width:150px; height:40px; background:black; color:#fff; } </style> </head> <body> <p>我的段落</p> </body></html><style></style>标签之间的行（7至12行）为嵌入的CSS样式代码。03*3.3.2

内部样式【效果】网页文档中<p>段落标签的宽度为150px、高度为40px，背景颜色为黑色，文字颜色为白色，如图3-3-2所示。（1）内部样式可方便地控制当前整个页面中元素的样式。（2）内部样式代码结构清晰，但是并没有真正实现网页结构与样式完全分离。小提示图3-3-2内部样式应用效果03*3.3.3

引入外部样式文件引入外部样式文件：引入外部样式文件是指将CSS样式表写入一个或者多个CSS文件中。CSS文件的扩展名为“.css”，通过<link>标签可将CSS文件链接到HTML文件中，从而使得HTML文件中的元素被CSS文件中的选择器及其样式有效控制。<link>标签的语法格式如下：<head> <linkrel="stylesheet"type="text/css"href="css文件的路径"/></head>link标签需要放在<head></head>中，并且指定三个属性：（1）href：定义所链接外部样式文件的URL，可以是相对路径或绝对路径。（2）type：定义所链接文件的类型，属性值“text/css”表示链接的外部文件为CSS样式文件。（3）rel：定义当前文件与被链接文件之间的关系，属性值“stylesheet”表示被链接的文件是一个样式文件。03*3.3.3

引入外部样式文件【示例3-3-3】HTML文档case.html中的代码如下：<!DOCTYPEhtml><htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title>

<linkrel="stylesheet"type="text/css"href="css/ex30303.css"> </head> <body> <p>我的段落</p> </body></html>03*3.3.3

引入外部样式文件相关CSS文档ex30303.css中的代码如下：p{ width:300px; height:50px; background:green; color:yellow;}【效果】网页文档中<p>段落标签的宽度为300px、高度为50px，背景颜色为绿色，文本颜色为黄色，如图3-3-3所示。图3-3-3引入外部样式文件效果（1）引入外部样式文件彻底实现了网页结构与表现的分离。（2）同一个外部样式文件可以被多个HTML文档引用，如此一来，只需要改变一个CSS文件样式表，就可以改变多个HTML文档相关元素的样式。（3）同一个HTML文档也可以引用多个外部样式文件。小提示03*3.3.4

导入外部样式文件导入外部样式文件：引导入外部样式文件与引入外部样式文件基本相同，都是创建一个单独的CSS样式文件，然后导入到HTML文档中，但在语法和运作方式上有所区别。导入外部样式是在<style>标签内，使用@import导入一个外部CSS文件。其语法格式如下：<styletype="text/css"> @importurl(css文件的路径);或者@import"css文件的路径";</style>在该语法结构中，<style>标签内可以书写其他CSS内部样式，但是@import必须位于其他样式之前。如果将【示例3-3-3】代码中的斜体部分替换为以下代码，效果相同。<styletype="text/css">

@importurl(css/ex30303.css);</style>04*04CSS选择器04*3.4CSS选择器CSS选择器用于指明样式对HTML文档中的哪些元素生效。在设计网页时，HTML文档中除个别标签使用内联样式外，都是通过不同的CSS选择器控制其样式的。CSS中有基本选择器、关系选择器、伪类选择器、伪元素选择器和属性选择器。04*3.4.1

基本选择器通配符选择器：通配符选择器用“*”号表示，作用范围最广，能匹配页面中的所有元素。其语法格式如下：*{属性1:属性值1;属性2:属性值2;……}【示例3-4-1】在HTML文档<style>标签内写入CSS通配符选择器及声明：*{margin:0；padding:0；}【效果】清除HTML文档中所有元素外边距和内边距。CSS中的基本选择器有通配符选择器、标签选择器、类选择器和id选择器。基本选择器利用通配符选择器设置的样式对页面的所有标签生效，而不管标签是否需要该样式，反而降低了代码的执行速度，因此在实际开发中并不常用。即使使用，也放在文档的最开始，作为优先级较低的声明。小提示04*3.4.1

基本选择器标签选择器：标签选择器是指用HTML标签名称作为选择器，以便为页面中某一类标签指定统一的CSS样式。其语法格式如下：标签名{属性1:属性值1;属性2:属性值2;……}【示例3-4-2】编辑HTML文档<body>标签的内容，代码如下：<ahref="">百度</a><ahref="">新浪</a><ahref="">hao123</a>在HTML文档的<style>标签内写入CSS标签选择器及声明：a{textdecoration:none;color:#666;}【效果】

图3-4-1设置<a>标签样式前的效果图3-4-2设置<a>标签样式后的效果04*3.4.1

基本选择器类选择器：标签选择器是指用HTML标签名称作为选择器，以便为页面中某一类标签指定统一的CSS样式。其语法格式如下：标签名{属性1:属性值1;属性2:属性值2;……}其中，类名为HTML元素的class属性值，需要事先定义。class属性的语法格式为：class="value"“value”为类名。当需要为一个标签设置多个类时，使用空格分隔类名。【示例3-4-3】编辑HTML文档<body>标签的内容，代码如下：<p>我是楷体的文字</p><pclass="red">我是红色楷体的文字</p><h2class="red">我也是红色的</h2><pclass="redfont30">我是红色30号的文字</p>04*3.4.1

基本选择器在HTML文档<style>标签内写入CSS选择器和声明：p{font-family:'楷体';}.red{color:red;}.font30{font-size:30px;}【效果】第一个段落<p>标签内容为楷体，颜色为默认的黑色；第二个段落<p>、二级标题<h2>标签内容均为红色；第三个段落不仅为红色，而且字号为30px，如图3-4-3所示。图3-4-3类选择器应用效果（1）上述示例中，通过标签选择器为所有段落标签<p>设置了楷体字体；为第二个段落<p>和二级标题<h2>标签定义了类名“red”，通过该类选择器将文字设置为红色；为第三个段落<p>标签同时定义了“red”和“font300”两个类名，设置了多个样式。（2）类名的第一个字符不能使用数字，并且类名严格区分大小写，一般习惯小写。小提示04*3.4.1

基本选择器id选择器：id选择器用于为设置了id名的HTML元素定义单独的样式。id选择器使用“#”表示，后面紧跟id名。其语法格式如下：#id名{属性1:属性值1;属性2:属性值2;……}id名为HTML元素的id属性值，大多数HTML元素都可以定义id属性。与class属性不同的是，HTML元素的id属性值是唯一的，只能对应文档中的某个具体元素。【示例3-4-4】编辑HTML文档<body>标签的内容，代码如下：<ahref=""id="green">百度</a><ahref="">新浪</a><ahref="">hao123</a>在HTML文档<style>标签内写入CSS选择器和声明：a{text-decoration:none; color:#666;}#green{color:green;}04*3.4.1

基本选择器【效果】“百度”文字颜色为id选择器“green”定义的“绿色”，其他文字颜色取决于标签选择器a，颜色为“#666”，如图3-4-4所示。（1）同一个id属性值不能应用于多个HTML标签。否则，虽然设置的样式可以显示，但是在后期用JavaScript等语言调用id属性指定元素时会出错。（2）同一个HTML标签不能使用多个id属性值。小提示图3-4-4id选择器应用效果04*3.4.2

关系选择器后代选择器：后代选择器又称为包含选择器，可以选择HTML父元素里面的子元素。其写法就是把外层元素写在前面，内层元素写在后面，中间用空格分隔。当元素发生嵌套时，内层元素就成为外层元素的后代。其语法格式如下：元素1元素2{样式声明}上述选择器用于定义元素1里面所有元素2的样式。关系选择器也称复合选择器、派生选择器，是建立在基本选择器之上，由两个或多个基本选择器通过不同的方式组合而成的。利用关系选择器可以更准确、更高效地选择目标元素。常用的关系选择器有后代选择器、子代选择器、标签指定式选择器、并集选择器等。关系选择器04*3.4.2

关系选择器【示例3-4-5】

编辑HTML文档<body>标签的内容，代码如下：<div> <p>亲儿子为蓝色</p> <section><p>孙子也为蓝色</p></section></div><p>兄弟为红色</p>在HTML文档<style>标签内写入CSS选择器：p{color:red;}divp{color:blue;}【效果】<div>内的所有<p>元素为蓝色，其他<p>元素为红色，如图3-4-5所示。图3-4-5后代选择器应用效果（1）元素1和元素2中间用空格隔开。（2）元素1是父级，元素2是子级，最终选择的是元素2。（3）元素2可以是第一层子元素，也可以是多层子元素，只要是元素1的后代即可。（4）元素1和元素2可以是任意基础选择器（类、标签、通配符、id）。小提示04*3.4.2

关系选择器子代选择器：子代选择器只能选择作为某元素的最近一级子元素，简单理解就是选“亲儿子”元素。其语法格式如下：元素1>元素2{样式声明}上述选择器用于定义元素1里面所有直接子元素——元素2的样式。【示例3-4-6】

编辑HTML文档<body>标签的内容，代码如下：<divid="father"> <p>我是father的子元素，我是蓝色的</p> <divid="son">

<p>我是father的孙子辈，我是红色的</p> </div></div><p>我是father的兄弟，我是红色的</p>在HTML文档<style>标签内写入CSS选择器：p{color:red;}#father>p{color:blue;}04*3.4.2

关系选择器【效果】只有#father包含的最近一层元素文字颜色为蓝色；其他段落文字为红色，效果如图3-4-6所示。小提示（1）元素1和元素2中间用大于号隔开。（2）元素1是父级，元素2是子级，最终选择的是元素2。元素2必须是第一层子元素。图3-4-6子代选择器应用效果04*3.4.2

关系选择器标签指定式选择器：标签指定式选择器又叫交集选择器，是由两个选择器直接连接构成的，其中第一个必须是标签选择器，第二个必须是类选择器或者id选择器。这两个选择器之间不能有空格，必须连续书写。其语法格式如下：标签+类|id选择器{样式声明}【示例3-4-7】编辑HTML文档<body>标签的内容，代码如下：<div>普通文字是红色的</div><div

class="clr">div标签指定了clr样式，是紫色的</div><h3class="clr">h3指定了clr样式，是蓝色的。</h3>在HTML文档<style>标签内写入CSS选择器：div{color:red;}.clr{color:blue;}div.clr{color:purple;}04*3.4.2

关系选择器【效果】只有第二行文字变为紫色，如图3-4-7所示。小提示div.clr选择器仅应用于<divclass="clr">，而不会影响使用了.clr的其他标签的效果。图3-4-7标签指定式选择器应用效果04*3.4.2

关系选择器并集选择器：并集选择器也叫群选择器，是由多个选择器通过逗号连接在一起的，任何形式的选择器都可以作为并集选择器的一部分。并集选择器允许同时为多个选择器应用同一种样式。在声明各种CSS选择器时，如果某些选择器的风格完全相同或部分相同，便可以利用并集选择器同时声明这些选择器。其语法格式如下：元素1,元素2{样式声明}【示例3-4-8】编辑HTML文档<body>标签的内容，代码如下：<h1>CSS并集选择器</h1><h2class="two">示例标题h2</h2><h3>示例标题h3</h3><p>示例文本p1</p><pclass="two">示例文本p2</p><pid="one">示例文本p3</p>04*3.4.2

关系选择器【效果】使用并集选择器控制<h2><h3><p>标签的文字颜色为紫色、字号为24px；使用并集选择器为“示例标题h2”“示例文本p2”“示例文本p3”添加了下划线，如图3-4-8所示。在HTML文档<style>标签内写入CSS选择器：h2,h3,p{color:purple; font-size:24px;}#one,h2.two,.two{ text-decoration:underline;}图3-4-8并集选择器应用效果04*3.4.2

关系选择器兄弟选择器：兄弟选择器用来选择与某元素位于同一个父元素中，且位于该元素之后的同级元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。（1）临近兄弟选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用临近兄弟选择器。临近兄弟选择器用“+”连接。其语法格式如下：元素1+元素2{样式声明}【示例3-4-9】编辑HTML文档<body>标签的内容，代码如下：<h2>动画世界</h2><h1>小猪佩奇</h1><h2>大头儿子</h2><h1>小头爸爸</h1><p>熊大</p><h2>熊二</h2>04*3.4.2

关系选择器【效果】“h1+h2”选择器选中紧邻<h1>标签的<h2>标签，即“大头儿子”，文字为斜体，如图3-4-9所示。在HTML文档<style>标签内写入CSS选择器：h1+h2{font-style:italic;}图3-4-9临近兄弟选择器应用效果04*3.4.2

关系选择器【示例3-4-10】在【示例3-4-9】中将“h1+h2”选择器修改为“h1~h2”，即：h1~h2{font-style:italic;}【效果】<h1>之后所有的<h2>，即“大头儿子”和“熊二”文字样式均为斜体，如图3-4-10所示。图3-4-10普通兄弟选择器应用效果04*3.4.3

伪类选择器链接伪类选择器：为了提高用户体验，一般需要为超链接的不同状态设置不同的样式。在CSS样式中，使用链接伪类选择器就可以实现这一效果。超链接<a>的伪类有以下四种：（1）a:link：选择所有未被访问的超链接。（2）a:visited：选择所有已被访问的超链接。（3）a:hover：选择鼠标指针悬停在其上的超链接。（4）a:active：选择活动超链接，即鼠标按下但未弹起时的超链接。伪类选择器简称伪类，用于选择元素的特殊状态，如鼠标指针悬停、按下等；或根据HTML文档结构选择元素。伪类选择器通常由标签、类或id名加“:”构成。04*3.4.3

伪类选择器【示例3-4-11】编辑HTML文档<body>标签的内容，代码如下：<ahref="">天猫购物</a><ahref="">未来商城</a>在HTML文档<style>标签内写入CSS选择器：a:link{color:red; text-decoration:none;}a:visited{color:saddlebrown;}a:hover{color:skyblue;}a:active{color:green;}04*3.4.3

伪类选择器【效果】未访问过的超链接为红色，无下划线，如图3-4-11（a）所示；当鼠标指针移至超链接上时，文本变为天蓝色，如图3-4-11（b）所示；当鼠标单击超链接不松开时，文本变为绿色，如图3-4-11（c）所示；访问过超链接后，文本变为棕色，如图3-4-11（d）所示。

（a）（b）（c）（d）小提示（1）链接伪类选择器需要按以下顺序声明才能生效：link，visited，hover，active。（2）实际开发中，a:link和a:hover选择器用得比较多。（3）CSS3允许伪类控制子元素的属性设置。04*3.4.3

伪类选择器结构伪类选择器：结构伪类选择器主要根据HTML文档结构来选择元素，如选择某父元素下的第n个子元素。常见的结构伪类选择器如表3-4-1所示（“E”为标签、类或id名）。表3-4-1结构伪类元素表选择器说明CSS版本E:first-child选择父元素的第一个子元素2E:last-child选择父元素的最后一个子元素3E:nth-child(n)选择父元素下的第n个元素或奇偶元素3E:only-child选择父元素中唯一的子元素（该父元素只有一个子元素）3E:first-of-type选择同类型的第1个同级兄弟元素3E:last-of-type选择同类型的最后1个同级兄弟元素3E:nth-of-type(n)选择同类型的第n个同级兄弟元素3E:nth-last-of-type(n)选择同类型的倒数第n个同级兄弟元素3E:only-of-type选择父元素中特定类型的唯一子元素（该父元素有多个子元素）304*3.4.3

伪类选择器续表3-4-1结构伪类元素表选择器说明CSS版本:root选择文档的根元素。在HTML中，根元素永远是HTML3E:not(selector)选择某个元素之外的所有元素3E:empty选择一个不包含任何子元素的元素。文本节点也被看成子元素3E:target选取页面中的某个target元素3（1）E:first-child选择器和E:last-child选择器。E:first-child选择器和E:last-child选择器分别用于选择某个父元素的子元素中符合条件的第一个和最后一个子元素。04*3.4.3

伪类选择器【示例3-4-12】

编辑HTML文档<body>标签的内容，代码如下：<ulclass="menu"<li><ahref="#">公司介绍</a></li><li><ahref="#">产品中心</a></li><li><ahref="#">新闻动态</a></li></ul>在HTML文档<style>标签内写入CSS选择器：a{text-decoration:none;color:#fff;}.menuli{list-style:none; float:left; margin-left:10px; background-color:red; width:150px;04*3.4.3

伪类选择器text-align:center; height:40px; line-height:40px;}.menuli:first-child{border-top-left-radius:10px;}.menuli:last-child{border-top-right-radius:10px;}【效果】通过.menuli选中菜单中的所有li元素并设置位置、大小和颜色等效果；通过.menuli:first-child和.menuli:last-child分别选中菜单中的第一个和最后一个li元素并设置相应的圆角样式，如图3-4-12所示。图3-4-12E:first-child和E:last-child应用效果04*3.4.3

伪类选择器（2）E:nth-child(n)选择器。用于选择某个父元素的一个或多个特定的子元素。参数n可以是数字、公式或关键字。①数字：可以是任何大于0的正整数。例如，.menuli:nth-child(2)，表示选择class为menu的父元素的第2个li子元素。②公式：格式为(an+b)。其中，a表示周期长度，n是计数器（从0开始），b是偏移值。例如：:nth-child(n+4)表示选取序号大于等于4的子元素；:nth-child(-n+4)表示选取序号小于等于4的子元素。:nth-child(2n)表示选取序号为偶数的子元素；:nth-child(2n+1)表示选取序号为奇数的子元素。:nth-child(3n)表示选取序号为3、6、9……的子元素（即“隔二选一”）。:nth-child(3n+1)表示选取序号为1、4、7、10……的子元素。③关键字：包括odd和even两个关键字。odd表示选取序号为奇数的子元素，效果等同于:nth-child(2n+1)。even表示选取序号为偶数的子元素，效果等同于:nth-child(2n)。

04*3.4.3

伪类选择器

【示例3-4-13】编辑HTML文档<body>标签的内容，代码如下：<ulclass="menu"> <li><ahref="#">公司介绍</a></li> <li><ahref="#">产品中心</a></li> <li><ahref="#">新闻动态</a></li> <li><ahref="#">与我联系</a></li> <li><ahref="#">关于我们</a></li></ul>在HTML文档<style>标签内写入CSS选择器：a{text-decoration:none;color:#fff;}.menuli{list-style:none; float:left; margin-left:10px; background-color:red;04*3.4.3

伪类选择器

width:150px;text-align:center;height:40px;line-height:40px;}.menuli:nth-child(2n){border-radius:10px;}【效果】通过.menuli:nth-child(2n)选中菜单中的第二和第四个元素，并设置半径为10px的圆角，效果如图3-4-13所示。图3-4-13E:nth-child(n)应用效果04*3.4.3

伪类选择器（3）E:only-child选择器。用于选择父元素中唯一的子元素（该父元素只有一个子元素）。

【示例3-4-14】

编辑HTML文档<body>标签的内容，代码如下：<div> <p>这是一个段落。</p></div><div> <h3>这是一个标题。</h3> <p>这是一个段落。</p></div>在HTML文档<style>标签内写入CSS选择器：p:only-child{background:#ff0000;}04*3.4.3

伪类选择器

【效果】第一行段落背景为红色，如图3-4-14所示。图3-4-14E:only-child应用效果小提示上述示例中，选择器p:only-child选中<div>标签中的唯一一个<p>标签。第三行段落虽然为<p>标签，但其不是<div>标签的唯一子元素，所以没应用红色背景。04*3.4.3

伪类选择器（4）E:first-of-type选择器和E:last-of-type选择器。这两个选择器用于匹配父元素下使用同种标签的第一个子元素和最后一个子元素。与E:first-child、E:last-child不一样的是，这两个选择器强调的是同种标签的第一个或最后一个，也就是先找出所有的E元素再找到第一个或最后一个。

【示例3-4-15】编辑HTML文档<body>标签的内容，代码如下：<section><p>光头强</p><div>熊大</div><p>小猪佩奇</p><div>熊二</div></section>在HTML文档<style>标签内写入CSS选择器：div:first-of-type{font-weight:bold;}p:last-of-type{font-style:italic;}04*3.4.3

伪类选择器

【效果】选择器div:first-of-type选中<section>标签中的第一个<div>子标签，控制“熊大”文字为加粗；选择器p:last-of-type选中<section>标签中的最后一个<p>子标签，控制“小猪佩奇”文字为斜体，如图3-4-15所示。图3-4-15E:first-of-type和E:last-of-type应用效果04*3.4.3

伪类选择器（5）E:nth-of-type(n)选择器和E:nth-last-of-type(n)选择器。E:nth-of-type(n)用于匹配同种标签的第n个子元素。它的原理和E:first-of-type一样，如E:first-of-type等同于E:nth-of-type(1)。E:nth-last-of-type(n)用于匹配同种标签的倒数第n个子元素。它的原理和E:last-of-type一样，如E:last-of-type等同于:nth-last-of-type(1)。E:nth-child(n)和E:nth-of-type(n)都能选择子元素，它们的区别是E:nth-child(n)是把所有子元素作为选择对象，选择其中的第n个子元素，且这个子元素的类型必须是E，如果不是，则选择失败；而E:nth-of-type(n)则先把类型为E的所有子元素选择出来，从1开始编号，然后把这些子元素作为选择对象，选择其中的第n个。

04*3.4.3

伪类选择器【示例3-4-16】

编辑HTML文档<body>标签的内容，代码如下：<div> <ulclass="demo"> <p>zero</p> <li>one</li> <li>two</li> </ul></div>在HTML文档<style>标签内写入CSS选择器：.demoli:nth-child(2){background:yellow;}.demoli:nth-of-type(2){color:red;}

04*3.4.3

伪类选择器【效果】<li>one</li>元素的背景颜色为黄色；<li>two</li>元素的文本颜色为红色，如图3-4-16所示。

图3-4-16E:nth-child(n)和E:nth-of-type(n)选择器应用对比小提示（1）.demoli:nth-child(2)是从.demo的所有子元素中找第二个子元素，且第二个子元素的类型必须是li，即<li>one</li>。（2）.demoli:nth-of-type(2)是先把.demo的所有类型为li的子元素找出来，然后选择其中的第2个，即<li>two</li>。04*3.4.3

伪类选择器（6）E:only-of-type选择器。E:only-of-type用于选择父元素中特定类型的唯一子元素（该父元素可有多个子元素）。

【示例3-4-17】编辑HTML文档<body>标签的内容，代码如下：<div> <p>这是一个段落。</p></div><div> <h3>这是一个段落。</h3> <p>这是一个段落。</p></div>在HTML文档<style>标签内写入CSS选择器：p:only-of-type{background:#ff0000;}【效果】通过p:only-of-type指定属于父元素<div>的特定类型的唯一子元素<p>，设置背景颜色为红色，如图3-4-17所示。

图3-4-17E:only-of-type应用效果04*3.4.3

伪类选择器（7）:root选择器。:root选择器用于匹配文档根元素。在HTML中，根元素始终是html元素。在网页设计中，如果使用:root设置了样式，将对所有页面元素都生效。

【示例3-4-18】编辑HTML文档<body>标签的内容，代码如下：<h1>这是标题</h1><p>第一个段落。</p><h3>这是三级标题</h3>在HTML文档<style>标签内写入CSS选择器：:root{font-style:italic;}【效果】:root选择了根元素，所以网页中所有的文字均被定义为斜体，如图3-4-18所示。

图3-4-18:root应用效果04*3.4.3

伪类选择器（8）E:not选择器。在网页中使用E:not选择器可以排除网页中的某类元素。

【示例3-4-19】编辑HTML文档<body>标签的内容，代码如下：<h1>这是标题</h1><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是div元素中的文本。</div>在HTML文档<style>标签内写入CSS选择器：p{color:red;}:not(p){color:blue;}【效果】p选择器将<p>元素颜色设为红色；:not(p)选择器选中<p>元素之外的其他元素，将颜色设置为蓝色，如图3-4-19所示。图3-4-19E:not应用效果04*3.4.3

伪类选择器（9）E:empty选择器。在CSS3中，E:empty选择器用于选择不包含任何子元素或内容的元素，即选择内容为空白的元素。

【示例3-4-20】编辑HTML文档<body>标签的内容，代码如下：<table> <tr><td>2</td><td>4</td><td>8</td></tr> <tr><td>16</td><td>32</td><td>64</td></tr> <tr><td>128</td><td>256</td><td></td></tr></table>在HTML文档<style>标签内写入CSS选择器：table,tr,td{border:1pxsolidsilver;}td{width:50px;height:50px;line-height:50px;04*3.4.3

伪类选择器

text-align:center;background-color:#ffff00;}td:empty{background-color:greenyellow;}【效果】td:empty选中空元素<td>，设置背景颜色为黄绿色，如图3-4-20所示。图3-4-20E:empty选择器应用效果04*3.4.3

伪类选择器（10）E:target选择器。E:target选择器可用于选取当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到target元素后，E:target所设置的样式才会起作用。

【示例3-4-21】编辑HTML文档<body>标签的内容，代码如下：<ahref="#pink">粉色</a><ahref="#red">红色</a><br><divid="pink"></div><divid="red"></div>在HTML文档<style>标签内写入CSS选择器：div{float:left;}#pink{width:180px; height:100px; background-color:pink}04*3.4.3

伪类选择器

#red{width:180px; height:100px; background-color:red;}#red:target,#pink:target{background-color:gold;}【效果】#red:target,#pink:target设置了id选择器red和pink链接目标时的背景颜色为金色，如图3-4-21所示。图3-4-21E:target选择器应用效果04*3.4.4

伪元素选择器

CSS中，伪元素选择器用于定义元素指定部分的样式，或者在元素的内容之前或之后插入内容。CSS中常用的伪元素选择器有::before选择器和::after选择器。1．E::before选择器E::before选择器用于在被选元素的内容之前插入内容。使用该选择器时，需使用content属性来指定要插入的内容。其语法格式如下：E::before{content:文字/URL(……);}2．E:after选择器E::after选择器用于在被选元素的内容之后插入内容。其语法格式如下：E::after{content:文字/URL(……);}04*3.4.4

伪元素选择器（10）E:target选择器。E:target选择器可用于选取当前活动的目标元素。只有用户单击页面中的超链接，并且跳转到target元素后，E:target所设置的样式才会起作用。

【示例3-4-22】编辑HTML文档<body>标签的内容，代码如下：<p>床前明月光</p><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p>在HTML文档<style>标签内写入CSS选择器：p::before,p::after{content:"“";font-size:30px;font-family:"宋体";color:red;}p::after{content:"”";}04*3.4.4

伪元素选择器

【效果】使用选择器p::before和p::after分别在p元素的前后添加了引号并设置了引号的的格式，如图3-4-22所示。图3-4-22::before和::after选择器应用效果04*3.4.5

属性选择器

利用CSS的属性选择器可以根据标签的属性及属性值来选择元素。本节讲解其中的E[attr^="val"]、E[attr$="val"]、E[attr*="val"]选择器。属性选择器1．E[attr^="val"]属性选择器E[attr^="val"]属性选择器用来选择E标签中有attr属性，且属性值以"val"开头的元素。需要注意的是此处的E可以省略，如果省略表示可以匹配任何满足条件的元素。【示例3-4-23】

编辑HTML文档<body>标签的内容，代码如下：<divclass="a"></div><div></div><divclass="ac"></div><divclass="bac"></div><divclass="bba"></div><divid="abc"></div>04*3.4.5

属性选择器

在HTML文档<style>标签内写入CSS选择器：div{width:100px; height:100px; background-color:yellowgreen; border:1pxsolidred; float:left;}div[class^="a"]{background-color:pink;}【效果】使用div[class^="a"]选择了div标签中使用了class属性，且属性值以“a”开头的元素，即第1个和第3个元素，设置背景色为粉色，如图3-4-23所示。图3-4-23E[attr^=“val”]属性选择器应用效果04*3.4.5

属性选择器

2．E[attr$="val"]属性选择器E[attr$="val"]属性选择器用来选择E标签中有attr属性，且属性值末尾匹配“val”的元素。同样，如果省略E表示可以匹配任何满足条件的元素。【示例3-4-24】

修改【示例3-4-23】中的div[class^="a"]选择器，代码如下：div[class$="a"]{background-color:pink;}【效果】使用div[class$="a"]选择了div标签中使用了class属性，且属性值以“a”结尾的元素，即第1个和第5个元素，设置背景色为粉色，效果如图3-4-24所示。图3-4-24E[attr$=“val”]属性选择器应用效果04*3.4.5

属性选择器

3．E[attr*="val"]属性选择器E[attr*="val"]属性选择器用来选择E标签中有attr属性，其属性值包含“val”的元素。同样，如果省略E表示可以匹配任何满足条件的元素。【示例3-4-25】修改【示例3-4-24】中的div[class$="a"]选择器，代码如下：div[class*="a"]{background-color:pink;}【效果】使用div[class*="a"]选择了div标签中使用了class属性，且属性值包含“a”的元素，即第1、3、4、5个元素，设置背景色为粉色，效果如图3-4-25所示。图3-4-25

E[attr*="val"]属性选择器应用效果05*05CSS的继承性、层叠性与优先级05*3.5.1

继承性

CSS有三个非常重要的特性：继承性、层叠性与优先级。【效果】<div>标签的红色属性继承给子标签<p>，<div>标签之外的<p>标签文本为默认的黑色，没有变化，如图3-5-1所示。CSS的继承性是指书写CSS样式时，子元素会自动继承为父元素设置的某些属性。【示例3-5-1】

编辑HTML文档<body>标签的内容，代码如下：<div> <p>这是一个段落</p> <p>这是一个段落</p></div> <p>这是一个段落</p>在HTML文档<style>标签内写入CSS选择器：div{color:red;}图3-5-1文本样式继承效果05*3.5.1

继承性

【效果】为<div>加了一个2px的红色实线边框，但没有继承给子元素<p>，如图3-5-1所示。【示例3-5-2】在【示例3-5-1】的div选择器中追加边框相关声明，代码如下：border:2pxredsolid;小提示（1）关于文字样式的属性都具有继承性，包括color和以text-、line-、font-开头的属性。（2）所有关于盒子的、定位的、布局的属性都不能继承，但一般可以将子元素的相关属性的值设为inherit，来继承父元素的相关属性。05*3.5.2

层叠性

使用相同的选择器为同一个元素设置相同的声明时，一个声明会覆盖另一个有冲突的声明。层叠性主要解决声明冲突的问题，其原则是哪个声明书写在最后就执行哪个声明。【效果】<div>标签的文本颜色属性设置层叠，第二次设置的蓝色覆盖第一次设置的红色；加粗样式只设置了一次，不层叠，如图3-5-2所示。【示例3-5-3】

编辑HTML文档<body>标签的内容，代码如下：<div>长江后浪推前浪，前浪推在沙滩上</div>在HTML文档<style>标签内写入CSS选择器：div{color:red; font-weight:700;}div{color:blue;}图3-5-2

层叠性效果05*3.5.3

优先级

使用相同的选择器为同一个元素设置相同的声明时，一个声明会覆盖另一个有冲突的声明。层叠性主要解决声明冲突的问题，其原则是哪个声明书写在最后就执行哪个声明。【示例3-5-4】编辑HTML文档<body>标签的内容，代码如下：<p>猜猜我什么颜色，红色？黄色？绿色？</p><pclass="content-class">猜猜我什么颜色，红色？黄色？绿色？</p><pclass="content-class"id="content-id">猜猜我什么颜色，红色？黄色？绿色？</p><pclass="content-class"id="content-id"style="color:purple;"> 猜猜我什么颜色，红色？黄色？绿色？</p>1．选择器的优先级CSS为每种基础选择器都分配了一个权重，权重大小如下：内联样式>id选择器>类选择器（伪类选择器、属性选择器）>标签选择器（伪元素选择器）>通配符选择器05*3.5.3

优先级

在HTML文档<style>标签内写入CSS选择器：#content-id{color:red;}.content-class{color:yellow;}p{color:green;}【效果】内联样式的优先级最高，所以第四行为紫色；id选择器的优先级高于类选择器，所以第三行为红色；类选择器的优先级高于标签选择器，所以第二行为黄色；标签选择器p控制第一行，颜色为绿色，如图3-5-3所示。图3-5-3

选择器的优先级05*3.5.3

优先级

【示例3-5-5】编辑HTML文档<body>标签的内容，代码如下：<divclass="content-class"id="content-id">猜猜我什么颜色，红色？黄色？绿色？</div>在HTML文档<style>标签内写入CSS选择器：#content-id{color:red;}.content-class{color:yellow;}div{color:green!important;}2．!important权重最大CSS样式属性中有“!important”标识的优先级最高。【效果】虽然标签选择器的优先级低于类选择器和id选择器，但因为在标签选择器div中有“!important”标识代码，所以最终执行该选择器中的属性设置，文本颜色为绿色，如图3-5-4所示。图3-5-4!important的优先级05*3.5.3

优先级

【示例3-5-6】编辑HTML文档<body>标签的内容，代码如下：<divid="father"class="c1"><pid="son"class="c2">试问这行字体是什么颜色的？</p></div>3．复合选择器的权重叠加对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重值可表示为a，b，c。其中，a，b，c分别为复合选择器中id选择器、类选择器（或同级选择器）和标签选择器（或同级选择器）出现的次数。无论b有多大，只要a大于0，b的权重都小于a；以此类推。例如，有两个选择器，一个选择器的权重为a=1，b=0，c=0，另外一个选择器的权重为a=0，b=15，c=11，则前者的权重更大。在HTML文档<style>标签内写入CSS选择器：#father#son{color:blue;}#fatherp.c2{color:black;}div.c1p.c2{color:red;}#father{color:green!important;}05*3.5.3

优先级

【效果】最终文字为蓝色，如图3-5-5所示。其中，第1个选择器的权重为2，0，0，第2个选择器的权重为1，1，1，第3个选择器的权重为0，2，2，第4个选择器的权重为1，0，0，因此最终应用了第1个选择器设置的颜色。要注意的是，第4个选择器虽然应用了“!important”标识，但由于第1个选择器已为son子元素设置了属性，因此其并没有继承father父元素的属性。图3-5-5

权重计算效果小提示开发者通常用自己惯用的方式控制样式，并不会过多进行权重计算。06*06CSS的尺寸与颜色06*3.6.1

CSS尺寸单位描述绝对尺寸cm厘米mm毫米in英寸，1in=96px=2.54cm=72ptpx像素pt点pc派卡，1pc=12pt相对尺寸em相对于当前容器内的字体尺寸，可用nem表示（n表示倍数，如1，2，3。下同）ex相对于当前字体的高度，可用nex表示ch相对于数字“0”的宽度，可用nch表示rem相对于根元素的字体尺寸，可用nrem表示vm相对于视口宽度的1%，可用nvm表示vh相对于视口高度的1%，可用nvh表示vmin相对于视口宽度和高度中较小尺寸的1%，可用nvmin表示vmax相对于视口宽度和高度中较大尺寸的1%，可用nvmax表示%相对于父元素的百分比表3-6-1尺寸值表示06*3.6.2

CSS颜色在CSS样式中有多种表达颜色方式。使用颜色关键字：颜色关键字即颜色英文名称，共有140种，如红色的颜色关键字为red。使用十六进制颜色：十六进制颜色是以“#”开头的6位十六进制数。从开始到结尾，每两位十六进制依次代表红色、绿色、蓝色，最终显示的颜色是这3种颜色的混合色。例如，“#FF0000”代表纯红色，因为红色成分的颜色值最大（FF），其他两种颜色成分的颜色值为都为0。在CSS样式中使用十六进制表达颜色时，通常其中的A-F写成大写。此外，当六位十六进制数全部相同时，可以简写为三位十六进制数，如“#FFFFFF”可简写为“#FFF”。使用十六进制颜色：RGB颜色是用红、绿、蓝三色混合而成的颜色。其在CSS样式中的表达格式为：rgb(red,green,blue)其中的red、green、blue的值均可以是整数0～255，分别表示红色、绿色、蓝色的强度。例如，rgb(255,0,0)表示红色；rgb(238,130,238)表示紫色，rgb(0,0,255)表示蓝色。06*3.6.2

CSS颜色在CSS样式中有多种表达颜色方式。使用RGBA颜色：RGBA颜色是CSS3新增的颜色表示方法。其在CSS样式中的表达格式为：rgba(red,green,blue,alpha)其中前三个参数同RGB。alpha是介于完全透明0.0和完全不透明1.0之间的数字。【示例3-6-1】

编辑HTML文档<body>标签的内容，代码如下：<divid="box"> <imgsrc="img/btn.jpg"width="150"></div>在HTML文档<style>标签内写入以下CC选择器和声明，效果如图3-6-1（a）所示。#box{width:300px; height:300px;06*3.6.2

CSS颜色background-color:rgba(20,200,200);}将CSS代码中的background-color属性改写为以下代码。background-color:rgba(20,200,200,0.3);【效果】图片不透明，#box盒子为半透明，效果如图3-6-1（b）所示。

（a）

（b）图3-6-1rgba属性设置透明度效果的前后对比06*使用HSLA颜色：HSLA颜色是CSS3新增的颜色表示方法。与HSL颜色相比，HSLA颜色增加了一个透明度参数。其在CSS样式中的表达格式为：hsla(hue,saturation,lightness,alpha)其中前三个参数同HSL表达方式，alpha参数取值同RGBA。3.6.2

CSS颜色使用HSL颜色：HSL颜色是用色相、饱和度和明度表示颜色。其在CSS样式中的表达格式为：hsl(hue,saturation,lightness)（1）色相（hue）是指颜色的相貌（就是我们通常说的各种颜色），用色轮上从0到360的度数表示。例如，0表示红色，120表示绿色，240表示蓝色。（2）饱和度（saturation）是指颜色的纯度，用百分比值表示，如100%表示颜色最纯。（3）亮度（lightness）是指颜色的明暗度，也用百分比值表示。例如，0%表示颜色最暗，呈现为黑色，50%表示颜色既不明也不暗，100%表示颜色最亮，呈现为白色。例如，hsl(0,100%,50%)为红色。06*3.6.2

CSS颜色使用opacity属性：Opacity也是CSS3新增的属性，用来定义颜色的透明度。其取值在0到1之间，0表示完全透明，1表示完全不透明。【示例3-6-2】

修改【示例3-6-1】CSS样式中的颜色属性，具体代码如下：#box{width:300px; height:300px;

background-color:rgb(20,200,200);

opacity:0.3;}【效果】图片和#box盒子均为半透明，如图3-6-2所示。图3-6-2opacity属性设置效果小提示rgba()、hsla()和opacity都能实现透明效果。它们最大的不同是opacity除作用于元素外，还同时作用于元素内的所有内容；而rgba()和hsla()只作用于元素本身，即背景色或文本颜色的透明度。07*07CSS文本控制07*3.7.1

字体样式文本是网页的主要元素，CSS通过字体样式和文本样式等来设置文本的外观。CSS中的字体样式主要包括文字的字体、大小、粗细、样式和行高。字体font-family：属性名称：font-family。属性的值：字体1名称，字体2名称，……。属性作用：为元素指定字体属性，按照优先级顺序，当字体1存在时，优先使用字体1；如果字体1不存在，则优先使用字体2；以此类推。字体之间用英文逗号分隔。【示例3-7-1】编辑HTML文档<body>标签的内容，代码如下：<pclass="p1">从本质上讲，“工匠精神”是一种职业精神，它是职业道德、职业能力、职业品质的体现，是从业者的一种职业价值取向和行为表现。在新的时代弘扬和践行“工匠精神”，须深入把握其基本内涵与当代价值。</p><pclass="p1">07*3.7.1

字体样式现代科技时代，“工匠”似乎远离我们而去。但是，实现中华民族伟大复兴的中国梦，不仅需要大批科学技术专家，同时也需要千千万万的能工巧匠。更为重要的是，“工匠精神”作为一种优秀的职业道德文化，它的传承和发展契合了时代发展的需要，具有重要的时代价值与社会意义。</p>在HTML文档<style>标签内写入css选择器：*{ box-sizing:border-box; font-size:14px; margin:0;}.p1{width:500px; height:auto; background:pink; padding:20px;

font-family:"楷体","微软雅黑";}07*3.7.1

字体样式

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论