级联款式表十分简略,也便是 (X)HTML 网页之上的分层规划。使款式表 “级联”,这样您就能够跨站点运用它 — 也便是说,将款式运用到网站,它就会自行运用到每个网页的每个元素。

常用缩略语

  • API:运用程序接口
  • CSS:层叠款式表
  • HTML:超文本符号言语
  • XHTML:可扩展 HTML

关于网站,将数据与规划别离是一个重要的概念:数据运用 (X)HTML 发送到阅读器,而规划运用 CSS 运用到该数据。这种别离使人们在具有特别可拜访性需求时无需您的规划即可烘托网页,还使机器(比方查找引擎)能够树立网站索引而不会遭到规划的阻止。

本文详细介绍各种现已存在和现代的 CSS 技能,以增强网站观理性。本文需求必定的 (X)HTML 常识,它应被视为开发的一个参考点,充任规划网站的初始渠道。

CSS 的格局

CSS 款式元素的结构很简略:

html-tag-name {
	css-property-key-1: css-value-1;
	css-property-key-2: css-value-2;
}

其间 html-tag-name 可所以您能在 HTML 中找到的任何符号(比方 <a><div><li><label>)。除了 HTML 符号,在 CSS 中它也可所以前面带有井号(#)的 ID 引证,如下所示:

#id-of-html-tag {
	…
}

或许在 CSS 中这个符号可所以一个前面带有点/句点(.)的类引证:

.class-of-html-tag {
	…
}

CSS 的这些部分(html-tag-nameid-of-html-tagclass-of-html-tag)称为简略挑选器,可嵌套(运用空格分隔)运用以在 HTML 中完结更高的粒度,如下所示:

outer-html-tag-name inner-html-tag-name { … }

或许作为一个列表来将一种规划元素运用到多个挑选器:

1st-html-tag-name, 2nd-html-tag-name { … }

固然,上述关于了解 CSS 方法化语法而言比较笼统。因而,本章其余部分将侧重介绍更详细、更有协助的示例,凸显 CSS 的简略性、潜能和灵敏性。


根底款式

在进行网站规划时,要做的榜首件事是树立根底款式。为此,能够设置 <body> 符号的款式,如清单 1 所示。


清单 1. body 符号的 CSS 根底款式
				
body{
background-color: #EEEEEE;
color: #000000;
margin: 0;
padding: 0;
text-align: left;
font-size: 100%;
font-family: sans-serif;
}

此符号将布景色彩设置为白色 (background-color),以保证字体色彩是黑色的 (color)。它还可保证一切内容边际都与阅读器窗口边框相匹配(marginpadding),并且符号将文本内容向左水平对齐 (text-align)。最终,该款式将字号设置为阅读器默许字号 (font-size) 并运用一个 sans-serif(也便是一种边际四周没有纤细装修的字体)字体集 (font-family)。

当然,这是一些简略设置。一般来说,可运用以下辅导准则:

在确认网站的规划时,一个最重要的决议计划是运用流式(fluid)布局仍是固定布局。在固定布局 中,能够指定元素的高度和宽度,不管您运用何种操作体系或阅读器检查网站,这些值都是相同的。首要运用像素指定这些元素。在流式布局 中,元素的高度和宽度是灵敏的,可根据阅读器窗口、操作体系或用户偏好而扩展或缩小。首要运用百分比和 em 指定这些元素。流式布局和固定布局各有其优缺点,挑选哪种布局取决于内容类型、内容量和网站的拜访集体。


将 CSS 运用到 (X)HTML

要开端运用您的 CSS,您需求告知阅读器在哪里找到它。这应该是真实专一 (X)HTML 引证 CSS 的当地。能够经过两种办法进行引证:“quick and dirty” <style> 符号或不显眼的 “quick and clean” <link> 符号。

quick and dirty:设置符号款式

此办法或许是检查运用到一个网页的款式的最快办法,它会运用非 HTML “弄脏” 网页。可是它仅仅您运用款式的一个网页(当然,除非运用服务器端言语来包含一个头部),假如将此款式仿制并粘贴到另一个网页,会增加网页巨细(这儿指的是 KB 而不是宽度和高度)。因而,会增加每个网页的加载时刻,让用户等候更长时刻。时刻关于用户而言比人们幻想的愈加重要,纵然您生活在超高速互联网年代。

那么它是怎么完结的?十分简略,将以下符号增加到您的 HTML <head> 符号中:

<style>
	/** Your CSS goes here **/
</style>

quick and clean:悄然链接到 CSS

此办法或许是运用款式的比较整齐的办法。假如 CSS 坐落外部文件中,能够从其他网页链接到它,从而保证您具有整齐的 HTML 和较小的页面(再次阐明,这儿指的是 KB 而不是宽度和高度)。运用此办法愈加简略:将以下增加到您的 HTML <head> 符号部分:

<link href="http://www.example.com/styles/style.css" media="screen" 
        rel="stylesheet" type="text/css" />

其间 style.css 是一个纯文本文件,其间包含您的 CSS 。作为一种不错的做法,我为我网站的公共 html 文件夹运用以下根底结构:

此结构答应一切内容都整齐地包装 —— 一起坚持别离并答应引证。


款式设置攻略

本节详细介绍在阅读器不支撑 CSS 版别 3 (CSS3) 时运用该版别会发作什么 —— 阅读器将疏忽它并退回到默许设置。 本节还将介绍 CSS3 款式(以 -moz、-webkit 等最初的款式)的特定于阅读器的完结。

简略的 <div> 符号

(X)HTML 具有十分简略的符号 <div>,能够运用它将网页划分为有用的区域。从规划视点讲,这是一个不错的主意,由于它在本质上便是一个包含内容的方框。

CSS 2.1 的规范 <div> 作用

CSS 一直支撑设置 <div> 的款式。其间一些元素包含边框调整,比方:

border: size type color

其间:

举例而言,您能够运用 border: 1px solid #000000; 标明 1 像素宽的黑色实线。

相似于 body,也能够更改规范布景色彩以及文本的字体和色彩。能够像其他根底款式相同进行这些更改。

CSS3 增强的 <div> 作用

一种呼声最高的规划元素(在 CSS2.1 中未找到)是边框的圆角边际。这意味着曩昔的许多规划人员有必要构建根据图画的边框或运用某种组合了 CSS 和 JavaScript 的 dirty 技能。走运的是,在 CSS3 中不再存在此状况,它引进了 border-radius 特点(例如 border-radius: 10px;)。

要将此特点运用到一些阅读器中,有必要包含相似以下方法的符号:

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

此示例仅仅为了让该符号适用于根据 Mozilla(比方 Mozilla Firefox)和根据 Webkit(比方 Apple Safari)的旧阅读器。假如您乐意,能够将上述 3 个特点设置为不同值并让款式在 Firefox 和 Google Chrome 中显现不同的作用。

也能够在 <div> 上生成一个暗影。为此,能够运用以下 3 个特点(再次阐明,必定要处理各种阅读器):

-webkit-box-shadow: 8px 8px 6px #AAAAAA;
-moz-box-shadow: 8px 8px 6px #AAAAAA;
box-shadow: 8px 8px 6px #AAAAAA;

在这种状况下,榜首个特点是水平暗影,第二个是笔直暗影,第三个是含糊量,第四个是暗影的色彩。能够在含糊量和暗影之间放置另一个特点(另一个与暗影的掩盖规模相关的巨细值),可是此特点好像没有广泛运用。

列表

(X)HTML 中另一个常见的元素是列表。列表具有两种方法:无序列表 (<ul>) 和有序列表 (<ol>)。它们关于为网页供给数字列表(比方过程列表)和非数字列表(比方处方成分)很有用。在网站布局方面,列表常常关于网站导航结构的开发至关重要,因而关于款式特别有用。

(X)HTML 列表(不管是有序仍是无序的)默许将具有所谓的列表符号。在非正式的英语中,咱们或许将它们称为 “bullet points(项目符号)”。CSS2.1 具有少数的列表符号,能够运用 list-style-type 特点设置它们。无序列表符号的常见值包含 nonedisccirclesquare

有序列表符号的值是根据数字的标明办法。最常用的选项包含 decimallower-romanlower-greek

在编撰本文时,现代 Web 阅读器支撑的根据列表的新 CSS3 特点和特性不是太多。不然本文将会介绍(举例而言)全新的 list-style-type 特性。咱们介绍了另一个得到更广泛支撑的 CSS3 特点,称为 text-shadow

相似于前面界说的 box-shadowtext-shadow 特点供给了一个暗影。可是,与 box-shadow 不同,text-shadow 实际上会为每个字母增加暗影。所以,当将它运用到列表项时,能够运用以下符号:

li {
  text-shadow: 2px 2px 2px #AA00FF;
}

举例而言,假如具有一个无序列表,它的 (X)HTML ID 为 nav,显现为一个导航栏,那么能够构建相似以下方法的内容:

ul#nav li:hover {
  text-shadow: 2px 2px 2px #AA00FF;
}

这将仅在将鼠标悬停在 #nav 无序列表中的一个列表元素上时供给 text-shadow

链接

在曩昔,CSS3 规范的开发人员以为将未单击的链接、已拜访的链接、有用链接和鼠标地点的链接区分隔是明智之举。在 (X)HTML 中,它们悉数具有相同的符号(也便是 <a> 符号),但具有不同的阅读器状况。走运的是,许多规划人员疏忽了这些差异,他们常常向一般链接或鼠标地点的链接供给款式。

一项简直必要的使命是向一般链接运用一种特定的款式(从而设置它,不管它是未被单击的、被拜访的、有用的仍是其他类型的链接)。清单 2 供给了这样一个运用程序的一个示例。


清单 2. 链接润饰的 CSS 示例
				
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
a:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}

此符号设置一个一般链接,将字体色彩设置为黑色,撤销默许的下划线,将字体加粗,以及还将布景色彩设置为白色。在悬停状况下,它从头运用下划线并创立一种黄色的新布景色彩来杰出显现。当在阅读器中测验此符号时,您将会注意到在鼠标悬停自链接上时,布景从浅灰色更改为黄色,当鼠标移开时,从黄色变回浅灰色。前面现已看到,还能够向 a:hover 运用文本暗影。

当开发人员树立 CSS3 的概念时,他们撇开了任何与 <a> 符号相关的特定款式,将更多精力放在泛型上。因而,本文不会介绍所谓的 transform:rotate,举例而言可将它用于导航中的 <li> 符号。相反,结合本文现已介绍的内容,能够得到相似于清单 3 的款式。


清单 3. 运用一些 CSS3 特点增强的 CSS 导航示例
				
a, a:link, a:active, a:visited {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  background-color: #EEEEEE;
}
li {
  text-align: center;
  list-style-type: none;
  width: 50px;
  padding: 10px;
  margin: 10px;
  background-color:#EEEEEE;
  border: 1px solid #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -moz-transform:rotate(-20deg);
  -webkit-transform:rotate(-20deg);
  transform:rotate(-20deg);
}
li:hover {
  text-decoration: underline;
  background-color: #FFFFAA;
}


创立没有表格的列

一般来说,表格存在着与布局技能相同的缺点,由于当您布局包含表格的网页时,您会搞乱数据的逻辑流程。记住在本文最初咱们说过,CSS 是 (X)HTML 之上的一层,而 (X)HTML 实际上是经过一种紧凑办法呈现的数据。不错,最佳的规划办法是以 (X)HTML 方法供给数据,没有任何规划或款式:假如它看起来是紧凑的,那么您能够运用一个 CSS 款式表。假如的确需求修改 (X)HTML 来运用某种规划,请保证您禁用了 CSS,以检查它是否仍然是紧凑的。

出于两种原因,这样做十分重要。榜首个原因是让它可供具有特别的视觉需求的人拜访(由于他们将常常具有自己的默许款式表设置或软件)。第二个原因是机器需求能够读取您的网站。查找引擎和其他软件需求能够读取并盯梢您网站的,来为它树立索引。

那么,问题是怎么创立没有表格的列?很简略,运用两个 <div> 框,如清单 4 所示。


清单 4. 列 div 的 (X)HTML 示例
				
<div id="left" class="equal-column">
</div>
<div id="right" class="equal-column">
</div>
<div class="something-below">
</div>

然后能够在 CSS 内设置各种规划特点。清单 5 供给了一个示例。


清单 5. 创立 div 列的 CSS 款式
				
div.equal-column {
  width: 45%;
  height:100%:
}
div#left {
 float: left;
}
div#right {
 float: right;
}
div.something-below {
 width: 100%;
 clear: both;
}

此符号将两列都设置为宽 45%,然后将左边的列固定到左边,将右侧的列固定到右侧。最终,运用另一个带有类 something-below<div>,咱们期望它占有两列下的整个屏幕。这是一种有用的技能,可用于快速、轻松地在屏幕上取得两列。

在 CSS3 中,还有另一个奇妙的概念,那便是文本列。换句话说,假如 column-count 特点设置为一个数字,一个段略会主动拆分为两段:

div#textual-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

此符号设置一个 ID 为 textual-columns<div> 来得到两个文本列。可是,您或许已注意到,它让每列的高度持平,与您能够在报纸或杂志上看到列比较,这或许有点出人意料。


字体版式

CSS2.1 界说了 3 种一般的字体集:serif、sans-serif 和 monospace。这些字体将一直适用于每个体系,它们不必定看起来彻底相同,可是一般来说,假如首要字体呈现毛病,它们至少能够作为备用字体。所以,举例而言,在您的 body CSS 声明中,能够运用相似以下方法的内容:

body {
  font-family: Univers, sans-serif;
}

其间以挑选了 Univers 字体,假如 Univers 在用户核算机上不可用,默许将运用 sans-serif。

CSS3 经过引进 @font-face 元素略微改进了此功用,这是一个比较复杂的机制,用于跨 web(特别是关于您的网站)传输一个字体。假如期望运用美丽的字体,它或许十分有用,这是一个合适排版专家的高档主题。可是,此类字形开发作业已由第三方供给商大大简化,比方字体下载 表中的 Google Font API 和 Typekit。

字体下载

Google Font API 和 Typekit 供给了它们自己的体系来跨体系下载美丽的字体。它的作业原理相似于 (X)HTML、JavaScript 和 CSS3 的结合,所以或许仅适用于比较现代的阅读器。

至于现在,咱们首要重视 Google Font API,它能够免费、轻松地运用。要运用此功用,首先在 (X)HTML 头部增加一行标明您期望运用 Google Font Directory 中的 Architects Daughter 字体:

<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' 
        rel='stylesheet' type='text/css'>

然后,运用 CSS 运用款式:

body {
  font-family: 'Architects Daughter', serif;
}

您的网站现在运用了 Architects Daughter Google 字体。可是,我的主张是不要为整个网站运用 “过分美丽的” 字体。请保证您的网站持续坚持洁净、紧凑和新鲜。


结束语

CSS2.1 和 CSS3 都是内在丰厚的主题,值得用一本书来讨论。本文仅大约介绍了怎么编写高质量的款式表,您能够运用这儿的常识在万维网上的其他当地查找 CSS 参考资料。

经过不有目共睹的、互相独立的办法运用 (X)HTML 和 CSS,您能够最大程度地完结规范兼容性、可拜访性和查找引擎优化。CSS 是一种优异的技能,XHTML 和 HTML 也是,可是它有必要以一种规范化的办法运用。这些规范或许是 Web 规划的根本资源,但它们不是规划自身,优异的规划有必要经过实践和不断完善来取得。


参考资料

学习

取得产品和技能