有没有觉得上述只由HTML做的页面太单调了呢,这时候,就需要认识CSS了。我们可以通过CSS来添加自己的样式和格式规格,从而决定字体、颜色、大小以及其他个性化特征。单纯用HTML做网页的时候,每个块框架以及里面的内联元素要想显示不同,就得给每个元素加上描述,当一个网页比较复杂的时候,就会使得文档过于冗长,所以一HTML来做出一个网页的框架,大体的内容,为了使网页更加美妙,在添加细节方面,配合使用CSS能使网页更加符合我们的视觉享受。
这时候,可以用上HTML里面的目标锚(名字),把所有每个元素定义的样式提取出来,另外在同一目录下建一个样式表(CSS文档),给每个目标分配好不同的样式,并HTML中<head>中加style的地方加上<link>元素,并在元素里面用特定的格式来标明是样式表。
CSS还有另外特别之处,从CSS角度看,每个元素都是一个盒子,而盒子有内容区、补白、边框和边界,可以根据自己的需要改变盒子里面的样式,还可以将这些盒子整体放在我们想要它在的地方。
为了更好的使用CSS,使网页展现更多的结构,可以在结构上添加结构,这时候就引入了一个新元素嵌套<div>来给有一定联系的几个块结构增加样式,设置id,来改变<div>这个容器里面的内容。而与之对应的有一个装内联元素的容器<span>。两种元素都都可以添加到类中。另外还有一些用法,可以用伪类单独的给每个状态设计样式。伪类和<a>元素一起最常用的是::link,用于未被访问的链接,:visited,用于已经访问的链接,:hover,用于停留状态。
浏览器在访问HTML页面的时候,是以流的形式来读一个个元素的,进而进行排版,有时候,我们需要某一块元素在流之外,能处于我们想要的位置。进行漂流一般要进行以下几步:①首先,给要漂移的东西一个标识符。②给它设置宽度。③用float属性来进行漂移。
以下再具体给出一个例子进行理解:
其对应的HTML代码为
这时候,可以用上HTML里面的目标锚(名字),把所有每个元素定义的样式提取出来,另外在同一目录下建一个样式表(CSS文档),给每个目标分配好不同的样式,并HTML中<head>中加style的地方加上<link>元素,并在元素里面用特定的格式来标明是样式表。
CSS还有另外特别之处,从CSS角度看,每个元素都是一个盒子,而盒子有内容区、补白、边框和边界,可以根据自己的需要改变盒子里面的样式,还可以将这些盒子整体放在我们想要它在的地方。
为了更好的使用CSS,使网页展现更多的结构,可以在结构上添加结构,这时候就引入了一个新元素嵌套<div>来给有一定联系的几个块结构增加样式,设置id,来改变<div>这个容器里面的内容。而与之对应的有一个装内联元素的容器<span>。两种元素都都可以添加到类中。另外还有一些用法,可以用伪类单独的给每个状态设计样式。伪类和<a>元素一起最常用的是::link,用于未被访问的链接,:visited,用于已经访问的链接,:hover,用于停留状态。
浏览器在访问HTML页面的时候,是以流的形式来读一个个元素的,进而进行排版,有时候,我们需要某一块元素在流之外,能处于我们想要的位置。进行漂流一般要进行以下几步:①首先,给要漂移的东西一个标识符。②给它设置宽度。③用float属性来进行漂移。
以下再具体给出一个例子进行理解:
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
font-weight: normal;
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 130%;
}
blockquote {
font-style: italic;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td, th {
border: thin dotted gray;
padding: 5px;
}
th {
background-color: #cc6600;
}
caption {
font-style: italic;
padding-top: 8px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.cellcolor {
background-color: #fcba7a;
}
table table th {
background-color: white;
}
li {
list-style-image: url(images/backpack.gif);
padding-top: 5px;
margin-left: 10px;
}
其对应的HTML代码为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css" />
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2005</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico" /></p>
<p>
Well I made it 1200 miles already, and I passed
through some interesting places on the way:
</p>
<table summary="This table holds data about the
cities I visited on my travels. I've included the date
I was in each city, the temperature when I was there,
and altitude and population of each city. I've also
included a rating of the diners where I had lunch, on a
scale from 1 to 5.">
<caption>
The cities I visited on my
Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">75</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">265</td>
<td class="center">3/5</td>
</tr>
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
<h2>July 14, 2005</h2>
<p>
I saw some Burma Shave style signs on the side of the
road today:
</p>
<blockquote>
<p>
Passing cars, <br />
When you can't see, <br />
May get you, <br />
A glimpse, <br />
Of eternity. <br />
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2005</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip" /></p>
<p>
My first day of the trip! I can't believe I finally got
everything packed and ready to go. Because I'm on a Segway,
I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As
Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
</body>
</html>