工业UI开发技术-课件 2-2-2 CSS选择器-1.pptxVIP

CSS选择器深圳市信息职业技术学院

元素选择器01目录类选择器02ID选择器03包含选择器04组合选择器05父子选择器06相邻选择器07属性选择器08

本节目标 本任务通过学习CSS基本概念，CSS语法结构，选择器，属性，学习如何通过CSS设置HTML标签的样式与布局。通过本节学习可以：掌握CSS概念掌握CSS语法掌握CSS选择器与属性掌握CSS盒子模型掌握CSS布局方式

01元素选择器

元素选择器选择器名称为html标签名称p{text-indent:3em;} /*当中的选择器是p*/h1{color:red;} /*当中的选择符h1*/

02类选择器

类选择器1、类选择器名字前面以”.”作为标志2、html元素通过class属性来应用样式3、一个类样式可以同时应用于多个元素。.news{}divclass=”news”/divpclass=”news”/p命名规范（详见命名规范文件夹）1、命名不能以数字开头2、不要用标签名来命名，不是硬性规定，是有工作经验的体现。3、可以用驼峰命名法：subNavMenudropMenu或划线命名法（匈牙利命名法）：drop-menusub_nav_menu.dark-row{background-color:#EAEAEA;}pclass=dark-rowred第一段/p

03ID选择器

ID选择器1、ID选择器名字以“#”作为标志2、样式应用于具有相应ID属性值的元素。3、id的属性值不能重复。4、id一般适用于写js的时候添加的。所以有经验的程序员，会认为一个元素有id就有JavaScript脚本。#box{ width:100px; height:200px; background-color:pink; }#main{text-indent:3em;} /*ID名称main前加上一个#号*/……pid=“main”文本缩进3em/p !–在html的p标签中指定id属性main--注意:id属性值不能加#

类选择器和id选择器的区别相同点：可以应用于任何元素不同点： 在一个HTML文档中，id选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，id选择器是不可以的（不能使用id词列表）。

04包含选择器

包含选择器用于选择指定标签元素下的所有后代元素语法： 选择器选择器{css样式代码;} divh1{color:red;}注意事项 后代还能有后代

THANKYOU深圳市信息职业技术学院