CSS基础知识 - ID/Class/Div/Span/Selector

1) . 号 和 # 号

在CSS文档中,我们常常可以看到一些符号,最常见的就是 . 号 和 # 号,那么它们分别代表什么意思呢?

#号:标志网页上的ID,顾名思义,一个ID标志唯一的一个值,我们在数据库中也是如此,因此,ID必须是唯一的。

.号: 标志网页上的一个Class(类),当然啦,这个Class和我们OOP中的Class不一样,请不要搞混。

 

那么,# 和 . 的区别到底是什么呢?

最重要的如下:

一个ID名只能应用于页面上的一个元素,而同一个类名可以应用于网页上任意数量的元素。

 

 我们知道,我们可以在Class中添加字体,颜色和其他,然后在网页中,只要class="XXX"就可以应用该类的样式。

于是,CSS新手们常常在几乎所有的东东上添加类,这样做是不好的,我们可以称它为“多类症”,在某种程度上,

这和使用表格布局一样糟糕!

 

2) Div和Span

div就是division,代表网页中的一个部分,我们通常将主要内容包围在div中并分配ID,这样可以做到在网页中添加结构。

span代表一个行,我们可以用它来对行内元素进行分组,你可以把它想成是ASP.NET中的label控件。

它们的区别:

div会自动换行,而span不会。

有的网页新手在页面中任意应用div,这在有时候是完全没有必要的。比如下面一个例子:

<div id="mainNav">

<ul>
 <li><a href="#">Home</li>
 <li><a href="#">News</li>
 <li><a href="#">Contact</li>
</ul>

</div>

 以上这段代码是完全没有必要的,列表本来就是顶级元素,因此完全可以在列表上应用ID,如下:

<ul id="mainNav">
 <li><a href="#">Home</li>
 <li><a href="#">News</li>
 <li><a href="#">Contact</li>
</ul>

 

3)常用的Selectors(选择器)

 a) 类型选择器

      - 用来寻找特定类型的元素,比如段落(p),链接(a),或者标题(h1),包括body等等。

      eg:

      p { color: black; }

      a { text-decoration: underline; }

      h1 { font-weight: bold; }

 

b) 后代选择器

      - 用来寻找特定元素或者元素组的后代,它由两个选择器之间的空格表示。

      eg:

      li a { text-decoration: none; }

      在上面的例子中,只有在列表项的链接元素上才会应用样式,而段落中的链接则不受影响。

 

c) ID和类选择器

      我们在上面已经讲过,id对应#,class对应.

 

 

 

 

 

时间: 2024-10-26 15:57:01

CSS基础知识 - ID/Class/Div/Span/Selector的相关文章

CSS基础知识解析

一.基础知识 1.1 CSS组成 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声明:在英文大括号"{}"中的的就是声明,属性和值之间用英文冒号":"分隔.当有多条声明时,中间可以英文分号";"分隔,如下所示 p{font-size:12px;color:red;} 注意:1.最后一条声

CSS基础知识 - 盒模型/定位/浮动

1. Box Model (盒模型)       Box Model 是CSS的指定元素如何显示和交互,是CSS的基石之一.       页面上的每个元素被看成是一个矩形框,它由内容,填充(padding),边框(border),空白边(margin)组成.       他们之间的关系如下:       [ margin [ border [ padding [ content ] ] ] ]       margin, border, padding 都是可选的,他们的默认值为0.      

[CSS基础教程]常见的DIV+CSS布局日期显示在右侧的效果

以下是HTML网页特效代码,点击运行按钮可查看效果: [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

js切换div css注意的细节_基础知识

附上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content=&q

XHTML+CSS完全基础知识

XHTML+CSS   选择什么样的DOCTYPE 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE. 查看本站首页原代码,可以看到第一行就是: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 打开一些符合标准的站点,例如著名web设计软件开

CSS实例教程:用列表ul制作CSS横向菜单的基础知识

在前面的文章中学习<用列表ul制作CSS横向菜单的基础知识>/article.asp?id=395.实现的原理我们都能理解了,但这样的菜单还远远不能满足我们的需要,我们需要制作出比较美观的菜单,我们今天学习让菜单有一个矩形的背景,并且当鼠标激活时能有所变化(hover).废话不多说了,让我们开始吧! <ul id="nav">       <li><a href="http://www.111cn.net/">Div+

深入CSS结构:合理运用div和span

css 特意上网搜索了一下,关于div,说法很多. 把div看成是布局元素这种观点我想是最多的,类似有"用div代替table进行布局"."实战CSS+DIV布局"等等等等,太多了,还有不少人延用Dreamweaver的定义,称div为层,按Photoshop的层的概念来使用--有朋友干脆就直接称div和span为辅助布局元素. 怎么说呢?虽然我很想说对div类似的这种认识是错误的,div不是一个布局元素,没有一个tag是用来布局的,但是我是对的吗?我也不知道.几乎

HTML及CSS基础课(十) 用class和id为div设置风格

这节课主要是复习一下前一课的内容,会用div来创建几个圆圈,让用class和id来给他们设置风格. 其中涉及到的属性: display: inline-block border-radius: 100%; margin-left: 5px 将会在后面课程有讲 stylesheet.css /*Add your CSS below!*/ div { display: inline-block; margin-left: 5px; height: 100px; width: 100px; borde

使用HTML+CSS+JS制作简单的网页菜单界面_基础知识

 写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器.ABROAD后台添加数据.百度图片搜索.sf发布博客文章时贴标签的样式--标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了. 1.HTML代码: <span class="tags"> <span>经济.金融类</span> <span>行政.人资类</span> &l