8月11日,dudo博客搞了一个 T楼,送一本《精通CSS(CSS Mastery)》的活动,活动符合规则的第51楼网友将获得dudo赠送的《精通CSS(CSS Mastery)》书籍一本。到今天,规例条件的第51楼已经产生了……

前阵通过T楼送出了几个腾讯微博邀请码,这次再送个东西,不过次送的不是网络上虚拟的东西了,而一本书,相信搞网站和被网站搞的人都听说过这本书,就是《精通CSS——高级Web标准解决方案》,英文原版名叫CSS Mastery –Advanced Web Standards Solutions,这本书是所有有志于Web标准的人的必备工具书。我就是通过这本书学到了很多东西,很多Web标准和网站重构的知识,理论知识有了较大的提高,无论你现在是在什么层次,这本书是学习CSS的最佳选择之一,差点进入百度工作有它很大的功劳,在这里也顺便向大家推荐一下这本书。

由于dudo的电脑上已经很长时间没有IE6的影子了,习惯了使用多快好省的Chrome和功能齐全的Firefox,偶尔登录ZF网站或者网银一类的用下IE8,虽然公司的所有系统都是IE only,但是我也还是把办公室的电脑升级到了IE8,所以在制作博客皮肤的时候没有考虑(实际上懒得考虑)IE6用户们的需求。直到某一天我在别人的电脑上上我的博客的时候,发现侧边栏下沉了,不过不影响阅读,内容还是能看的…… 后来有一位朋友留言提出了这个问题,看来还是有人很在乎的。

我的博客前期文章中有不少关于CSS方面的文章,特别是在关于CSS3的文章中都提到了通配符的使用(如果你对CSS3中的选择符使用感兴趣可以参考我翻译的详解CSS3中的属性选择符)。里面讲到了CSS3中多种通过符的使用方法,如星号(*)、脱字符(^)和美元符号($)等。而由于星号(*)在CSS2.x中已经得到多数浏览器的支持,所以其使用范围最广。然而它的使用过程中会产生某问题,那么星号(*)通配符是不是就不能用,或者越少用越好呢?当然不是!不过要坚持这样的原则:不要在在深层次的页面结构中使用它;不要在页面的根节点使用它;不要在距离目标节点较远的节点上使用它。最好在父级元素中使用。这样效果和性能可以兼得。

很久前就发现百度存在一个背景设置上的缺陷,不过到现在它还没有更正。而现在这个问题则更加普遍:几乎所有的辨网站都在强制用户使用“宋体”来浏览他们的网页。我不知道他们这样的设置是出于什么目的,但是包括百度、新浪、搜狐、网易、腾讯、凤凰网都是如此,在我常去的几个网站都只有Google例外。很奇怪不是吗?不知道是那些年老的是设计师们从Win98时代遗留下来的习惯还是他们对“宋体”情有独钟,抑或是他们现在还在使用CRT显示器吧。

我们来看看这些网站是怎么强制用户使用宋体显示的:首先,看看腾讯的页面中,直接在CSS定义了用户必须使用宋体显示:

阅读全文——共1257字

即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的表现。例如,如果你没有给一个盒模型指定一个高度,那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与其完全匹配时又会怎么样呢?这时就要用到CSS中的overflow属性了,它允许你来设定如何处理多余的内容。

overflow有四个属性:visible(默认属性)、hidden、scroll和auto。此外它还有两个姊妹属性:overflow-x和overflow-y,这两个使用的相对较少。

阅读全文——共1593字

今天突然发现一个很奇怪的问题,一些专注于CSS和XHTML、Web 2.0和Web标准的网站都在探讨如何去掉当鼠标点击时超级链接周围的虚线框(outline)如,outline:none 或者 outline:0。可能有时候默认出现虚线框(outline)会影响美观,但是它的存在必然有它的道理:那就是提高网站的易用性,特别是给使用键盘导航的人带来极大的便利。我们在讨论语义化,易用性的同时却总在做与其背道而驰的事情。

一、虚线框(outline)给键盘导航带来便利

我在阅读文章的时候有个习惯:极少使用鼠标,基本上全部靠键盘。而使用最多的就是Tab键、PageUp、PageDown、Entern还有四个方向键。Tab键用来导航超级链接,可以在不同超级链接之间切换,选中某链接之后直接按Enter进入(现在你就可以使用Tab键在本页上看看效果)。当Tab键聚焦(focus)某链接时这个链接的周围就会出现一个虚线框(outline),代表这个链接已经处于焦点状态,确定即可访问。当然很多人可能会说,使用鼠标多么方便啊,干吗用键盘?在这里我想说几个理由。

阅读全文——共1212字

首先感谢aw5186网友在本站的留言,是他的留言让我意识到了这个误区。

长久以来,我们都口口相传Internet Explorer 6是不支持CSS中的!important属性的,这不仅体验在从一些高手那里传授过来的经验,网络上的教程中,甚至在某些经典教程中都存在这样的认识误区。包括在CSS Matery (作者:Andy Budd等)也没有提及CSS中的!important在Internet Explorer 6中的问题。此书中讲到的CSS Hack技术也使用了我前面那篇文章中的说法。不过,按照我的(或者说是大多数人的)习惯,基本上都不会发现CSS 中的!important会存在问题。

阅读全文——共1086字

    浏览器对于CSS的支持问题落后于CSS的发展,以占有市场绝对份额的Internet Explorer来说,直到其前不久发布的第8个版本才刚刚完成对CSS 2.1的完整支持,而CSS的最新进展是CSS 3规范的制定已经行了一大半。但是这并不妨碍我们使用CSS中的新技术。虽然我们不能像使用CSS中的通用技术那样随心所欲地应用他们,但是却可以在特定浏览器中达到更加生动的效果。在适当的地方使用这些新技术,不但可以让你站在CSS技术的最前沿,更可以使你的作品给人耳目一新的感觉。

阅读全文——共3406字

18
Filed Under (CSS与JS) by dudo 评论数(2)

    译者注:我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中文译本,转载请注明。

    本文在发表时,Firefox 3.1还没有问世,现在其版本已经更新到了3.5,Opera也已经更新到9.6。当时还没有Google的浏览器Chrome,而现在Chrome已经升级到了2.0版本。不过Chrome和Safari都属于webkit系浏览器,因此在CSS 3的支持上差异不大。Internet Explorer也已经更新到了8.0,但是可惜的是它仍然不支持border-radius属性。

阅读全文——共3443字

继续阅读:CSS 3入门

      译者按:CSS2的出现让web顿时丰富起来,特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展,CSS2已经不能满足web开发的需求,例如属性选择、AJAX出现后与JS的交互等,因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段,但是其某些特征已经让人兴奋不已。目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中,多数是单篇的文章和访谈记录等,可见这方面的资源还是比较少的,作为一个真正的CSS开发者,走在别人的前面提前了解、运用、研究CSS3也是十分必要的。

阅读全文——共3146字

Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书,是 An Event Apart 的合伙创始人,A List Apart 团队成员,还是 Complex Spiral Consulting 的创始人。另外, Eric Meyer 7年来一直是 CSS Working Group 资格深获邀专家,他们负责维护和开发 CSS。

不用说,如果要找个人请教一些 CSS 方面的问题,Eric Meyer 就是那个人。本文作者日前向 Eric Meyer 提问了7个与 CSS3 有关的问题,以下是 Eric Meyer 对这些问题的解答。

阅读全文——共1764字

早在今年的4月27日我就写过一篇“百度和Google的差别就在这里”,找出了在Web设计过程中几个常犯的错误中,百度存在忘记设置页面背景颜色的问题。今天在Jeffrey Zeldman的博客中的11月的一篇文章Is your (website’s) underwear showing?,对此456bereastreet对目前Web设计中被普遍忽视的问题做出了说明Remember to specify a background colour。

其实我们知道,作为一个web开发者,他面对的用户使用的操作平台、浏览器等存在千差万别,所以不是想当然地认为天下所有的人都会把页面的默认颜色设置为白色。例如上文中提到的,上个世纪90年代Mac系统上运行的Netscape就是使用灰色作为默认颜色的。

阅读全文——共514字

        漂亮的代码是漂亮网站的基础,优秀的 CSS 只存在与同样优秀的 HTML 之上,干净的,语义的 HTML 代码让一个网站更健壮。本文讲述了12个实现干净 Web 设计代码的定律,适合于任何从事 Web 设计的人。 1. Strict DOCTYPE 要做就做对的。不管是 HTML 4.01 还是 XHTML 1.0,它们都提供 Strict 模式,使用 Strict 模式可以保证我们的代码不隐藏任何错误。

阅读全文——共1762字

1. A List Apart CSS Topics

A List Apart是一个CSS优秀文章的收集网站,从1999年开始收集文章,关注最佳网页设计。

阅读全文——共1582字

英文原文:http://meyerweb.com/eric/css/inline-format.html

中文翻译:http://dudo.org/?p=255

阅读全文——共4535字

Page 1 of 41234