前言

最近几天学习了前端的基础知识，并在讲师和小组成员的帮助下做了一个小网页。在这里想以一个初学者的角度记录一下我的理解以及思考。

Html基本结构

首先要说明的是，这篇文章主要讲的是CSS层叠样式表(Cascading Style Sheets)，它是一种Html元素的属性。
所以先讲一下Html的基本结构，以及它和CSS的关系。

<!DOCTYPE html>  html版本标识符 
<html>
  <head>
     <metadata elements>
  </head>
  <body>
     <div>
        contents
     </div>
  </body>
</html>

上面表示了html的基本组成模块，html里面包括head和body两个子元素。
head里面放的是对网页的描述，实际不显示。比如link、meta、title和style都应该放入head标签。body里面放的是网页实际的内容，比如h1标题，p段落等等。

可以把网页设计想象成一个电子黑板报，我们在向里面添加内容的时候需要设定内容的格式，比如段落需要设置段落的位置，字体种类，字体大小，字体颜色等等。这个格式的限定方法就是接下来要讲的CSS层叠样式表。

CSS层叠样式表

1.设置方法

CSS的设置方法有四种，按优先级的排列依次为 important>内联>id>class。下面以给h2（二级标题）的颜色设置粉色为例来解释一下各种设置方法。

important：在属性后面加important，设置强属性。

pink-text {
  color: pink !important;
}

内联样式：直接在内容后面添加需要的属性（为方便以后的调试和代码的简洁性，最好不要采用这种方式）

<h2 style="color: pink;"></h2>

id编号属性：id具有唯一性，一个界面最好把特殊且唯一的部分设置成id模式，比如form表单的内容。

#pink-text {
  color: pink
}
<div id="pink-text">
     <h2></h2>
</div>

class类属性：比较广泛的属性方式，描述了不同元素的相同属性。

.pink-text {
  color: pink
}
<div class="pink-text">
     <h2></h2>
</div>

class类可以重叠使用，也就是说一个<div>块里面可以设置多个class类，语句为 class="class1 class2 ..."，当多个类出现冲突的时候，以<style>里面最后一个为基准，而不是以class="class1 class2"的顺序为基准。

举个例子，如下图所示，在style里面pink排在black属性的后面，所以文字最后显示的是pink。你可以把它想象成一个后面把前面覆盖的过程。

那如果在不改变style顺序的情况下，我要把字体的颜色改成black怎么办。这个时候important就派上用场了，你可以在black的颜色属性后面加一个！important就可以了，有兴趣的可以自己试一试~很有意思。

tips：还有一个冲突的情况：类选择器和元素选择器冲突，类选择器优先。

<head>
  <style>
    .special {
      color: red;
    }
    p {
      color: blue;
    }
  </style>
</head>
<body>
   <p class="special">What color am I?</p>
</body>

这个时候字体就会是红色的。如果要变成蓝色的，加一个!important就好啦。

2.具体样式

更改字体的颜色：<h2 style="color: red;">
更改元素的字体大小： h1{font-size:30px}
设置字体样式：h2{font-family:sans-serif}
引入谷歌字体：
网络上有各种各样的字体，以Google字体库为例
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
字体如何优雅降级：当使用外部字体的时候，为了避免有时候加载失败的情况，我们最好设置一个备用默认字体。所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。
h2 {font-family: Lobster,monospace;}
在元素周围添加边框： CSS 边框具style，color和width属性。
.thick-green-border{
border-color:green;
border-width:10px;
border-style:solid; 实线
border-radius: 10%; 设置圆角边框
}
调整元素的内边距：每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。具体位置如下图所示，是标准的盒子模型。

.thick-green-border{
padding: 10px;
border: 10%;
margin-top: -10px;
}
可以设置成固定像素格式，也可以设置成百分比模式，大小随父元素的变化而变化。注意，margin可以设置成负值，margin-top设置为负值代表向上移动。