css进阶学习 选择符_基础教程

来源:脚本之家  责任编辑:小易  

一、“无”的哲学佛家讲究“因果报应”,有果必有应。此段看似与主题没有血缘关系,实际讲的是“因”。我个人比较喜欢老子的道家思想,并喜欢以其思想解释学习与工作中遇到的一些问题。例如我之前写过的“中国古代道家思想与网页重构的思考”一文。老子有云:“天下万物生于有,有生于无”。具体解释就是:天下万物都是由看得见的具体事物(“有”)产生的,而看得见的具体事物(“有”)又是由看不见的,无形无状的东西(“无”)产生的,这个看不见的“无”也就是“道”,或叫做“根”、“母”。我们看武侠片,经常听到“无招胜有招”这句话,这也是道家“无”之思想之体现。因为你心中没有招式,你才能有无限的可能,生成其他的招式以克敌,即所谓以不变应万变;相反,如果你心中牢记一套“华山剑法”,当你与人交手时,势必按照此套路走,要是遇到相克之剑法,结局就是一败涂地。“无招”是一种境界,是你功夫修炼到一定程度才能领悟到的。我们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》,其中张三丰老头教完张无忌太极拳后问他“记住了没?张无忌一句“全忘记了!让人印象深刻。这就是“无”的境界。这种境界我是深有体会的。例如每逢大考之前,我总是把以前做过的题目全部忘掉,这样,考试时就能思如泉涌;反而是强记题目的做法限制了发挥。这就好比发射炮弹,炮管里提前预装了重型炸蛋,结果战斗开始时,发现需要的是烟雾弹,此时,反而被预装的炸蛋给阻塞限制了。打篮球也有这种体会,如果心中记得的是动作,我要这么走,然后这么做,往往表现不佳。反而是脑中什么想法也没有,全靠下意识行动,那真是所向披靡,得分如探囊取物。可见,要想发挥更大,就需要“无”,把一些“限制的东西”通通去掉。没有限制才能发挥出最大的潜能。站在最简单,最原始的那个点上,你才能自由驰骋,应变自如。二、名字的本质是什么我们有没有思考过这么一个问题:名字的本质是什么?这个问题其实不难,名字本质上就是一个符号,用来区分人与人的。与符号一样,名字本身就蕴含着很多的信息。举个例子,我的名字:张鑫旭。其中蕴含的信息有:我老爸也姓张,我是上午太阳刚刚升起的时候出生的,我五行缺金。一个名字,如果其蕴含的信息越多,则这个名字就越独特,也就是说,越不可能被别人使用;相反如果这个名字很普通,例如李娜、张艳之类,就会被大规模的重用,OK,这其实没什么大不了的,我们的唯一身份标识不是名字,而是身份证,但是,对于CSS样式的命名,冲突与否可不是拉便便,擦个屁股就没事的。对于CSS,为了避免样式冲突,我们总会给其赋予相当特殊的命名,或是在选择符上添加HTML标记,或是使用层级。所谓一朝怕蛇咬,十年怕井绳。一旦我们经历过样式冲突带来的让人吐血的麻烦后,我们可能就会时时在避免冲突上狠做文章,所谓过犹不及,结果又是一个烂摊子,本如花似玉的黄花小闺女变成个臃肿的肥妞。例如下面人人网的CSS命名:我想我们都希望写出精简高效的CSS代码,如果CSS重用性越高,想必就越高效。这如人的名字一样,如果名字越普通,越没有含义,越容易被重用,所以CSS要想重用性高,就需要命名简单。但是,简单的命名越容易造成样式冲突,例如.more{}。从这点上来说,重用性与样式冲突时两个对立的矛盾体。不过,万幸的是,这种矛盾并不是不可调和的。记住一些准则/方法,CSS既可以有高度的重用性,又不会有样式冲突的困扰。下面就将介绍这些命名方法。三、面向属性的命名方法我们习惯在CSS命名的时候掺杂语义,这样可以让代码更易懂。例如淘宝首页“免费注册”按钮上的class名称:help-guest-regist上面的class命名语义就很明显,独眼龙看告示—一目了然,”help-guest-regist”就是”帮助-顾客-很nice,很人性化的命名。作为在单一的首页上使用,我是很难挑出什么毛病来的。但是,从道家“无”的哲学思想来看,语义其实是对自身的一种束缚,越是语义强烈的命名越是没有重用性(尤其是内容语义的)。举个实际点的例子,例如人人网的右侧边栏的标题:/zxx:一般找这类反例我就喜欢找人人网还有新浪,基本上一找一个准。人人网虽然外表长得跟facebook类似,但是就CSS而言,差距不是一两个档次的。这个标题的class名是”side-item-header”,样式如下图所示:现在一切ok,现在设想下,如果页面中间的模块有个标题,其样式也是:{padding:0 0 8px;text-align:right;}那你发现前面已经有一模一样的CSS样式后,你会怎么办。把中间的标题也用”side-item-header”这个class吗?这里”side”就是表示“边”的意思,这就意味着这个样式用在非侧边栏就是不合理的。你能做的估计即使新命名一个class,就像是”body-item-header”,明明是同样的CSS属性,结果却不能重用(即使使用标识符组合并CSS,这里的命名也是没有重用的)。可见命名不合理会大大限制你的CSS重用性。如何命名才能让CSS发挥最大的重用性潜力呢?答案就是“面向属性的命名”。这种命名就是要让你把页面啊设计啊什么的通通塞到马桶里冲走,不要管页面什么位置,什么内容,there is noting,这儿什么都没有,既然什么都没有,也就没有了任何限制,于是CSS可以自由出入于任何地方,无限重用,而且不用担心冲突,因为“面向属性的命名”就是针对自身属性的一种命名方式,只会overwrite,不会冲突。相比很多同行都用过这样的命名方式,只是不够系统,不够大胆、彻底,多浅尝辄止,比如像是开心网,还有时光网的CSS代码的前面一部分样式命名:我在“CSS样式分离之再分离”一文中就展示过这种命名了,分离为什么可以让样式的重用性放大至最大,就是因为分离后样式的命名就是样式本身。就拿上面人人网的标题样式举例,人人网的做法是:side-item-header{padding:0 0 8px;text-align:right;}要是我,我会对其进行分离。在实际项目时,text-align:right;这个属性早就在CSS通用样式库里面了,而padding:0 0 8px;则会以padding-bottom:8px;的形式放在网站通用样式库里了(详细请参见我的“我是如何对网站CSS进行架构的”一文)。最后,CSS命名与样式会如下:tr{text-align:right;}pb8{padding-bottom:8px;}而这里分离出来的样式又可以被其他地方使用。是不是有点“吸星大法”的感觉。当然,如果网站本身的架构不是对每个侧栏内容进行模块化处理的话,说实话,这里标题的分离还是有点危险的。想想看,如果那天产品经理说底部padding值要改成10像素,啊哦,如果你的网站架构不合理,含这类标题的模块到处塞,会改到你急火攻心,吐血三升而亡的。所以,对于分离,我反复强调,“千万不要对网站通用的元素进行分离”。所以,记住精简高效的CSS命名准则之一:对于网站非通用元素,如果样式简单(1~2个属性),对其分离并使用面向属性的命名方法。四、精简高效CSS命名之“三无原则”此“三无原则”就是:无ID,无层级,无标签CSS命名就应该最简单、最直接,直捣黄龙。没有HTML标签,没有层级,这些通通滚蛋,不要。为什么不要,有三大原因:1.限制重用我们会使用层级(#test.test),会使用标签(ul.test),可能是习惯(没多想),或是为了避免冲突。但是,我跟你说,从今以后,这种写法让他见鬼去吧(如果不是为了改变CSS优先级的话)。正如开篇论述的哲学观点,你限制越多,越抑制了CSS的重用性。例如#test.test{}这种写法,里面的CSS重用性多大,完全限死在了id为test的元素下,哪有重用性可言;又如ul.test,我勒个去,这个ul标签十有八九就是装饰用的,往这儿一放,同样CSS样式的div标签可以用吗?哭爹喊娘,眼泪汪汪也不管用啊。所以,相信我,层级啊,标签啊什么的,通通见鬼去吧。要知道,层级啊,标签啊作用是什么,是用来提高CSS优先级,把那个字母长的让人发毛的”!important”干掉的。2.CSS文件大小这瓜子虽小,吃多了也是可以填饱肚子的。所以,你的CSS名称不要像老太太的裹脚布一样,搞得又臭又长,如下图所示的人人网那个冗长的CSS命名吧:你看名称的字节数已经比属性还大了,要是这些名称都在15字符以内,乖乖,这个CSS文件可以小个1~2K绝对没有问题的。你看下图这样子的命名,这样子的CSS排版是不是更舒服,更简洁。3.降低了渲染效率来个例子考考大家(以后我面试别人可能就会考这题),HTML如下:ul>现在要给这里的ul标签一个样式,比如说padding-left:25px;那么下面四种写法哪个渲染速度最快?test.test{},ul.test{},#test ul{} 以及.test{}。如果单纯的ul与.test PK,我还真拿不定谁的渲染速度更快些。但是,一旦牵扯到层级与标签,我100%确定,.test这种最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素,则#test ul{}速度是最快的,先id获取,再tag获取,这些可都是JavaScript内置的方法。但是,CSS的渲染方式则是属于外太空系的了,《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的,就拿#test ul{}举例,先渲染页面上所有的ul标签,再去寻找id为test的元素,所以,出现#test div{}这种写法的人都是傻×的,页面先渲染id为test的元素?非也!先渲染页面上所有的div,再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒(补充:这里的差异不是说单纯一个样式的差异,而是这些写法泛滥的页面的全部渲染,其渲染差异数据可以参见“翻译-不同CSS技术及其CSS性能”一文),我们人一般是感觉不到的。所以,长久以来,也都不以为然。但是,我是绝对容不下这种写法的,还有,要是让我看到类似于ul#test{}这样子的命名,不好意思,面试肯定过不了。所以,CSS命名,只要出现了层级,出现了标签,就是一次额外的渲染,层级越多,渲染的开销也就越大,这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”,“无标签”。对于原则第一条“无ID”,其实与性能没有多大关系,只是一般ID都与JavaScript有奸情,如果再..www.zgxue.com防采集请勿采集本网。

在我最早开始写css的时候,其代码上的高自由度就一直很令我困惑。这就是说,同一个设计,如果让不同的人来实现,最终的代码一定是有差异的。但这存在一个问题,如果不同的人通过不同的方法以及代码风格,都从外观上实现了一样的设计,将很难评价谁做得更好。想来也是,既然都实现了设计,达到了目的,css这种没有程序逻辑的代码中,又能找出什么来说明谁做得更出色呢?

即:以师德为核心开展教育,努力使学生达到本科层次学术水平和小学教师的专业化水平,具备教育能力、教学能力、组织管理能力、活动指导能力、教学研究能力、学习发展能力,和讲、写、算、创、教、用、作、

而如今,我认同的观念是,css这种描述性语言,仍然有着代码上的质量评判。评判标准就是可维护性(Maintainability)和性能(Performance),用比较通俗的话说,好的css,要对开发者的工作友好(dev-friendly),也要对浏览器友好(browser-friendly)。 本文将说明如何从css选择符的角度来提高css代码质量。

吉他的学习是一个系统的,长期的过程,重要的是从基础学习,并且要懂得坚持,具体方法如下: 1、按53231323的拨弦顺序练习,坚持每天练习,不能中途而废。2、学习一些基本的乐理知识,把每天需要

关键选择符与浏览器的样式规则匹配原理

HTML5本身就包含了HTML与CSS,它是一个技术的统称。HTML5包含“HTML、CSS、JS”,比较推荐使用《HTML5布局之路》进行学习,入门HTML与CSS会快很多,这本书上的东西也能够解决你的第2~4点问题 第

css选择符的概念,在之前的新手学习css优先级的开头部分也有提到,是指每一条样式规则中,描述把样式作用到哪些元素的部分,也即{}之前的部分。在本文,还要额外介绍一个概念:关键选择符(Key selector)。关键选择符就是在每一条样式规则起始的{之前的最后一个选择符,如下图:

1、教育的基本规律有两条,一条反映的是社会发展与教育的辩证关系,另一条反映的是人的发展与教育的辩证关系。2、教育,教化培育,以现有的经验、学识推敲于人,为其解释各种现象、问题或行为,

css选择符将确定后面的属性定义要作用到哪些元素,因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。关于浏览器的样式匹配系统,David Hyatt在Writing Efficient CSS for use in the Mozilla UI一文中提到了以下内容:

许多有趣的问题都能得到解释鉴于关注这个话题的盆友增多,在此增加几本进阶类的书籍供大家选择(5)《发展心理学》有两本书都蛮不错(a.发展心理学(豆瓣))(b.发展心理学(豆瓣))(6)《人格心理学》

The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

意思是说,浏览器引擎在样式匹配时,以从右向左的顺序进行。在具体匹配某一条样式规则时,这个从右向左的过程会一直持续,直到读取完整个选择符序列并完成匹配,或因某一个地方的不匹配而取消(然后转到另一条样式规则)。

至于为什么浏览器会选择这样的匹配顺序,你可以看看Stack Overflow上的相关讨论。大致上解释一下的话,由于最右边的关键选择符直接表示了样式定义应作用的元素,所以从右向左的顺序更利于浏览器在初始匹配的时候就确定有样式定义的元素集合,并更快地在找某一个元素的样式时避开大多数实际没有作用到的选择符。

更好的css选择符,是让浏览器在样式匹配过程中减少匹配查询次数,以更快的速度完成样式匹配,从而优化前端性能。这其中,也必须参考浏览器的对于样式从右向左的匹配顺序。

css选择符的正确使用方式更特定

更具体的关键选择符

关键选择符是浏览器引擎在样式匹配时最先读取到的部分,因此,如果你在某一条样式规则中使用更特定、具体的选择符,可以帮助减少浏览器的查找匹配次数。

比如说下边这样的选择符:

.content .note span{}

最后一个span是关键选择符,而span这个标签,在网页中使用是非常多的。浏览器从span开始读取选择符,就可能会为因此在样式匹配上做了一些额外工作。

如果你确定只是想为具体处于那一个位置的span元素定义样式,更好的做法是为span命名class,比如命名为span.note_text,然后简单写为:

.note_text{}

使用class选择符

class选择符(类选择符)是最利于性能优化的选择符。相对于class,ID的缺点是只允许定义给一个元素,无法重用。而此外,它在使用上没有任何比class更好的地方。很多时候,你很难确定某一个元素是否是唯一的。另外,使用class来定义样式,而保留ID给javascript,一直是一个较好的实践。如果可以,不使用ID来定义样式。

而相对于class,标签在html中的重复性要更大,因此同样可能让浏览器在样式匹配时做更多的额外工作。如果可以,除css样式清零(reset)外,不使用标签选择符(也叫元素选择符)。

缩短选择符序列

继承写法(准确地说,这里指css关系选择符中的包含选择符)是css中很常用的写法。继承写法的初衷是,如果有两个元素,都是同样的标签或有相同的class命名,加入父元素的选择符组成选择符序列,就可以避免在不需要的时候两个元素的样式互相影响。比如.confirm_layer .submit_btn就是指,class名为submit_btn,且有一个class名为confirm_layer的父元素的元素,才应用样式。

但是,避免元素样式相互影响,并不代表可以随意地使用继承选择符。前面提到,浏览器会从右向左读取整个选择符序列,直到读取完毕并匹配完成,或者因不匹配而取消。因此,短的选择符序列更有利于浏览器更快地完成匹配过程。相对的,冗长的选择符序列则认为是低效的,比如:

.header ul li .nav_link{}

建议写为:

.header .nav_link{}

一般来说,不超过3层的继承层级就可以满足实际中的开发要求。因此,应减少不必要的继承层级,使用更短的选择符序列。

此外,较长的选择符序列还有一个问题。有较长选择符的样式规则,css优先级的计算值也较大,因此,如果在以后需要写新的样式来覆盖掉它,就需要写更长的选择符(或者使用ID)以获得更高的css优先级。这对性能和代码可读性都是不利的。

避免链式选择符

链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name,且标签是p的元素,才应用样式。这些判定组合可以是ID选择符,标签选择符,class选择符的任意组合。

但是,链式选择符是过度定义(over qualified)的,不利于重用,也不利于性能优化。如:

a#author{}

建议写为:

#author{}

这里的a是不必要的。一个ID只对应一个元素,没有必要再强调这个元素的标签是什么(同理,class也不必)。另外有

.content span.arrow{}

建议写为:

.content .arrow{}

这里的span.arrow中的span也是不必要的。一方面,这为浏览器在样式匹配时增加了一项额外工作:检查class名为arrow的元素的标签名是不是span,也因此降低了性能。另一方面,如果去掉了这个限定,.arrow的样式定义,就可以用在更多的元素上,也就有着更好的重用性。否则,就还得告诉别人,使用这个的时候只能用在span标签上。

同理,多个class的链式写法,如

.tips.succuss{}

建议更改命名,写为:

.tips_succuss{}

这样可以帮助浏览器减少额外的样式匹配工作。

此外,IE6还存在一个链式选择符的问题,多个class选择符写在一起时,例如.class1.class2.class3,正常情况是只有同时有这全部的class的元素,才应用样式。但IE6只认最后一个,也就是符合.class3这个选择符的元素,就应用样式。

例外情况

前面所述的选择符的写法的建议,只是从浏览器渲染性能优化,及代码的重用性方面分析得到的理论结果。在实际使用中,你并不需要严格按照这些内容来做。例如,如果你确实是准备为class名为intro的元素内的所有a标签元素都加上某样式,那么.intro a这样的选择符是明智的。

结语

关于高效的css选择符的指南,你还可以阅读google developer中的Use efficient CSS selectors

如今,现代浏览器在样式匹配上也逐渐有了更多的优化(参考CSS Selector Performance has changed!),有些方面的内容我们已经不再需要再担心了。但是,这并不意味着不需要考虑写合理的css选择符了。css选择符性能优化是依然存在的事,你的选择符应该更好地体现你的意图,而不是随心所欲地使用。更重要的是,以这样一种稍细腻的,经过思考的想法来写css选择符,并不是一件困难的事。只要你想,形成这样的一种习惯,你就可以自然地在这方面做得更好,何乐而不为呢?

CSS之入门篇—推荐新手关于CSS样式表一.在学习css之前你应该掌握哪些基础知识1.什么是网页,什么是超文本语言(html)。2.会使用Dreamweaver等常用的网页编辑器。Dreamweaver是现今最好的网站编辑工具之一,而Dreamweaver8增加的对CSS的支持更是你容易得来使用CSS,用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver8在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的CSS手册,你就可以轻松自如的在网页中运用CSS。不过首先你要对CSS有一定的了解。因此,本教程的前面4章为CSS理论知识,主要是对CSS的全面介绍,希望读者看后对CSS的语法、结构、应用有一个全面的了解;后面4章为DW实战,主要是教你如何利用Dreamweaver8灵活运用CSS在网页中。阅读此文前,你需要对HTML有一定的了解,并会使用Dreamweaver。二.认识CSSCSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。网页设计最初是用HTML标记来定义页面文档及格式,例如标题、段落、表格、链接等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在1997年W3C(The World Wide Web Consortium)颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1,自CSS1的版本之后,又在1998年5月发布了CSS2版本,样式表得到了更多的充实。W3C把DHTML(DynamicHTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的浏览器支持,有些效果需要更高版本的浏览器支持。三.怎样使用CSS如果你使用的是Dreamweaver MX 2004以上的版本,在定义文字字体、颜色、大小等属性的时候,查看一下代码你会发现有这样的一部分在head区域:STYLE2 {font-size:16pt;font-family:"Courier New",Courier,monospace;font-weight:bold;color:#FF3300;}那么恭喜你,你已经使用了CSS设计网页。那么除了这种调用CSS的方法外,还有别的吗?回答是“当然有了”,下面是系统介绍标记加注法(in-line):如果只有一个HTML标记需要设定样式,则可在该标记内,加上属性style="以个别修订样式。页面内嵌法:body { background:white;color:black;}->外部调用法:双表法调用样式表:import url(css/style01.css);1.基本语法CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。基本格式如下:selector {property:value}(选择符 {属性:值})选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE…,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:body {color:black}选择符body是指页面主体部分,color是控制文字颜色的属性,black是颜色的值,此例的效果是使页面中的文字为黑色。如果属性的值是多个单词组成,必须在值上加引号,比如字体的名称经常是几个单词的组合:p {font-family:"sans serif"}(定义段落字体为sans serif)如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:p {text-align:center;color:red}(段落居中排列;并且段落中的文字为红色)为了使你定义的样式表方便阅读,你可以采用分行的书写格式:p{text-align:center;color:black;font-family:arial}(段落排列居中,段落中文字为黑色,字体是arial)2.选择符组你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:h1,h2,h3,h4,h5,h6 { color:green }(这个组里包括所有的标题元素,每个标题元素的文字都为绿色)p,table{ font-size:9pt }(段落和表格里的文字尺寸为9号字)效果完全等效于:p { font-size:9pt }table { font-size:9pt }3.类选择符用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:p.right {text-align:right}p.center {text-align:center}然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:这个段落向右对齐的这个段落是居中排列的这个段落向右对齐的这个段落是居中排列的注意:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:center {text-align:center}(定义.center的类选择符为文字居中排列)这样的类可以被应用到任何元素上。下面我们使h1元素(标题1)和p元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:这个标题是居中排列的这个段落也是居中排列的注意:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。4.ID选择符在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID替代:这个段落向右对齐定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同,定义ID选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)下面这个例子,ID属性只匹配id="intro"的段落元素:p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}注意:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。5.包含选择符可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:table a{font-size:12px}在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。6.样式表的层叠性层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非另外更改。例如在DIV标记中嵌套P标记:div { color:red;font-size:9pt}这个段落的文字为红色9号字(P元素里的内容会继承DIV定义的属性)注意:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如,上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:div { color:red;font-size:9pt}p {color:blue}这个段落的文字为蓝色9号字我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如:p { color:#FF0000!important }blue { color:#0000FF}id1 { color:#FFFF00}我们同时对页面中的一个段落加上这三种样式,它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important,则依照优先权最高的ID选择符为黄色文字。7.注释你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*"开头,以"*/"结尾,如下:定义段落样式表*/p{text-align:center;文本居中排列*/color:black;文字为黑色*/font-family:arial/*字体为arial*/}定义段落样式表*/p{text-align:center;文本居中排列*/color:black;文字为黑色*/font-family:arial/*字体为arial*/}前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用。当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:[u]链入外部样式表[/u]、[u]内部样式表[/u]、[u]导入外表样式表[/u]和[u]内嵌样式[/u]。1.链入外部样式表链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用标记链接到这个样式表文件,这个标记必须放到页面的区内,如下:上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。样式表文件可以用任何文本编辑器(例如:记事本)打开并编辑,一般样式表文件扩展名为.css。内容是定义的样式表,不包含HTML标记,mystyle.css这个文件的内容如下:hr {color:sienna}p {margin-left:20px}body {background-image:url("images/back40.gif")}定义水平线的颜色为土黄;段落左边的空白边距为20象素;页面的背景图片为images目录下的back40.gif文件*/2.内部样式表内部样式表是把样式表放到页面的区里,这些定义的样式就应用到页面中了,样式表是用标记插入的,从下例中可以看出标记的用法:..内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css基础 css选择符
  • 大家看了就明白了css样式中类class与标识id选择符的区别小结
  • css选择符说明
  • lesson01_08 图像地图
  • 第2天:什么是名字空间
  • css网页布局入门教程9:用css设计网站导航——横向导航
  • fif互动帮助手册系列-html手册 flash版
  • 第3天:定义语言编码
  • ie里button设置border:none属性无效解决方法
  • 第8天:css布局入门
  • css入门教程篇
  • css清除浮动方法汇总
  • css网页布局入门教程5:二列宽度自适应
  • CSS是什么?它是一种软件吗?要学的话是要再下载过来的吗?
  • css的书写规范,有哪些注意点
  • 零基础学web前端开发要学多久?求教
  • 零基础初学者学习编程语言应该学习哪一种?
  • 小学教育和教育学有什么区别?哪个更容易进入学校就业?
  • 吉他零基础怎么自学入门,就是一点也不会的那种
  • 0基础如何自学html和css
  • 教育的基本规律.
  • 我对心理学比较感兴趣,自学如何才能系统的学好心理学呢?求解谢谢
  • css入门最基础教程
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全经验交流基础教程vml相关首页css/html基础教程css基础 css选择符大家看了就明白了css样式中类class与标识id选择符的区别小结css选择符说明lesson01_08 图像地图第2天:什么是名字空间css网页布局入门教程9:用css设计网站导航——横向导航fif互动帮助手册系列-html手册 flash版第3天:定义语言编码ie里button设置border:none属性无效解决方法第8天:css布局入门css入门教程篇css清除浮动方法汇总css网页布局入门教程5:二列宽度自适应纯css绘制三角形(各种角度)网页颜色搭配技巧 文字字体、字号iframe背景透明的设置方法html滚动条样式base href 使用方法详解用好href的target属性html label标签的使用教程iframe的使用用法utf8和unicode编码究竟是什么关系详细分析css float 属性以及posicss的color颜色使用说明css进阶学习 选择符简单谈谈margin负值的作用前端获取http状态码400的返回值实例css滤镜效果(一)html的全局架构标签input文本框样式代码实例css网页布局入门教程9:用css设计网站导航css pointer控制在firefox下显示手型的代css滤镜基础教程
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved