CSS中的id选择器和class选择器简单介绍_html/css_WEB-ITnose
程序员文章站
2024-01-29 15:13:34
...
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选择器:-->
你要在元素中设置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选择器:-->
Hello World
Hello
This is a paragraph who is not affected by the style
上一篇: 百度小偷:去除竞价与广告_PHP教程
推荐阅读
-
dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnose
-
css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
-
html中关于name和id以及class的区别介绍
-
id、name、class在html和css中的区别用法详解
-
HTML中放置CSS的三种方式和CSS选择器_html/css_WEB-ITnose
-
DIV+CSS中ID和CLASS_html/css_WEB-ITnose
-
【译】谨慎使用CSS中的波浪选择器_html/css_WEB-ITnose
-
html中关于name和id以及class的区别介绍
-
dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来_html/css_WEB-ITnose
-
请问在class中的id具体的定义怎么查看?_html/css_WEB-ITnose