`
844604778
  • 浏览: 550431 次
文章分类
社区版块
存档分类
最新评论

网页设计之CSS3精要

 
阅读更多

学海泛舟系列之

网页设计之CSS3精要

金旭亮

注：

这是一个系列文章，访问以下链接查看全部文章

《学海泛舟系列文章开篇语》（http://blog.csdn.net/bitfan/article/details/10049513）


===================================================================================================

如果要问21世纪最引人注目的软件技术领域是什么，相信很多人都会说——互联网，尤其是移动互联网，在本世纪的第二个十年（2010年以后），更是吸引了大多数人的眼球。近几年业界对智能手机和移动互联人才的需求在持续增长，某些实力雄厚的互联网公司更是每年都到各大名校以高薪“扫荡人才”，实施“焦土战略”，优秀学生一毕业就能拿到的薪水是我等高校“青椒”的数倍，甚至连业界己工作多年的老员工也有点心理不平衡。不管是在高校还是业界，这一现象引发了大家掌握互联网（尤其是移动互联网）领域开发技术的热情。


笔者在高校工作，目睹青年学生学习互联网技术的热情高涨，但由于互联网技术本身的复杂性，加上技术本身又在持续快速的演化过程中，许多人都有点无从下手的感觉。


作为一名有着近二十年编程经历和十多年教学经验的计算机专业教师，我觉得可以写一些东西，把我对技术的理解表达出来，相信这些东西能对学习热情高涨的在校学生及软件技术初学者有一定的帮助。


万丈高楼平地起，我就从互联网技术中最简单也最基础的级联样式表（CSS：Cascading Style Sheet）说起。


一、先见林，再看树


1 CSS是什么？

先来看一张非常重要的图（图1）：



图 1

这张图表达了丰富的信息：

  • HTML实际上承载了网页要呈现的信息本身，它是一种结构化的纯文本文档，在运行时被浏览器解析为一棵多叉树（《数据结构》中讲过的），称为DOM树。HTML5为这棵树增加了不少新的节点类型，这些内容留到HTML5那篇文章再做介绍。
  • 那CSS是什么？它决定了展示在众人眼前的网页是什么样的。其实我们可以把浏览器看成是一个绘图程序，HTML元素就是绘图对象，而CSS则是绘图控制指令，它定义了一些规则（CSS Rule），控制浏览器以特定的方式在屏幕上“画”出整个网页。
  • 最后是JavaScript，它决定了Web网页的行为特性。详细一点说，我们可以编写JavaScript代码响应用户的各种操作，操控HTML文档中的各个HTML元素，给它们动态地赋与不同的CSS样式规则，或者是主动与Web服务器联系获取新的数据刷新页面……，因此，JavaScript是整个Web网页“活起来”的关键。相关的内容，留到JavaScript那篇文章再介绍。
如果你希望能成为一名Web网页设计师，那么，掌握CSS技术的水平如何十分关键。

2 程序员需要掌握CSS吗？

我可以很肯定地说，程序员当然需要掌握CSS，只不过要求没有Web网页设计师那么高罢了，为什么这么说？

  1. 当前在实际开发中用到的大量JavaScript框架（比如jQuery）和一些服务端技术（比如ASP.NET Web Form中的不少Web控件），都在其内部使用CSS以实现其功能，不掌握CSS，你一是无法看懂其代码，二是无法定制它们以得到你所需要的效果。
  2. 为充分地利用客户端的计算资源，有些功能需要使用JavaScript代码来动态地设置元素的CSS样式以调整其外观，从而不必将网页发回服务端处理，浪费服务端资源。
  3. 适当地用好CSS，有些功能不需要编码就能实现，可以为网页瘦身。
  4. CSS是开发移动Web应用的关键技术，因为这种应用的页面需要在各种移动设备上正确地显示。


3 怎样学习CSS？

与其它软件开发技术相比，CSS可以说非常简单的，绝大多数人在理解它上不会有任何问题，唯一的要求就是在学习它之前需要掌握一些HTML的基础知识，这些知识随便找本讲HTML的书就行了，一般人最多花几个小时就OK。

以下是具体内容：
  1. 掌握最基本的HTML元素（比如<p>、<div>之类）的语义及用法。需要指出的是，HTML 5引入了一堆新的与文档结构和语义密切相关的标签，比如<nav><footer><article>之类，需要花点时间理解它们，我会在后面HTML5的文章中简要介绍一下。
  2. 要把HTML文档看成一种拥有多层嵌套的块状结构，其中，<div>是最常见也是最重要的用于定义“块”的标签。
  3. 区分影响页面布局的两种HTML元素类型：inline（行内元素）和block（块元素），并且能把常用的HTML元素归属到这两个类别之一。
下面开始介绍CSS这一领域中的技术要点和亮点。

二、把握CSS的工作原理与基本技巧

1 在HTML文档中嵌入CSS代码的四种方式

  • 行内式，在HTML标签的style属性中编写CSS代码。
  • 嵌入式：在<head></head>中编写CSS代码
  • 链接式：将CSS代码入到独立的文件中，在HTML文档中使用<link>链接它
  • 导入式：使用@import指令

除非是很小的网站或很简单的页面，一般推荐使用方式三。实际开发时通常会在网站中创建一个专用文件夹（比如Styles、CSS之类），集中存放CSS文件及其用到的各种其它资源（比如背景图片）。


对于大的网站，或者是非常复杂的页面，其CSS规则会相当多，在一开始就制定相应的管理策略非常关键。


对于高流量的网站，还可以把被频繁使用的CSS文档及相关静态资源放到CDN（不知道CDN？自己百度一下）上，从而提升网站的响应速度。


2 流式布局与inline和block元素

当从Web Server上取得HTML文档及相应的CSS文件后，浏览器按照顺序解析HTML元素并应用相应的CSS规则，默认规则如下：
  1. inline元素（如<a>和<img>）从左到右的显示，一行不够，折到下一行。
  2. block元素（如<h1>和<div>）从上到下的显示。

了解这个默认规则，是实现网页布局的关键。而浏览器采用的这种默认布局方式，被称为“标准流式布局”。


3 CSS规则

CSS文件可包容多条CSS规则，上个图（图2），废话不多说：



图 2 CSS规则

4 编写CSS规则（rule）

网页设计不外乎以下流程：


设计CSS规则-->在浏览器中测试-->修改CSS规则-->再测试……


CSS规则编程中，最重要的就是CSS选择器（Selector），CSS 2.1原来就有不少种选择器对象，CSS 3 又加了一些新的。

对于CSS选择器的学习，是CSS技术领域中的一个要点，一定要下功夫。


5 CSS继承与层叠原则

  • 继承原则其实很简单，举个例子就行了：


某<div>元素中包容<p>元素，在<div>中定义的字体字号，会被其子元素<p>所继承。


CSS 中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。然而，也有很多CSS 属性不能继承，因为继承这些属性没有意义。这是在实际设计过程中是需要注意的。


  • 层叠原则有些复杂，但它要解决的问题其实很常见。


还是拿前面的例子说：你给<div>元素指定文本颜色为红色，又在<p>元素中指定文本颜色为蓝色，两者相互冲突。那么，浏览器在显示<p>元素中的文本时，到底显示哪种颜色？


所以，CSS的层叠原则主要是解决“如果有多条CSS规则相互冲突，“到底该听谁”的问题”。


浏览器在内部使用一个比较麻烦的算法（因为它需要考虑多种情况）来解决这个问题，有兴趣的朋友可以找相关资料去了解一下。在实际开发中记着一句口诀：近者胜，远者负，基本上也就够了，大不了用各种浏览器打开网页看一下就OK了，不必深究其算法细节。


6 盒子模型

这个可是非常地重要，它与网页布局关系太大了。


CSS把每个元素视为一个“Box（盒子）”，通过排列大大小小的多个“盒子”，完成页面的呈现。上张图（图3）：



图 3

关键是记着盒子模型其实是“一个套一个”的多个矩形，知道“Border”、“Padding”和“Margin”三个术语的含义。


CSS规范中定义有很多属性用来设定Box的边框和背景，实现诸如圆角框、渐变背景、背景融合等等功能，任何一本CSS书中都有很多介绍，我就不废话了。


需要指出的是，CSS3中新加的一些属性，并非所有浏览器都实现，因此，往往会在规则中添加特定的前缀，以达到通用性。比如实现圆角框的属性就是CSS3新加的：


div {
width:200px;
height:100px;
background:#e1d8b9;
/*上部、下部圆角*/
border-radius:15px/15px;
-webkit-border-radius:15px/15px;
-moz-border-radius:15px/15px;

}


其中的-webkit-（针对Chrome和Safari）和-moz-（针对FireFox）就是厂商前缀，不带前缀的border-radius就是CSS规则所定义的，随着时间的推移，未来将只需要不带前缀的属性名。


7 盒子的浮动与定位方式

这是CSS技术的要点与难点。


设置一个块元素的float为none和clear之外的某个值，这个块元素就浮动起来，自动地飘流到其父元素的边缘。


盒子浮动起来以后，元素的定位变得复杂。这里头有相当多的东西要掌握。


首先是CSS定义了几种元素的定位方式，使用position属性指定以下值之一：
  • 静态（static）定位：这是默认的属性值，表明盒子中的元素按照标准流方式进行定位，“该在哪就在哪”.
  • 相对（relative）定位：使用相对定位方式的盒子，会相对于它原本的位置有一个偏移，到达一个新位置。
  • 绝对（absolute）定位：以它“最近”的一个已经定位的父元素为基准进行定位，如果没有这样的元素，则以浏览器窗口为基准。
  • 固定（fixed）定位：采用固定定位方式的盒子以浏览器窗口为基准定位

这四种定位方式的区分比较微妙，需要编写示例在浏览器中进行试验才能理解它们的特为特性。


当有多个浮动的盒子，其上下和左右边距如何叠加，如何实现文本绕排图片等等，问题变得更为复杂。


特别需要指出的是，CSS 3中新加了一种灵活的“弹性盒子布局（Flexible box layout）”，通过box-orient/box-flex/box-align等属性值可以让多个盒子水平或垂直排列，自动按比例调整大小，指定对齐方式，调整盒子显示顺序，盒子分组排列等等，让人印象深刻，太棒了。唯一希望的就是各大浏览器厂商能尽快地实现它，对网页设计师来说，这是一个福音。

8 页面布局方法

现在的网页，大多数采用分栏的设计方案。实现分栏的关键就是盒子的浮动。几乎所有的CSS书都会有一章介绍常见的两栏、三栏、多栏的实现方法，我就不废话了，自己看书。而一些Web网页设计工具，比如DreamWeaver，甚至在创建网页时就允许你确定页面的总体布局（图4）：



图4

使用这些工具生成的页面模板，可以大大地减少网页设计工作量，但定制与调整它们仍然需要对CSS盒子模型与元素基本定位方式有相当的把握与了解。


象Dreamweaver这样的工具比较适合网页设计者，对于笔者这种以编程为主的Web开发者而言，还是更喜欢自己用熟的IDE，比如Visual studio 2012，它有一个免费的版本——Visual studio 2012 Express For Web可用，非常棒，强力推荐。


9 过渡与变换

相比前面介绍的内容，过渡（transition）与变换（transform）不属于必须掌握的技能，它主要用于给网页元素添加动画，用得合适，能给你的网页“锦上添花”，用得不合适，会适得其反。


10 界面组件

仅仅使用HTML现有元素和CSS，加上一些JavaScript代码，能够实现一些常见的界面组件，比如下拉菜单，Tab页，折叠面板等等，然而，手动完成这些界面组件对网页设计开发者的要求较高，至少你必须熟练掌握Javascript的编程技巧。


幸运的是，现在己经有不少现成的Web界面组件库可以用，比如jQuery UI，推荐在开发中优先使用它们，实在找不到符合要求的组件时，再自己动手开发。


11 CSS3的其他特性

前面列举的10个方面，是CSS这一技术领域中最重要的部分。除此之外，还有一些小的方面我没有介绍，比如CSS 3中新加的Web font，能大大地丰富网页上可用的英文显示效果，然而由于汉字字库过于庞大，目前还不太适合在网络上传输。特别是在天朝这种网速慢、网费高的地方，Web Font还不够实用。


其他的CSS 3新特性，就留给大家自己去探索吧，最重要的东西我己经展示给大家了。


到了文章的最后，来关注一下移动Web页面设计的相关内容。


三、移动Web页面设计中的CSS

1 Native App vs Web App

2010年以后，在苹果和诸多Android厂商的强力推动下，智能手机得以迅速普及，越来越多的人使用智能手机上网，从而使得移动互联网成为大众瞩目的焦点。


当前智能手机应用主要分为两大类：本地应用（native App）和Web应用（Web App）。

  • 本地应用主要指使用特定的编程语言直接基于手机操作系统开发应用，比如用Objective-C开发iOS应用，或者是使用Java开发Android应用。

本地应用能直接调用手机操作系统的所有功能，并且能充分地使用手机硬件（比如摄像头、传感器、话筒等），应用能实现的功能不受限制，并且响应迅速，用户体验好。它的缺点在于对开发者素质要求高，开发周期长，成本高。


  • Web应用主要使用手机内置的浏览器（或浏览器组件），直接从网站上提取网页并显示，其特点是具有跨平台特性（因为Android和iOS都有内置浏览器并且对HTML5特性支持较好），同时可以基于现有的网页进行改造，大大地降低开发成本。其缺点在于对网络依赖性强，只能调用手机功能集合中的一个子集，用户体验暂时还比不上Native App。


尽管现在native App还是占优势，但笔者认为Web App还是会渐有起色并最终与native App平起平坐，甚至可能会反客为主占据优势地位，主要原因有以下几点：

  1. 手机硬件进步飞快，目前Android手机装备四核CPU的己经很多，内存也越来越大，性能提升明显，这对于Web App来说是件好事。
  2. 通讯基础设施的改善是持续的，上网速度必然会持续提升，联通、移动、电信等巨头虽然会努力地想方设法地维持其垄断利润，但上网总体费用下降的大趋势是不会变的，迟早手机会像现在家庭的宽带一样，流量不再是需要考虑的问题。
  3. 与PC不一样，用户更换手机频繁，每当用户换一个新手机，或者是手机厂端主动推送手机操作系统的更新，用户都会得到一个新的浏览器，新的浏览器对HTML5的支持会更完善，并且随着手机硬件性能的提升，其运行Web应用的性能也会有相应提升
  4. Native App与Web App有相互融合的趋势，诸如PhoneGap之类的框架，己经使Web App能方便地调用手机的各种硬件功能，也有越来越多的本地应用通过内嵌一个Web浏览器组件，使用 Web App来完成部分功能。
  5. 不管怎么说，Web App总是有发展前景的，因此，掌握 Web App开发技术，也成为移动互联时代程序员必须关注的问题。

2 响应式移动Web设计原则

响应式Web设计（RWD，Responsive web design）是由Ethan Marcotte提出的一种移动Web开发模式，其目的是设计出这样的网页：用户不需要进行手势缩放、拖动就可以很方便地阅读网页内容和在网页间跳转，而且这种网页应该具有“自适应特性”，能在所有的移动设备上，不管其屏幕大小、硬件配置差异，都能得到相近的使用体验。


响应式Web设计是当前移动互联应用主流的开发模式。


当前主要通过以下三种手段实现响应式Web设计：

（1）CSS3 media queries

主要通过给CSS规则添加media属性实现。


比如以下这条规则声明：如果当前页面要打印，那么就不显示nav 元素。


@media print {
nav {
display:none;
}

}


再看一条规则：


@media screen and (max-width:568px) {
.column {float:none; width:96%; margin:0 auto;}

}


这条规则说明，如果页面是通过屏幕显示，而且该屏幕宽度不超过568 像素，那么CSS 就会取消带.column 类的元素的浮动，让布局区块上下堆叠，且让该元素宽度为屏幕的96%，同时在屏幕上居中。


上述指定了设备屏幕大小的CSS规则，被称为“断点（breakpoint）”，同一个CSS文件中，可以包容多个断点，从而为不同的移动设备选择合适的CSS样式规则，获得满意的显示效果。


如果要通过媒体查询应用的CSS 规则非常多，那么就可以考虑使用<link>标签的media 属性设定条件，有选择地加载独立的样式表。

<link type="text/css" media="print" href="css/print_styles.css" />
<link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />

CSS3的媒体查询功能，可以适用于以下的“媒体类型（Media types）”：

  • all：匹配所有设备；
  • handled：匹配手持设备（小屏幕、单色、带宽有限）；
  • print：匹配分页媒体或打印预览模式下的屏幕；
  • screen：匹配彩色计算机屏幕；
其他媒体类型还有braille（盲文点字触觉反馈设备）、embossed（盲文分页打印机）、projection（投影仪）、speech（语音合成器）、tty（电话机屏幕等固定宽度字符栅格设备）和tv（电视机），目前基本用不上。

CSS3的媒体查询功能，能检测出移动设备的以下特性：

  • min-device-width 和max-device-width：匹配设备屏幕的尺寸；
  • min-width 和max-width：匹配视口的宽度，例如浏览器窗口宽度；
  • orientation（值为portrait 和landscape）：匹配设备是横屏还是竖屏。

可以看到，CSS 媒体查询的关键在于依据移动设备的特点选择合适的CSS规则，以达到理想的显示效果。


（2）流式网格布局（Fluid-grid layouts）


当前PC都拥有大屏幕，因此针对PC浏览器设计的网页通常都使用多栏布局，但在手机这种小屏设备时，网页布局必须进行调整，通常采用单栏的设计方案，这可以通过前面介绍的媒体查询功能实现，但同时必须在CSS规则中使用em 或百分比等相对单位设定页面元素宽度，以让其能够随屏幕大小而缩放，这就是流式网格布局的含义。


我们可使用HTML 的<meta>标签通知手机浏览器不要缩放网页：


<meta name="viewport" content="width=device-width, initial-scale=1" />


这样浏览器将按照移动设备屏幕宽度来显示网页，不需要用户使用手势来缩放查看网页了。当然前提是必须使用CSS媒体查询功能针对移动设备屏幕大小返回合适的网页。


Viewport被译为“视口”，你会在很多移动Web页面中看到它的身影。


（3）弹性图片与多媒体（Fluid images and media）

移动Web页面必须保证<image>与<video>元素呈现的内容再大也不会超过其容器的大小，从而让用户无需缩放也能看到完整的内容。这往往是通过提供不同分辨率的媒体素材实现的，比如给手机提供小图片，而给屏幕较大的平板电脑提供大像素图片。


（4） 用户设备嗅探（User-agent sniff）

手机浏览器在浏览移动Web网页时，会向Web服务器发出HTTP请求，其中包容一个名为“User-Agent”的HTTP Header，我们可以编写服务端程序解析它，从而知道用户所使用的移动设备的许多信息，从而能有针对性地返回适合于他的移动Web网页，这个技术称为“User-agent sniff”。


使用任何一种Web服务端技术，比如PHP，ASP.NET，JSP等都可以完成这一工作，事实上己经可以在网上找到现成的代码，比如访问http://detectmobilebrowsers.com/就可以找到这样的代码（图5）。



图 5

3 渐进增强与优雅降级

开发移动Web页面，主要有两种开发模式：


第一种称为“渐进增强（Progressive Enhancement）”，即先针对小屏手机开始设计，再针对平板，最后针对桌面版浏览器进行设计。


另一种称为“优雅降级（Graceful Degradation）”，即先针对功能最强的桌面版浏览器设计，然后再通过编写JavaScript检测代码，使用CSS3媒体查询等手段让手机也能正常访问。


当前主流的观点是应该“移动先行”，优先采用“渐进增强”方式。

四 小结

我在这篇文章给大家绘制了CSS这一技术领域的导航图，可以看到，在移动互联时代，掌握CSS的己经成为对开发者普遍的要求，希望我这张导航图能帮助大家更好地掌握CSS技术，有关移动Web开发，是一个很大的领域，以后有机会时，再给大家绘制一张新的技术导航图。


下一篇文章，将介绍Web客户端编程语言事实上的统治者——JavaScript。
分享到：
| 程序员技术练级攻略
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics