前言
最近几天学习了前端的基础知识，并在讲师和小组成员的帮助下做了一个小网页。在这里想以一个初学者的角度记录一下我的理解以及思考。
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设置为负值代表向上移动。
-
自定义CSS变量
.penguin {
--penguin-skin: gray;
｝
.penguin-top {
background: var(--penguin-skin);
网友评论