码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-08-15 23:06:15      阅读：139      评论：0      收藏：0      [点我收藏+]

标签：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>-->

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

标签：id选择器   class选择器   

原文地址：http://blog.csdn.net/datouniao1/article/details/47687021
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！