搜索
首页web前端html教程CSS禅意_html/css_WEB-ITnose

# CSS禅意
---

标题取自《css禅意花园》一书,还记得当年读此书时的情景,真的是内容和书名一样的优秀,就以此标题作为自己在该文的一种追求吧,尽管我的水平和见解都和Dave Shea相去甚远。该文算是对前两年写页面工作的总结吧,现在比较少关注css了,可能观点有狭隘的地方,同时文中也有一定的思考和理解,也许并不一定特别适合初学者阅读,本人时间有限,也没办法针对具体的知识点做深入的讲解或提供代码示例,所以在阅读过程中如果有不理解的地方,欢迎提问并互相学习交流。

当UI设计师给了你一张psd图,在对它进行切图,实现成静态页面并在浏览器上完美展现,这个过程需要用到html和css。本文就从这个过程入手,讲讲相关知识点。

## 开发前期准备

1. 提取图片
UI设计师往往只提供给前端人员一张完整的psd图,甚至对于无用的图层也不清除,这个时候前端就需要自己进行ps,提取所需的图片,并保存到项目图片库中。从我个人体会而言,我是建议前端自己ps的,理由是:
- web页面需要根据业务和技术需求选取不同的图片文件格式,而多数设计师并无法完全理解
目前主流的图片文件格式依然是jpg、gif、png,这三者的区别应用和这么做的目的可以查看拙文[三种图像文件格式的选择](http://www.cnblogs.com/balaixianren/archive/2011/08/09/2123321.html)
- web页面需要考虑性能因素,对一些图片进行sprites贴图处理
页面图片的请求数越多,加载就越慢,一些不规则和具有特定业务场景使用的图片可以通过利用sprites技术来减少图片请求数,进而提升性能。sprites图片的制作可以使用一些软件或在线生成,在线生成工具[CSS Sprites Generator](http://csssprites.com/)
- 字体图标的选择
应用字体图标的好处是能够通过css简单地控制图片的大小、颜色,如果是矢量图标,还可以避免跨平台页面制作导致的图片失真问题。缺点是市面上浏览器对字体图标文件的格式支持不统一,得生成不同格式的文件来进行兼容性处理。推荐一下由阿里巴巴UX部门推出的矢量图标管理网站[Iconfont.cn](http://iconfont.cn/),该网站有丰富的矢量图标可以收藏,并可以在平台上建立项目,实现项目图标应用协作管理。具体应用可以参见该站点的文档帮助。
- img or background?
· 从业务角度来说,业务类型的图片适用img标签,而装饰类型的图片适用background定位
· 从seo角度看,需要提升搜索关键字效果的应该使用img标签,反之可得
2. 兼容浏览器版本的决策
不同的产品有不同的目标客户群,不同的目标客户群决定项目开发需要注重的浏览器版本兼容。兼容性问题是因为浏览器内核不一致导致,而根本原因是因为在早期,没有统一的标准和规范让浏览器厂商来遵循。在编写代码开始前,应该向产品经理确认该项目需要兼容的最低浏览器版本,这里更多的是指IE浏览器。浏览器版本决定我们可以选择哪些css选择器,应用哪几种布局方式,规避哪些常见的兼容性问题等等。
3. 响应式开发
由于智能手机的普及以及网络越来越发达,目前移动端的开发愈发的重要。是针对不同的平台分别定制不同的代码,还是一套代码适应多种平台(即常说的响应式开发)?也是需要团队考虑的方向。响应式开发在设计层面来说,需要考虑UI展示的不同,终端设备交互的差异,在技术层面来说,就是媒体查询+液态图片+流式布局的综合应用。

## HTML

Html的设计初衷是让用户能在浏览器上更好的地浏览文字,所以会有h1~h6标签用来区别不同标题级别、ul和ol来定义列表种类、p用来表示段落。不同的标签会有不同的默认样式,后者会让页面在浏览器上展示出层次感,便于阅读。

Html的标签各有所用,所以开发者在编写html代码的时候,也应该从这一方面入手,让标签做正确的事情,个人认为这也就是语义化提出的初衷。一个html页面,可以从下面几个方面实现语义化:
- 让标签做它该做的事情
- 尽可能少的代码嵌套
一部分开发者写的代码结构嵌套很深,有的时候并不是没有认识到弊端,而是不得已而为之。原因就是对css应用得不够熟练。比如一行文字前面加个小图标这样的场景,实现方式有很多种:
· 给文字设置padding-left,用背景图定位的方式
· 给文字标签添加:before伪元素选择器,存放图标,定位之
· 增加一个空标签来设置图片样式
显然,最后一种方式是种反模式,不建议使用。
- 去除冗余的标签属性
在保证前面两个原则的情况下,通常我们只需要对一个业务模块的最外层标签定义一个钩子(id或者class等等),然后结合css强大的选择器,就可以避免需要给每个标签添加识别属性,进而书写css的尴尬
- 添加有意义的属性
有时候给一些特定标签添加属性能够让页面更加友好,并有利于seo。比如给img标签添加alt属性、给a标签添加title属性等。
- 校验
查看一个网页结构是否合理,一个好的办法就是把样式表去除,然后在浏览器上查看,理论而言可读性好的页面,结构就是合理的

## CSS

随着web的发展,简单的html已经不能满足人们的审美需求,于是css应势而出,css的机制就是通过link或style方式,告知浏览器,浏览器解析css规则,并和相对应的标签元素进行绑定,找到相对应的标签就靠seletor。

1. 选择器
Selector一直在增加,查找功能越来越强大,为的就是适应越来越丰富的web应用开发,相信随着时间的推移,还会有更多的选择器出现。从基础选择器到伪类和属性选择器,合理地进行选择才能写出优雅的代码,这是基本功,得多写多练。
2. 继承和层叠
Css的另一机制。继承实现了样式的共用,常见的如color、font属性,最终目的是保证开发的合理性,想想如果需要为每个标签都写一遍字体定义是一件多么可怕的事情。我认为层叠的机制是依赖于继承的,如果没有继承,也就不需要层叠存在了。css通过选择器的优先级来告知浏览器怎么样应用样式,确定优先级有一个计分原则specificity,除了计分原则,还有很多特殊性需要知道,比如important、多个相同选择器的声明、样式表的种类以及它们的优先级关系等等。层叠的本质是为了解决样式复用问题,一个可复用的样式(可以理解为基础样式)的选择器如果越多,那么层叠覆盖的选择器就越复杂,所以在写css的时候,减少选择器嵌套是个不错的准则,特别是在出现了像sass和less这样的预编译工具,很容易就写出了多层选择器,影响了浏览器的解析速度。
3. reset样式
正如前面html说的,html有许多标签默认就有样式,比如a、p、ul等,不同的浏览器在赋予这些标签样式的时候,并不统一,这就会造成初始化页面展示不一致,还有情况如列表标签ul、ol,默认样式太过单一,往往满足不了业务需求,所以这就需要在一开始的时候就对默认样式进行重置。不是所有的样式都需要重置,一个站点,往往只需要对一些常用的标签且有默认样式的进行重置,像bootstrap那样大而全的UI库,因为得兼顾许多应用的场景,所以会列出许多需要重置的标签,但是一般的站点确实是不需要的,精简是css应该追求的一个方向。
4. Box Model
Css布局依赖于两个方面,元素和定位。不管是行内元素或块元素,在页面上的展示都是一个个矩形框,因此就有了框模型的概念。框模型是css的基础,在应用过程中,得注意行内元素的垂直margin无法生效,而同一个bfc内的块级元素的margin会发生折叠现象,框的内容宽度在没有width的情况下的取值原理。如果可以的话,了解IE低版本混杂模式下盒子的展示方式,以及box-sizing的用法就可以了
5. BFC的原理
对css的布局有比较深入研究的朋友们或许能理解,BFC就是css各种布局属性综合应用的大杂烩。它提出的目的就是在于总结一套规则,告诉大家当碰到使用相关属性的情况下,元素会有怎样的表现,以及元素和兄弟元素或父元素,或兄弟元素的子元素乃至层级之间优先级关系等等。这些相关属性可以从清除浮动的方式中去获取:
- overflow属性除了visible的取值
- display属性line-block, table-caption等
- float属性非none值
- position属性absolute和fixed值
当元素有了上面属性之一,就会形成一个独立的容器。
6. CSS和CSS3
Css3提供了许多可供实际场景应用的属性,但是我始终觉得它更像是武侠里说的只是武功应用的法门,如果要让武学有个质的飞越,还是得把css一些很基础的东西学扎实,比如我前面5点所写的,但是不限于。
7. SASS
用[sass](http://sass-lang.com/)来写css体验还是不错的,用得好的话会有做css架构的感觉,这是因为它的功能决定的。比如它支持变量定义,嵌套,导入样式表,函数定义并可传参,样式组合重用以及简单地计算功能。如果用得不好,它的功能就发挥不出来,比如定义了变量,只引用了一次,其他地方还是像写css那样,另外像mixins和extend也要多考虑去定义使用,而嵌套,应该考虑合理的区间。

## 结语

洋洋洒洒写了这么多字,花了不少时间,脑细胞死了不少。文中虽然没有举例说明,但是每一段文字的下笔我都是先在脑海中先想象了应用场景,靠着自己的语言阐述出来。希望这篇文章能给在前端界面开发有过一定经验的朋友带来一些思想上的交流,不足之处还望指教。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
如何验证您的HTML代码?如何验证您的HTML代码?Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),