失眠网 > （CSS）3.三种基本选择器(标签类 id)

（CSS）3.三种基本选择器(标签类 id)

时间：2018-08-13 06:49:41

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><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)优点：可以多个标签归类，是同一个class，即可以实现多个同级标签是相同样式，实现标签的复用，而且可以跨不同种类标签使用如：<p class="第一个标题">p标签</p>

2）代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><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)特点：id必须全局唯一，不能被复用，而class可以复用

(3)不遵循就近原则：

id选择器>class选择器>标签选择器

2）代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id选择器</title><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>