CSS样式，在前面学习HTML的结构时，也讲过一点。大概知道CSS样式如何使用。现在，系统的讲述一下CSS的用法，以及关于CSS样式的一些结构。
参考文章：CSS 背景图像重复 (w3schools.com)
一、CSS介绍
- CSS 代表 层叠样式表
- CSS描述了HTML元素如何在屏幕上显示， 纸张或其他介质
- CSS节省了大量的工作。它可以控制布局 一次多个网页
- 外部样式表存储在CSS文件中
二、CSS语法和基本用法
基本结构：语法、选择器、使用方法、注释方法
CSS 规则由选择器和声明块组成。
语法：
剖析：
CSS选择器，分为5种，前面在HTML也讲述过一些。
1.CSS元素选择器 （一些HTML基本的元素）
比如：p{ } h1{ } div{ }
2.CSS id选择器 （自定义的HTML元素）
比如： #dada{ }
3.CSS类选择器 （使用class自定义的元素）
比如： .dada{ } 或者： p.dada{ } //这种用法，可以指定某个元素p的dada属性！
4.CSS通用选择器
使用*{} 直接应用到所有css元素里面。
5分组选择器 (就是将一部分css样式相同的元素放在一起，减少代码量)
p，h1，div{ }
使用CSS的三种用法：
1.外部CSS (就是自定义的样式表，然后指定样式表。<link rel="stylesheet" href="mystyle.css">)
注意：css样式里面的一些属性，不要有空格！！！ 比如：witdh:300px 这个里面不要有空格。
2.内部CSS （就是放在头部的CSS样式）
3.内联CSS （放在内部的 使用style样式声明的！）
注意：在上面三种方法都使用的情况下，内联样式的优先级大于前面两种！
注释方法：
在html里面，注释方法是：<!-- -->
在CSS里面，注释方法是：/* */
CSS颜色和背景
CSS颜色和HTML的介绍是一样的，这里额外记忆一下透明度这个元素。
在CSS颜色里面，可以使用opacity表示透明度：
div {
background-color: green;
opacity: 0.3;
}
也可以使用RGBA的方式，添加透明度：
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground（速记属性）
背景颜色：background-color
背景图像：background-image:url("");
背景图像重复：设置不重复：background-repeat：no-repeat 、repeat-x、repeat-y。
背景图像位置：background-position：left top
背景图像附件：background-attachment：fixed、scroll。（一个是固定位置）
简写背景图像的属性：
例如： 相当于包括了上述的所有属性
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
CSS边框、边距、填充
边框属性：
border-style：设置边框的样式，比如：solid。表示粗体。
solid、dotted(虚线边框)、none、double
border-width：边框的宽度。（就是黑线的宽度。）
它有四个边框，top、right、bottom、left。（按顺时针的顺序。）
border-color：边框颜色，同样它也有四个边框。
border-radius：设置圆角边框。
上述四个边框，也可以这样写：border-top-color （先写是哪一条边框。）或者不写边框，直接写2px，它会根据顺序自动填充。
边距属性：margin
它也有四个属性。另外，学一个继承属性inherit。（继承属性有意思捏，如果使用继承，那么它和padding的展示页面有一些相同之处。）
例如：<div>是父类，它定义了边框1px。右边框的空白空间是100px。
<p.ex1>也是块元素，属于div框架里边，加入继承属性之后。它会距离div的边框100px。
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>注意：继承的方式，只能继承边距，不能继承样式。就比如上面的例子，它只继承了边距，边框1px的属性并没有继承。
两个边距会折叠成一个边距：
collapse、比如，定义上边一个元素的下边距是100px。下边一个元素的上边距是20px.按道理是100px+20px。总共120px的距离，但是，实际上只有100px。这就是折叠。
填充：padding
它也存在四个边框属性。它实际上就是，里面的块元素和外边边框的距离。它存在两种方式。一种是加了填充属性整个边框宽度不变，一种是会变化。
它常和盒子属性一起使用。先看会变化的：直接加入填充属性，它会随着填充的大小，而改变整个边框的大小。
使整个边框宽度不变，加入box-sizing属性。
例如：
div {
width: 300px;
padding: 25px; //无论，怎么改变这个值，整个width也不会改变。
box-sizing: border-box;
}
