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

简介: 1) . 号 和 # 号 在CSS文档中,我们常常可以看到一些符号,最常见的就是 . 号 和 # 号,那么它们分别代表什么意思呢? #号:标志网页上的ID,顾名思义,一个ID标志唯一的一个值,我们在数据库中也是如此,因此,ID必须是唯一的。

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对应.

 

 

 

 

 

目录
相关文章
|
5月前
|
前端开发
文字显示在div 最下面,css怎么写
文字显示在div 最下面,css怎么写
350 0
|
11月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
490 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
11月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
304 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
121 1
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
502 3
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
764 1
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
379 2
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
2812 0
|
前端开发
css div填满剩余高度
css div填满剩余高度
219 0