CSS Id 和 Class

CSS Id 和 Class
2021年08月17日12:20:00 0 428

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


尝试一下 »

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(58how.com)</title> 

<style>

#para1

{

text-align:center;

color:red;

</style>

</head>

 

<body>

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>菜鸟教程(58how.com)</title>  <style> #para1 { text-align:center; color:red; }  </style> </head>  <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>

 


 

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


class 选择器

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

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

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

实例

.center {text-align:center;}


尝试一下 »

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(58how.com)</title> 

<style>

.center

{

text-align:center;

}

</style>

</head>

 

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p> 

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>菜鸟教程(58how.com)</title>  <style> .center { text-align:center; } </style> </head>  <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p>  </body> </html>

 


 

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

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

实例

p.center {text-align:center;}


尝试一下 »


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>菜鸟教程(58how.com)</title> 

<style>

p.center

{

text-align:center;

}

</style>

</head>

 

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p> 

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>菜鸟教程(58how.com)</title>  <style> p.center { text-align:center; } </style> </head>  <body> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p>  </body> </html>


 

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

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
历史上的今天
08月
18
java,基础,教程,常量,定义,分类 菜鸟教程

Java基础教程3-常量的定义和分类

常量是指在程序的整个运行过程中值保持不变的量。在这里要注意常量和常量值是不同的概念,常量值是常量的具体和直观的表现形式,常量是形式化的表现。通常在程序中既可以直接使用常量值,也可以...
重温,设计模式,之 factory 菜鸟教程

重温设计模式之 Factory

前言创建型模式的核心干将,工厂、简单工厂、抽象工厂,还记得清么,一文回顾和对比下。一  为什么需要工厂系统中总是需要创建对象的,一般使用new()来创建对象。创建对象可以...
干货,—,asp.net,快速,上手,教程,教程,内容,为, 菜鸟教程

干货——asp.net快速上手教程1

教程内容为asp.net基础(真的很基础),希望每一个看完这个系列教程的朋友都能够上手做一些简单的小项目~~ 开发工具:vs2015 新建一个web项目 文件-新建-项目 -C#-...
什么,魔术,引号 菜鸟教程

什么是魔术引号

什么是魔术引号Warning本特性已自 PHP 5.3.0 起废弃并将自 PHP 5.4.0 起移除。当打开时,所有的 '(单引号),"(双引号),\(反斜线)和...
SOAP,实例,SOAP,实例,一个,在下,面的,例子,中, 菜鸟教程

SOAP 实例

SOAP实例 一个 SOAP 实例 在下面的例子中,一个 GetStockPrice 请求被发送到了服务器。此请求有一个 StockName 参数,而在响应中则会返回一个 Pric...

评论列表 共有 0 条评论

暂无评论