选择器的定义
定义: 实现CSS对HTML页面样式的控制,如果要让这些样式对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,HTML页面中的元素就是通过CSS选择器进行控制的。
选择器的分类
简单选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
复杂选择器
- 标签指定式选择器
- 后代选择器
- 并集选择器
标签选择器
定义:标签选择器其实就是html代码中的标签。
Html中标签: “html、body、hn、p、img”等等。语法: html标签 {属性:值; …}
作用:将页面中对应的html标签选中,并设置样式。
类选择器
定义:类选择器,是对HTML标签中class属性进行选择。CSS类选择器的选择符是 “.“,类选择器在css样式编码中是最常用到的。
语法: .自定义类名 {属性: 值; …..}
特点:
1. 类选择器可以被多个标签同时调用
2. 一个标签可以同时调用多个类样式(一个标签可以有多个类名)类选择器命名规范:
1. 单词和数字组合可以命名
2. 不能以纯数字或纯数字开头定义类名
3. 不推荐使用汉字定义类名
4. 不能以特殊字符或特殊字符开头定义类名(”_”除外)
ID选择器
定义:ID选择器和类选择器用法一样,区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器,浏览器不会报错但是不符合W3C标准了,所以ID选择器命名必须要唯一性)。ID选择器以 “#” 来定义。
语法: #自定义ID名称 {属性: 值; ….}
ID选择器与类选择器的区别:
1. 在页面中标签的id值必须唯一,相当于人的身份证。类选择器相当于人的姓名,可以有很多人使用同一个姓名,比如张三。
2. 在页面中一个标签只能调用一个id样式
通配符选择器
定义:通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
语法:*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
文本属性的介绍
- font-size:设置字体大小
- font-weight:设置文字是否加粗显示 推荐使用具体数字700
- font-style:设置文字是否斜体显示,normal | italic (斜体显示)
- font-family:设置文字字体
- text-align:文字居中格式,center |left|right
标签指定式选择器(既…又…)
定义:标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格
语法:html标签.选择器名 {属性:值;….}
后代选择器
定义:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。
语法:选择器 选择器 {属性: 值;}
特点:
1. 后代选择器中,标签之间的关系属于嵌套关系。
2. 选择器与选择器之间必须有空格
并集选择器
定义:并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
语法: 选择器,选择器 {属性:值;…}