css教程 css和document
Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individual CSS property and how it interacts with other properties, and shows how to avoid common mistakes in interpretation.
W3c的Css主页：
http://www.w3.org/Style/CSS/
1 css和document
1．1 elements
html中的元素很容易辨识，如p，table，span，a，div。
xml中元素由dtd定义，或者xml schema定义。每个元素部分代表了其表现方式。
Css中可以看作每个元素产生一个box，该box包含了元素的内容。
1．1．1元素类型：replaced和nonreplaced elements，block-level和inline-level elements
replaced elements：元素的内容可以被不是直接由文档表示的内容替换。典型的是xhtml中的img，它可以被指向文档外部的图片文件代替。
Input元素也可以根据其type的不同，而被radio button，checkbox，text input box代替。
Replaced elements也在显示时产生一个box。
Nonreplaced elements：html和xhtml的大多数元素是nonreplaced。就是说，这些元素的内容由用户代理（user agent，通常是指浏览器）在元素产生的box中来表述present。（box是不是指元素对应在页面上的一个region？）。
比如<span>hi there</span>是nonreplaced，文本hi here将由user agent
来显示。
Block-level element块元素：产生一个元素box，该box填充其父元素的内容区域，并且其两边没有其他元素。就是说在默认的情况下每个block-level都是单独一行的。比如p，div。
list items是一种特殊的块元素。为了跟其他块元素具有统一的行为，为无序的lists产生一个符号，如bullet；为有序的lists产生一个数字。将符号或数字加到元素box上。除了符号的表现方式外，其他特性跟其余的块元素一样。
Inline-level element内联元素：产生一个元素box，其中是一行文本，并且不是单独一行的。
典型的例子是xhtml中的a元素，另外如strong，em。因为内联元素不会打断其前后的
显示，所以内联元素出现在其他元素中的话不会打断其他元素的显示。
注意：xhtml和html中块元素不能从内联元素继承，但是css中没有类似规定。没有限制元素嵌套方式。
|
块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P。"form"这个块元素比较特殊，它只能用来容纳其他块元素。 如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想 要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。 你能够把块容器元素div想象成一个个box， 或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。. 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。 ps:关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有 个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。 块元素(block element) 内联元素(inline element) |
|
* u - 下划线 可变元素 |
一个例子：
<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>
上例中有两个块元素，p和body，一个内联元素em。
在xhtml中em可以从p继承，反之不行。在xhtml中内联元素可以从块元素继承而来，反之不行。
在css中没有这样的规定，css可以改变上例的结构。
p {display: inline;}
em {display: block;}
在inline box中插入block box。效果：
改变元素的显示角色在xhtml中很有用。Xml文档没有任何的继承的显示角色，因此通过css来定义就相当重要。
<book>
<maintitle>Cascading Style Sheets: The Definitive Guide</maintitle>
<subtitle>Second Edition</subtitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
<book>
<maintitle>CSS2 Pocket Reference</maintitle>
<author>Eric A. Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
默认的显示：
用css来定义显示层次：
book, maintitle, subtitle, author, isbn {display: block;}publisher, pubdate {display: inline;}现在显示：
能够影响显示角色display roles 的特性是css在多种情况下高度有用的重要原因。
相关推荐
-
css教程 css和document
Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user int
-
Lesson03_01 什么是CSS和CSS的设置方式
第3讲 CSS 何为CSS CSS的几种设置方式 样式规则选择器 样式规则的注释与有效范围 样式属性详解 什么是CSS和CSS的设置方式 作者:Loncer 更多学习资源尽在:wwww.loncer.cn 什么是CSS CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.例如下的代码:<
-
Vue中的作用域CSS和CSS模块的区别
现代Web开发中的CSS离完美还差得远,这并不奇怪.现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突: 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 . 为了减轻CSS存在的主要痛点,我们在项目中普遍采用 BEM 的方法来.不过这只能解决CSS问题中的一小部分. 对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案.你可能已经听说过 CSS Modules. Styled Componetns. Glamorous或 JSS.这
-
Vue中对比scoped css和css module的区别
scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成
-
Lesson03_01 什么是CSS和CSS的设置方式
第3讲 CSS 何为CSS CSS的几种设置方式 样式规则选择器 样式规则的注释与有效范围 样式属性详解 什么是CSS和CSS的设置方式 作者:Loncer 更多学习资源尽在:wwww.loncer.cn 什么是CSS CSS即:Cascading Style Sheets这几个英文单词的缩写,中文为:层叠样式表.它除了可以轻松设置网页元素的显示位置和格式外,还能产生滤镜,图像淡化,网页淡入淡出的渐变效果.简而言之.CSS就是要对网页的显示效果实现与Word一样的排版控制.例如下的代码:<
-
关于CSS渲染:CSS是如何绘制颜色的
颜色的原理 最常见的颜色相关的属性就是 color 和 background-color. 颜色值:RGB 颜色,CMYK 颜色,HSL 颜色,其它颜色 RGB 颜色:它符合光谱三原色理论:红.绿.蓝三种颜色的光可以构成所有的颜色. 现代计算机中多用 0 - 255 的数字表示每一种颜色,这正好占据了一个字节,每一个颜色就占据三个字节. CMYK 颜色:在印刷行业,使用的就是这样的三原色(品红.黄.青)来调配油墨,这种颜色的表示法叫做 CMYK,它用一个四元组来表示颜色. HSL 颜色:HSL
-
div＋css div+css divcss布局入门教程 迅雷下载
你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习: 第 CSS 处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构, 然后再针对语义.结构添加 CSS.这篇文章将告诉你应该怎样把 HTML 结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该 转换成对应的什么 CSS语句.当你解决了第 HTML,我再给出一个
-
JS轻松实现CSS设置,DIV+CSS常用CSS设置
早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合DIV+CSS架构的网页.(在网吧做网页的朋友,可以使用这个呀!)将常用的样式写了出来,做成DW的扩展插件多好,麻烦高手把他做成DW的扩展插件:小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子] ▒ 恋婷DIV+CSS编辑器 beta1.0 var sIni
-
CSS基础 CSS选择符
示例: *[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.类型选择符 语法: E { sRules } 说明: 类型选择符.以文档语言对象(Element)类型作为选择符. 示例: td { font-size:14px; width:120px; } a { text-decoration:none; } 3.属性选择符 语法: E [ attr ] { sRules } E [ attr
-
CSS标签切换代码实例教程 比较漂亮
我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,