一、CSS的引用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1CSS的引用方式</title>
<!--外接样式-->
<link rel="stylesheet" href="./index.css">
<!--内接样式-->
<style type="text/css">
div{
margin: 200px;
padding: 200px;
}
</style>
</head>
<body>
<!--行内样式-->
<div style="width: 200px;height: 200px;background: red"></div>
</body>
</html>
二、CSS的基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2CSS的基本选择器</title>
<style type="text/css">
/*标签选择器*/
div{
width: 200px;
height: 200px;
background: red;
}
/*ID选择则器*/
#box{
width: 200px;
height: 200px;
background: red;
}
/*类选择器*/
/*同一个标签中可以携带多个类，用空格隔开*/
.box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>
</html>
三、CSS的高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.CSS的高级选择器</title>
<style type="text/css">
/*后代选择器*/
/*父元素的后代（包括儿子，孙子，重孙子）*/
div p{
color: red;
}
/*子代选择器*/
/*仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。*/
div>p{
color: yellow;
}
/*并集选择器*/
p,a{
color: blue;
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*!*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*并集选择器*/
/*第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active*/
div.box1{
background: blue;
}
</style>
</head>
<body>
<div class="box1" id="box">
<div class="box2">
<p>我是孙子标签</p>
<a href="#">我是a标签</a>
</div>
<p>我是儿子标签</p>
</div>
</body>
</html>
四、CSS的伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4CSS的伪类选择器</title>
<style type="text/css">
/*没有被访问的a标签的样式*/
a:link{
color: black;
text-decoration: none;
}
/*访问过后的a标签的样式*/
a:visited{
color: black;
}
/*鼠标悬停时a标签的样式*/
a:hover{
color: blue;
}
/*鼠标摁住的时候a标签的样式*/
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="#">点我</a>
</body>
</html>
五、CSS的伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5CSS的伪元素选择器</title>
<style type="text/css">
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content: "X";
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content: "Y";
}
</style>
</head>
<body>
<p>我是P标签</p>
</body>
</html>
六、CSS的继承性和层叠性（权重）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6CSS的继承性和权重</title>
<style type="text/css">
/*继承性*/
/*可以继承的属性：color 、 font-*、 text-*、line-* ，主要是文本级的标签元素。*/
/*不能继承的属性：定位的元素（浮动，绝对定位，固定定位）*/
/*权重*/
/*数数：id的数量 class的数量 标签的数量，顺序不能乱*/
/*先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上*/
/*如果没有被选中标签元素，权重为0。 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性*/
/*1 0 0*/
#box{
width: 30px;
height: 30px;
color: red;
}
/*0 1 0*/
.box{
width: 30px;
height: 30px;
color: red;
}
/*0 0 1*/
div{
width: 30px;
height: 30px;
color: red;
}
/*权重示例2*/
/*201*/
#box1 #box2 p{
color: yellow;
}
/*111*/
#box2 .wrap3 p{
color: red;
}
/*103*/
div div #box3 p{
color: purple;
}
/*031*/
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
</body>
</html>
七、CSS的盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7盒模型</title>
<style type="text/css">
/*那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。
另外如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。*/
div{
width: 200px; /*width：内容的宽度*/
height: 200px; /*height: 内容的高度*/
background-color: #2892F1;
margin: 50px; /*margin：外边距，盒子边框到附近最近盒子的距离*/
padding: 50px; /*padding：内边距，边框到内容的距离*/
border: 5px solid red;/*border: 边框，就是指的盒子的宽度*/
}
/*那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置*/
/*我们现在初学可以使用通配符选择器*/
*{
padding:0;
margin:0;
}
/*https://unpkg.com/reset-css@4.0.1/reset.css*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
八、border制作三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 0;
height: 0;
border-bottom: 60px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
九、块级元素和行内元素
"""
学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
行内元素
块级元素
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
从HTML的角度来讲，标签分为：
文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。
PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。
块级元素和行内元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了
行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲
标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
"""
十、浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*浮动*/
.box{
float: left;
width: 200px;
height: 200px;
}
.box1{
background: red;
}
.box2{
background: blue;
}
.outer{
background: black;
}
/*清除浮动带来的影响*/
.outer:after{
content: "";
display: block;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="outer">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
</body>
</html>
十一、overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11overflow</title>
<style type="text/css">
.box{
float: left;
height: 200px;
width: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
}
.outer_box{
background-color: black;
overflow: hidden;
}
</style>
</head>
<body>
<div class="outer_box clearfix">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
</body>
</html>
十二、margin
"""
当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能大的右边有很大的距离，没有什么意义。当设置margin-right:auto；我们发现盒子尽可能大的左边有很大的距离。
当两条语句并存的时候，我们发现盒子尽可能大的左右两边有很大的距离。此时我们就发现盒子居中了。
另外如何给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12margin</title>
<style type="text/css">
.box1{
width: 200px;
height: 180px;
background-color: red;
padding-top: 20px;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
十三、文本属性和字体属性
"""
文本属性
介绍几个常用的。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
"""
十四、精灵图技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*background-img:表示设置该元素的背景图片*/
/*那么发现默认的背景图片，水平方向和垂直方向都平铺*/
/*background-repeat:表示设置该元素平铺的方式*/
/*repeat 默认。背景图像将在垂直方向和水平方向重复。*/
/*repeat-x 背景图像将在水平方向重复。*/
/*repeat-y 背景图像将在垂直方向重复。*/
/*no-repeat 背景图像将仅显示一次。*/
/*inherit 规定应该从父元素继承 background-repeat 属性的设置。*/
/*background-attach*/
/*设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动*/
div{
width: 100px;
height: 100px;
background-image: url("14.jpg");
background-position: -100px -100px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
十五、background大图居中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1background大图居中显示</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
height: 657px;
/*background-image: url("1.jpg");*/
/*background-position: top center;*/
/*background-repeat: no-repeat;*/
/*下面是简写*/
background: url("CSS内容/1.jpg") top center no-repeat;
/*设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
十六、position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2position定位_固定定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
padding-top: 80px;
}
/*固定导航栏*/
.topHead{
height: 80px;
width: 100%;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.info{
height: 4096px;
background-color: red;
}
/*返回顶部*/
.backTop{
height: 80px;
width: 100px;
background-color: rgb(0,0,0);
position: fixed;
bottom: 100px;
right:100px;
z-index: 99999;
line-height: 80px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="topHead"></div>
<div class="info"></div>
<div class="backTop">
<a href="#top">返回顶部</a>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2position定位_相对定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
/*相对定位
如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、
只有一个作用：父相子绝
不要使用相对定位来做压盖现象
二种现象：1.不脱标 2.形影分离老家留坑（恶心）
*/
position: relative;
left: 200px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2position定位_绝对定位</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: blue;
/* 绝对定位
现象：设置绝对定位的盒子，脱离标准流
参考点：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/
position: absolute;
left: 200px;
}
.box3{
background-color: yellow;
}
.box4{
background-color: black;
position: absolute;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body style="height: 2048px">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2position定位_父相子绝</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* 父相子绝
以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’
在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，
然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
*/
.father{
width: 500px;
height: 500px;
background-color: red;
left: 200px;
top: 200px;
padding: 100px;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父相子绝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2position定位_绝对定位盒子居中</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.father{
width: 500px;
height: 500px;
background-color: red;
left: 200px;
top: 200px;
padding: 100px;
position: relative;
}
.son{
width: 200px;
height: 200px;
background-color: black;
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
绝对定位盒子居中
十七、z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3z-index</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 200px;
width: 200px;
}
/*
1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3、z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，
谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：父亲怂了，儿子再牛逼也没用
*/
.box1{
background-color: red;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.box2{
background-color: blue;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>