目录
1.CSS概述
[1]CSS(Cascading Style Sheet)
层叠样式表。它是用来美化页面和控制页面布局的一种语言。CSS就像化妆品一样，修饰HTML。所以HTML还是主体，CSS依赖HTML。
[2]CSS的三种引入方式
内部样式表
外部样式表
内联样式
2.内部样式
2.1语法
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
选择器 {
样式名 : 样式值;
样式名 : 样式值;
.....
}
2.2选择器种类
2.2.1简单选择器
标签选择器、ID选择器（#）、类选择器（.）、组合选择器(,)、*(所有)
ID属性：HTML文档中html是根，根下有head和body标签，所以html可以看做是一棵树，树上有很多节点。每一个节点都有一个id的属性，每个节点id属性值是不能重复的像身份证一样，所以id属性是该节点的唯一标识，拿到了节点的id是不是就相当于拿到了对应的节点。进而可以我可以对这个节点进行操作了
注：ID属性不要以数字开头，数字的ID在Mozilla/FireFox浏览器中是不起作用的。
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第二种方式：样式块</title>
<style type="text/css">
body{
background-color: yellow;
}
h1{
font-size: 36px;
}
h2{
color: red;
}
p{
margin-left: 50px;
}
#p3{
background-color: yellow;
}
.font-red{
color:red;
}
.font-size{
}
</head>
<body>
<h1 class="font-red">我是标题1，字体设置36px</h1>
<h2>我是标题2，字体颜色红色</h2>
<p>我是段落，距离左边距有50px</p>
<p class="font-red font-size">段落！！！</p>
<p id="p3" >id选择器测试</a></p>
</body>
</html>2.2.2层级选择器
后代选择器 (空格)：匹配作为指定元素后代的所有元素。 div p
子选择器 (>)：指定元素子元素的所有元素。div>p
相邻兄弟选择器 (+):指定元素的相邻的同级元素。div+p
通用兄弟选择器 (~)：指定元素的所有同级元素。 div~p
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section>
<p>div 中的段落 3。</p>
</section>
</div>
<p>段落 4。不在 div 中。</p>
一些代码
<p>段落 5。不在 div 中。</p>
</body>
</html>2.2.3伪类选择器
用于定义元素的特殊状态。如：设置鼠标悬停在元素上时的样式；已访问和未访问链接设置不同的样式；设置元素获得焦点时的样式等
a:link {color:#FF0000;} /* 未访问的链接样式 */
a:visited {color:#00FF00;} /* 已访问的链接样式 */
a:hover {color:#FF00FF;} /* 鼠标划过链接样式 */
a:active {color:#0000FF;} /* 已选中的链接样式 */3.外部样式
创建css文件，然后引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入css文件-->
<link type="text/css" rel="stylesheet" href="css/1.css">
</head>
<body>
</body>
</html>4.行内样式
标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
4.1语法格式
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
<!-- 内联样式表 -->
<div id="div1" style="width: 100px;height: 100px;">
我是div1
</div>
<div style="width: 100px;height: 100px;background-color: blue;">
我是div2
</div>5.常见属性
background-color: red;/*div1的背景色*/
width: 300px;/*div1的宽度*/
height: 300px;/*div1的高度*/
display:none;/* 布局样式（none表示隐藏，block表示显示）*/
border : 1px solid black;/*红色 1 像素实线边框 (实线 solid 虚线 dashed 点线 dotted)*/
position: absolute;/*绝对定位，以方框左上角那个点来定位*/
left: 100px;/*距离网页的左边100px*/
top: 100px;/*距离网页的上边100px*/
color：red；/*字体颜色 直接写颜色名，rgb(255,0,0)，#00F6DE*/
font-size：20px; /*字体大小*/
text-align: center;/*文本居中：*/
text-decoration: none;/*超连接去下划线*/
list-style: none;/*列表去除前面的修饰图形*/
表格细线
table {
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
这些样式和它们的用法都可以在css2.0.chm文件里查到
6.盒子模型
盒子模型，顾名思义盒子就是用来装东西的。因为CSS是来修饰HTML的，所以CSS的盒子模型中装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。注意这里盒子与生活中的盒子又有点不同，这里的盒子是二维的。
6.1盒子的组成
一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。实际上margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
6.2盒子成分分析
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
border边框
以margin为例：
margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距
marrgin：边距
margin示例1
/*margin属性后只跟一个值，同时设置四条边的边距相等*/
margin: 10px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;margin示例2
/*margin属性后跟两个值，第一个值设置上下边距，第二个是设置左右边距*/
margin: 10px 20px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;margin示例3
/*margin属性后跟三个值，第一个值设置上边距，第二个是设置左右边距，第三个值设置下边距*/
margin: 10px 20px 30px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;margin示例4
/*margin属性后跟四个值，第一个值设置上边距，第二个是设置右边距，第三个值设置下边距，第四个值设置左边距*/
margin: 10px 20px 30px 40px;
/*下面样式与上面的样式等价*/
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;6.3盒子的大小
盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。
盒子真正的宽和高按下面公式计算：
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
为了显得专业一点，我们还可以用带属性的公式表示：
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
7.定位position
静态定位 - static：静态定位是css中的默认定位方式，也就是没有定位
相对定位 - relative：相对于父元素
绝对定位 - absolute
固定定位 - fixed 无论如何滑动页面，固定定位的元素位置都不会被改变，完全脱离文档流。
[1]文档流是啥？
HTML中全部元素都是盒模型，盒模型占用一定空间，将窗体自上而下分成一行一行，并且在每行中按照从左往右依次排放元素，称为文档流。
[2]什么是脱离文档流？
元素脱离文档流之后就不再在文档流中占据空间，而是处于浮动状态，相当于漂浮在其他元素上方，那么其他元素就会忽略该元素并填补这个元素原来的空间
7.1相对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style type="text/css">
/* 相对定位会在原来的位置上进行偏移，但是原先所占据的空间还在那里 */
#div1{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
left: 20px;
top: 20px;
}
#div2{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>7.2绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style type="text/css">
/* 相对定位会在原来的位置上进行偏移，但是原先所占据的空间还在那里 */
#div1{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
left: 20px; top: 20px;
}
#div2{
width: 200px;
height: 200px;
background-color: red;
}
#div3{
width: 200px;
height: 200px;
background-color: brown;
/* position: relative; */ /* 绝对定位相对于最近已经定位的父元素定位，这里面div3没有父元素，
是不是就应该相对于body定位，也就是网页定位。 因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。 可以通过设置 z-index
属性来控制这些框的堆放次序。*/
position: absolute;
left: 20px;
top: 20px;
z-index: -1;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>7.3固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { padding: 0; margin: 0; }
body { height: 2000px; }
#div4{
width: 100px;
height: 100px;
background-color: cadetblue;
position: fixed; right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div id="div4">div4</div>
</body>
</html>7.4浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
</title>
<style>
#float1, #float2, #float3 {
width: 100px;
height: 100px;
background-color:chartreuse;
margin-bottom: 5px;
float: right;
}
/* 看到我给后面三个div都加了一个相同的样式，然后我让第一个div浮动到最右边，
是不是只有碰到边缘框他才会停下来。而且第一个还会脱离文档流，后面的两个要把第一个的位置补上。 边缘框和其他浮动元素浮动会停止*/
#float1{ /* float: right; */ } ul li { list-style: none; float: left; }
</style>
</head>
<body>
<div id="float1">浮动1</div>
<div id="float2">浮动2</div>
<div id="float3">浮动3</div>
<ul>
<li> li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>8.CSS我们要求掌握到什么程度？
* 常见的CSS样式要求会写。
* 别人写的CSS样式要能看懂。
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
