`

不同css等级的人对css的看法

css 
阅读更多

关于CSS,如果有人问起你关于CSS方面的话题,对于CSS熟悉度不同的人分别有如下精采的回答,非常有趣:

第0级:CSS?那不是一个多人射击游戏吗?

有些人因为在找CS:S(Counter Strike: Source)这款游戏的资讯而进到#CSS网站。不必担心这些人,他们不可能制作太多网页,所以对网络也不会造成多大伤害。

Yeah, I use it to remove underlines on links sometimes
第1级:是啊,我偶尔用它来移除连结的底线

和第0级的人不同,这些人学过HTML,也制作过几个简单的网站。他们只有在无法使用HTML制作出某些效果时,才会使用CSS,例如移除连结的底线或者设定行高。这些人的网站通常规模不大也没什么访客,所以他们也不会对网络造成太大伤害。

No, I don’t like divs; tables are much easier to work with
第2级:不,我不喜欢div元素;表格好用多了

他们听过使用div元素来设计网页这件事,也花了些时间学习CSS。不过他们很快就放弃了,觉得CSS太难而且支持度不佳,还是宁可用表格排版。
注意!他们是危险人物!他们在这个领域已经待了一段时间,许多都是网站部门的主管。和他们接触是很重要的,提倡网络标准的人应该多多开导他们,这对网络的意义非同小可。

Yes I’ve heard it’s good, but I can’t use it because of…
第3级:是啊,听说它挺好的,不过我没用它因为……

这些人虽然知道CSS的优点,不过总是基于某些原因而无法使用它,例如他们可能有第2级的上司,或者他们必须考虑到Netscape 4的使用者。
旧版的浏览器虽然不支持CSS,不过使用者还是可以看见完整的内容。而基于亲和力(accessibility)和易用性(usability)的好处,CSS可以为网站带来更多访客。把这些优点告诉第3级的开发人员,即使他们不是决策者,或许多少能对第2级的上司发挥点影响力吧。

CSS? Oh! Yes, I use divs for all my layouts
第4级:CSS?喔!没错,我用div元素来排版

在页面中使用过多的div元素反而是这群人的问题,他们会用#toprightredline或是#r5_c7(表示第5列第7栏)这样的方式设定div元素的id。即使可以通过XHTML 1.1的验证,这种排版方式却无法发挥CSS的优势。萤幕朗读软体(screen readers,视障者使用的浏览器)很难解译这些网页,旧版浏览器也会有同样的问题,网页的内容无法完整显示。而不良的class与id命名方式,也对于版面的修改造成极大不便。
虽然第4级的人制作的网站仍然很糟,不过由于他们很容易接受新的观念,因此对网络造成的伤害较小。许多所见即所得(WYSIWYG)的编辑器制作出充满div元素的原始码,可能也是误导这群人的原因。


I use CSS for design, it’s better than tables because of…
第5级:我用CSS来设计,这比表格好多了,因为……

第5级的人知道CSS的优点并乐于使用,虽然有时会遇到些问题,但并不严重。他们也能运用长期的CSS工作经验,与人辩论为甚么要将网页的结构与设计分开。我猜这篇文章大部分的读者是这一级的CSS开发人员,我想我自己也是。不过这还不是最好的……

What version of CSS? Yes, I do. Did you read my book about…
第6级:哪个版本的CSS?是的,我知道啊。你有读过我的书关于……

第6级的人致力于改良CSS,并且写了许多很棒的文章介绍它的新用法。其中有些人将W3C关于CSS的说明文件全部读完了,并且知道哪些功能在哪个版本的浏览器才有支持。他们是CSS初学者的典范,并且运用他们的影响力使网络更加进步。其中有许多人组成了Web Standards Project,如果你在他们的网站上面发现任何错误,那一定是有理由的,向他们请教之后你必能获得满意的解答。

看了上面的回答,对号看看你是属于那哪个CSS水平?不会使CSS游戏吧^!

分享到:
评论

相关推荐

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    javafx应用不同的css文件

    本示例重点是探讨如何在JavaFX中应用不同的CSS(层叠样式表)文件来改变应用程序的样式和外观。 在JavaFX中,CSS被用来控制UI组件的视觉样式,包括颜色、字体、布局和其他视觉属性。这使得开发者可以轻松地为应用...

    Reset_CSS css样式重置文件

    CSS Reset即是对浏览器的默认CSS规则进行初始化,保证不同浏览器下CSS的一致性。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为...

    CSS在不同浏览器中兼容问题

    不同的浏览器对 CSS 的解析和渲染方式存在差异,从而导致相同的 CSS 代码在不同浏览器中显示效果不同。本文将总结常见的 CSS 兼容问题和解决方法。 一、CSS 样式的差异 * 字串 8ul 和 ol 的默认 padding 值不同,...

    判断浏览器类型屏幕分辨率自动调用不同CSS的代码

    该脚本主要实现了根据用户所使用的浏览器类型以及屏幕分辨率来动态加载不同的CSS样式表。这种技术在早期网页开发中较为常见,用于实现针对不同设备或浏览器的适配方案。 #### 二、解析脚本逻辑 1. **检测浏览器...

    CSS CSS CSS

    CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装 CSS CSS 资料套装

    CSS Secrets CSS 魔法

    这些内容的深度讲解,是对CSS进阶知识的全面补充,也是在网页设计和开发中,实现更优雅解决方案的关键。 Lea Verou作为W3C CSS工作组的受邀专家,参与设计CSS语言,并且在W3C中担任开发者倡导者的角色,W3C是制定...

    CSS2.0+CSS3.0的chm文档

    CSS2.0是CSS的第二个主要版本,它在CSS1.0的基础上进行了扩展和改进,引入了更多新的选择器、定位方式以及对多列布局的支持。CSS2.0中文手册详细阐述了以下关键知识点: 1. **选择器**:包括ID选择器、类选择器、...

    CSS大全CSS大全

    1. **媒体查询**:根据设备特征(如屏幕尺寸、分辨率)应用不同的CSS规则,实现响应式布局。 2. **断点管理**:在特定屏幕尺寸设置断点,调整元素样式以适应不同设备。 3. **Flexbox和Grid布局**:这两者天然支持...

    CSS酷站CSS特效华丽CSS

    这些站点可能利用CSS3的新特性,如动画、过渡、阴影、渐变、多列布局等,创造出令人印象深刻的交互体验。例如,通过CSS Flexbox和Grid布局,设计师可以创建出响应式和灵活的页面结构,适应不同设备的屏幕尺寸。 ...

    CSS中常用的 reset.css文件

    为了确保不同浏览器间的一致性以及消除默认样式带来的差异,开发者通常会使用`reset.css`或类似的重置样式表。`reset.css`文件的主要目的是消除浏览器内置样式的影响,使网页元素具有统一的初始样式,从而为自定义...

    CSS新世界1

    书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了一些在学习CSS3时需要了解的基础知识。 在数据类型部分,书中提到了CSS数据类型的重要...

    js判断是手机还是pc并调用不同css样式

    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|...link href="css/mobile.css" rel="stylesheet" type="text/css" media="screen" />'); }判断手机端访问调用的css

    CSS:The Definitive Guide, 4th Edition[CSS权威指南](英文版)

    书中,Meyer还与Estelle Weyl共同探讨了在现实应用中遇到的一些问题,比如不同浏览器对CSS属性的支持度。浏览器兼容性一直是前端开发者面临的重要挑战。不同浏览器厂商在实现CSS标准时可能会有所差异,这就要求...

    hbuilder css格式化css为单行代码

    2. 了解代码格式化规则:如果自行编写或修改js文件,需要对CSS的语法规则以及代码美化规则有一定的理解。 3. 测试与调试:替换文件后,应立即测试其效果,确保格式化功能按照预期工作,没有引入新的问题。 标签...

    CSS电子书 CSS电子书 三合一

    6. **浏览器兼容性**:每个浏览器对CSS的解析可能会有所不同,理解如何处理浏览器兼容性问题,使用前缀(如-webkit-)和工具(如Autoprefixer)是重要的实践技巧。 7. **性能优化**:通过合理组织CSS、减少不必要的...

    div+css布局大全

    通过媒体查询(media queries)和其他CSS技术,我们可以根据设备的视口大小调整布局,确保页面在不同设备上都能良好显示。 9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和...

    精通CSS精通CSS

    响应式设计让网站能适应不同设备和屏幕尺寸,主要通过媒体查询(`media queries`)来实现,结合Flexbox和Grid布局,可以创建出适应性强的网页。 六、CSS预处理器 预处理器如Sass和Less扩展了CSS的功能,支持变量、...

    CSS特效+CSS图标

    CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS特效+CSS图标CSS...

Global site tag (gtag.js) - Google Analytics