目录
1.知识点
2.标签选择器
1)知识点
2)代码
2.类选择器:
1)知识点:
2)代码:
3)效果和代码展示:
3.id选择器:
1)知识点
2)代码
3)页面和代码展示
1.知识点
(1)选择器作用:选择页面的某一个或者某一类元素
(2)基本选择器
①标签选择器
②类选择器class
③id选择器
(3)ctrl+/表示注释的意思,而在css中/*表示注释*/,在HTML文件中写的css代码即<style></style>里面的注释两种都可以
2.标签选择器
1)知识点
(1)颜色的表示color:#数字,表示选择的颜色,点开行号可以更换选择的颜色
(2)样式上来说,所有的标题一样式相同
效果展示
(3)如何更改css代码
①调出网页中的原始代码:点击图片中的绿色处,找到更多工具,点击开发人员工具,这时候记住该页面标记紫色的地方,字体颜色为普通的黑色
调出的页面如下,注意此处标记处处的样式
②在调出的代码中更改字体颜色,如图看到相应的代码和如下效果,但是不能保留久,刷新后依旧是开发员书写的源代码
(4)背景颜色的调整:
background:lawngreen(自定义颜色);
效果如下:
(5)半径范围:(可以利用网页的代码先行看修改效果在进行复制粘贴代码)
border-radius: 24px;
效果如下(紫色标记处即为不同点):
2)代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>基本选择器</title><!--(1)选择器作用:选择页面的某一个或者某一类元素(2)基本选择器①标签选择器②类选择器class③id选择器(3)ctrl+/表示注释的意思,而在css中/*表示注释*/(4)颜色的表示color:#数字,表示选择的颜色,点开行号可以更换选择的颜色(5)样式上来说,所有的标题一样式相同(6)背景颜色的调整:background:lawngreen(自定义颜色);--><style>/**/h1{color: #7a1d1d;background:lawngreen;border-radius: 24px;}</style></head><body><h1>学Java</h1><h1>对比</h1><p>榨菜配菜</p></body></html>
2.类选择器:
1)知识点:
(1)类选择器的格式
.class的名称{} (2)优点:
2)代码:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><!--类选择器(1)类选择器的格式.class的名称{}(2)优点:可以多个标签归类,是同一个class,即可以实现多个同级标签是相同样式,实现标签的复用,而且可以跨不同种类标签使用如:<p class="第一个标题">p标签</p>--><style>.第一个标题{color: violet;}.第二个标题{color: turquoise;}.第一个标题{}</style></head><body><h1 class="第一个标题">榨菜配菜1.0</h1><h1 class="第二个标题">榨菜配菜2.0</h1><h1 class="第一个标题">榨菜配菜3.0</h1><p class="第一个标题">p标签</p></body></html>
3)效果和代码展示:
3.id选择器:
1)知识点
(1)id选择器的格式:
#id名称 {} (2)特点:
(3)不遵循就近原则: id选择器>class选择器>标签选择器
2)代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id选择器</title><!--(1) id选择器的格式:#id名称 {}(2)特点:id必须全局唯一,不能被复用,而class可以复用(3)不遵循就近原则:id选择器>class选择器>标签选择器--><style>#榨菜配菜1{color:red;}</style></head><body><h1 id="榨菜配菜1">榨菜配菜的id选择器1</h1><h1>榨菜配菜的id选择器2</h1><h1>榨菜配菜的id选择器3</h1><h1>榨菜配菜的id选择器4</h1><h1>榨菜配菜的id选择器5</h1></body></html>
3)页面和代码展示
以上内容学习自B站所得的学习笔记,如有侵权删!欢迎指正。
如果觉得《(CSS)3.三种基本选择器(标签 类 id)》对你有帮助,请点赞、收藏,并留下你的观点哦!