css初学者:id和class的选择

  css初学者在刚开始用div+css布局的时候,常常被一个问题所困扰:当定义一个属性时,是使用id,还是使用class?在这我谈下自己在工作中对id和class的使用原则。希望对初学者有所帮助。

  id的使用原则

  我们知道id具有唯一性,也就是说在整个xhtml中id是不能重复的,所以我们在写网页的时候,大的结构用id,比如:logo、导航、主体内容、版权等,根据命名规范分别命名为#logo、#nav、#contenter、#copyright。还有一种情况就是:我们要通过js作用一个层,以实现某种效果的时候,用id。这也是由id的唯一性决定的。

  class的使用原则

  class在css定义中具有普遍性,可以无限次的重复使用,这也体现了div+css布局的优越性。class常用于结构内部,这样做的好处是有利于网站代码的后期维护与修改,这样会让所有的class成为id的子级或者孙级。

  另外需要注意一点的是尽量不要让class包含id,比如.ff #childer{...},这样做显然不可取,不符合书写习惯。前面也介绍过良好的书写习惯,对写出规范的代码,和其他同事的合作,以至于后期的维护都是很有好处的。

时间: 2024-09-20 10:51:30

css初学者:id和class的选择的相关文章

CSS复合选择器:css3让我们选择元素变得越来越简单

文章简介:使用css的类名交集复合选择器. 首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选择器. 交集选择器 "交集"复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如

CSS的id选择器的例子

基本语法: #id选择器{ 属性名:属性值; -- } 示例: html文件: <html> <head> <title>CSS的id选择器</title> <link rel="stylesheet" type="text/css" href="selector.css" /> </head> <body> <span id="id1"

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

CSS中id和class的区别和用法

在一个网页里ID只能使用一次.当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次.因为ID在html里可以赋予html标签特殊的属性如一下JS动作.表单传值等特性所以区别于一个class可以使用多少的次,而一个CSS 命名的id只能使用一次避免一些特定动作.传的表单值的兼容性特性错误即使没有其它JS脚本动作.表单传值特性但是我们也一定执行一个页面只能使用一次. id 选择器以 "#" 来定义,命名CSS选择器. 定义命名css id选

DIV+CSS中id和class的使用原则

本文向大家描述一下DIV CSS中id与class使用原则,在前面的文章里讨论过很多DIV CSS布局的技巧,我们在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?这里和大家说明一下,相信本文介绍一定会让你有所收获. DIV CSS中id与class使用原则 在51cto.com前面的文章里讨论过很多DIV CSS布局的技巧.在用CSS来控制网页布局时我们可能都会遇到一个问题:当定义一个属性时,是使用id,还是使用class?今天51cto.c

css初学者快速参考

在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额. 在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考.有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事.格式不正确的XHTML/CSS 会导致许多布局上的错误. 在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反. 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览

网页制作中css定义id与class有什么区别?

一.web标准中是不容许重复ID的,比如 div id="aa" 一个页面中不容许重复2次,而class 定义的是类,理论上可以无限重复的, 这样需要多次引用的定义便可以使用他.class还可以同时引用多个类,不同的类之间用空格隔开.二.属性的优先级问题,ID 的优先级要高于class,看上面的例子三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

DIV+css初学者需要引起重视的10个问题与技巧

DIVcss初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,有多篇文章提醒大家经引起重视,下面罗列了10个问题与技巧,温故而知新. 一.检查HTML元素是否有拼写错误.是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误. 二.检查CSS是否正确 检查一下有无拼写错误.是否忘记结尾的 } 等.可以利用CleanCSS来检查 CSS的拼写错误.CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误. 三.确

HTML初学者教程-概念和软件选择

初学|概念|教程 本站原创内容,转载请注明出处网页教学网. 在网上的大部份内容和我们计算机中的内容是没什么不同的,当我们查找文件时,也是按照某种分类进入某个目录,之后访问到某个文件的! HTML文件是超文本标记文件, 因此在开始学习HTML的时候,就要使用一个文本编辑软件. 记事本就是一个最简单的文本编辑软件. 打开写字本(NotePad): 现在我们来制作第一个网页,首先在我们的计算机的磁盘中建立一个文件夹HTML,然后把文件保存为'myfirstpage.html'的文件 (重要的是我们保存