html标签的分类 CSS的基本选择器使用

html标签title标签放在_html 标签_html标签的分类

哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

第二阶段 CSS基本选择器

1 调试工具 使用

此工具是我们的必备工具,以后代码出了问题,我们首先第一反应就是:

按F12或者是 shift+ctrl+i"打开开发者工具。

或者右击网页空白处——查看

2 标签选择器

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

html标签title标签放在_html标签的分类_html 标签

标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

3 类选择器

类选择器使用”.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

.类名 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

标签调用的时候用c1ass=“类名”即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。下面是举个例子,实际工作中不要用中文。

html标签title标签放在_html标签的分类_html 标签

4 CSS命名规范

1 长名称或词组可以使用中横线来为选择器命名。

2 不建议使用”_” 下划线来命名CS5选择器。

3 不要纯数字、中文等命名,尽量使用英文字母来表示。

5 谷歌课堂案例

html标签title标签放在_html 标签_html标签的分类

html标签title标签放在_html 标签_html标签的分类

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

html 标签_html标签title标签放在_html标签的分类

11 链接伪类的简写方式

实际工作,我们简单写链接伪元素选择器就好了

html标签title标签放在_html 标签_html标签的分类

12 结构伪类选择器(一)

结构(位置)伪类选择器(CSS3)

1 :first-child:选取属于其父元素的首个子元素的指定选择器

2 :last-child:选取属于其父元素的最后一个子元素的指定选择器

3 :nth-child(n):匹配属于其父元素的第N个子元素,不论元素的类型even偶数odd奇数n从0开始

html 标签_html标签title标签放在_html标签的分类

html标签的分类_html 标签_html标签title标签放在

13 结构伪类选择器(二)

html标签title标签放在_html标签的分类_html 标签

2n就是 0 2 4 6 ……项

3n就是 0 3 6 9 ……项

14 结构伪类选择器(三)

4 :nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。n可以是数字、关键词或公式

15 目标伪类选择器

:目标伪类选择器选择器,可用于选取当前活动的目标元素,例如百度百科里的目录,点一下就可以跳转到目标信息,:可以使目标信息赋予属性html标签的分类,字体颜色大小等。

html标签的分类_html标签title标签放在_html 标签

看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

本章已结束,下篇文章将分享《04 CSS外观样式及应用》小伙伴们不要错过哟!

怡然一记
html标签的分类 CSS的基本选择器使用
https://xsunhua.cn/275.html
THE END
分享
二维码
打赏
海报
html标签的分类 CSS的基本选择器使用
标签选择器标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。类选择器最大的优势是可以为元素对象定义单独或相同的样式。用法基本和类选择器相同。总结:类选择器和id选择器的的区别就是在使用次数上。链接伪类选择器的使用结构(位置)伪类选择器(CSS3)
<<上一篇
下一篇>>