html标签的分类 CSS的基本选择器使用
哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!
第二阶段 CSS基本选择器
1 调试工具 使用
此工具是我们的必备工具,以后代码出了问题,我们首先第一反应就是:
按F12或者是 shift+ctrl+i"打开开发者工具。
或者右击网页空白处——查看
2 标签选择器
要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
3 类选择器
类选择器使用”.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签调用的时候用c1ass=“类名”即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。下面是举个例子,实际工作中不要用中文。
4 CSS命名规范
1 长名称或词组可以使用中横线来为选择器命名。
2 不建议使用”_” 下划线来命名CS5选择器。
3 不要纯数字、中文等命名,尽量使用英文字母来表示。
5 谷歌课堂案例
6 多类名选择器
我们可以给标签指定多个类名,从而达到更多的选择目的。两个甚至以上的类名比较常用
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。
Class=”red ”
7 ID选择器
ID选择器使用“#”进行标识,后面紧跟ID名,其基本语法格式如下
#ID名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。(只能调用一次)
用法基本和类选择器相同。
8 id选择器和类选择器的区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class类选择器(class)好比人的名字,是可以多次重复使用的,比如张伟王伟李伟李娜id选择器好比人的身份证号码,全中国是唯一的,不得重复。只能使用一次。
总结:类选择器和id选择器的的区别就是在使用次数上。
9 通配符选择器
通配符选择器用*号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
* {属性1:属性值1;属性2:属性值2;風性3:属性值3;}
这个通配符选择器,就像我们的电影明星中的梦中情人,想想它就好了,但是它不会和你过日子。所以这个选择器html标签的分类,我们认识就好了,平时工作很少用。
10 链接伪类选择器的使用
:link/*未访问的链接*/
:/*已访问的链接*/很少用到
:hover/*鼠标移动到链接上*/
:actⅳe/*选定的链接当我们点击别松开鼠标显示的状态*/很少用到
注意写的时候,他们的顺序不要颠倒,按照L V H A的顺序。 love hate爱上了讨厌记忆法或者lv包包非常hao
11 链接伪类的简写方式
实际工作,我们简单写链接伪元素选择器就好了
12 结构伪类选择器(一)
结构(位置)伪类选择器(CSS3)
1 :first-child:选取属于其父元素的首个子元素的指定选择器
2 :last-child:选取属于其父元素的最后一个子元素的指定选择器
3 :nth-child(n):匹配属于其父元素的第N个子元素,不论元素的类型even偶数odd奇数n从0开始
13 结构伪类选择器(二)
2n就是 0 2 4 6 ……项
3n就是 0 3 6 9 ……项
14 结构伪类选择器(三)
4 :nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n可以是数字、关键词或公式
15 目标伪类选择器
:目标伪类选择器选择器,可用于选取当前活动的目标元素,例如百度百科里的目录,点一下就可以跳转到目标信息,:可以使目标信息赋予属性html标签的分类,字体颜色大小等。
看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。
本章已结束,下篇文章将分享《04 CSS外观样式及应用》小伙伴们不要错过哟!
html标签的分类 CSS的基本选择器使用
https://xsunhua.cn/275.html



共有 0 条评论