`

不同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...

    根据不同浏览器加载不同css文件

    资源名称:根据不同浏览器加载不同css文件资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

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

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

    JS判断浏览器分辨率自动调用不同CSS

    "JS判断浏览器分辨率自动调用不同CSS"是一个实现响应式布局的技术手段,通过JavaScript检测浏览器窗口的分辨率,并据此加载相应的CSS样式表。这种技术尤其适用于多设备兼容性需求高的项目。 首先,我们需要了解...

    Reset_CSS css样式重置文件

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

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

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

    CSS CSS CSS

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

    CSS2.0+CSS3.0的chm文档

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

    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新世界1

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

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

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

    hbuilder css格式化css为单行代码

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

    CSS中常用的 reset.css文件

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

    div+css布局大全

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

    div+css手册

    `div`元素本身无特定样式,但通过CSS可以对其进行样式定义,实现对网页内容的布局和美化。 CSS,即Cascading Style Sheets,是用于控制网页表现的语言,允许开发者将样式信息与内容分离。这意味着你可以更改整个...

    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...

    CSS2.0 中文手册

    以下是对CSS2.0主要知识点的深入解析: 1. **选择器**:CSS2.0中的选择器包括标签选择器、类选择器、ID选择器、属性选择器和伪类等。例如,`p`用于选取所有段落,`.class`用于选取具有特定类的元素,`#id`用于选取...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    CSS酷站CSS特效华丽CSS

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

Global site tag (gtag.js) - Google Analytics