概述
文章目录
- 一、标记选择器
- 二、类选择器
- 三、id选择器
- 四、通配符选择器
一、标记选择器
- 标记选择器是指用HTML标记名称作为选择器,
- 作用:根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
- 基本语法格式如下:
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如: p{ font-size:12px; color:#666; font-family:“微软雅黑”;}
上述CSS样式代码用于设置HTML页面中所有的段落文本——字体大小为12像素、颜色为#666、字体为“微软雅黑”
二、类选择器
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名
- 作用: 根据指定的类名称找到对应的标签, 然后设置属性
- 基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
例如: .pcolor{color:#ff0000;font-size:14px;}
用于设置class=“pcolor”的标签元素的样式为-----字体颜色为红色,大小为14px
注意:
- 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
- 在同一个界面中class的名称是可以重复的
- 在编写class选择器时一定要在class名称前面加上点
- 类名的命名规范和id名称的命名规范一样
- 类名就是专门用来给CSS设置样式的
- 在HTML中每个标签可以同时绑定多个类名
三、id选择器
- id选择器使用“#”进行标识,后面紧跟id名
- 作用:根据指定的id名称找到对应的标签, 然后设置属性
- 基本语法格式如下:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如
#menubar{margin:0;background:#ccc;}
用于设置id=“menubar”的元素的样式为------------外边距为0,背景颜色为#ccc;
注意:
- 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
- 在同一个界面中id的名称是不可以重复的
- 在编写id选择器时一定要在id名称前面加上#
- id的名称是有一定的规范的, id的名称只能由字母/数字/下划线(a-z 0-9 _)
- id名称不能以数字开头 id名称不能是HTML标签的名称()不能是a h1 img input …)
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的
四、通配符选择器
- 通配符选择器用“*”号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。
- 作用:为整个页面设置样式
- 基本语法格式如下:
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 该语法中*可以匹配页面中所有的元素。
例如:
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
最后
以上就是香蕉牛排为你收集整理的2-基础选择器一、标记选择器二、类选择器三、id选择器四、通配符选择器的全部内容,希望文章能够帮你解决2-基础选择器一、标记选择器二、类选择器三、id选择器四、通配符选择器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复