CSS 入门（相关css教程）

摘要：了解标准化的 CSS 样式技术，包括 CSS 2.1 和跨浏览器 CSS3。具体来讲，学习如何使用常用的技术增强搜索引擎的优化，为打印、移动和 Web 视图提供不同的 CSS 样式，以及有助于增强可访问性的技巧提示。
　　级联样式表非常简单，也就是 (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-name、id-of-html-tag 或 class-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)。它还可确保所有内容边缘都与浏览器窗口边框相匹配（margin 和 padding），而且标记将文本内容向左水平对齐 (text-align)。最后，该样式将字号设置为浏览器默认字号 (font-size) 并使用一个 sans-serif（也就是一种边缘四周没有细微装饰的字体）字体集 (font-family)。
　　当然，这是一些简单设置。一般而言，可应用以下指导原则：
· 在指定颜色时，使用 Red-Green-Blue (RGB) 十六进制亮度值。
· 在指定字号时，使用像素（有数字后的 px 表示）、em（由数字后的 em 表示）— 也就是说，字号乘以指定的数字 — 或百分比（由数字后的 % 表示）。
· 文本可以左对齐、右对齐或居中。浮动属性也可左对齐或右对齐。垂直对齐必须是顶端、居中或底端对齐。
· 字体可以是任何特定字体、字体集（serif、sans-serif 或 monospace）或任何一种可下载的字体。
　　在确定网站的设计时，一个最重要的决策是使用流式（fluid）布局还是固定布局。在固定布局 中，可以指定元素的高度和宽度，无论您使用何种操作系统或浏览器查看网站，这些值都是相同的。主要使用像素指定这些元素。在流式布局 中，元素的高度和宽度是灵活的，可基于浏览器窗口、操作系统或用户偏好而扩展或缩小。主要使用百分比和 em 指定这些元素。流式布局和固定布局各有其优缺点，选择哪种布局取决于内容类型、内容量和网站的访问群体。

栏目列表

首页 > 网站开发 > HTML >

css教程之CSS 入门

CSS 入门（相关css教程）