您的位置：首页 > Web前端 > CSS

[Codecademy] HTML&CSS 第三课：HTML Basic II

2013-09-11 20:02 387 查看

本文出自 http://blog.csdn.net/shuangde800

[Codecademy] HTML && CSS课程学习目录

------------------------------------------------------------------------------------------------

Introduction

在这节课中，我们要进入下一阶段：

a. 制作排序列表的和不排序列表

b. 改变字体大小，颜色和类型

c. 改变背景颜色

d. 字体对齐

Ordered lists(排序列表)

[b] 排序列表就是在每一行内容的前面有编号，效果如下：[/b]

1. 有序列表以<ol>标签开头</ol>结尾。（ol = ordered lists）

2. 有序列表里面的每一项，用<li> </li>括起来。 (li = list item)

3. 有序列表的每一项占一行，所以一般我们把一项的所有内容放在一行里。

<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>raindrops on roses</li>
<li>whiskas on kittens</li>
<li>call of duty: modern warfare</li>
</ol>
</body>
</html>

效果图：

Unordered Lists（不排序列表）

我们已经学了排序列表，对于要编号排序的东西很适合使用它。但是如果我们不需要排序编号呢？我们可以使用unordered lists（不排序列表）。

不排序列表的使用方式和排序列表一样，不过它的标签是<ul></ul>。（ul = unordered lists）。不排序列表的列表项也是用<li></li>标签

<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>hahahahaahaha!</p>
<ul>
<li>first line</li>
<li>second line</li>
<li>third line</li>
<li>alksdf</li>
</ul>
</body>
</html>

效果图：

Lists inside a list（嵌套列表）

我们已经学会了ordered lists 和unordered lists。非常棒！

如果我们想要一个排序列表，但是如果列表项里还嵌套这一个不排序列表怎么办呢？效果图如下：

<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>

<ul>
<li>Boys Names.</li>
<ol>
<li>Daming</li>
<li>Lihua</li>
<li>Bob</li>
</ol>
<li>Girls Names.</li>
<ol>
<li>Alice</li>
<li>Lina</li>
<li>Lily</li>
</ol>
</ul>

</body>
</html>

效果图：

Making comments(注释)

我们已经学习了关于列表的大部分内容，是时候换种口味了！

如果html是网页的骨架，那么css是骨架的皮肤和漂亮的衣服。

在学css之前，我们要先学习inline css(内联css)，使用inline css意味着我们可以装饰html页面，而不需要单独创建一个css文件！我们先学这个，是因为这样可以让后面的css学习更加容易！

在学习fonts(字体)之前，先学习comments(注释)是很重要的，你可以使用注释来标记html文件的代码，这样可以帮助你在以后回忆起这段代码的功能。

注释以结尾，

Font size（字体尺寸）

在开口标签处，我们可以使用attributes（属性）来让这个标签实现更多的功能！

一个attributes是一个characteristic (特征)或者一些对内容的描述，在之前已经使用过了<img>中的src和<a>中的href

使用style 属性可以改变字体的尺寸：



 Some text for you to make tiny! 
 Some text for you to make normal size!
 Some text for you to make super big!

Font color（字体颜色）

除了字体大小，还有很多其他属性，比如可以改变字体颜色：

<h2 style="color:red">

如果既要改变颜色，又要改变大小，那么两个都加上去：

<h2 style="color: green; font-size:12px">

代码：

<!DOCTYPE html>
<html>
<head>
<title>Changing the colors!</title>
</head>
<body>
<h1 style="color:green;font-size:16px">Big Heading</h1>
<p style="color:violet">A giant bear and a little duck were friends.</p>
<p style="color:red;font-size:10px">But the bear got hungry and ate the duck.</p>
</body>
</html>

效果：

有各种颜色的网址：
打开

Font family(字体家族)

除了改变字体的大小和颜色，还可以改变字体类型！

只需要在style属性里添加font-family:Helvetica即可，例如

<h2 style="font-family:Garamond">

Background color背景颜色

同样，只要在style属性里添加一句background-color:read即可

例如：

<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body style="background-color:brown">
<h3>Favorite Football Teams</h3>
<ol style="background-color:yellow">
<li>The Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>Barcelona FC</li>
</ol>
</body>
</html>

效果：

Aligning the text(对齐文字)

可以设置一行字的对齐方式：向左对齐，居中，向右对齐等

同样是在style属性里添加text-align:center

<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:center">Favorite Football Teams</h3>
<ol>
<li style="text-align:left">The Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">Barcelona FC</li>
</ol>
</body>
</html>

效果：

Strong words!（粗体）

怎样把字变成粗体呢？意外的是，这并不是在style上动手脚，而是使用标签：

把要变成粗体字的部分，包围中

例如，把hello world!变成粗体：

hello world!

Emphasize words!(斜体)

除了粗体字，我们还会经常使用italicize（斜体）

和设置粗体一样，设置斜体也不是在style里设置的，而是使用标签

例如，把hello world!变成斜体：

hello world!

Summary（小结）

1. 设置排序列表和不排序列表

2. 改变字体的颜色，尺寸，字体类型

3. 在html中添加注释

4. 改变背景颜色

5. 文本对齐

6. 粗体和斜体

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航