700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > CSS中的id选择器和class选择器简单介绍

CSS中的id选择器和class选择器简单介绍

时间:2021-11-17 02:20:19

相关推荐

CSS中的id选择器和class选择器简单介绍

<!-- CSS中选择器

CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性,

你要在元素中设置id和class选择器。那么我们现在来一个一个的介绍这两中选择器

id选择器:

HTML中的元素属性用id来设置id选择器,CSS中的id选择器是用“#”来定义的

比如:

#para1

{

text-align:center;

color:red;

}

这样就定义了一个选择器,什么是选择器,在网上查的是说需要改变的HTML元素,很正确,在一开始我们的内部样式定义的时候我们想让段落或者是标题呈现怎样的样式,我们可以在开头head之间定义样式,也就是

p{

color:red;

}这样来改变我们文档中的段落的颜色,但是我们想一下,这样在开始进行定义,我们的段落需要定义,标题也需要定义,这样是不是有点麻烦,我们就想可不可以定义一个样式,在标题中可以用在样式中也可以用,其实很容易是实现,我们可以通过在文档中写的时候设置标题和段落的属性id和class让其值为我们定义的样式,这样就可以定义一次样式,大家都使用了,其实编程不就是这样的,创建一个大家都可以使用,这样就可以节省大家的时间,其实一个公用也许就是编程的开始思想吧。那么我们这样公用的样式该怎样的定义,这个定义的过程我们要考虑段落者是标题在使用的时候,该设置为id的值还是class的值,对应的就产生了两种选择器一个是id选择器,一个是class选择器,他们定义的方法是有区别的。

我们来看一个例子使用的是id选择器:-->

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#para1{

text-align: center;

color:red;

}

</style>

<title></title>

</head>

<body>

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

<h1 id="para1">Hello</h1>

<p>This is a paragraph who is not affected by the style</p>

</body>

</html>

<!-- 上面是定义的id选择器,我们在这个地方继续来看class选择器:

class选择器用于描述一组元素的样式,class选择器和id选择器的不同之处在

class选择器可以 在多个元素中使用,class选择器在HTML中一class属性

表示的,在CSS中类选择器是“.”显示的

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

.center{

text-align: center;

color: red;

}

</style>

</head>

<body>

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

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

</body>

</html>-->

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。