CSS培训实录

这篇文章是2007年在公司培训新人时用的，首发在cnblog因为关闭cnblog就转移过来存档。

今日的主题是关于关于Web页面布局的理念、原理和技能。技能的主题则是Web开发中至关重要的CSS。

相对定位和绝对定位

团队成员在之前的探究学习中，自行演练了很多关于布局的方案。有的是采用了表格布局的方式，有的是使用VS提供的绝对定位方式（因为绝对定位可以自由拖动控件和元素到页面任何位置，初学时可能觉得那样比较容易）。在团队感受到布局不容易的时候，会激发探究布局方法的欲望。网页中经常听到的两个词语：相对定位和绝对定位。从这两个词语入手，来讲解关于布局的基本原理。简而言之，绝对定位就是在纵向进行重叠，其位置是直接和原点相对应的，所以使用绝对定位的时候会出现元素之间重叠的关系。而相对定位就是在同一平面的不同元素依次排列，占据平面的一部分。而在Web页面定位中元素之间是会互相嵌套的，所以相对和绝对是交替使用，并不会只是使用某一种方式。

布局的要求

1、合理、美观、结构合理

就是让页面各个元素能够结构化的布局在一起，达到美观合理的层度。并且不断追求不同的艺术效果

2、方便用户使用

Web2.0时代提倡用户体验，其本质就是提升交互性能，所以是否符合用户习惯，方便用户使用是非常重要的。

3、兼容性

由于各种浏览器之间的竞争导致了Web开发时必须考虑到Web站点和应用程序在各种浏览器和平台的表现。逐渐成为Web开发的信条的Web标准是一个比较好解决方案。按照Web标准使用XHTML+CSS进行标准的布局就是当下最流行的解决方案。只要符合标准，就可以让开发的Web应用程序能够在不同的浏览器甚至不同的平台(包含移动平台)有一致的表现。这似乎是当下最应该追求的目标。

css是什么的缩写？

Web页面布局中最重要的技术之一就是CSS。在简单进行引导后，提出了一个“出乎预料”的问题，那就是CSS是哪几个词的缩写。接下来得到了团队成员的几种答案。

1. c-common,s-style,s-sheet。看起来有根据单词猜测的意思，尤其是第一个词。但是还好，后两个词都是对的。
2. c-code,s-source,s-style。这一种答案就是像玩拼字游戏了。
3. 否认第一个c不是common,但是由于真正答案中的第一个相对比较复杂，所以记不住。该成员是比较有主动性的，所以应该看到过全称，所以提出质疑。

经过讨论并带领大家通过google得到并见识了正确答案——Cascading Style Sheets。接下来来解释一下，其实这几个词语翻译过来就是“层叠样式表单”的意思，这里的“Cascading”其实使用的非常生动，这个词在很多软件中都出现过，比如Dreamweaver，就是表示将几个窗口进行排列的功能菜单就是用的“Cascading”。所以Cascading有将杂乱的元素进行有序排列的意思。

对CSS的认识

在正式讲解之前，了解大家对学习之前对CSS的认识，包括两个方面：css的作用和css的好处。通过了解的，得到团队成员的结果有如下几种。

1. 不了解。这种认识很有可能，因为该团队的基础并不好。
2. CSS是具有模版性质的技术，可以大批量格式化。比如试用<font color="red">文字</font>毕竟只能单个的使用，如果用CSS的一个样式可以应用很多类似元素上。这种认识初步认识到了CSS的功能，但是只是停留在了解的层次。
3. 使用CSS更方便维护。可能就是认为正因为具备模版性质，所以维护自然方便，这种认识也是正确的。
4. 用来控制控件的样式，控件（元素）的控制。这里的控件应该是指元素，就是构成页面布局的各种元素。

对比中了解使用CSS的好处

要知道使用CSS的好处？首先要找个现有的方式来进行比较。总结现有的格式化元素的方式。

a、HTML直接格式化。比如格式化颜色：<font color="red">红色</font> <table bgcolor="blue">...</table>.缺点是每个元素都是单独设置样式，对于类似元素也需要重复设定，设置繁琐，修改不便。而且会增加HTML文档的代码数量，不利于用户访问。

b、图片+HTML的方式进行排版。将大量样式效果直接使用图片，在配合HTML进行格式化。缺点是图片太多，不够灵活，排版难度大，下载速度慢。

c、javascript+HTML，javascript同样可以操作样式和外观。比如操作某元素的宽度。document.getElementById("someElement").style.width=200px;此方法作为格式化辅助还行，如果全部使用此种方法布局不太适合。

认识CSS的作用

上面列举的几种方式都是不使用CSS的方法，有很多缺点。是不是使用了CSS后就可以避免这些缺点了呢？CSS的作用就是为HTML的元素提供用来格式化的样式清单。所以用概括CSS的作用就是：格式化HTML元素。

HTML能用哪些格式？

接下来就引导和带领大家一起解决，究竟在Web页面设计中，哪些格式会被用于元素。根据元素样式本身的分类，从文字、段落、边框、区块、定位、背景、布局等方面进行列举。

• 文字的主要格式：颜色、字体、大小、下划线、删除线、上划线、加粗、斜体
• 段落：行距、缩进、对齐、字间距、排列方式
• 边框：宽度、样式、颜色、内外边距
• 背景：背景图片、背景色、背景图片位置、背景图片模式
• 定位：宽度、高度、位置模式、横坐标、纵坐标、纵向索引（层的上下关系）

CSS就是讲以上布局和格式化的样式以清单的形式组织以来，以CSS的语法和规则提供给需要格式化的HTML元素。至于这个语法和规则就需要了解CSS的使用法方法。

CSS样式的使用方法

CSS的使用方法主要有如下三种。

1. 内联方式,inline。例如<p style="text-indent:24px">,只能用在当前标签。
2. 内嵌方式在网页中，把样式表写在style></style>中，只能用在当前页。
3. 链接方式，独立的样式表页面，<link>，可以让多个页面使用。

了解CSS样式的语法

1. 直接为标签定义样式。好处同一标签的样式可以很方便的统一在一起，坏处，不灵活，例外情况不好处理。
2. 定义样式类。
3. 编号方式进行样式设定。

任务

1. 根据以上样式的分类的原理，探究每一种格式对应的CSS写法，并试用效果。

2. 回答使用CSS的究竟有哪些好处?