CSS学习总结

最新推荐文章于 2021-11-27 22:44:38 发布

lanlandetuzi

最新推荐文章于 2021-11-27 22:44:38 发布

阅读量946

点赞数

分类专栏：ＣＳＳ文章标签： css 总结

本文链接：https://blog.csdn.net/lanlandetuzi/article/details/19332261

版权

ＣＳＳ专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有没有觉得上述只由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>

lanlandetuzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结

有没有觉得上述只由HTML做的页面太单调了呢，这时候，就需要认识CSS了。我们可以通过CSS来添加自己的样式和格式规格，从而决定字体、颜色、大小以及其他个性化特征。单纯用HTML做网页的时候，每个块框架以及里面的内联元素要想显示不同，就得给每个元素加上描述，当一个网页比较复杂的时候，就会使得文档过于冗长，所以一HTML来做出一个网页的框架，大体的内容，为了使网页更加美妙，在添加细节方面，配合使用C
复制链接

扫一扫