--专题: Web设计

金牌译作 CSS教程(一)简介

579个读者 翻译: yuvia  07/17/2008 原文 引用 双语对照及眉批

简介

这是一个CSS教程的简介部分。我计划翻译完这个教程,同时也完成我的CSS学习过程。虽然大部分CSS都懂,不过还是纯粹的新手,请大家帮助我完善译文吧!:)

CSS前,你得先会的东西

开始CSS学习,请先对下面的知识有初步了解:

  • HTML / XHTML

想先学HTML / XHTML,请走这边。


CSS是个啥?

  • CSSCascading Style Sheets (层叠样式表)的缩写
  • 样式决定HTML元素的展示形式
  • 样式保存在样式表
  • 样式最先被引入到HTML 4.0是为了解决某问题
  • 外部样式表能帮你省不少事
  • 外部样式表保存为CSS类型文件
  • 多个样式定义均层叠为一个文件

 


CSS Demo

一个HTML可以因为不同样式表变得不同哦:

看看范例


样式表解决一个常见问题

HTML标签最初是为了定义文件内容制定的,例如<h1>,<p>,<table>它们表达不同的意义:“这是一个标头”,“这是一个段落”,“这是一个表格”,等等等等。如果没有格式标签,文件的页面布局由浏览器决定。

Netscape和IE作为两大主要浏览器,不断收录新的HTML标签(像<font>标签、颜色属性等)。这使得编写一个表达布局脱离HTML语言控制的网页越来越不可能了。

为了解决这个问题,负责制定HTML标准的非盈利组织W3C(万维网联盟)制定了样式这一概念。

所有主流浏览器均支持阅读层叠样式表


样式表省时省力

样式决定HTML元素的展示放肆,就像HTML 3.2时的字体标签和颜色属性一样,CSS一般存为外部.css格式的文件。外部样式表使你能够仅仅修改CSS文件,就轻易改变网页的外观和布局。

CSS使网页开发者能够一次性控制多个网页的样式和布局,是网页设计的一项重大突破。你可以为每项HTML元素编写一个样式,然后在多个网页中应用。小小改变一个样式,就能带动全局改变,所有的网页元素够跟着自动更新。


多个样式合为一体

样式表允许以各种方式指示信息。样式表可以嵌入单个HTML元素、可以在HTML<head>中说明,也可以作为外部样式表形式存在。多个外部样式也可以定义同一个HTML文件。

层叠顺序

一个HTML元素中被多个样式定义时,哪个被优先使用呢?

一般来说,所有的样式都被层叠起来,形成一个“虚拟的”新样式表。各项样式按照下列顺序排列,优先级由小到大。

1. 浏览器默认样式
2. 外部样式表
3. 内部样式表(定义在<head>标签部分)
4. 内嵌样式(在HTML元素内部定义)

所以,内嵌样式(在HTML元素内部定义)具有最高优先级,可以覆盖内部样式表、外部样式表和浏览器(默认值)中的样式定义。

继续阅读
  • 三条提高gmail工作效率的可靠忠告

    如果你是个技术专家,email是必不可少的,但要完全控制所有电邮会很困难。如果你使用gmail和firefox,这里有一些技巧可以帮你如意掌控所有电邮。 第一个技巧是补救措施:把所有邮件保存在邮箱之...

  • 25个顶级PHP模板引擎

    为了找到一个好的模板引擎,我在互联网上进行搜索,目前已经整理出了以下名单: Smarty Smarty的特点是将模板编译成PHP脚本,然后执行这些脚本。很快,非常灵活。 Heyes Template...

  • 优化PHP代码的40条建议

    英文版权归Reinhold Weber所有,中译文作者yangyang(aka davidkoree)。双语版可用于非商业传播,但须注明英文版作者、版权信息,以及中译文作者。翻译水平有限,请广大PHP...

  • 所有PHP程序员都应该知道的五个工具

    在参与了几个大型PHP项目,写了很多PHP代码以后,我发现很多工具可以提高代码质量,简化发布,使得做为PHP开发人员的生涯变得轻松许多。许多这样的工具可能已经为大家所用。但是,由于一些人甚至没有注意到...

  • 加速PHP应用 - 用Xdebug分析你的代码

    面向对象编程越来越流行了,在PHP领域也不例外。所以你选择了合适的设计模式,在最新的framework上开发你的网站,抽象你的数据库访问以至于你都忘了SQL这种东西了。 接下来是什么呢? 当你开始转...

  • 高效使用Linux的七个习惯

    越来越多的人愿意尝试linux系统,这些习惯也许会令你事半功倍,找到其中的乐趣....

  • 技术博客 100 强

    对techmeme上的leaderboard上出现的头条相关数据进行分析,列出了科技博客前 100 名。

  • CakePHP 简明指南

    Cakephp 简明指南

相关小组

标签:

内容有问题?请与我们联络。

译作评分

  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5
 5.0  |  1 个评分

4条评论    2眉批

添加评论

欢迎访问译言网。在这里,您可以。。。

阅读
发现
翻译