当前位置：首页 > 实用文档 > 其他范文> Christopher Schmitt 谈学习CSS的益处网页设计

Christopher Schmitt 谈学习CSS的益处网页设计

时间：2023-03-22 07:38:03 其他范文收藏本文下载本文

Christopher Schmitt 谈学习CSS的益处网页设计（整理9篇）由网友“小懒猪哇哇”投稿提供，下面是小编整理过的Christopher Schmitt 谈学习CSS的益处网页设计，欢迎您能喜欢，也请多多分享。

篇1：Christopher Schmitt 谈学习CSS的益处网页设计

CSS布局作为一个热门技术，发展的确有些缓慢，

CSS最早被提议在1994年，最早被浏览器支持在，CSS一直被力捧为传统的以HTML为基础的web代码的继承者。

CSS使用样式表来控制整个站点字体和布局的能力，它非常有效率、易于设计和有远见。然而，也一直有荒诞的说法围绕着CSS，阻碍了网页设计师学习和掌握这种语言。究竟是什么让人们有这样的看法呢？

大学教师Christopher Schmitt是CSS的倡导者之一。Christopher深信CSS将成为网页设计师必备知识。

目前CSS已经进入黄金发展期，学习和使用CSS的益处是什么呢？

Christopher为我们总结了以下几点学习CSS的益处，大家可以作为参考。

一、CSS将从基础开始建设直到全面替代传统web设计方法。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素，

二、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。

三、缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

四、强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。

五、CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。相关技巧可以看看52CSS.com的文章。

六、提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

七、可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如很多便携设备、手机和PowerPoint等。

八、更好的控制页面布局。不用多说。52CSS.com提供了很多实例和教程。

九、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

十、更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价。

篇2：关于CSS学习――写给初学者网页设计

前几天有个人退群了，起因很简单，他问了一个问题，没人回答，于是说要退群，后来我看到了，给了个链接，说这个问题已经说过好多遍了，于是他就退了。

打开QQ的群列表，我所在的技术群有5个，不包括原来参加过又退了的。另外，还去几个论坛里看。看得多了，忽然觉得有几句话想说给初学者。

，我开始接触网络，然后开始做网页，直到现在，的时间，让我觉得自己有资格说这些，毕竟，我也是从一个“小白”开始。

一、基础学习

无论学什么，想做出些样子来，都是要付出时间与精力的。

网页制作看着很简单，用软件（比如word）都能输出，但是要想做好也不容易，特别是如果想拿网页制作当作养家糊口的本事来做的。那么，拿出点儿时间来看看html和css的基础知识，是必须的。而不是要用到什么就跑去论坛或者群里问，下次再遇到又问。

听过那个相声么？“这个问题我不能马上告诉你，马上告诉你你印象不深。”

事实上就是这样，别人告诉你一句，只能是短期记忆，只有自己查资料甚至走了弯路总结出来的东西才印象深刻。

html和css都是很简单的东西，不涉及算法，不涉及数据库，只要搞清楚含义就可以。

有了基础，其实很多问题都会迎刃而解，真的遇到了不明白的，再问也不迟。

群里也好，论坛里也好，那些水平高的人，一般都是很忙的，一些太基础的问题，可能他们不会回答。而有些问题看上去似乎是简单而且独立的，但是如果对基础知识不熟悉，却又很难解释得清楚。

例如：浮动和定位。

浮动是布局绝对要用到的东西，定位也是，但是其在浏览器内的表现，又涉及到box model、包含块、文档流等等知识，同时，还可能有浏览器的bug在中间捣乱，那么我想没有几个人能用一两句话说清楚这许多的内容，只有去查资料，认认真真地学、实践，才能透彻地理解。

二、明白自己要问什么

经常有人问：“为什么这个没有效果？”，然后给一个截图。

页面是由代码来表现的，不给代码，人家再聪明也没法猜。

经常看到一些帖子，问得问题既模糊，文字又不通顺，错字连篇，让别人看得都糊涂。问问题都这么不认真，还怎么指望别人去认真回答你？

说到这里，有个真实的例子：

“问：怎么去掉列表前面的黑点呀？

答：list-style.:none;

问：没有效果

答：你把代码发上来看看，

问：

·xxxxxx

答：……………………老大，你那个黑点是文字！

问：我看看……哦，这样啊。

答：无语晕倒。”

三、善于使用搜索引擎

其实明白自己要问什么了，最直接且效率最高的方法是使用搜索引擎，网络的好处就是资料多得目不暇接。

也许你的问题已经有人问过——特别对于初学者来说，问题一般都是被问过很多遍的，因此，也许已经有人针对这个问题给过很详细的解释，搜一搜看看有没有，这样的结果，比别人在论坛或者QQ上随便打一句两句话回答你更能提高你自己的水平。

四、谦虚

忽然想起一个小品，说如今杨白劳是大爷，黄世仁要追着求杨白劳还钱。

经常看到一些帖子，问问题没人答，就抱怨论坛人气低，有人回答了可能没解决问题，就抱怨没有能人，在群里问了没人答就说群不好。

有一个论坛或者群是万能的，也许你问的问题跟群没关系，自然没人答；或者，群里的人刚好都忙，毕竟大家都有工作，那么等等或者去搜资料，比抱怨更节约时间和体力。毕竟人家也没有义务要回答问题。

再或者，别人给的答案跟提问者预期的不一致，不要急着说不对，其实有些问题看上去的样子和其实质是有很大差别的。

举个例子，经常有人问一些CSS设定的问题，但是当我指出他的html结构不好时，总被回答，别管那个，你就说现在怎么写CSS。一个好的结构可能会让CSS变得很简便，你拒绝了简单的答案，别人哪里有那么多时间去给你搞复杂的东西？

五、关注别人的问题

天外有天，人外有人。

我之所以愿意关注这些群和论坛，因为从这些问题里，可以检验我到底掌握了多少知识，问题总是千奇百怪的，而总有人能对这些问题给出答案，有的方法是自己知道的，有的可能是自己不知道的。而看别人的回答也许就能让自己更进一步，同时，回答别人的问题，也能巩固自己的知识，有时候还能让自己发现新的东西。

如同前些日子，我买了两本CSS基础的书，有人问：你还要看这些基础的东西么？

每本书的作者都有自己的视角，自己的出发点，自己的经验，因此差不多每本书（当然那些纯是凑代码的书除外）都有其优点，都可以发现一些自己不知道的东西。

绝对的天才听说过，但是从来没见过。

踏下心来，开卷有益。

来自：www.ddcat.net/blog/archives//11/195.html

篇3：阿里妈妈UED：也谈CSS Sprites网页设计

CSS Sprites 简介：通常被意译为“CSS图像拼合”或“CSS贴图定位”，CSS Sprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律，但在很多情况下，它有着一定的优势，最重要的是它可以减轻服务器的负载，提高网页加载速度。随着Web设计向着精致、巧妙的方向发展，设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果，这时CSS Sprite应运而生。

说白了，CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

CSS Sprites应用：在这方面，淘宝网做的比较好，我就以淘宝网为例吧。

[实例一:淘宝频道页面导航]

效果图：

sprites图：

[实例二：淘宝首页]

效果图：

sprites图：

CSS Sprites优点：CSS Sprites为什么突然跑火，跟能够提升网站性能有关，

显而易见，这是它的巨大优点之一。

1.利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

2.个人认为CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点：诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点。

1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，否则可能会出现出现干扰图片的情况；这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；不过网上已经有高手开发出“CSS Sprites 样式生成工具”，大家可以尝试一下。

3.CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

CSS Sprites总结：性能压倒一切。CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，在决定是不是应用CSS Sprites。为保持兼容性和维护性，sprites图片中的各个部分保持一定的距离是一种不错的做法。

原文：ued.alimama.com/?p=233