Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 5.1.3知识点2CSS基本选择器.pptx

CSS基本选择器信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备选择器的概念1标记选择器2类选择器3ID选择器4

01选择器的概念前端技术开发

选择器的概念前端技术开发01CSS选择器是用于在HTML文档中实现一对一、一对多或多对一的控制，它决定了哪些元素将应用CSS样式。选择器可以根据元素的标签名、类名、ID、属性、层级关系等条件进行选择。语法选择器{属性1:值1;属性2:值2；}每一条css样式定义由两部分组成，写在style/style中，形式如下：h2{background-color:red;}p{font-size:30px;backgroud-color:gray;}

02标记选择器前端技术开发

标记选择器前端技术开发02CSS选择器具有多种不同类型，从大类上分主要有“基本”选择器和“复合”选择器。CSS基本选择器有标记选择器、类选择器和ID选择器三种。调试CSS代码，鼠标右键打开浏览器的“开发者工具”spanid=local当前位置：/spanspan首页2023年文化和自然遗产日?江苏文章详情/spanh12023年“文化和自然遗产日”非遗宣传展示活动启动/h1h3发布时间：2023-06-09来源：“文旅之声”微信公众号/h3标记选择器标记选择器：span，h1，h3ID选择器ID选择器：#local

标记选择器前端技术开发02直接使用HTML标记名称作为选择器。对同一种HTML元素应用样式。【实例】标记选择器标记选择器

03类选择器前端技术开发

类选择器前端技术开发03设置标记中的class属性定义类别，将网页元素进行分类，将某特定CSS样式作用于这一类元素。类选择器的书写方式是在自定义类名称的前面加一个句点“.”，即class属性值前面加句点“.”。【实例】类选择器类选择器

04ID选择器前端技术开发

ID选择器前端技术开发04在HTML文档中，需要唯一标识一个元素时，赋予它一个id标识，用来对这个元素定义单独的样式。先在元素中定义id属性，后使用“#id属性值”来定义CSS样式。HTML代码1h1我是一个1级标题h12h3我是一个3级标题h33pid=pid我是段落/p4p我是段落/pCSS代码1#pid{2color:red;3font-size:24px;4}ID选择器【实例】ID选择器

小结前端技术开发05(1)正确书写CSS代码 (2)学会使用三种基本选择器标记选择器p{font-size:30px;}类选择器.important{color:red;}ID选择器#box1{color：red；}selector{property:value;property:value;…}

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》