CSS

WCAG 全称 Web Content Accessibility Guidelines，中文一般译作「Web 内容无障碍指南」，是 W3C 发布的一套规范，规定网页要做到什么程度，才能让视力、听力、行动或认知有障碍的人也能正常使用。这里的「障碍」范围比想象中宽：色弱、老花、在强光下看手机、手腕受伤只能用键盘，都算在内。 我第一次认真对照它，是给自己的项目调灰色辅助文字的颜色：原来的灰字在白底上对比度 4.7:1，刚好过线；在浅灰背景上只有 4.3:1，没过线。下面是我整理的要点。 版本 版本 发布时间 说明 WCAG 2.0 2008-12 后来被采纳为国际标准 ISO/IEC 40500:2012 WCAG 2.1 2018-06 在 2.0 上增加移动端、低视力、认知相关的条款 WCAG 2.2 2023-10 再增加 9 条（如焦点不能被遮挡、点击目标最小尺寸），删除了过时的 4.1.1 Parsing WCAG 3.0 草案 打算换一套评分模型，还没定稿，不能拿来做合规依据 2.x 各版本向后兼容：满足 2.2 就自动满足 2.1 和 2.0。现在各国法规引用最多的是 2.1 AA，新项目直接按 2.2 AA 做就行。 四个原则：POUR 所有条款归在四个原则下： Perceivable（可感知）：信息要能被感知到。图片有替代文字，视频有字幕，文字和背景有足够对比度，不能只靠颜色传达信息。 Operable（可操作）：界面要能被操作。所有功能都能用键盘完成，焦点位置看得见，不设置让人来不及反应的时间限制。 Understandable（可理解）：内容和操作方式要能看懂。页面声明语言，表单出错时说明错在哪、怎么改，同样的控件在不同页面行为一致。 Robust（健壮）：能被各种浏览器和辅助技术（如读屏软件）正确解析。主要靠语义化 HTML 和正确使用 ARIA。 三个等级：A、AA、AAA 每条「成功标准」（success criterion）都标了等级： A：最低要求，做不到会让一部分人完全用不了。例如 2.1.1 键盘可操作。 AA：通行的合规目标，法规和公司规范基本都要求到这一级。例如 1.4.3 文字对比度 4.5:1。 AAA：最高要求，W3C 自己也说不建议把整站 AAA 作为目标，因为有些内容做不到。例如 1.4.6 文字对比度 7:1。 说「符合 WCAG 2.2 AA」，意思是 A 级和 AA 级的条款全部满足。 ...

css垂直居中 单行内容的居中 只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了 [css] .middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; } [/css] 优点: 同时支持块级和内联极元素 支持所有浏览器 缺点: 只能显示一行 IE 中不支持 <img> 等的居中 要注意的是: 使用相对高度定义你的 height 和 line-height 不想毁了你的布局的话，overflow: hidden 一定要加上。 维护记录 时间 修改内容 原因 2026-10-09 修复本地 Hugo 构建的 Raw HTML 警告：代码/配置放入代码块，正文中的尖括号占位符改为行内代码；文件重命名为 css-vertical-center.md；title 改为「CSS 垂直居中」；url 改为 css-vertical-center；旧 url 加入 aliases 正文中的 HTML/XML 片段被当作原始 HTML 丢弃；文件名/URL/标题按规范调整

CSS中加号、星号及其他符号的作用 http://blog.sina.com.cn/s/blog_6790717801011dx8.html CSS中加号、星号及其他符号的作用 (2012-06-27 14:34:32)转载▼ 标签: 科技 css 浏览器 版本 it 首先,什么是CSS hack? 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack! CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。 类内部Hack: 比如 IE6能识别下划线"“和星号” * “,IE7能识别星号” * “,但不能识别下划线”",而firefox两个都不能认识。 选择器Hack: 比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。 HTML头部引用(if IE)Hack: 针对所有IE: <!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本: <!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。 书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。 如何写CSS Hack 比如要分辨IE6和firefox两种浏览器,可以这样写: <style> div{ background:green; *background:red; } </style> 在IE6中看到是红色的,在firefox中看到是绿色的。 上面的css在firefox中,它是认识不了后面的那个带星号的东西是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。 在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。 在理想世界里,正确的CSS应该在任何支持CSS的浏览器里工作良好。不幸的是,我们并不是生活在理想的世界里,浏览器们布满了BUG和不一致。创建一个跨浏览器并且显示一致的页面,CSS开发者必须想尽办法。通过使用BUG和未实现的CSS,开发者就能够为不同的浏览器应用不同的规则。HACK和FILTER是开发者强有力的武器。了解各种常用的HACKS以及它们如何工作,是件重要的事,但什么时候用和什么时候不用它们,也是件同等重要的事情。 CSS filter或者hack是一种代码,用来根据浏览器类型,版本号显示或隐藏CSS标签。浏览器们对CSS行为有不同的解释,对W3C标准的支持程度也不相同。CSS 过滤器经常用于在多个浏览器中实现一致的布局外观,因为某些浏览器无法渲染。HACK (黑客) 这样的称呼多少有点消极,实质上属于个人对CSS代码非官方的修改,误导人们以为还有更好的方法达到目的,但其实我们没有,有的人喜欢用patch (补丁) 来称呼它,这样人们就能知道这本是浏览器造成的错误。 ...

CSS DIV居中 CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样. 问题到底出在哪里呢? 感谢网友乐天无用帮忙找出了这个邪门问题的原因. 原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档. 问题并不在CSS而在XHTML网页本身. 需要加上这样的代码才能使得上述设置有效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档. 以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版. 如何使DIV居中 主要的样式定义如下: body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明: 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上"MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " 需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只 要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 如何使图片在DIV 中垂直居中,用背景的方法。举例: body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;} 关键就是最后的center,这个参数定义图片的位置。还可以写成"top left"(左上角)或者"bottom right"等,也可以直接写数值"50 30" 如何使文本在DIV中垂直居中 如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下: <html> <head> <style> body{TEXT-ALIGN: center;} #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; background:#F00; width:400px; vertical-align:middle; line-height:200px; } </style> </head> <body > test content </body> </html> 说明: ...

CSS选择器 优先级 匹配原理 http://developer.51cto.com/art/201009/226852.htm 作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子: 给一个p标签增加一个类 (class) ，可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候突然意识到了CSS选择器的优先级问题，这里就CSS选择器的优先级问题做了一些总结。 51CTO推荐阅读: 巧妙地使用CSS选择器 选择器种类 严格来讲，选择器的种类可以分为三种: 标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style=““的方式，应该是CSS的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。 三种基本的选择器类型 语法如下: ◆标签名选择器，如: p{}，即直接使用HTML标签作为选择器。 ◆类选择器，如.polaris{}。 ◆ID选择器，如#polaris{}。 注意，ID选择器跟类选择器有很大的不同: 一个页面内不能出现相同的ID；再就是ID也是后台开发人员会经常用的，所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后，这些都不会成为限制。 扩展选择器 ◆后代选择器，如.polaris span img{}，后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。 ◆群组选择器，如div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。 选择器的优先级别 了解了各种选择器后，还有一个重要的知识点就是CSS选择器的优先级。这也就是为什么polaris会遇到文章开头的问题。举个简单的例子: beijixing polaris 如果已经把.polaris下面span内的字体设置成红色: .polaris span {color:red;} 这时，如果要改变.beijixing的颜色为蓝色，用下面的命令是不能实现的: .beijixing {color:blue;} 出现这种情况就是因为后一个命令的优先级不够，两条相互冲突的样式设置，浏览器只会执行优先级较高的那个。 那么选择器的优先级是怎么规定的呢？ 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌: div.test1 .span var 优先级 1+10 +10 +1 span#xxx .songs li 优先级1+100 + 10 + 1 #xxx li 优先级 100 +1 对于什么情况下使用什么选择器，用不同选择器的原则是: 第一: 准确的选到要控制的标签；第二: 使用最合理优先级的选择器；第三: HTML和CSS代码尽量简洁美观。通常: ...

这篇文档的定位 这是一篇持续更新的 Web API 笔记。Popover API 是第一个案例，后续可以继续补充其他 API（例如 View Transitions API、Clipboard API、Web Share API）。 Web API 是什么 可以把 Web API 理解为浏览器提供给页面脚本调用的一组能力。页面里的 JavaScript 通过这些接口访问浏览器功能，例如： 读写 DOM（DOM API） 网络请求（Fetch API） 本地存储（Storage API） 弹出层控制（Popover API） 所以你的理解是对的：页面里的 JavaScript 脚本可以调用这些 API 来实现功能。 Web API、Chrome API、标准的关系 不是所有“在 Chrome 里能用的 API”都等于通用 Web 标准，通常分三类： 标准 Web API：由标准组织和浏览器厂商协作制定，多个浏览器逐步实现（Popover API 属于这一类）。 实验性能力：可能还在提案/试验阶段，通常带实验标记或只在预览版本可用。 浏览器专有 API：某个浏览器或生态特有，不保证跨浏览器可用（常见于扩展平台能力）。 Web 标准通常由谁推进 WHATWG：维护 HTML、DOM 等活标准，很多 Web API 在这里落地。 W3C：维护和推进大量 Web 标准生态工作。 TC39：负责 JavaScript 语言本身（例如语法和内建对象），不直接定义 Popover 这类 DOM/UI API。 浏览器厂商协作机制：通过提案、实现、互通测试（例如 Web Platform Tests）持续收敛行为一致性。 简单说：Popover API 不是“Chrome 私有接口”，而是 Web 标准体系中的 API；Chrome 只是较早实现的浏览器之一。 ...

CSS布局 块级元素及内联元素 Block element 块级元素,顾名思义就是以块显示的元素,高度宽度都是可以设置的。、、 h1 等元素常常称为块级元素,这些元素显示为一块内容；Strong,span等元素称为行内元素,它们的内容显示在行中,即"行内框"。 (可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间) 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。 任何不是块级元素的可见元素都是内联元素-《CSS权威指南》. 其表现的特性是"行布局"形式,这里的"行布局"的意思就是说其表现形式始终以行进行显示。 A: 行内就是在一行内的元素,只能放在行内；块级元素,就是一个四方块,可以放在页面上任何地方。 B: 说白了,行内元素就好像一个单词；块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。 C: 一般的块级元素诸如段落、标题...、列表, 、表格、表单<form>、DIV和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接、图像<img>、 ........ D: 块级无素的显著特点是: 每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。 E: 在CSS定义中属于一个行内元素,而是块级元素。 块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。 Inline element 内联元素 通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的、、都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然块级元素也能变成内联元素 (本文为转载,个人认为非绝对意义上的内联) ,那就是通过css的display:inline;和float来实现。 在《CSS权威指南》这样定义到,"任何不是块级元素的可见元素都是内联元素,其表现的特性是"行布局"形式。"我个人不太习惯"行布局"的说话,因为我认为块级元素从表现上更像"行"显示,而内联元素更像是"文本"的显示属性。这其中一点记住很关键,"内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度"。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。 对于学过CSS的人来说一听就能明白。可对于新手来说不易理解,我主要对新手说通熟点吧! 用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而相当于一个大容器,大容器当然可以放一个小容器了。就是小容器,这样一说你也许会在脑海中有一个初步的印象了吧,如果我们想在大容器中装一些清水。但我也想在里装一些墨水怎么办？很简单,我们把小容器拿出来装上墨水然后放入大容器里的清水中不就成了吗。 我在举个简单的一个实际例子吧: 比如 abcdefg 我想用CSS定义字母c的样式,因此我们就可以用到了。 abcdefg 块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。"form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者 (不包括视力障碍者、盲人等) 的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。 你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。. 块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。 ps:关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。 块元素(block element) address - 地址 ...

Less CSS (层叠样式表) 是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网 (World Wide Web) 中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题: CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE (作用域) 等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin (混入) ,运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。 http://www.w3cplus.com/css/less http://www.cnblogs.com/hooray/archive/2011/12/02/2272212.html

CSS继承性 http://developer.51cto.com/art/201009/224897.htm 你对CSS继承性的概念和使用是否了解,这里和大家分享一下,CSS继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可,同时CSS继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。 CSS继承性及其应用 所谓CSS继承性是指被包在内部的标签将拥有外部标签的样式性质。CSS继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑,donger今天就专门和大家聊聊这方面的应用。 正文 CSS是层叠样式表 (CascadingStyleSheets) 的简称,它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过CSS了吧,因为在制作网页过程中我们经常需要用到。 CSS允许我们为文档设置更为丰富且便于修改的外观,可以减轻网页设计者的工作负担。这里我们主要想和朋友们一起对CSS继承性和特殊性进行一点深入的探讨。 一、CSS继承性 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。CSS继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。 二、CSS继承的局限性 在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。 首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说: border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如下图所示,如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的措施关掉边框的继承属性。

派生选择器 http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。 比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器: li strong { font-style: italic; font-weight: normal; }

LESS CSS 一种 动态 样式 语言 LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行 CSS (层叠样式表) 是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网 (World Wide Web) 中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题: CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE (作用域) 等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin (混入) ，运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/index.html

CSS font-style font-style 属性定义字体的风格。 该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。 normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。

overflow, hidden 核心提示: overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。 overflow:hidden这个CSS样式是大家常用到的CSS样式，但是大多数人对这个样式的理解仅仅局限于隐藏溢出，而对于清除浮动这个含义不是很了解。 一提到清除浮动，我们就会想到另外一个CSS样式: clear:both，我相信对于这个属性的理解大家都不成问题的。但是对于"浮动"这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。 这是一个常用的div写法，下面我们来书写样式。大家可以在DMX中自己做试验 #wai{ width:500px; background:#000; height:500px;} #nei { float:left; width:600px; height:600px; background:red;} 可以看到，我给nei这个id加了一个浮动，我们常规的理解是，我们允许nei这个id的div的右边出现其他的内容，只要它的宽度不超过wai这个div和nei这个div的剩余值。 如果div wai中还包含其他的div，我不允许它出现在nei的右侧，我们则用样式clear:both指定这个div，不允许它浮动在nei右侧。 这些在ie6里面是正确的。但是在火狐或者其他浏览器里面，我们发现问题并非如此简单。我们发现，当nei这个div的宽度和高度都大于wai这个div的时候，wai并没有被内撑开而是依旧显示为我们指定的宽高。在我的例子中，都是500。 这个时候我不理解了，我搜索了很多的资料，但是都没能理解这是为什么，直到看到别人在类似的情况下给wai这个div加了一个overflow:hidden这个属性解决了这个问题。 我们直到overflow:hidden这个属性的作用是隐藏溢出，给wai加上这个属性后，我们的nei的宽高自动的被隐藏掉了。另外，我们再做一个试验，将wai这个div的高度值删除后，我们发现，wai的高度自动的被nei这个div的高度值给撑开了。 说到这里，我们再来理解一下"浮动"这个词的含义。我们原先的理解是，在一个平面上的浮动，但是通过这个试验，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动！ 也就是说，当nei这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了wai这个div，也就是说，此时的nei的宽高是多少，对于已经脱离了的wai来说，都是不起作用的。打个形象的比喻就是当JJ脱离BB的时候，JJ的大小对于BB是没有撑开的作用的 (有点少儿不宜的感觉-_-|||) OK，当我们全面的理解了浮动这个词的含义的时候，我们就理解overflow:hidden这个属性中的解释，清除浮动是什么意思了。也就是说，当我们给wai这个div加上overflow:hidden这个属性的时候，其中的nei等等带浮动属性的div的在这个立体的浮动已经被清除了，就好比JJ又进入了BB内，JJ的大小自然又会影响到BB的大小。 这就是overflow:hidden这个属性清除浮动的准确含义。 当我们没有给wai这个div设置高度的时候，nei这个div的高度，就会撑开wai这个div，而在另一个方面，我们要注意到的是，当我们给wai这个div加上一个高度值，那么无论nei这个div的高度是多少，wai这个高度都是我们设定的值。而当nei的高度超过wai的高度的时候，超出的部分就会被隐藏。这就是隐藏溢出的含义！ 我相信，通过我的这些文字，大家对overflow:hidden这个属性有了全新的认识。希望大家和我一样，在div+css学习中能够不断的进步！ (PS: 本人是div+css的初学者，请高手不要嘲笑。困惑这个属性已经很久，网上的资料大多不怎么理想，因此才写这些文字献丑。本文为地方网络工作室原创。转载请保留本工作室链接，文章首发: http://www.difangla.com/Html/jishu/css/88140.html)

CSS注释语法 /* 注释内容 */ 示例 /* ----------文字样式开始---------- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */

使用负边距创建自适应宽度的流体布局 http://www.cnblogs.com/zzh/archive/2008/10/13/1309841.html <!DOCTYPE html> <html> <head> <title>CTS</title> <style type="text/css"> body,p,h1,h2,ul { margin:0;padding:0; } #header { background-color: #A8A754; } #footer { background-color: #A8A754; clear: both; } #mainer { width: 100%; margin-right: -250px; float: left; } #sideBar { float: right; width: 250px; color: #FFF; background-color: #36361A; } #main { margin-right: 250px; background-color: #616030; } </style> </head> <body> 顶部区域 使用负边距创建自适应宽度的流体布局 随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 最新文章 最新文章一 最新文章二 最新文章三 底部区域 </body> </html>

‘position,absolute、relative’ position: absolute、relative CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。 要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 TRBL属性 (TOP、RIGHT、BOTTOM、LEFT) 只有当设定了position属性才有效。 当设定position:absolute 如果父级 (无限) 没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 如果父级 (无限) 设定position属性，那么当前的absolute则结合TRBL属性以父级 (最近) 的左上角为原始点进行定位。 当设定position: relative 则参照父级 (最近) 的内容区的左上角为原始点结合TRBL属性进行定位 (或者说相对于被定位元素在父级内容区中的上一个元素进行偏移) ，无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。 一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。有时还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。 设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是"相对于"元素在文档流中初始位置的，而绝对定位是"相对于"最近的已经定位的祖先元素