CSS入门教程
CSS是什么
css是一种样式表语言，它提供了许多属性来对Html标签进行修饰，使我们的页面更加美观。
基础语法
我们把对文本样式进行定义和修饰的CSS代码写在<style></style>中。
注释： /* */ （Ctrl + /）
CSS样式表分为：行内样式表、内嵌样式表、外部样式表.
简单来说就是css代码写的位置不同而已，如果标签只出现一次可以考虑使用行内样式写法。若有多组标签且样式需求一致可以使用内嵌样式写法。一般在大的项目css代码很多情况下才使用外部样式写法，也就是将css代码单独写在一个.css文件中，再在html文件中通过<link/>导入即可。
<!-- href=" .css文件位置 " -->
<link rel="stylesheet" href="" />
选择器
选择器是将样式表和标签进行匹配的，常用选择器有4种：
- 标签选择器 ：匹配页面中所有的指定标签
- id选择器 ：匹配id值唯一的一个标签
- 类选择器 ：匹配class属性相同的一组标签
- 通配选择器 ：匹配页面中所有标签
<style>
/* 标签选择器 */
p{ }
/* id选择器 */
#shell{ }
/* 类选择器 */
.content{ }
/* 通配选择器 */
*{ }
</style>
<body>
<p></p>
<div id="shell"></div>
<div class="content"></div>
<div class="content"></div>
<h1></h1>
</body>
修饰文本
修饰背景
透明度
CSS中 opacity属性 是用来定义透明度的，并且规定范围是从 0.0 ~ 1.0 ( 完全透明 ~ 完全不透明 )
<style>
#photo{
opacity: 0.5; /*完全透明 0.0 ~~ 1.0 完全不透明*/
}
</style>
<body>
<!-- 原图 -->
<img src="/images/resources/boom.png" />
<!-- 设置半透明 -->
<img src="/images/resources/boom.png" id="photo"/>
</body>
效果如下：
伪类
CSS伪类专门用来表示标签的一种的特殊的状态，常用的伪类有：
- hover 表示鼠标移入的状态
- active 表示被点击的状态
- focus 向拥有键盘输入焦点(例如输入框)的标签添加样式
<style>
#photo{
opacity: 0.5;
}
#photo:hover{
opacity: 1.0;
}
</style>
<body>
<img src="img/lisa.jpg" id="photo"/>
</body>
此段代码表示当鼠标移入图片时，图片的样式从原本的半透明转变为完全不透明
盒子模型
CSS处理网页时，它认为每个标签都包含在一个不可见的盒子里，如果把所有的标签都想象成盒子，那么我们对网页的布局就相当于是摆放盒子，只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
一个盒子分为4个部分：内容区、内边距、边框、外边距
标签大小 = 内容区大小 + 内边距大小 + 边框
content:内容区指盒子中放标签内容的区域，子标签都存在于内容区中。width和 height两个属性就是设置内容区大小的。如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小一致。padding:内边距指标签内容区到边框以内的区域。内边距会影响整个盒子的大小(涉及计算问题)border:边框是标签可见框的最外部，也会算在标签大小中。 边框的三要素有：宽度 width、颜色 color、样式 style，三者缺一不可。margin:外边距指标签边框与周围其他标签相距的区域，外边距不影响盒子的整体大小 ，但是会影响盒子的位置。
若想使标签位置水平居中可以将margin设置为auto，这样浏览器会将左右外边距设置为相等，但要注意：若把标签上下外边距设置为auto，不会使标签垂直居中，外边距依然为0，上下外边距需要给具体的值。
浮动
由于网页默认是一个二维平面，当我们在网页中一行行摆放标签时，块标签会独占一行，行标签则只占自身大小，这种情况下要实现网页布局就很麻烦，所以我们就需要通过一些方法来改变这种默认的布局方式。
CSS中的浮动属性可以让标签脱离原来的文档流，也就是二维平面，浮动后的标签默认是内容的大小，且可以为其设置宽和高。
但是浮动后的标签不占用原来文档流的空间，下面的标签就会向上移动，会影响后面的网页布局，所以我们通常在浮动的标签后使用清除浮动属性，自动让父级标签撑开
定位
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
➱ position: static; （默认）
HTML元素默认情况下的定位方式为 static（静态），静态定位的元素不受 top、bottom、left 和 right 属性的影响，不会以任何特殊方式定位，它始终根据页面的正常流进行定位。
➱ 固定定位 position: fixed;
固定定位的元素是相对于视口定位的，即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
➱ 相对定位 position: relative; (相对定位和绝对定位是我们常用的 )
元素相对于其正常位置进行定位。设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
➱ 绝对定位 position: absolute;
元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed），如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。