前引
CSS，层叠样式表（Cascading Style Sheets），能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有网页对象和模型样式编辑的能力，简单来说，美化页面。
1.引入css的方式有三种
一.引入css的方式有三种： 1.行内式 在标签内使用style属性来设置css样式 语法：style="样式名：样式值；样式名；样式值；...... <div style="width: 100px; height: 100px; background-color: red;"></div> 优点： 1.直接在标签内引入css样式，方便查看和修改 2.优先级高，可以覆盖其他css样式 3.可以快速查看效果，不需要刷新页面 4.可以快速修改样式，不需要修改其他文件 缺点： 总结： 代码复用度低，不利于维护 css样式和html结构代码交织，影响阅读，性能 1.代码冗余，每个标签都需要写style属性 2.不利于维护，如果需要修改样式，需要修改每个标签的style属性 3.不利于复用，如果需要复用样式，需要复制粘贴代码 6.不利于兼容，如果需要兼容不同浏览器，需要手动添加兼容代码 8.不利于优化，如果需要优化代码，需要手动添加优化代码 2.嵌入式 在html页面中，通过head标签创建style标签，在style标签中编写css样式，定义本页面公共样式 需要通过选择器确定样式的作用元素 语法：选择器{样式名：样式值；样式名：样式值；......} <选择器 {样式名：样式值；样式名：样式值；......}> 优点： 1.代码复用度高，可以复用样式 2.可以维护，如果需要修改样式，只需要修改style标签中的样式 缺点： 1.代码冗余，每个标签都需要写style属性 2.不利于维护，如果需要修改样式，需要修改每个标签的style属性 3.不利于复用，如果需要复用样式，需要复制粘贴代码 4.不利于优化，如果需要优化代码，需要手动添加优化代码 注意：style标签必须放在head标签中 注意：style标签可以引入多个css文件 注意：style标签引入的css文件会覆盖之前的css文件 3.外部式 在html页面中创建link标签，在link标签中引入外部的css文件 <link rel="stylesheet" href="css文件路径"> 注意：link标签必须放在head标签中 注意：link标签可以引入多个css文件 注意：link标签引入的css文件会覆盖之前的css文件
行内式与嵌入式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入</title>
<!-- 嵌入式-->
<style>
/*元素选择器，通过标签名确定样式的作用元素*/
input{
width: 100px;
height: 100px;
background-color: turquoise;
color: violet;
font-size: 20px;
font-family: '微软雅黑';
border: 2px solid #00d9ff;
border-radius: 5px;
}
</style>
</head>
<body>
<!--
一.引入css的方式有三种：
1.行内式
在标签内使用style属性来设置css样式
语法：style="样式名：样式值；样式名；样式值；......
<div style="width: 100px; height: 100px; background-color: red;"></div>
优点：
1.直接在标签内引入css样式，方便查看和修改
2.优先级高，可以覆盖其他css样式
3.可以快速查看效果，不需要刷新页面
4.可以快速修改样式，不需要修改其他文件
缺点：
总结： 代码复用度低，不利于维护 css样式和html结构代码交织，影响阅读，性能
1.代码冗余，每个标签都需要写style属性
2.不利于维护，如果需要修改样式，需要修改每个标签的style属性
3.不利于复用，如果需要复用样式，需要复制粘贴代码
6.不利于兼容，如果需要兼容不同浏览器，需要手动添加兼容代码
8.不利于优化，如果需要优化代码，需要手动添加优化代码
2.嵌入式
在html页面中，通过head标签创建style标签，在style标签中编写css样式，定义本页面公共样式
需要通过选择器确定样式的作用元素
语法：选择器{样式名：样式值；样式名：样式值；......}
<选择器 {样式名：样式值；样式名：样式值；......}>
优点：
1.代码复用度高，可以复用样式
2.可以维护，如果需要修改样式，只需要修改style标签中的样式
缺点：
1.代码冗余，每个标签都需要写style属性
2.不利于维护，如果需要修改样式，需要修改每个标签的style属性
3.不利于复用，如果需要复用样式，需要复制粘贴代码
4.不利于优化，如果需要优化代码，需要手动添加优化代码
注意：style标签必须放在head标签中
注意：style标签可以引入多个css文件
注意：style标签引入的css文件会覆盖之前的css文件
3.外部式
在html页面中创建link标签，在link标签中引入外部的css文件
<link rel="stylesheet" href="css文件路径">
注意：link标签必须放在head标签中
注意：link标签可以引入多个css文件
注意：link标签引入的css文件会覆盖之前的css文件
-->
<h1>行内式</h1>
<input type="button" value="原神启动"
style="
width: 100px;
height: 100px;
background-color: turquoise;
color: violet;
font-size: 20px;
font-family: '微软雅黑';
border: 2px solid #00d9ff;
border-radius: 5px;">
<h1>嵌入式</h1>
<input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动">
</body>
</html>外部式引入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01.1.外部式引入</title>
<link href="/CSS学习/CSS表文件/外部式.css" rel="stylesheet">
</head>
<body>
<h1>外部式</h1>
<input type="button" value="崩铁启动">
<input type="button" value="崩坏3启动">
<input type="button" value="鸣潮启动">
</body>
</html>
2.CSS选择器
CSS选择器 /*主要*/ 1.元素选择器 语法： <style> 标签名{} </>style> 例如：p{} h1{} div{} span{} 2.类选择器 语法： .类名{} 例如：.box{} .red{} .blue{} .green{} 3.id选择器 语法： #id名{} 例如：#box{} #red{} #blue{} #green{} /*次要*/ 4.属性选择器 语法： [属性名]{} 例如：[title]{} 5.伪类选择器 语法： 元素名:伪类名{} 例如：a:hover{} 6.伪元素选择器 语法： 元素名::伪元素名{} 例如：p::first-letter{} 7.组合选择器 语法： 元素名1 元素名2{} 例如：p span{} 8.群组选择器 语法： 选择器1,选择器2,选择器3{} 例如：p,h1,div{} 9.继承选择器 语法： 元素名1 元素名2{} 例如：p span{} 10.后代选择器 语法： 元素名1 元素名2{} 例如：p span{} 11.子元素选择器 语法： 元素名1 > 元素名2{} 例如：p > span{} 12.相邻兄弟选择器 语法： 元素名1 + 元素名2{} 例如：p + span{} 13.通用兄弟选择器 语法： 元素名1 ~ 元素名2{} 例如：p ~ span{} 14.否定选择器 语法： 元素名1:元素名2{} 例如：p:元素名2{} 15.优先级选择器 语法： 元素名1:元素名2{} 例如：p:元素名2{} 16.通配符选择器 语法： 元素名1:元素名2{} 例如：p:元素名2{} 17.属性选择器 语法： 元素名1:元素名2{} 例如：p:元素名2{} 18.伪类选择器 语法： 元素名1:元素名2{} 例如：p:元素名2{}
元素选择器
语法格式：标签名{ }
在{ }中的css样式会作用到所有标签名对应的标签上
缺点：若某些同名标签的元素不希望使用某些样式，不能与其他同名标签的元素区分
1.元素选择器 根据标签名确定作用元素 语法： <style> 标签名{} </style> 缺点：同名元素不希望使用一些样式，或不同名元素希望使用该样式都无法使用
类选择器
class选择器根据元素的class属性值确定样式的作用元素
元素的class属性值可以重复，而且一个元素的class属性可以有多个值，多个属性之间用空格分开
语法：.class属性值{ }
类选择器 语法： .类名{} class属性值可以有一个，也可以有n个，不同标签可以使用同一个class
id选择器
id选择器根据标签的id值确定样式的作用元素
一般每个元素都有id值，但是在一个页面中，id的值不应该相同，应该具有唯一性
语法格式：#id值{ }
缺点：因为id值有唯一性，通过id选择器指定的样式只能作用到一个元素上
id选择器 根据id值确定作用元素 一般每个元素都有id属性。但每个页面中不应该相同，所有id具有唯一性 语法： #id名{}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<!--1.元素选择器 根据标签名确定作用元素
语法：
<style>
标签名{}
</style>
缺点：同名元素不希望使用一些样式，或不同名元素希望使用该样式都无法使用 -->
<style >
input {
width: 220px;
height: 80px;
background-color: chartreuse;
color: white;
border: 3px solid green;
font-size: 22px;
font-family: '微软雅黑';
line-height: 30px;
border-radius: 5px;
}
</style>
<!--
3.id选择器 根据id值确定作用元素
一般每个元素都有id属性。但每个页面中不应该相同，所有id具有唯一性
语法：
#id名{}
-->
<style>
#id1 {
width: 220px;
height: 80px;
background-color: #00c4ff;
color: #1d4d53;
border: 3px solid #806600;
font-size: 22px;
font-family: '微软雅黑';
line-height: 30px;
border-radius: 5px;
}
#id2 {
width: 220px;
height: 80px;
background-color: #00c4ff;
color: #1d4d53;
border: 3px solid #806600;
font-size: 22px;
font-family: '微软雅黑';
line-height: 30px;
border-radius: 5px;
}
#id3 {
width: 220px;
height: 80px;
background-color: #00c4ff;
color: #1d4d53;
border: 3px solid #806600;
font-size: 22px;
font-family: '微软雅黑';
line-height: 30px;
border-radius: 5px;
}
</style>
<!--
2.类选择器
语法：
.类名{}
class属性值可以有一个，也可以有n个，不同标签可以使用同一个class
-->
<style>
.colorClass{
background-color: springgreen;
color: violet;
border-color: wheat;
}
.dxClass{
width: 300px;
height: 100px;
font-size: 50px;
line-height: 50px;
border-radius: 10px;
}
.字体class{
font-family: 楷体;
border: 6px solid red;
}
</style>
</head>
<body>
<!--CSS选择器
/*主要*/
1.元素选择器
语法：
<style>
标签名{}
</>style>
例如：p{} h1{} div{} span{}
2.类选择器
语法：
.类名{}
例如：.box{} .red{} .blue{} .green{}
3.id选择器
语法：
#id名{}
例如：#box{} #red{} #blue{} #green{}
<h1>元素选择器</h1>
<input type="button" value="崩铁启动"/>
<input type="button" value="崩坏3启动"/>
<input type="button" value="鸣潮启动"/>
<h1>id选择器</h1>
<input id="id1" type="button" value="崩铁启动"/>
<input id="id2" type="button" value="崩坏3启动"/>
<input id="id3" type="button" value="鸣潮启动"/>
</body>
<h1>class选择器</h1>
<input class="colorClass 字体class dxClass" type="button" value="崩铁启动"/>
<input class="dxClass colorClass 字体class" type="button" value="崩坏3启动"/>
<input class="dxClass colorClass 字体class"type="button" value="鸣潮启动"/>
</html>
3.CSS浮动
css的浮动使得元素脱离文档流，按照指定的方向（左或右发生移动），直到它的边缘碰到包含框或另一个浮动框的边框为止。
浮动后一定不会将文字挡住，文字会被挤到别的方向，就像水一样。
文档流是文档中可显示对象在排列时所占用的位置，脱离文档流就是在页面中不占位置了。
一个元素脱离文档流后，它在文档流中的下一个元素就会占用它的位置。
浮动 float： right：右 left：左
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css浮动</title>
<style>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid green;
background-color: beige;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.d1{
background-color: aqua;
float: right;
}
.d2{
background-color: rgb(255, 0, 0);
}
.d3{
background-color: rgb(255, 255, 0);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv d1">diva</div>
<div class="innerDiv d2">divb</div>
<div class="innerDiv d3">divc</div>
</div>
</body>
</html>
注：浮动后的元素不会覆盖其他元素。
4.CSS定位
css定位要用到的样式有position、left、right、top、bottom
绝对定位代表定位只根据页面来定位relative相对定位会相对其原本的位置来定位
fixed相对定位会相对浏览器窗口来定位，即如果页面较长，可以向下拖拽，但是不论如何拖拽，都会显示在窗口的同一个位置，一些广告就是如此。
一般left和right之中只用其中一个，top和bottom之中只用其中一个。
position： static： 默认 absolute： 绝对 relative 相对元素原本位置 fixed 相对页面(动态小广告)
5.CSS盒子
对于一个块元素，width和height表示横向和纵向的容量，border是在容量的边缘外再加上指定像素的空间的厚度的空间，就像给此块元素套了层细胞壁。而内边距和外边距是根据border的内外，指定一定的区域留空，内边距的大小不会影响容量，而是将border项外扩张，就像扩大细胞壁和细胞膜的间距。
Margin(外边距) - 清除边框外的区域，外边距是透明的； Border(边框) - 围绕在内边距和内容外的边框； Padding(内边距) - 清除内容周围的区域，内边距是透明的； Content(内容) - 盒子的内容，显示文本和图像；
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS盒子</title>
<style>
.outerDiv {
width: 800px;
height: 300px;
border: 1px solid green;
background-color: rgb(230, 224, 224);
margin: 0px auto; /*居中*/
}
.innerDiv {
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
margin: 10px 20px 30px 40px;
}
.d1 {
background-color: greenyellow;
/*padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;*/
padding: 10px 20px 30px 40px;
}
.d2 {
background-color: rgb(79, 230, 124);
}
.d3 {
background-color: rgb(26, 165, 208);
}
</style>
</head>
<body>
<!--
Margin(外边距) - 清除边框外的区域，外边距是透明的；
Border(边框) - 围绕在内边距和内容外的边框；
Padding(内边距) - 清除内容周围的区域，内边距是透明的；
Content(内容) - 盒子的内容，显示文本和图像；
-->
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
</html>
以margin为例，margin: 10px; 表示上下左右都是10px的外边距。margin: 10px 20px; 表示上下外边距是10px，左右外边距是20px。margin: 10px 20px 30px 40px表示上外边距是10px，右外边距是20px，下外边距是30px，左外边距是40px，即按顺时针上右下左的顺序。当然也可以使用margin-right，margin-top等方法分别指定大小。
padding也是同理。
margin-auto和padding-auto即自动居中。