|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
CascadingStyleSheets:TheDefinitiveGuide,2ndEditionisathoroughreviewofallaspectsofCSS2.1andacomprehensiveguidetoCSSimplementation.Thebookincludesnewcontentonpositioning,listsandgeneratedcontent,tablelayout,userinterface,pagedmedia,andmore.ItexploresindetaileachindividualCSSpropertyandhowitinteractswithotherproperties,andshowshowtoavoidcommonmistakesininterpretation.W3c的Css主页:http://www.w3.org/Style/CSS/1css和document1.1elementshtml中的元素很简单辨识,如p,table,span,a,div。xml中元素由dtd界说,大概xmlschema界说。每一个元素部分代表了其体现体例。Css中能够看做每一个元素发生一个box,该box包括了元素的内容。1.1.1元素范例:replaced和nonreplacedelements,block-level和inline-levelelementsreplacedelements:元素的内容能够被不是间接由文档暗示的内容交换。典范的是xhtml中的img,它能够被指向文档内部的图片文件取代。Input元素也能够依据其type的分歧,而被radiobutton,checkbox,textinputbox取代。Replacedelements也在显现时发生一个box。Nonreplacedelements:html和xhtml的年夜多半元素是nonreplaced。就是说,这些元素的内容由用户代办署理(useragent,一般是指扫瞄器)在元素发生的box中来表述present。(box是否是指元素对应在页面上的一个region?)。好比<span>hithere</span>是nonreplaced,文本hihere将由useragent来显现。Block-levelelement块元素:发生一个元素box,该box添补其父元素的内容地区,而且其双方没有其他元素。就是说在默许的情形下每一个block-level都是独自一行的。好比p,div。listitems是一种特别的块元素。为了跟其他块元素具有一致的举动,为无序的lists发生一个标记,如bullet;为有序的lists发生一个数字。将标记或数字加到元素box上。除标记的体现体例外,其他特征跟其他的块元素一样。Inline-levelelement内联元素:发生一个元素box,个中是一行文本,而且不是独自一行的。典范的例子是xhtml中的a元素,别的如strong,em。由于内联元素不会打断其前后的显现,以是内联元素呈现在其他元素中的话不会打断其他元素的显现。注重:xhtml和html中块元素不克不及从内联元素承继,可是css中没有相似划定。没无限制元素嵌套体例。块元素(blockelement)通常为其他元素的容器元素,块元素一样平常都重新行入手下手,它能够包容内联元素和其他块元素,罕见块元素是段落标签P。"form"这个块元素对照特别,它只能用来包容其他块元素。
假如没有css的感化,块元素会按次以每次另起一行的体例一向往下排。而有了css今后,我们能够改动这类html的默许结构形式,把块元素摆放到你想要的地位上往。而不是每次都愚昧的另起一行。必要指出的是,table标签也是块元素的一种,tablebasedlayout和cssbasedlayout从一样平常利用者(不包含目力停滞者、瞽者等)的角度来看这两种结构,除页面载进速率的不同外,没有其他的不同。可是假如一般利用者不经意点了检察页面源代码按钮后,二者所体现出来的差别就十分年夜了。基于优秀重构理念计划的css结构页面源码,最少也能让没有web开辟履历的一般利用者把内容快速的读懂。从这个角度来讲,csslayoutcode应当有更好的美学体验吧。
你可以把块容器元素div设想成一个个box,大概假如你玩过剪贴文载的话,那就加倍简单了解了。我们先把必要的文章从各类报纸、杂志总剪上去。每块剪上去的内容就是一个block。然后我们把这些纸块依照本人的排版企图,用胶水从头贴到一张空缺的新纸上。如许就构成了你本人共同的文摘快报了。作为一种手艺的延长,网页结构计划也遵守了一样的形式。.
内联元素(inlineelement)一样平常都是基于语义级(semantic)的基础元素。内联元素只能包容文本大概其他内联元素,罕见内联元素"a"。
块元素(blockelement)和内联元素(inlineelement)都是html标准中的观点。块元素和内联元素的基础差别是块元素一样平常都重新行入手下手。而当到场了css把持今后,块元素和内联元素的这类属性差别就不成为差别了。好比,我们完整能够把内联元素cite加上display:block如许的属性,让他也有每次都重新行入手下手的属性。
可变元素的基础观点就是他必要依据高低文干系断定该元素是块元素大概内联元素。可变元素仍是属于上述两种元素种别,一旦高低文干系断定了他的种别,他就要遵守块元素大概内联元素的划定规矩限定。大抵的元素分类见全文。
ps:关于inlineelement的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基础上没有一致的翻译,爱怎样叫怎样叫吧。别的提到内联元素,我们会想到有个display的属性是display:inline;这个属功能够修复出名的IE双倍浮动界限成绩。
块元素(blockelement)
*address-地点
*blockquote-块援用
*center-举中对齐块
*dir-目次列表
*div-经常使用块级简单,也是csslayout的次要标签
*dl-界说列表
*fieldset-form把持组
*form-交互表单
*h1-年夜题目
*h2-副题目
*h3-3级题目
*h4-4级题目
*h5-5级题目
*h6-6级题目
*hr-程度分开线
*isindex-inputprompt
*menu-菜单列表
*noframes-frames可选内容,(关于不撑持frame的扫瞄器显现此区块内容
*noscript-)可选剧本内容(关于不撑持script的扫瞄器显现此内容)
*ol-排序表单
*p-段落
*pre-格局化文本
*table-表格
*ul-非排序列表
内联元素(inlineelement)
*a-锚点
*abbr-缩写
*acronym-首字
*b-粗体(不保举)
*bdo-bidioverride
*big-年夜字体
*br-换行
*cite-援用
*code-盘算机代码(在援用源码的时分必要)
*dfn-界说字段
*em-夸大
*font-字体设定(不保举)
*i-斜体
*img-图片
*input-输出框
*kbd-界说键盘文本
*label-表格标签
*q-短援用
*s-中划线(不保举)
*samp-界说典范盘算机代码
*select-项目选择
*small-小字体文本
*span-经常使用内联容器,界说文本内区块
*strike-中划线
*strong-粗体夸大
*sub-下标
*sup-上标
*textarea-多行文本输出框
*tt-电传文本
*u-下划线
*var-界说变量
可变元素
可变元素为依据高低文语境决意该元素为块元素大概内联元素。
*applet-javaapplet
*button-按钮
*del-删除文本
*iframe-inlineframe
*ins-拔出的文本
*map-图片区块(map)
*object-object工具
*script-客户端剧本
一个例子:- <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>
复制代码 上例中有两个块元素,p和body,一个内联元素em。在xhtml中em能够从p承继,反之不可。在xhtml中内联元素能够从块元素承继而来,反之不可。在css中没有如许的划定,css能够改动上例的布局。p{display:inline;}em{display:block;}在inlinebox中拔出blockbox。效果:改动元素的显现脚色在xhtml中很有效。Xml文档没有任何的承继的显现脚色,因而经由过程css来界说就相称主要。- <maintitle>CascadingStyleSheets:TheDefinitiveGuide</maintitle>
复制代码- <subtitle>SecondEdition</subtitle>
复制代码- <author>EricA.Meyer</author>
复制代码- <publisher>OReillyandAssociates</publisher>
复制代码- <isbn>blahblahblah</isbn>
复制代码- <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>0
复制代码- <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>2
复制代码- <author>EricA.Meyer</author>
复制代码- <publisher>OReillyandAssociates</publisher>
复制代码复制代码 - <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>0
复制代码- <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>8
复制代码- <p>Thisisaparagraphwith<em>aninlineelement</em>withinit.</p>9
复制代码 可以影响显现脚色displayroles的特征是css在多种情形下高度有效的主要缘故原由。
每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。 |
|