CSS:神奇的网页美容师
我们有托尼老师为我们量身定制一款发型，而CSS正是网页的美容师。要想使自己的网页精美而又酷炫，那么你有必要学好CSS。
学习CSS你所要知道的
- 1、CSS简介
- 2、CSS的选择器
- 3、CSS的重要属性
- 4、CSS的盒子模型（重中之重）
- 5、CSS的布局
思维导图：
1、CSS简介
1.1 什么是CSS？
CSS为(Cascading Style Sheets)缩写
中文：层叠样式表
1.2 CSS有什么作用
在我们的前期学习中，单用HTML写出来的页面，我们会发现其样式并不好看，但如果有了CSS的加入，东施变西施。
因此，CSS便是用来装饰自己的网站的。
1.3 CSS如何使用
1.3.1 首先知道CSS的组成
CSS 由两个主要的部分构成：选择器，声明（属性+值）。
例如:`
h1 {
/*颜色改为金色/
color: gold;
}
`
*1.3.2 如何引入CSS
1、内嵌式引入，例如
<head>
<style type="text/css">
...此处写CSS样式
style>
head>
2、行内样式引入，例如
<h1 style="font-size:36px;">行内样式引入h1>
3、外链样式引入，例如
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
style>
4、嵌入样式引入，例如
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2、CSS的选择器
2.1什么是选择器
所谓的CSS选择器就是CSS当中已经定义好的用来选中某些元素的固定语法，他的作用就是选中我们想要设置样式的元素
2.2有哪些选择器
在CSS中有多种选择器，认为的分为两大类：简单选择器和复合选择器
2.3简单选择器
1.标签选择器：通过标签的名字来命名的
body{color:red;}
2.ID选择器：唯一，不可重复
<style>
#id名 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
style>
3.类选择器：单独一个或几个
<style>
.类名 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
style>
4.全选择器：用于将页面中所用的标签进行统一修改
<style>
* {
属性1: 属性值;
属性2: 属性值;
··· ···
}
style>
2.4复合选择器
1.后代选择器（包含选择器）
可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
style>
<--! 表示元素1里面所有的元素2，只选择了元素2 -->
元素1 元素2 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
style>
2.子（元素）选择器
与后代选择器的区别在于：只能选择某元素的最近一级子元素，即直接后代。
3.并集选择器
用于多组标签选择选择相同的样式。最后一个选择器不需要加逗号。
<style>
元素1,
元素2 {
属性1: 属性值;
属性2: 属性值;
··· ···
}
style>
4.伪类选择器
用于向某些选择器添加效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
<style>
a{
text-decoration: none;
color: skyblue;
}
a:hover {
color: red;
}
style>
<body>
<a href="#">a>
body>
3、CSS的重要属性
3.1文字属性
font-size:字号大小
font-family:字体
font-weight：字体粗细
font-style:字体风格
3.2文本属性
color:文本颜色
line-height:行间距
text-align:水平对齐方式
text-indent:首行缩进
3.3背景属性
background-image：背景图片
background-position：背景位置
4、CSS的盒子模型（重中之重）
一张图，让你明白。
盒子边框（border）
border : border-width || border-style || border-color
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
内边距（padding）
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
外边距（margin）
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距 下外边距 左外边
5、CSS的布局
1.静态定位
position:static;
默认值，不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。
2.相对定位
相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。
z-index:值越大越在上面
3.绝对定位
子容器相对于父容器的定位，如果没有父容器，则相对于body定位。