CSS 语法与id 和 class

╰+哭是因爲堅強的太久メ 2023-10-13 08:14 7阅读 0赞

## CSS 语法 ##

--------------------

### 实例 ###

*  查看 [实例 1][1]
 *  查看 [实例 2][2]

--------------------

### CSS 实例 ###

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

![db683852aeb5471c6987c868f4764ee8.jpeg][]

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

--------------------

### CSS 实例 ###

CSS声明总是以分号 ; 结束，声明总以大括号 \{\} 括起来:

p {color:red;text-align:center;}

为了让CSS可读性更强，你可以每行只描述一个属性:

### 实例 ###

p \{ color:red; text-align:center; \}

--------------------

### CSS 注释 ###

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /\* 开始, 以 \*/ 结束, 实例如下:

### 实例 ###

/\*这是个注释\*/ p \{ text-align:center; /\*这是另一个注释\*/ color:black; font-family:arial; \}

## 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; \}

[尝试一下 »][Link 1]

![d4473c3fb71f7c0f345e51c993d7f0e5.gif][]

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

--------------------

### class 选择器 ###

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

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

### 实例 ###

.center \{text-align:center;\}

你也可以指定特定的 HTML 元素使用 class。

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

### 实例 ###

p.center \{text-align:center;\}

多个 class 选择器可以使用空格分开：

### 实例 ###

.center \{ text-align:center; \} .color \{ color:\#ff0000; \}

![96dacd48a28a0f02c38490350af52a85.gif][]

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

[1]: https://www.runoob.com/try/try.php?filename=ex1
[2]: https://www.runoob.com/try/try.php?filename=ex2
[db683852aeb5471c6987c868f4764ee8.jpeg]: https://img-blog.csdnimg.cn/img_convert/db683852aeb5471c6987c868f4764ee8.jpeg
[Link 1]: https://www.runoob.com/try/try.php?filename=trycss_syntax_id
[d4473c3fb71f7c0f345e51c993d7f0e5.gif]: https://img-blog.csdnimg.cn/img_convert/d4473c3fb71f7c0f345e51c993d7f0e5.gif
[96dacd48a28a0f02c38490350af52a85.gif]: https://img-blog.csdnimg.cn/img_convert/96dacd48a28a0f02c38490350af52a85.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 css优先级介绍：ID优先级、class与元素选择器

![31e3c653d5c3b1e1cf6c5c987f1476be.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

╰半夏微凉°/ 2024年03月25日 10:44/ 0 赞/ 95 阅读

相关 CSS 语法与id 和 class

CSS 语法 -------------------- 实例查看 [实例 1][1] 查看 [实例 2][2] -----------------

╰+哭是因爲堅強的太久メ/ 2023年10月13日 08:14/ 0 赞/ 8 阅读

相关 CSS 中类(classes)和 ID 的区别

CSS 中类(classes)和 ID 的区别在样式表定义一个样式的时候，可以定义id也可以定义class。 1、在CSS文件里书写时，ID加前缀"\"；CLASS

╰半夏微凉°/ 2023年02月09日 10:27/ 0 赞/ 18 阅读

相关 css的class和id

css的class和id ![在这里插入图片描述][20210326102045932.gif] <!DOCTYPE html> <html>

àì夳堔傛蜴生んèń/ 2022年11月13日 06:25/ 0 赞/ 182 阅读

相关 CSS 中类 (classes) 和 ID 的区别

> 1.CSS 中类 (classes) 和 ID 的区别。 > > 在样式表定义一个样式的时候，可以定义id也可以定义class。 > > 在CSS文件里书写时

古城微笑少年丶/ 2022年09月25日 11:28/ 0 赞/ 201 阅读

相关 html css中id和class的区别比较

目录 css中 \ 和 . 区别 html css中id和class的区别比较 -------------------- --------------------

左手的ㄟ右手/ 2022年09月02日 11:35/ 0 赞/ 215 阅读

相关 css选择器class与id的区别

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。 1. id属性，只能被一个元素调用（以“\”选择符命名CSS样式在一个页

Love The Way You Lie/ 2022年06月07日 14:17/ 0 赞/ 258 阅读

相关 CSS中id,name与class的区别

1. name ：指定标签的名称 2. id ：指定标签的唯一标识。 3. class ：指定标签的类名。 4. 在CSS文件里书写时，[ID][]加前缀"\"；CLAS

àì夳堔傛蜴生んèń/ 2022年05月20日 05:59/ 0 赞/ 235 阅读

相关 HTML中CSS的id与class区别

在样式表定义一个样式的时候，可以定义[id][]也可以定义class。 1、在CSS文件里书写时，[ID][]加前缀"\"；CLASS用"." 2、[id]

小灰灰/ 2022年05月18日 08:12/ 0 赞/ 249 阅读

相关 id与class的区别

相同点： 1）都可以用来选择元素 2）都有区分元素的作用不同点： 1）id唯一，类名不唯一 2）一般在使用CSS渲染时使用类选择器，而在js中获取元素通常使用id

亦凉/ 2021年09月20日 15:28/ 0 赞/ 328 阅读