CSS id 和 class

简介: 【5月更文挑战第3天】CSS id 和 class。

CSS id 和 class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例

para1

{
text-align:center;
color:red;
}
Remark ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

实例
.center {text-align:center;}

尝试一下 »
你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

目录
相关文章
|
6月前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
80 2
|
5月前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
449 0
|
7月前
|
前端开发 程序员 容器
CSS样式文件和class类名命名规范参考
CSS样式文件和class类名命名规范参考
124 0
|
7月前
|
前端开发
CSS中class的样式赋值方法详解
CSS中class的样式赋值方法详解
174 0
|
前端开发
前端祖传三件套CSS的各种选择器之class选择器
在前端开发中,CSS是不可或缺的一部分,而选择器则是CSS最重要的组成部分之一。其中,class选择器被广泛应用于HTML文档中,可以根据元素的class属性值来选取HTML元素,并为其添加样式。以下将详细介绍class选择器的使用方法以及应用场景。
559 0
|
前端开发 JavaScript
零基础CSS入门教程(5)——id选择器
我们前几个小结学习了class选择器和元素选择器,我们这一小节学习一下id选择器id选择器,就是应用于选择一个指定元素的。在上面的场景中,我们希望针对性的选择第三个p标签,所以我们就可以给第三个p标签指定一个id,然后使用id选择器选择这个标签。那么什么是id呢。就好比每个人都有一个唯一的身份证号,每个学生都有唯一的一个学号。id就是网页标签的唯一标识符,我们可以根据需要给标签添加id。我们向让第一个p变色 效果如下 我们这一小节学习了id选择器,我们再css里面一般很少用id选择器。我们大都使用class
零基础CSS入门教程(5)——id选择器
|
前端开发
零基础CSS入门教程(4)——Class选择器
我们上一节课学习了元素选择器,并了解他的有点和缺点。我们如果有大量的相同元素标签,我们现在想让某一个元素标签出现效果。我们现在学习的元素标签满足不了,我们这小结学习一下我们最常用的class选择器。我们上一节讲到的内部样式,外部样式,行内样式就是对特定标签的选择,给它加上样式,算是标签选择 这一节我们要讲的选择器,就是选择一类标签给他们加上特定的样式,比如我们有6的div标签,我们只想给其中3个加上特定的样式,我们要是像上一节只能用行内样式一个一个加,因为都是div标签,我们要是选择给div标签加的话,那就
零基础CSS入门教程(4)——Class选择器
|
前端开发
1、CSS选择器(通配符,标签,类,id)
1、CSS选择器(通配符,标签,类,id)
185 0
|
前端开发 JavaScript
jQuery——jQuery的CSS,class,属性操作及案例应用
jQuery——jQuery的CSS,class,属性操作及案例应用
164 0
jQuery——jQuery的CSS,class,属性操作及案例应用
|
前端开发
CSS——多类名选择器,id选择器,通配符选择器
CSS——多类名选择器,id选择器,通配符选择器
350 0
CSS——多类名选择器,id选择器,通配符选择器