15课:索引层(z-index)的层

CSS创造三维空间,即高度,宽度和深度。我们在前面几课已看到了两维空间。这一课将学习怎样让不同元素变成层。换句话说,就是让元素相互层叠。

为了做到这一点,可以给每个元素分配一个数字(z-index)。该系统是数字高的元素层叠在数字低的元素之上。让我们以扑克牌的同花顺为例,每张牌都有一个z-index ……

第十四课:元素的位置

用CSS定位,可以将元素精确的放置在网页任何地方。与floats结合应用,positioning能给予你创建高级和精确样式的更多可能性。下面是本课将讨论的课题:

CSS的positioning概念
绝对positioning
相对positioning

CSS定位的原理

把浏览器窗口想象成一个坐标系统 ……

第十三课:浮动元素(floats)

元素可以通过使用特性float浮动到右侧或左侧。这意味着文件中的box与其内容浮动到右边或左侧。下面举例说明:
floats图片1

下面用文字围绕图片的另一个例子进一步说明 ……

第十二课:高度与宽度

到目前为止,我们还没有涉及元素的尺寸。这一课将学习定义元素高度和宽度的方法。

width
height

设定宽度[width]

用特性width能给一个元素定义特定宽度。下面这个例子提供一个能打字的箱体 ……

第十一课:包边(Borders)

Borders的用途很广泛,如装饰元素或强调两样东西的间隔等。CSS给你在网页中使用Borders提供了无限选择。

border-width
border-color
border-style
border

包边宽度[border-width]

包边的宽度是用特性border-width定义的,可以获得薄,中和厚,或用pixels标示的数字值。下面是关于这一系统的实例 ……

第十课:Margin与padding

前一课介绍了box模式。本课将教给你怎样通过设置margin和padding改变元素输出结果。

设定元素的margin

元素有四个边,即右,左,上和下。边缘(margin)是指每一侧与邻近元素之间的距离。可以查看第九课的图例。在第一个例子中,我们将学习怎样为元素自身的文件定义边缘 ……

第九课:box模式

CSS的box模式专门描述曾经用HTML元素创建的箱型。box模式还包括与边缘(margin),边界(border),内衬(padding)和每个元素内容有关的详细选择。下面图解展示了box模式的构成情况 ……

第八课:元素组(span和div)

元素<span>和<div>用于文件中的组和结构,并经常与class和id一起使用。本课将进一步探讨
<span>与<div>的用法,因为这两个HTML元素实际上也是CSS的重要部分。

  • <span>的组
  • <div>的组

带<span>的组

<span>元素被称为中性组,它本身不给文件添加任何东西。但在CSS中,可以给文件的文字特殊部分添加视觉特性。这里以富兰克林的名言作为实例 ……

第七课:元素组的识别与分组(class和id)

有时候,你想给特定元素或一组元素施用特定风格。本课将进一步探讨怎样用class和id给选定的元素定义特性。

怎样让网站上的一个特殊标题不同于其它标题?怎样把链接组分成不同类别,并给每个类别一个特殊风格?下面是一些答案实例

用class分组元素

假设我们有两列不同葡萄(用于生产白和红葡萄酒)的链接,HTML代码如下 ……

第六课:链接

我们可以把前面所学知识用于链接,即改变颜色,字体和下划线等参数。CSS能让你根据链接被访问过,未访问,激活或鼠标是否放在鼠标上等状态定义不同特性。这能给你的网站增加有趣和实用效果。控制这些效果使用的是CSS代码“pseudo-classes”。

什么是pseudo-classes?

pseudo-classes能让你在定义HTML标签的特性时考虑不同条件或事件。查看下面这个实例。我们都知道,HTML是用<a>定义链接的,因此我们可以使用CSS的选择器 ……