前引
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文件
行内式与嵌入式
<!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>外部式引入
<!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名{}
<!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：左
<!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(内容) - 盒子的内容，显示文本和图像；
<!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即自动居中。
)
_kaic)
