首页

css教程

css教程

css教程第 1课：CSS是什么？也许你曾听说过 CSS，但并不真正清楚 CSS 到底是什么。在这一课，你将学到更多 CSS 的知识，并了解 CSS 可以做些什么。 CSS 是Cascading Style Sheets（级联样式表）的缩写。可以用CSS做什么？ CSS 是一种样式表语言，用于为 HTML 文档定义布局。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。拭目以待吧！ HTML 可以用于为网站添加布局效果，但有可能被误用。而 CSS 则提供了更多选择，而且更为精确、完善...

第 1课：CSS是什么？也许你曾听说过 CSS，但并不真正清楚 CSS 到底是什么。在这一课，你将学到更多 CSS 的知识，并了解 CSS 可以做些什么。 CSS 是Cascading Style Sheets（级联样式表）的缩写。可以用CSS做什么？ CSS 是一种样式表语言，用于为 HTML 文档定义布局。例如，CSS 涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。拭目以待吧！ HTML 可以用于为网站添加布局效果，但有可能被误用。而 CSS 则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持 CSS。经过下面若干课的学习之后，你将能够制作自己的 CSS 样式表，为自己的网站增添花样了。 CSS跟HTML的区别在哪里？ HTML 用于结构化内容；CSS 用于格式化结构化的内容。嗯，这听上去有点技术性并令人疑惑。不过没关系，我们继续学习。过会儿你就明白了。在 Tim Berners-Lee 发明万维网（World Wide Web）的那个年代，HTML 语言是唯一用于给文本添加结构的语言。作者可以通过声明“这是一个标题”（利用 h1标签）或“这是一个段落”（利用 p标签）的方式来标记文本。随着 Web 逐渐流行起来，网页设计者们开始寻求为网页增添布局的可能性。为此，当时的浏览器厂商们（网景公司和微软公司）发明了一些新的 HTML 标签（比如等），以引入了新的布局——而非新的结构。这也导致了原本用于进行文本的结构化的标签（比如等）越来越多地被误用于进行页面的布局。许多新的布局标签（比如）只有一种浏览器支持。“您需要使用某某浏览器来浏览本页面”成为当时常见于许多网站的声明。 CSS 的发明正是为了改善这一状况，它为 Web 设计师们提供了完善的、所有浏览器都支持的布局能力。而且，文档的表现样式与内容的分离，也令网站维护容易了许多。采用CSS有哪些好处？ CSS 是 Web 设计界的一次革命。CSS 的具体优点包括： • 通过单个样式表控制多个文档的布局； • 更精确的布局控制； • 为不同的媒体类型（屏幕、打印等）采取不同的布局； • 无数高级、先进的技巧。第 2课：CSS的工作原理在这一课，你将学习如何制作自己的第一个样式表。你将了解基本的 CSS模型，以及在 HTML 文档里使用 CSS 所必需的代码。级联样式表（CSS）里用到的许多 CSS属性都与 HTML属性相似，所以，假如你熟悉采用 HTML 进行布局的话，那么这里的许多代码你都不会感到陌生。我们先来看一个具体的例子。基本的CSS语法比方说，我们要用红色作为网页的背景色：用HTML的话，我们可以这样：用CSS的话，我们可以这样获得同样的效果： body {background-color: #FF0000;} 你会注意到，HTML 和 CSS 的代码颇有几分相似。上例也向你展示了基本的 CSS模型：但是把 CSS 代码放在哪里呢？这正是我们下面要讲的。为一个HTML文档应用CSS 为 HTML 文档应用 CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。方法 1：行内样式表（style属性）为 HTML应用 CSS 的一种方法是使用 HTML属性 style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：例子

这个页面是红色的

方法 2：内部样式表（style元素）为 HTML应用 CSS 的另一种方法是采用 HTML元素 style。比如像这样：例子

这个页面是红色的

方法 3：外部样式表（引用一个样式表文件）我们推荐采用这种引用外部样式表的方法。在本教程之后的例子中，我们将全部采用该方法。外部样式表就是一个扩展名为 css的文本文件。跟其他文件一样，你可以把样式表文件放在 Web服务器上或者本地硬盘上。例如，比方说你的样式表文件名为 style.css，它通常被存放于名为 style的目录中。就像下面这样：现在的问题是：如何在一个 HTML 文档里引用一个外部样式表文件（style.css）呢？答案是：在 HTML 文档里创建一个指向外部样式表文件的链接（link）即可，就像下面这样：注意要在 href属性里给出样式表文件的地址。这行代码必须被插入 HTML 代码的头部（header），即放在标签和标签之间。就像这样：我的文档 ... 这个链接告诉浏览器：在显示该HTML 文件时，应使用给出的 CSS 文件进行布局。这种方法的优越之处在于：多个 HTML 文档可以同时引用一个样式表。换句话说，可以用一个 CSS 文件来控制多个 HTML 文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有 100 个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这 100 个 HTML 文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。让我们来实践刚刚所学到的知识。自己试试看打开记事本（或其他文本编辑器），创建两个文件——一个 HTML 文件，一个 CSS 文件— —它们的内容如下： default.htm 我的文档

我的第一个样式表

style.css body { background-color: #FF0000; } 然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm” 和“css”）。用浏览器打开 default.htm，你所看到的页面应该具有红色背景。恭喜！你已经完成了自己的第一个样式表！第 3课：颜色与背景本课，你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。本课将对下列 CSS属性进行讲解： • color • background-color • background-image • background-repeat • background-attachment • background-position • background 前景色：‘color’属性 CSS属性 color用于指定元素的前景色。例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是 h1元素，那么可以用下面的代码来实现把 h1元素的前景色设为红色。 h1 { color: #ff0000; } • 显示示例颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或 RGB值（比如 rgb(255,0,0)）表示。 ‘background-color’属性 CSS属性 background-color用于指定元素的背景色。因为 body元素包含了 HTML 文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为 body元素应用 background-color属性就行了。你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为 body和 h1元素分别应用了不同的背景色。 body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; } • 显示示例注意：我们为 h1元素应用了两个 CSS属性，它们之间以分号（“;”）分隔。背景图像[background-image] CSS属性 background-image用于设置背景图像。在下面的示例中，我们使用了一张蝴蝶的图像作为背景。你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。当然，你也可以选用其他你觉得满意的图片。如果要把这个蝴蝶的图片作为网页的背景图像，只要在 body元素上应用 background-image 属性、然后给出蝴蝶图片的存放位置就行了。 body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; } • 显示示例注意我们指定图片存放位置的方式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如 url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如 url("http://www.html.net/butterfly.gif")）。平铺背景图像[background-repeat] 你有没有发现在上例中那个蝴蝶图片在横向和纵向都被平铺了？CSS属性 background- repeat就是用于控制平铺的。下表概括了 background-repeat的四种不同取值。值描述示例 background-repeat:repeat-x 图像横向平铺显示示例 background-repeat:repeat-y 图像纵向平铺显示示例 background-repeat:repeat 图像横向和纵向都平铺显示示例 background-repeat:no-repeat 图像不平铺显示示例例如，为了避免平铺背景图像，代码应该这样： body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; } • 显示示例固定背景图像[background-attachment] CSS属性 background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。下表概括了 background-attachment的两种不同取值。你可以点击示例察看二者的区别。值描述示例 background-attachment:scroll 图像会跟随页面滚动——非固定的显示示例 background-attachment:fixed 图像是固定在屏幕上的显示示例例如，下面的代码将背景图像固定在屏幕上。 body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; } • 显示示例放置背景图像[background-position] 缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过 CSS属性 background- position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。设置 background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边 100 像素、顶部 200 像素处。坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是 “top”、“bottom”、“center”、“left”和“right”这些值。下图对此进行了解释：下表给出了一些例子。值描述示例 background-position:2cm 2cm 图像被放置在页面内距左边 2厘米、顶部 2 厘米的地方显示示例 background-position:50% 25% 图像被放置在页面内水平居中、离顶部四分之一处显示示例 background-position:top right 图像被放置在页面的右上角显示示例在下例中，背景图像被放置在页面的右下角： body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } • 显示示例缩写[background] CSS属性 background是上述所有与背景有关的属性的缩写用法。使用 background属性可以减少属性的数目，因此令样式表更简短易读。比如说下面五行代码： background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; 如果使用 background属性的话，实现同样的效果只需一行代码即可搞定： background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; 各个值应按下列次序来写： [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] 如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉 background- attachment和 background-position的话： background: #FFCC66 url("butterfly.gif") no-repeat; 这两个未指定值的属性将被设置为缺省值：scroll 和 top left。第 4课：字体这一课，你将学习字体以及如何用 CSS 来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的 PC 上安装有该字体时才会被显示”这一难题。本课将对下列 CSS属性进行讲解： • font-family • font-style • font-variant • font-weight • font-size • font 字体族[font-family] CSS属性 font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。字体族名称（family-name）字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。族类（generic family）一个族类是一组具有统一外观的字体族。sans-serif 就是一例，它代表一组没有“脚” 的字体。下面我们通过三个族类的例子来进行解释：你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。下面是一个按优先级排列的字体列表的例子： h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} • 显示示例 h1标题将采用 Arial 字体显示。如果访问者的计算机未安装Arial，那么就使用 Verdana 字体。假如 Verdana 字体也没安装的话，那么将采用一个属于 sans-serif族类的字体来显示这个 h1 标题。注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。字体样式[font-style] CSS属性 font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或 oblique（倾斜）。在下例中，所有 h2标题都将显示为斜体。 h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} • 显示示例字体变化[font-variant] CSS属性 font-variant的值可以是：normal（正常）或 small-caps（小体大写字母）。 small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子：如果 font-variant属性被设置为 small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。 h1 {font-variant: small-caps;} h2 {font-variant: normal;} • 显示示例字体浓淡[font-weight] CSS属性 font-weight指定字体显示的浓淡程度。其值可以是 normal（正常）或 bold （加粗）。有些浏览器甚至支持采用 100 到 900 之间的数字（以百为单位）来衡量字体的浓淡。 p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;} • 显示示例字体大小[font-size] 字体的大小用 CSS属性 font-size来设置。字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如： h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} • 显示示例上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。有些页面浏览者可能是残疾者、年长者、视力不佳者，或者他所使用的电脑显示屏显示质量差。为了令你的网站对所有人都具有良好的可用性（accessibility），你应采用像‘%’或‘em’这种允许用户调节字体显示大小的单位。下面你能看到我们展示如何在 Mozilla Firefox 和 Internet Explorer 里调整字体大小。自己试试看！这个功能很不错吧？缩写[font] CSS属性 font是上述各有关字体的 CSS属性的缩写用法。比如说下面四行应用于 p元素的代码： p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } 如果用 font属性的话，上述四行代码可简化为： p { font: italic bold 30px arial, sans-serif; } font属性的值应按以下次序书写： font-style | font-variant | font-weight | font-size | font-family 第 5课：文本文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍 CSS 在文本布局方面令人激动的特性。本课将对下列 CSS属性进行讲解： • text-indent • text-align • text-decoration • letter-spacing • text-transform 文本缩进[text-indent] CSS属性 text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用 p元素的段落应用了 30像素的首行缩进。 p { text-indent: 30px; } • 显示示例文本对齐[text-align] CSS属性 text-align与 HTML属性 align 的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者 center（居中）。除了上面三种选择以外，你还可以将该属性的值设为 justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td）被设置为居中。正常的文本段落被设置为两端对齐。 th { text-align: right; } td { text-align: center; } p { text-align: justify; } • 显示示例文本装饰[text-decoration] CSS属性 text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为 h1标题增添了下划线，为 h2标题增添了上划线，为 h3标题增添了删除线。 h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; } • 显示示例字符间距[letter-spacing] CSS属性 letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望 p元素里的文本段落的字间距为 3个像素，而 h1标题的字间距为 6个像素，代码可以这样写： h1 { letter-spacing: 6px; } p { letter-spacing: 3px; } • 显示示例文本转换[text-transform] CSS属性 text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。 text-transform属性有四个可选值： capitalize 将每个单词的首字母转换为大写。例如：“john doe”将被转换为“John Doe”。 uppercase 所有字母都转换为大写。例如：“john doe”将被转换为“JOHN DOE”。 lowercase 所有字母都转换为小写。例如：“JOHN DOE”将被转换为“john doe”。 none 不作任何转换——文本怎么写的就怎么显示。来举个例子，我们将使用一个姓名列表。所有姓名都用

（列表项）标签来标记。我们希望对姓名采用首字母大写的方式，而对标题采用全部大写的方式。查看过该例的 HTML 代码后你会发现，其实在 HTML 代码里我们写的姓名和标题全部都是小写。 h1 { text-transform: uppercase; } li { text-transform: capitalize; } • 显示示例第 6课：链接你在前面几课学到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo- class）来控制这些效果。伪类是什么？伪类（pseudo-class）令你可以在为 HTML元素定义 CSS属性的时候将条件和事件考虑在内。我们来看一个例子。正如你所知道的，在 HTML 里，链接是通过 a元素来定义的。因此，在 CSS 里，我们可以将 a作为一个选择器（selector）： a { color: blue; } 一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。 a:link { color: blue; } a:visited { color: red; } 为未访问过的链接和已访问过的链接分别使用伪类 a:link和 a:visited。活动的链接对应的伪类为 a:active，有鼠标悬停的链接对应的伪类为 a:hover。我们将逐个解释这四个伪类，并给出示例。伪类：link 伪类:link用于浏览者从未访问过的链接。在下面的示例代码中，我们将未访问过的链接设为浅蓝色。 a:link { color: #6699CC; } • 显示示例伪类： visited 伪类:visited用于浏览者已访问过的链接。比如，下面的代码将已访问过的链接设为深紫色： a:visited { color: #660099; } • 显示示例伪类： active 伪类:active用于活动的链接（即获得当前焦点的链接）。下例将活动的链接设为具有黄色背景： a:active { background-color: #FFFF00; } • 显示示例伪类： hover 伪类:hover用于有鼠标悬停的链接。这能制造出有趣的效果。例如，如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么 CSS 可以这样写： a:hover { color: orange; font-style: italic; } • 显示示例例 1：有鼠标悬停的链接的效果为链接设置悬停效果十分流行。所以，我们将多看几个:hover伪类的例子。例 1a：字符间距我们在第 5 课学过，可以用 letter-spacing属性来调整字符间距。现在为了取得特殊效果，我们将它应用到链接上： a:hover { letter-spacing: 10px; font-weight:bold; color:red; } • 显示示例例 1b：大写和小写同样在第 5 课我们学过，可以通过 text-transform属性来转换字母的大小写。这也可用于为链接制造效果： a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } • 显示示例通过上面两个例子你会发现，我们可以通过属性的组合创造出无数种效果。你可以创建自己的效果——试试吧！例 2：去掉链接的下划线如何去掉链接的下划线是一个常见的问题。关于是否去掉链接的下划线，你必须仔细考虑清楚，因为这有可能严重降低网站的易用性（usability）。人们已经习惯于兰色有下划线的链接了，他们看到它就知道那是可以点击的。甚至连我母亲都知道这一点！如果你去掉链接的下划线或修改链接的字体颜色的话，这很有可能会令用户感到困惑、并因此不能充分享用你网站上的内容。尽管如此，去掉链接的下划线是非常容易的。你肯定记得我们在第 5 课学过 text- decoration属性，它可用于决定是否给文本添加下划线。要去掉下划线，只要把 text- decoration属性的值设为 none 就行了。 a { text-decoration:none; } 除此以外，text-decoration属性也可以与其它属性一起应用在伪类上。 a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; } • 显示示例第 7课：元素的分类与标识（class和 id）有时，你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用 class和 id来为所选元素指定属性。如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。用 class对元素进行分类比方说，我们有两个由链接组成的列表，它们分别是用于制造白葡萄酒和红葡萄酒的葡萄。其HTML 代码如下：

制造白葡萄酒的葡萄：

制造红葡萄酒的葡萄：

• 显示示例现在，我们希望白葡萄酒的链接全部显示为黄色，红葡萄酒的链接全部显示为红色，其余的链接显示为缺省的兰色。为了实现这一要求，我们将链接分为两类。对链接的分类是通过为链接设置HTML属性 class实现的。参加如下代码：

制造白葡萄酒的葡萄：

制造红葡萄酒的葡萄：

然后，我们就可以为白葡萄酒和红葡萄酒的链接分别应用不同的风格了。 a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } • 显示示例如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义 CSS属性。利用 id标识元素除了可以对元素进行分类以外，你还可以标识单个元素。这是通过 HTML属性 id实现的。 HTML属性 id的特别之处在于，在同一 HTML 文档中不能有两个具有相同 id值的元素。文档中的每个 id值都必须是唯一的。在其他情况下，你应该使用 class属性。下面，我们来看一个使用 id属性的例子：

第 1章

...

第 1.1节

...

第 1.2节

...

第 2章

...

第 2.1节

...

第 2.1.1小节

... 上例是一个文章的各章节的标题。我们自然可以为其中每一章节指定一个 id（如下）：

第 1章

...

第 1.1节

...

第 1.2节

...

第 2章

...

第 2.1节

...

第 2.1.1节

... 假如我们要求第 1.2节显示为红色，那么 CSS 可以这样写： #c1-2 { color: red; } • 显示示例如上例所示，你可以在样式表里通过#id 为特定元素定义 CSS属性。第 8课：组织元素（span和 div） span 和 div元素用于组织和结构化文档，并经常联合 class 和 id属性一起使用。在这一课中，我们将进一步探究 span 和 div 的用法，因为这两个 HTML元素对于 CSS 是很重要的。 • 用 span组织元素 • 用 div组织元素用 span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与 CSS 结合使用的话，span可以对文档中的部分文本增添视觉效果。让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：

早睡早起使人健康、富裕又聪颖。

假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用标签来标记上述每一点好处。然后，我们将这几个 span设置为相同的 class 。这样，我们稍后就可以在样式表里针对这个 class 定义特定的样式。

早睡早起使人健康、富裕和聪颖。

相应的 CSS 代码如下： span.benefit { color:red; } • 显示示例当然，你也可以采用 id 来为 span元素添加样式。不过正如我们在上一课所学的，如果采用 id 的话，你必须为这三个 span元素各自分别指定一个唯一的 id。用 div组织元素如前面例子所示，span的使用局限在一个块元素内，而 div可以被用来组织一个或多个块元素。除去这点区别，div和 span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：

富兰克林·D·罗斯福
哈利·S·杜鲁门
约翰·F·肯尼迪
林登·B·约翰逊
吉米·卡特
比尔·克林顿

德怀特·D·艾森豪威尔
理查德·尼克松
杰拉尔德·福特
罗纳德·里根
乔治·布什
乔治·W·布什

在这里，我们可以采用跟上例同样的方法来处理样式表： #democrats { background:blue; } #republicans { background:red; } • 显示示例在上例中，我们仅仅将 div和 span使用在一些很简单的方面，譬如文本和背景色等。但其实这两个元素都可用于作更加复杂的处理，比如。。。不过这里我们暂并不作介绍。之后我们还将对它们作深入了解。第 9课：盒状模型 CSS中的盒状模型（box model）用于描述一个为 HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。下图显示了盒状模型的结构： CSS中的盒状模型上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的 HTML 代码如下（摘自世界人权宣言）：

Article 1:

All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood

通过添加一些颜色及字体信息，该例可以有以下显示效果：这个例子包含了两个元素：h1和 p。这两个元素的盒状模型如下图所示：尽管上图显得有点复杂，不过它展示了每个 HTML元素是如何被盒子所围绕的。我们可以通过 CSS 来调整这些盒子。第 10课：外边距和内边距上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置 margin（外边距）和 padding（内边距）这两个 CSS属性来改变元素的显示。 • 为元素设置外边距 • 为元素设置内边距为元素设置外边距一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可以参考第 9 课的图示。在下面这个例子中，我们将了解如何为文档本身（即 body元素）定义外边距。下图显示了我们对外边距的要求。满足上述要求的 CSS 代码如下： body { margin-top:100px; margin-right:40px; margin-bottom:10px; margin-left:70px; } 或者你也可以采用一种较优雅的缩写形式： body { margin: 100px 40px 10px 70px; } • 显示示例几乎所有元素都可以采用跟上面一样的方法来设置外边距。例如，我们可以为所有用

标记的文本段落定义外边距： body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; } • 显示示例为元素设置内边距内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。下面我们通过一个简单的例子来说明内边距的用法。在这个例子中，所有标题都具有背景色： h1 { background: yellow; } h2 { background: orange; } • 显示示例通过为标题设置内边距，你可以控制在标题文本周围填充多少空白： h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } • 显示示例第 11课：边框边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS 为你提供了无尽选择。 • border-width • border-color • border-style • 一些示例 • 缩写 [border] 边框宽度[border-width] 边框宽度由 CSS属性 border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下图所示：边框颜色[border-color] CSS属性 border-color 用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、 “rgb(123,123,123)”、“yellow”等。边框样式[border-style] 边框样式有多种可供选择。下图显示了 8 种不同样式的边框在 Internet Explorer 5.5 里的实际显示效果。在这个例子里，我们为这 8 种边框都选择了“金色（gold）”作为边框颜色、“ 厚(thick)”作为边框宽度。当然，这只是个例子，你可以为边框设置别的颜色和厚度。如果你不想有任何边框，可以为它取值为“none”或者“hidden”。一些示例我们可以将上面三个有关边框的 CSS属性组合起来使用，从而制造出多种多样的变化。来举个例子，我们要为一个文档中的 h1、h2、ul和 p等元素分别定义不同的边框。尽管其显示效果也许并不那么美观，但是它很好地向你展示了多种变化的可能： h1 { border-width: thick; border-style: dotted; border-color:gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; } • 显示示例我们也可以为上边框、下边框、右边框、左边框分别指定特定的 CSS属性。具体做法如下例所示： h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bo

                    本文档为【css教程】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
                    图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。 
 该文档来自用户分享，如有侵权行为请发邮件ishare@vip.sina.com联系网站客服，我们会及时删除。

                    [版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。

                    本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。

                    网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
                

下载需要：免费已有0 人下载

立即下载

css教程

我的第一个样式表

第 1章

第 1.1节

第 1.2节

第 2章

第 2.1节

第 2.1.1小节

第 1章

第 1.1节

第 1.2节

第 2章

第 2.1节

第 2.1.1节

Article 1:

你可能还喜欢