《Two Days DIV + CSS》读书笔记——CSS选择器

1.1.2 CSS选择器


CSS 选择器最基本的有四种:标签选择器、ID 选择器、类选择器、通用选择器。


【标签选择器】


一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的 CSS 样式,比如,在 style.css 文件中对 p 标签样式的声明如下:


 

<span style="font-family:Microsoft YaHei;font-size:14px;">p {</span>font-size: 12px;background: #900;color: 090;
}

 

 

这么做,会使页面中所有 p 标签的背景都是#900(红色),文字大小均是 12px,颜色为#090(绿色),返在后期维护中,如果想改发整个网站中 p 标签背景癿颜色,叧需要修改background 属性就可以了,就这么容易!当然你也可以设置整个页面中所有的 div 的属性、a 链接的属性、span 的属性,这么做方便是方便,但是不够灵活,如果页面中除了某个 p标签背景不是红色外,其他的都是红色,就不能用这种方法定义了。


【ID 选择器】


ID 选择器在某一个 HTML 页面中只能使用一次,就像只有一个身仹证  (ID)一样,不重复!在页面中使用 ID 选择器更具有针对性,如:


先给某个HTML页面中的某个p标签起个ID,代码如下:


 

<p id="one">W3CFuns.com:打造中国 Web 前端开发人员最专业的贴心社区!</p>


在 CSS 中定义 ID 为 one 癿 p 标签的属性,就需要用到“#” ,代码如下:

 


 

#one{font-size:12px;background:#900;color:090;
}

 

 

返样页面中癿某个 p 就会是 CSS 中定义的样式。 针对“页面中除了某个 p 标签背景不是红色外,其他的都是红色的”情况,我们就可以用 ID 选择器单独定义那个背景不为红色的 p 标签,返样问题就解决了。


【类选择器】


这种选择器更容易理解了,就是使页面中的某些标签(可以是不同的标签)具有相同的样式,就像国庆某个方阵中,肯定都是不同癿人,却均穿红色衣服,手中高举花环,样式都是一样的,如果想让这一类人都有共同的样式,该怎样做呢~呵呵,和 ID 选择器的用法类似,只不过过把 id 换做 class,如下:


 

<p class="one">此处为 p 标签内的文字</p>


如果我还想让 div 标签也有相同的样式,怎么办呢?加上同样的 class 就可以了,如下:

 


 

<div class="one">此处为 DIV 标签内的文字</div>

 

 

返样页面中凡是加上 class="one"的标签,样式都是一样的了~
CSS 定义的时候和 ID 选择器差不多,只不过把#换成. ,如下:


 

.one{font-size:12px;background:#900;color:090;
}

 


补充:一个标签可以有多个类选择器的值,不同的值用空格分开,如:


<div class="one yellow left">一个标签可以有多个类选择器的值</div>


这样我们可以将多个样式用到同一个标签中,当然也可以 ID 和 class 一块用

 


<div id="my" class="one yellow left">ID 和 class 可同时应用到同一个标签</div>

 


【通用选择器】


到这里,前三种基本的选择器说完了,但是还需要给大家介终一个 CSS 选择器中功能最强大但是用的最少的一种选择器“通用选择器”,就是“*”星号。


 

*{此处为 CSS 代码}

 

 

强大之处是因为他对整个网页中所有 HTML 标签进行样式定义,这种功能类似“标签选择器” ,覆盖的对象更加广泛,是整个HTML 的所有标签,功能是强大,但是返样反而限制了它的灵活性。


对于通用选择器还有一个不得不提的用法,就是为了保证作出的页面能够兼容多种浏览器,所以要对 HTML 内的所有的标签进行重置,会将下面癿代码加到 CSS 文件的最顶端:


 

*{margin:0; padding:0;}

 


为什么要这么用呢,因为每种浏览器都自带有 CSS 文件,如果一个页面在浏览器加载页面后,发现没有 CSS 文件,那么浏览器就会自动调用它本身自带的 CSS  文件,但是不同的浏觅器自带的 CSS 文件又都不一样,对不同标签定义的样式不一样,如果我们想要作出的页面能够在不同的浏览器显示出来的效果都是一样的,那么我们就需要对 HTML 标签重置,就是上面的代码了,但是这样也有不好的地方,因为 HTML4.01 中有 89 个标签,所以相当于在页面加载 CSS 的时候,先对这 89 个标签都加上了{margin:0; padding:0;},在这里我不建议大家这么做,因为 89 个标签中需要重置的标签是很少数的,没有必要将所有的标签都重置,用到哪些标签就定义哪些标签,如下:


 

body,div,p,a,ul,li{margin:0; padding:0;}


 

如果还需要 dl、dt、dd 标签重置,那就在上面加上就可以了,如下:


 

body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

 

 

用到哪些就写哪些,这点也可以看做衡量页面重构师制作页面水平的高低,以及是否专业的一个方面。


【选择器的集体声明】

在我们使用选择器的时候,有些标签样式是一样的,或者某些标签都有共同的样式属性,我们可以将这些标签集体声明,不同的标签用“,”分开,比如:


 

h1,h2,h3,h4,h5,h6{color:#900;}


再举个例子,无论什么样的选择器,”标签选择器”,”ID 选择器”,”类选择器”  ,叧要是选择器,叧要有公共的 CSS 代码,就可以用“选择器的集体声明” ,起到精简代码的作用,有一段代码如下:

 


 

#header{font-size:14px; background:#ccc;}
div{font-size:14px; width:960px;}
.blue{font-size:14px; color:#009;}
.h1{font-size:14px; font-weight:normal;}

 

 

我们就可以将上面的代码迕行精简,把公共的 CSS 代码用选择器的集体声明提取出来,有点类似小学的“提取公因式”似的,如下:


 

#header ,div ,.blue,h1{font-size:14px;}
#header{background:#ccc;}
div{width:960px;}
.blue{color:#009;}
.h1{font-weight:normal;}


这是选择器的集体声明的经典应用,把共同的部分提取出来,这样做的好处,相同的部分共同定义,不同的部分单独定义,保证风格统一,样式修改灵活,这也是优化 CSS 代码癿一块,要记住!

 


【选择器的嵌套】


选择器也是可以嵌套的,如:

 

#div1 p a{color:#900;}/*意思是在 ID 为 div1 内的  p 标签内的链接 a 标签的文字颜色为红色*/


 

返样的好处就是不需要在单独癿为 ID 为 div1 的标签内的 p 标签内的 a 标签单独定义class 选择器或者 ID 选择器,CSS 代码不就少了嘛~同样也是 CSS 代码优化的一块。



 

转载于:https://www.cnblogs.com/Destiny-Gem/p/3795696.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/260340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TempDB为什么要根据CPU数目来决定文件个数

在SQL Server的世界中&#xff0c;SQL Server在Windows之上有一套自己的任务调度和资源分配系统&#xff0c;这使得SQL Server作为Windows的一个进程&#xff0c;却可以处理大量的并发&#xff0c;这些任务调度和资源分配非常像一个操作系统&#xff0c;因此SQL Server在Window…

python基础到实践_一本书搞定Python入门到实践

题图&#xff1a;Photo by Aaron Burden on Unsplash上周介绍了几本Python从入门到进阶书籍&#xff0c;今天推荐一本入门好书《Python编程&#xff1a;从入门到实践》&#xff0c;适合零基础小白&#xff0c;也适合有其它语言背景的程序员。书中有哪些亮点&#xff1f;2016年出…

Linux网卡eth0变成eth1修改方法

由于换了主板&#xff0c;集成网卡mac地址变了&#xff0c;70-persistent-net.rules中仍然保留了老网卡的内容&#xff0c;新网卡则被识别为eth1。 将表示老网卡的行注释掉&#xff0c;然后将表示新网卡的行中eth1改成eth0&#xff0c;在把网卡配置文件ifcfg-eth0的mac地址改成…

java微博模拟登陆_java 模拟登录新浪微博(通过cookie)

这几天一直在研究新浪微博的爬虫&#xff0c;发现爬取微博的数据首先要登录。本来打算是通过账号和密码模拟浏览器登录。但是现在微博的登录机制比较复杂。通过账号密码还没有登录成功QAQ。所以就先记录下&#xff0c;通过cookie直接访问自己的微博主页。微博登录的认证过程微博…

硬盘结构,主引导记录MBR,硬盘分区表DPT,主分区、扩展分区和逻辑分区,电脑启动过程...

filex的文件系统看的云里雾里&#xff0c;还是先总结下FAT的一些基本知识吧。硬盘结构硬盘有很多盘片组成&#xff0c;每个盘片的每个面都有一个读写磁头。如果有N个盘片。就有2N个面&#xff0c;对应2N个磁头(Heads)&#xff0c;从0、1、2开始编号。每个盘片的半径均为固定值R…

最全面 Nginx 入门教程 + 常用配置解析

转自 http://blog.csdn.net/shootyou/article/details/6093562 Nginx介绍和安装 一个简单的配置文件 模块介绍 常用场景配置 进阶内容 参考资料 Nginx介绍和安装 Nginx是一个自由、开源、高性能及轻量级的HTTP服务器及反转代理服务器&#xff0c; 其性能与IMAP/POP3代理服务器…

linux 客户机中不支持 unity_婚姻中的不理解,来源于夫妻双方情感支持的不同

很多女性在婚姻中往往觉得无法得到丈夫的理解&#xff0c;当遇到一些生活或者工作上的问题的时候&#xff0c;她们想要在情感上得到丈夫的支持和理解。但是很多丈夫对此可能并不了解和理解&#xff0c;更倾向于用理性帮助妻子解决问题。而女性所需要的帮助可能并不是解决问题的…

Linux中使用crontab命令启用自定义定时任务

一 简介Linux下的任务调度分为两类&#xff0c;系统任务调度和用户任务调度系统任务调度&#xff1a;系统需要定期执行的任务&#xff0c;比如重启、日志清理等&#xff0c;其配置文件是&#xff1a;/etc/crontab用户任务调度&#xff1a;某个用户需要定期执行的任务。用户可以…

java 循环标记_深入浅析Java 循环中标签的作用

continue和break可以改变循环的执行流程&#xff0c;但在多重循环中&#xff0c;这两条语句无法直接从内层循环跳转到外层循环。在C语言中&#xff0c;可以通过goto语句实现多重循环的跳转&#xff0c;但在非循环结构中使用goto语句会使程序的结构紊乱&#xff0c;可读性变差。…

JS,Jquery 调用 C#WebService

1&#xff0c;需要在服务下面把代码的注释去掉 // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务&#xff0c;请取消对下行的注释。   //[System.Web.Script.Services.ScriptService] 2,JS 调用方法如下 var request <?xml version"1.0" encoding"…

iOS tabview 适配问题

ios7的UITableView实现ios6的圆角效果 iOS7 UITableView做成类似iOS6风格 在iOS7的时候我们会发现cell的默认线条会向右偏移&#xff0c;使左边空出了一些位置&#xff0c;这时候我们可以调用如下的方法来解决。这样我们的cell就会和iOS6前的一样铺满整个宽度了。 if ([tableVi…

PHP学习总结(14)——PHP入门篇之常用运算符

一、什么是运算符什么是运算符&#xff1f;运算符是告诉PHP做相关运算的标识符号。例如&#xff0c;你需要计算123乘以456等于多少&#xff0c;这时候就需要一个符号&#xff0c;告诉服务器&#xff0c;你需要做乘法运算。PHP中的运算符有哪些&#xff1f;PHP运算符一般分为算术…

百度时间显示_文章的发布时间对百度优化网站重要吗

文章的发布时间对百度优化网站重要吗&#xff1f;这个问题&#xff0c;相信很多初做网站优化的萌新朋友都会问到&#xff0c;以小匠个人的经历来分享这个问题的经验&#xff0c;小匠认为&#xff0c;文章的发布时间对优化网站是非常重要的&#xff0c;下面小匠将从实际经历来给…

循环链表解决约瑟夫环问题

约瑟夫环问题可以简单的使用数组的方式实现&#xff0c;但是现在我使用循环链表的方法来实现&#xff0c;因为上午看到一道面试题规定使用循环链表解决约瑟夫环问题。 什么是约瑟夫环&#xff1f; “约瑟夫环是一个数学的应用问题&#xff1a;已知n个人&#xff08;以编号1&…

java 什么时候进行垃圾回收_java什么时候进行垃圾回收,垃圾回收的执行流程

java的垃圾回收分为三个区域新生代 老年代 永久代一个对象实例化时 先去看伊甸园有没有足够的空间如果有 不进行垃圾回收 ,对象直接在伊甸园存储.如果伊甸园内存已满,会进行一次minor gc然后再进行判断伊甸园中的内存是否足够如果不足 则去看存活区的内存是否足够.如果内存足够…

常用的webservice接口

商业和贸易&#xff1a; 1、股票行情数据 WEB 服务&#xff08;支持香港、深圳、上海基金、债券和股票&#xff1b;支持多股票同时查询&#xff09; Endpoint: http://webservice.webxml.com.cn/WebServices/StockInfoWS.asmx Disco: http://webservice.webxml.com.cn/WebServ…

基于HTML5 Canvas 实现矢量工控风机叶轮旋转

之前在拓扑上的应用都是些静态的图元&#xff0c;今天我们将在拓扑上设计一个会动的图元——叶轮旋转。 先看看最后我们实现的效果&#xff1a;http://www.hightopo.com/demo/fan/index.html 我们先来看下这个叶轮模型长什么样 从模型上看&#xff0c;这个叶轮模型有三个叶片&a…

java 并发模型总类_java并发编程系列-内存模型基础

java线程之间的通信对程序开发人员是完全透明的&#xff0c;内存的可见性问题很容易困扰很多开发人员。本篇博文将揭开java内存模型的神秘面纱&#xff0c;来看看内存模型到底是怎样的。并发编程模型的分类并发编程中需要处理的两个关键问题&#xff1a;线程之间如何通信线程之…

python调用java的jar包_python调用java的jar包报错127

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼最近在弄python需要调用到Java的jar包&#xff0c;按照网上的教程走&#xff0c;最后总是报错No matching overloads found for [init in find. at native\common\jp_method.cpp:127Java&#xff1a;package aes;import com.sun.cr…

iphone、Android接收System.Net.Mail发的邮件标题乱码

参考地址&#xff1a;http://blog.csdn.net/whowhen21/article/details/5959225 在做项目时候&#xff0c;用到.Net的System.Net.Mail发送邮件&#xff0c;经测试&#xff0c;发现如果标题过长&#xff0c;收到的就会是乱码了(那种Base64格式的数据)&#xff0c;几经测试&#…