学习css越来越专业
我从最近两年开始开发网站,我很难学习CSS(只花了一整天创建像twitter这样的登录框......).我迟早会回到桌面布局,完成任务(几乎所有我深入研究其他源代码的东西和谷歌就像地狱......但我希望我知道怎么做,就像我通常想出的那样整天编程问题而不是谷歌...).
甚至在一段时间后如果我实现了创建完美布局的目标,并回到IE进行测试,一切都搞砸了.
我是唯一一个开发它的人,所以通常70%的时间花在设计上,30%用于编程.
我想我需要学习更多东西,这样我就可以花更少的时间调整布局,花更多时间编程.
各位程序员+设计师的工作方式如何？而且,如何掌握CSS？
sta*_*ast 13
各位程序员+设计师的工作方式如何？
使用CSS时,我发现最好先为符合标准的浏览器设计和构建网站(我的偏好是FireFox).然后,当您看到它时,请检查Internet Explorer和其他浏览器.
不幸的是,对于任何复杂性的设计,将有多个浏览器花费时间来修复规则,直到它是一致的.
而且,如何掌握CSS？
有几个重要的东西包裹你的头,这将使你的CSS生活更容易:我将学习的第一个是Box模型.这是关于这个主题的官方W3C文章,这篇文章很长,所以我也会在下面添加一个图片,这简化了一下:
重要的是要注意浏览器以不同方式计算它.
一旦你知道是什么导致了自己的大小,布局应该更容易实现与表格相同的风格.
第二个帮助我了解正在发生的事情的特殊性 这篇文章帮助我解决了很多问题.基本的总结是每种类型的选择器(元素,类,id)都有归属于它的权重,如果一个元素的css值具有更高的权重,那么它将不会被覆盖.
#id 0,1,0,0
.class 0,0,1,0
p 0,0,0,1
1,0,0,0
因此,无论你的css文件说什么都没关系,内联样式优先.例:
a {color: red;} (0,0,0,1)
.class1 a {color: blue;} Overwrites red (0,0,1,1)
#id1 a {color: green;} Overwrites blue (0,1,0,1)
#id1 .class1 a {color: yellow;} Overwrites green (0,1,1,1)
#id2 a {color: red;} Overwrites green, NOT yellow (0,1,0,1)
#id1 #id2 a {color: black;} Overwrites yellow and red (0,2,0,1)
我还在读这篇文章.两次.
要学习的第三件事是如何支持以前的浏览器(如IE6)以及它们会困扰你的错误.我是这个网站的粉丝:http://www.positioniseverything.net/ 他们用清晰度和解决方案覆盖了在使用CSS实现跨浏览器支持时会遇到的大量浏览器错误.
IE6可能会遇到的一些错误是:
我已经做了12年以上的网络工作.我经历过表格布局,框架,DHTML,XHTML,CSS,Ajax ......我记得第一次看到CSS时,我想"WTH就是这个烂摊子？我永远不需要这个." 一年后,我发现自己正在学习它,事实上你可以用它来做一些非常强大的事情.但要学习和学习它,需要时间和奉献精神.
一些提示,使用像Eric Meyer这样的CSS重置.http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.这将中和许多特定于浏览器的格式,因此您可以从一个干净的平板开始,但不会像其他重置一样多开销.
确保您有一个结构良好的HTML/XHTML文档,顶部有所需的DOCTYPE.不同的浏览器将根据不同的DOCTYPE以不同的方式呈现页面.
CSS也是一种不同的思维方式.然而,在您可能在此区块中放置图形之前,突然您正在考虑图层和背景.也许图形根本不在一个块中,而是有填充和背景图像本身.以不同的方式看待事物需要时间.
最后,我承认,经过这么多年,我仍然会回到表格来布置我的大多数表格.CSS很棒,但它不是圣杯.务实.您可能想要观看http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4的第一部分,其中Crockford概述了这些Web标准的历史,例如HTML和CSS以及他看到了他们的问题.
除了这里的其他好建议外,我还发现使用合适的工具进行开发可以提供很大的帮助.
首先,我发现在像Notepad ++这样的编辑器中编写CSS 可以提供帮助,因为语法突出显示可以随时发现令人沮丧的小错误.
我也使用Firefox进行初始测试,并确保DOCTYPE设置,如上所述.
我还使用了一个名为Firebug的优秀Firefox插件,它允许您检查页面的DOM元素并更改其CSS以便立即了解CSS的外观以及许多其他功能.
然后我确保HTML和CSS都符合W3C标准.这可以在http://validator.w3.org/和http://jigsaw.w3.org/css-validator/在线完成,也可以通过另一个名为Html Validator的 Firefox插件在线完成.
另外,我发现当我想在Javascript中操作页面时,我发现使用Javascript框架jQuery非常有用,从HTML/DOM/CSS细节中抽象出来并允许经过充分测试的跨浏览器兼容性.
也许看一下CSS框架.对于许多常见的布局情况,这些都经过了久经考验的CSS样式.我听说Frame是推荐的,对我来说很好看.
我发现有一个很难管理和阅读的大型CSS文件.但我担心将文件拆分成较小的部分(例如,每页一个CSS文件)会降低页面加载速度.解决方案是使用Minify.它允许CSS文件作为单个文件提供,以及"压缩"结果以消除冗余间距等.它非常易于使用,并且当浏览器缓存网站的旧CSS文件时也会消除问题.