设为首页收藏本站

九九站长,站长论坛,discuz教程

 找回密码
 立即注册
查看: 802|回复: 1
收起左侧

[div+css技术] css的几种最常用的基本选择器!

[复制链接]

97

主题

165

帖子

1445

积分

九八级-网站编辑

Rank: 8Rank: 8

交易币
757 枚

活跃会员热心会员推广达人宣传达人突出贡献荣誉管理

发表于 2013-4-27 08:19:05 | 显示全部楼层 |阅读模式

注册加入九九站长论坛,一起交流,学习,分享网站技术,资源等!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前面我们讲了怎么使用样式,就是怎么把样式写入到html里面使用,当我们在使用嵌入样式和外部连接样式的时候就考虑到一个选择器的问题,就是这条样式是控制谁的,每条样式前面都要有个名称是吧,这节课就来讲哈最常用的几种选择器;

通常在写css的时候最常用只有三种选择器,分为:派生选择器、类选择器、id选择器

1:
派生选择器,就是直接使用我们的标签,如下:
p{font-size:16px;}
直接使用p标签作为选择器名,这时候就控制了所有的p标签,这就叫派生选择器,很简单吧!


2:
类选择器,写法如下:

首先我们写两个div元素:
<div class="nav"></div>
我们给div加了个属性class,值用双引号括起来,这就叫给元素命名了一个类选择器的名称,然后我们才可以用这个名称来写样式,如下:

<head>
<style type="text/css">
   .nav{width:200px;height:200px;}
  </style>
</head>

上面这个代码看的懂吧,我用的嵌入样式,里面写了条样式,这条样式控制的就是上面写的这个div元素,我先给div用class起了个名称,然后用这个名称来写了条样式,在写样式的时候,在名称的前面加了个小点,然后后面把样式都写到大括号里面,这就是类选择器的使用,实际上说简单点就是给元素起个名称然后用名称来写样式,然后在写样式的时候要在名称前面加个小点!



3:
id选择器跟类选择器一样的用法,可以说基本一样的,不过在html元素标签上面命名的时候属性名用的是id,如下:

<div id="nav"></div>
在给div元素命名id选择器的时候用是id=“”;和类选择器有点不一样,那么我们在用id选择器来写样式的时候也有点不一样,写法如下:
<head>
<style type="text/css">
   #nav{width:200px;height:200px;}
  </style>
</head>
都看得懂把,跟类选择器相比,不过就是在名称前面的小点换成了#号,记住就行了,其它的写法都是一样的.



还有一种常用的写法,html元素标签都是嵌套使用的,就是一层包含一层,比如有html代码如下:

<div class="nav">
       <p>
        <span>929站长</span>
    </p>
  </div>

比如我们要控制span标签,我们可以不用给span加类名或id名也一样的可以控制他的样式,写法如下:

.nav p span{这里是样式}

意思说在类名为nav下面的p标签下面的span元素,如果说你只要控制929站长这几个字的话,那么你就必须保证类名为nav下面的p标签下面的span元素只有一个,不然的话那这下面的所有的span元素都要被控制!


注意:   不管是那种选择器,都可以加在任意的html标签元素上面进行使用,不管是用类选择器还是id选择器,这样我们就可以任意的控制我们想要控制的标签元素了!

本节课视频教程下载地址:
链接:http://pan.baidu.com/share/link?shareid=409199&uk=909515370
密码:hvk7





特别无聊,来九九站长看下教程!

250

主题

344

帖子

3337

积分

九七级-版主

Rank: 7Rank: 7Rank: 7

交易币
1712 枚
发表于 2013-5-21 13:50:07 | 显示全部楼层
还有很多的css选择器,大家都可以自己去参考下css帮助手册,这里不做讲解,只做了解就可以了哦
随便逛逛,增加下人气!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

网上报警岗亭图标

Archiver|手机版|小黑屋|九九站长网 ( 渝ICP备13002263 )  
站长论坛   建站教程   discuz教程   discuz模板下载   网站优化
九九站长论坛版权所有:© 2001-2015;如有侵犯你的权利,请告知!

网警备案图
快速回复 返回顶部 返回列表