携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
最近写项目时经常会遇到不知如何布局、个别常用CSS属性不熟悉、一些效果不知用什么CSS属性来完成。于是便痛定思痛，决定通过Mdn文档来系统地学一遍CSS，写下几篇笔记以便学习记录。
CSS概览
学习一个东西，首先我们要知道它是什么。通常的情况下我们打开一个网页一般看到展示出来的效果是比较丰富、体验比较好的。我们常说html和CSS是不分家的，那如果没有写CSS网页效果会是什么样呢？答案是：
我们可以看到虽然它有一些默认的样式，但与我们期待看到的真正的网页效果是相去甚远的。这个时候，CSS便能够发挥它的作用了。在Mdn文档中是这样描述CSS的。
CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
开始使用CSS
一、准备好html文件
<body>
<h1>我是仅通过html渲染出的页面</h1>
<ul>
<li>name:Tom</li>
<li>age:16</li>
</ul>
<form action="">
<label>请选择你的性别</label>
<select name="sex" id="">
<option value="male">男</option>
<option value="female">女</option>
</select>
<br />
<label>请输入你的爱好</label>
<textarea name="hobby" id="" cols="30" rows="2"></textarea>
</form>
<hr />
<p>更多请访问：<a href="#">Tom.com</a></p>
</body>
二、确定编写CSS的位置
首先，我们有几种方式在html文件中编写css代码
1.外部样式表
通过在外部编写后缀为css的文件，在html的header中引用
<head>
<link rel="stylesheet" href="styles.css">
</head>
2.内部样式表
不使用外部css文件，直接在内部通过style标签编写css
<head>
<style>
</style>
</head>
推荐在head标签中放置style标签，因为由于网页文档是自上而下加载并解析的，假设将style标签书写在了的后面，在读取到style标签之前，整个网页文档已经渲染得差不多了，这时候突然发现存在一个style标签，并且style标签中的内容针对网页中某些元素的样式进行了设置，于是浏览器只好重新为每个元素计算样式，再加载出来。这会导致网页的加载速度的变慢
3.元素标签中通过style属性编写css
<h1 style=""> </h1>
三、通过CSS样式化html元素
已经有了html文档文件，也知道了在哪编写css，下面我们就可以通过css来装饰我们的网页了。
<head>
<style>
/* 修改默认间距，定义文字对齐方式 */
body {
margin: 0;
padding: 0;
text-align: center;
}
h1 {
font-size: 24px;
color: #333;
}
ul {
margin-top: 40px;
}
li {
list-style-type: none;
}
</style>
</head>
效果
总结
本文我们使用css修改了html部分元素的默认样式，但很容易发现通过元素标签来修改是有问题的，例如有多个h1元素，此方式便可能修改掉所有h1元素。所以后面我们将通过选择器的方式让定位一个元素会更容易。
