css的基础选择器 -学习笔记(未完成)

CSS的基础选择器

  • 一 标签选择器(html)选择器
  • 二 类选择器(重点)
  • 三 id选择器

一 标签选择器(html)选择器

指的是用html标签来作为选择器
如下图所示皆为标签选择器
css的基础选择器 -学习笔记(未完成)_第1张图片

注意:标签选择器在实际开发中不建议直接使用因为会将页面中该标签全部选中,不能实现该标签的差异化设置后期会配合后代选择器使用

二 类选择器(重点)

在实际开发过程中,我们可以通过类选择器给对应的标签设置名称,然后设置不同的样式,从而实现同一类标签的差异化设置。
使用类选择器需要以下几步
在html文件中给对应的标签设置 class属性=“类名称”
如下图所示
我们先创建一个html文件并连接上一个css文件 同时打出多个div标签的文体部分方便演示css的基础选择器 -学习笔记(未完成)_第2张图片
打开连接的css文件 设置
css的基础选择器 -学习笔记(未完成)_第3张图片
此时测试的结果为所有文本为蓝色
css的基础选择器 -学习笔记(未完成)_第4张图片
此时我们设置类选择器
在这里插入图片描述
css的基础选择器 -学习笔记(未完成)_第5张图片
测试结果如下css的基础选择器 -学习笔记(未完成)_第6张图片

三 id选择器

d选择器可以帮助我们设置标签样式,但是我们在实际开发中一般不会用id选择器设置布局样式 故此处不再过多赘述 只简单放一案例
css的基础选择器 -学习笔记(未完成)_第7张图片
代码如上
css的基础选择器 -学习笔记(未完成)_第8张图片
运行结果如下
css的基础选择器 -学习笔记(未完成)_第9张图片

你可能感兴趣的:(css,css3,html)