CSS学习总结

来源：互联网发布：易顺佳采购软件编辑：程序博客网时间：2024/05/19 08:23

有没有觉得上述只由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属性来进行漂移。
以下再具体给出一个例子进行理解：

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>

0 0