一个CSS教程——元素期(第二期)

大家好,我是wawjf~~

这一期是我们CSS教程的正式开始。对于之前的回顾,我们会在每期的1个问题中体现出来。

在这一课中,让我们启动3354选择器,它是CSS最重要的内容之一。

选择器有很多种。简单的就像之前说的类选择器,还有今天的id选择器,标签选择器等等。复杂的就像后代选择器,伪类选择器等等。

让我们来谈谈什么是选择器:

为了使用CSS一对一、一对多或多对一地控制HTML页面中的元素,我们需要CSS选择器。

(就像以前一样,一些元素的样式是由CSS的类选择器精确定义的)

这就是选择器的定义。如果不了解,可以搜索一下。

今天,我们将讨论id选择器和属性选择器。

id选择器通过标签的ID名称来定位标签。标签选择器直接定位标签。通用选择器为所有标签添加样式。

1. id选择器

优点:精准匹配

缺点:需要添加id属性,麻烦且不灵活。

注意:没有选择器是绝对的好用,都有自己的缺点和优点,并不存在谁更好

还记得类选择器是如何定位的吗?”.”加上班级的名字

id选择器的定位方式是“#”加id的名称。

具体代码和效果如下:

我们把字体改成40px,把字的颜色改成黑色(虽然是黑色。

on/images/icon/common/emotion_panel/emoji_wx/2_02.png” data-ratio=”1″ data-w=”20″ style=”display:inline-block;width:20px;vertical-align:text-bottom;” />)

2. 标签选择器


标签选择器那就更简单了,只要把标签当作选择器名就好了,系统会把所有带此标签的部分增加样式。

优点:使用简单,不需要为标签增加属性

缺点:影响范围大,不能精准定位

此处,将所有使用h1标签的文本的大小改为40px。

3. 通配选择器


通配选择器是在CSS3新增的一个选择器,用*号表示,用途就是将所有标签增加样式

优点:省略很多不必要的代码

缺点:如果有一个地方不是相同的,就不能使用,即实用性差

如图所示,所有文本字体均被放大至40px。

好了,本期内容就到这里,想找到更多内容,可以在本期下方找到链接~~

(阿列克谢:建议大家尽量使用 class 和 id 选择器哦,我就是这么做的)



作者:

    

Алексей

       四五帮帮主,四五dark♂帝国元首(划掉)

喜欢HTML/CSS/JS

07年出生,福建福州人,未来的程序员

素描八级,但是还是要请美工

本来想做小程序,结果开了个公众号天天在那边写稿



wawjf

(我爱微积分)


与楼上同班同学,都是很hj的人(是的



往期内容(HTML):

面向05后的HTML教程——第一期

一部分和文本有关的标签

面向05后的HTML教程——第二期

面向05后的HTML教程——第三期

第二期实战题目答案

面向05后的HTML教程——第四期

面向05后的HTML教程——第五期

面向05后的HTML教程——第六期

面向05后的HTML教程——第七期

面向05后的HTML教程——第八期

面向05后的HTML教程——第九期

面向05后的HTML教程——第10期

面向05后的HTML教程——第11期

面向05后的HTML教程——第12期

往期内容(CSS):

一部分实用的css样式

关于CSS的部分课程——div期

关于CSS的部分课程——position期

某CSS的教程——border期

每期一题:

每期一题——000001

动态分享

问题0000答案是什么,00023真题

2022-6-7 13:06:45

动态分享

欧冠决赛2022时间,欧元兑换人民币

2022-6-7 16:30:34

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索