大家好,我是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