任务5.2 CSS基础选择器

模块5美化网页——使用CSS技术任务5.2CSS基础选择器网页设计项目教程（HTML5+CSS3+JavaScript）任务描述通过CSS选择器精准定位HTML元素，实现高效的样式控制通过CSS选择器，能够精准定位HTML元素，实现高效的样式控制。区分多种不同的基础选择器，掌握基础选择器的使用方法，合理应用于业务场景。5.2.1认识选择器选择器与声明块构成一条样式规则规则结构CSS样式表中的每条规则由两部分组成：选择器与声明块。选择器决定哪些元素受影响。声明块由“属性:值;”组成，置于{}内。多条声明无顺序要求，以英文冒号隔开、分号结尾。基础选择器常见的基础选择器主要包含：标记选择器、类选择器、ID选择器。选择器决定样式规则应用于哪些元素。后续小节逐一讲解三种基础选择器的用法。5.2.2标记选择器通过HTML标签名匹配元素什么是标记选择器标记选择器（也称标签选择器）通过HTML标签名匹配元素，如p、br、h1、h2等。定义样式时直接使用标记名作为选择器，作用于文档中所有该标签的元素。适用场景适合为页面中某一类标签统一设置样式例如：统一设置所有段落的行高与缩进、标题的字号与加粗。优先级较低，易被类选择器、ID选择器覆盖。案例演示：标记选择器用b、i、u展示不同文本样式p{

line-height:1.5em;

text-indent:2em;

}

h2{

font-size:14px;

font-weight:bold;

}运行观察直接以标签名p、h2作为选择器。文档中所有<p>应用行高1.5em、首行缩进2em。所有<h2>应用字号14px、加粗。一次定义，整页同类标签统一生效。5.2.3类选择器通过class属性定位元素，可重复使用、多处引用语法以英文句点.开头，后跟类名（区分大小写）。类名可包含字母、数字、连字符-、下划线_，但不能以数字开头。通过元素的class属性定位并应用样式。优势定义好类选择器样式后可多次引用。多个不同标记可同时引用同一类。这一优点使类选择器被广泛应用。5.2.3类选择器同标记选择器结合①类选择器还可以同标记选择器结合使用p.important{

color:red;

}运行观察选择器匹配class属性值为important的<p>元素。其他类型的元素都不匹配，不论是否带有此class属性。实现“仅某一类标签中的特定对象”的精确定位。5.2.3CSS多类选择器②一个元素可同时引用多个类，实现样式组合<!--HTML：为<p>设置两个样式类-->

<pclass="bigred">一个红色的大标题</p>

/*CSS：分别定义big、red两个类*/

.big{font-size:24px;}

.red{color:red;}运行观察class属性值可包含多个类名，以空格分隔。<p>同时应用big与red两类样式。文字大小为24px，颜色为红色。5.2.4ID选择器通过元素的id属性精确定位唯一元素语法与特点以#开头，后跟id名。id在文档中具有唯一性，一个id只对应一个元素。通过元素的id属性定位并应用样式。与类选择器的区别类选择器可多次引用、可多类组合。ID选择器仅用于唯一元素，不可重复。优先级高于类选择器与标记选择器。案例演示：ID选择器通过元素的id属性定位，id具有唯一性<!--HTML：设置p元素的id-->

<pid="article">id具有唯一性</p>

/*CSS：为id为article的<p>元素设置样式*/

#article{

font-size:24px;

color:red;

}运行观察以#开头，后跟id名。id在页面中唯一，一个id只对应一个元素。示例：id为article的<p>元素文字24px、红色。任务实施创建HTML与CSS文件，应用标记选择器与类选择器01步骤1：新建项目文件创建文件index.html、styles.css02步骤2：编写代码在index.html中编写结构，在styles.css中编写样式03步骤3：运行预览在浏览器中打开index.html查看效果任务实施：index.html包含2个p标签与2个span（类选择器）标签<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>选择器示例</title>

<!--链接外部CSS文件-->

<linkrel="stylesheet"href="styles.css">

</head>

<body>

<h1>选择器应用示例</h1>

<!--p标签，将通过标记选择器设置样式-->

<p>这是第一个段落，使用标记选择器设置样式。标记选择器直接通过HTML标签名来选择元素。</p>

<p>这是第二个段落，同样使用标记选择器设置样式。所有p标签都会应用相同的样式规则。</p>

<!--span标签，使用类选择器设置样式-->

<p>这段文字中包含<spanclass="highlight">需要突出显示的内容</span>，使用了highlight类选择器。</p>

<p>这段文字中包含<spanclass="note">注释性内容</span>，使用了note类选择器。</p>

</body>

</html>任务实施：styles.css标记选择器设置p标签；类选择器设置highlight、note/*标记选择器：选择所有p标签*/

p{

font-family:"MicrosoftYaHei",sans-serif;

font-size:16px;

line-height:1.6;

color:#333;/*深灰色文本*/

margin:10px0;/*上下外边距*/

}

/*类选择器：选择所有class为highlight的元素*/

.highlight{

color:#e63946;/*红色文本*/

font-weight:bold;/*粗体*/

background-color:#f1faee;/*浅色背景*/

padding:2px5px;/*内边距*/

border-radius:3px;/*圆角*/

}

/*另一个类选择器：选择所有class为note的元素*/

.note{

color:#1d3557;/*深蓝色文本*/

font-style:italic;/*斜体*/

border-left:3pxsolid#457b9d;/*左侧边框*/

padding-left:5px;/*左内边距*/

}任务实施：运行效果在浏览器中打开index.html查看样式应用结果标记选择器作用所有<p>标签应用：微软雅黑、16px、行高1.6、深灰文本#333、上下外边距10px。类选择器作用highlight类：红色加粗文字+浅色背景+圆角。note类：深蓝斜体文字+左侧边框。认识选择器理解规则由“选择器+声明块”构成；认识三种基础选择器。标记