目录
1 什么是css以及css的组成
1.1什么是css
CSS 是一种描述 HTML 文档样式的语言。简称html的化妆师。
1.2CSS的组成
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
2 CSS选择器🔥
css有四种选择器：
2.1class选择器
.red{color:#fff;text-align:center}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
text-align: center;
}
</style>
</head>
<body>
<!-- 类选择器 -->
<p class="red">这是类选择器</p>
</body>
</html>先把<style>标签写进<head>标签中，然后.red{}进行操作。
2.2id选择器
#red{color:#fff;text-align:center}
<style>
#greed {
color: green;
}
</style>
</head>
<body>
<!-- id选择器 -->
<p id="greed">这是id选择器</p>
</body>
注意：id选择器中用#表示，而class用.表示。
2.3标签选择器
p {color:#fff;text-align:center}
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>
直接引用p标签。
2.4通配符选择器
* {color:#fff;text-align:center}
<style>
* {
color: chocolate;
}
</style>
</head>
<body>
<div>这是div标签</div></div>
<p>这是p标签</p>
</body>
2.5选择器小总结：
3 Fonts(字体)🔥
Fonts用于设置字体的样式、粗细、大小、字体。
.test{
font-family:'微软雅黑'; <!-- 后面可以用中文也可以用英文建议英文 -->
font-weight:400; <!-- 数字后面没有px -->
font-size:16px; <!-- 谷歌浏览器默认文字大小为16px -->
font-style:normal;
}
<style>
.red {
color: red;
font-style: oblique;
font-size: 16px;
font-weight: 400;
font-family: '微软雅黑';
}
p {
color: blue;
font: normal 400 20px '微软雅黑';
}
</style>
</head>
<body>
<h1 class="red">你好呀~</h1>
<p>祝你成功</p>
<p>心想事成</p>
<p>一路发发发</p>
</body> 
注意：当使用font:连用时注意他的顺序必须是样式（font-style）、粗细（font-weight）、大小（font-seiz）、样式（font-family）的顺序，其中样式和粗细是可以省略的。
4 TEXT（文本）🔥
文本包括设置字体的颜色、居中，左对齐，右对齐、下划线的添加和删除、行间距的大小。
.test {
color: red;
text-align: center; <!-- 其中还有left和right-->
text-index: 2em
text-decoration: none;
line-height: 20px <!-- 行高减去文字的大小除二才是文字上下的大小-->
}
<style>
h1 {
text-align: center;
}
p {
text-indent: 2em;
line-height: 32px;
color: #4d4f53;
font-size: 18px;
}
.font {
line-height: 30px;
font-size: 16px;
color: #888;
}
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<h1>双11观察：不能一边污染，一边提倡低碳</h1>
<hr>
<div>
<span class="font">2022年11月8日</span>
<span class="font"><a href="#">gh网</a></span>
</div>
<hr>
<p>今天你过度消费了吗？</p>
<p>今年的“双11”，硝烟依然从10月下旬开始点燃。除了淘宝、京东、拼多多、唯品会等老牌电商平台一如既往以促销战术大打价格战，
抖音、快手、B站等短视频平台也纷纷加入这场消费狂欢。而以李佳琦、罗永浩、俞敏洪和苏醒为首的“新四大天王”，
以迥异的风格，细分的受众，在激烈的厮杀中脱颖而出，成为直播带货的新晋顶流，为网友的消费热情加注了一腔热气腾腾的高浓
度鸡血。</p>
</body> 
5 CSS复合选择器🔥
5.1后代选择器
元素1 元素2 {样式声明} <!-- 元素1、2之间需要空格隔开；改变的样式只有元素2的；元素2可以是儿子、孙子。。。-->
<style>
ul li a {
color: #000;
}
ul li {
color: coral;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li><a href="#">链接</a></li>
</ul>
5.2子代选择器
元素1 > 元素2{样式声明} <!-- 表示选择元素1里面的所有直接后代（子元素）元素2-->
<style>
.nav>a {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">儿子</a>
<p>
<a href="#">孙子</a>
</p>
</div>
注意：元素1和元素2之间用大于号隔开
元素1是父级元素2是子集，最终选择是元素2
元素2是父级的亲儿子，父亲只管亲儿子，其他的元素都不管。
5.3并集选择器
元素1，元素2 {样式声明}
<style>
.nav,
p,
span {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
1
</div>
<p>2</p>
<span>3</span>
</body>
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器通过英文逗号（,）连接而成，任何形式的选择器都可以成为并集选择器的一部分。
5.4链接伪类选择器
为链接添加特殊的效果。
最大的特点是用冒号： 表示
如 a:link 选择所有未被访问的链接
a:visited 选择所有被访问过的链接
a:hover 选择鼠标经过的链接
a:active 选择鼠标点了但链接还没有弹出来的链接
顺序不能变！
a链接标签是不能用Body这种标签一起改样式的；
一般来说并不需要所有的链接样式（一般就用到a:hover)，可以先给标签a指定样式，再用a:hover，如：
<style>
a {
color: orange;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="#">=这是一个链接</a>
</body>
当鼠标移到文字上时可以变化颜色。
5.5 focus伪类选择器
focus伪类选择器用于选取获得焦点（光标）的表单元素。
<style>
input:focus {
background-color: orange;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
当鼠标选中框时，会有背景颜色显示
6 CSS的显示模式 🔥
定义：元素（标签）以什么方式进行显示，比如< div>自己占一行，一行可以放多个< span>
HTML元素一般分为块元素和行内元素两种类型
6.1 块元素
h1-h6 p div ul ol li 都是块元素
例如：
1.自己独占一行
2.宽度高度内外边距可以编辑
3.宽度不指定的话则和父级宽度一样
4.是一个容器及盒子，里面可以放行内或者块级元素
注意：文字类的元素内不能使用块级元素
6.2 行内元素
a strong b em i del s ins u span…
1.一行可以显示多个，相邻行内元素在一行上
2.高宽的设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其它行内元素
注意：
链接里面不能再放链接
特殊情况链接< a >里面可以放块级元素，即点击块级元素就能跳转到链接，但是给< a>转换一下块级模式最安全
6.3 行内块元素
img input td 同时具有块元素和行内元素的特点
1.和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个
2.默认宽度就是他们本身内容的宽度
3.高度，行高，内外边距都可以控制
6.4 元素显示模式的转化
转为块元素：dispaly:block;(转换常常转为块元素，因为要改变其高度和宽度）
转为行内元素：dispaly:inline;
转为块元素：dispaly:inline-block;
<style>
a {
display: block;
width: 234px;
height: 42px;
background-color: #474545;
color: white;
text-indent: 2em;
/* 单行文字垂直居中 */
line-height: 42px;
text-decoration: none;
}
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机</a>
<a href="#">电视</a>
<a href="#">家电</a>
<a href="#">电脑</a>
<a href="#">耳机</a>
</body>
7 CSS的背景🔥
7.1 背景颜色
background-color: orange;
7.2 背景图片
background-image: none | url(); <!-- 默认是none-->
body {
background-color: orange;
background-image: url(wzry.jpg);
}
7.3 背景平铺
<style>
div {
width: 200px;
height: 200px;
background-color: orange;
background-image: url(ttt.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body> 
注意：默认情况下是平铺。
7.4 背景图片位置
background-position: x y; x,y代表坐标可以用方位名词或精神单位。
div {
width: 200px;
height: 200px;
background-color: orange;
background-image: url(ttt.png);
background-repeat: no-repeat;
background-position: center,center;
}
</style>
</head>
<body>
<div></div>
</body>
如果两个参数都是方位名词那么
left top和top left一样，right center 和center right也是一个道理（因为right肯定是x轴的参数）；
如果省略其中一个参数则默认居中；
如果参数是精确单位那么
顺序为x y；
如果只指定一个值则另一个一定是y居中；
如果参数是混合单位
则顺序肯定是xy
7.5 背景的固定
background-attachment: 默认为scroll 固定为fixed
7.6 背景的复合写法
习惯性约定：
color image repeat attachment position(没有强执行要求）
<style>
div {
width: 200px;
height: 200px;
/* background-color: orange;
background-image: url(ttt.png);
background-repeat: no-repeat;
background-position: center,center; */
background: url(ttt.png) no-repeat scroll center,center;
}
</style>
</head>
<body>
<div></div>
</body>
7.7 背景颜色半透明
background: rgba(0,0,0,0.3)
rgb还是红绿蓝 a代表alpha透明度，0-1取值（由全透明到完全不透明）
可以把0.3写成.3
（只是让背景颜色半透明!盒子里的内容无影响，文字…不变）
<style>
div {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
7.8 背景总结
8 CSS三大特性🔥
8.1层叠性
有两个相同的选择器时采取就近原则。
<style>
div {
color:skyblue;
font-size: 20px;
}
div {
color: orange;
}
</style>
</head>
<body>
<div>覆盖，覆盖</div></div>
</body>
当样式冲突，遵循就近原则，即那个样式离结构近，就执行哪个样式；样式不冲突不会层叠。
8.2继承性
子元素可以继承父元素的样式（text- font- line-(height ) color）但是高度、盒子模型等都不可继承。
<style>
div {
color:skyblue;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>继承</p>
</div>
Inherited from 意思是继承于
文字大小的继承
<style>
div {
color:skyblue;
font: 12px/1.5 '微软雅黑';
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<div>
<p>继承</p>
</div>
</body> 
14*1.5=21 所以p标签中的文字为21像素
8.3优先性
同一个元素指定多个选择器，则会有优先级产生。
选择器相同则执行层叠性，选择器不相同则执行优先性。
优先级由若到强向下，注意权重数值。比较从左往右比较数值大小，权重叠加时永远只有叠加没有进位。
| 选择器 | 选择器权重 |
| 继承或* | 0 |
| 元素选择器 | 1 |
| 类选择器，伪类选择器 | 10 |
| id选择器 | 100 |
| 行内样式style | 1000 |
| !important | 无穷大 |
9 盒子模型 🔥
9.1盒子模型的组成
boder边框 content内容 padding内边距 margin外边距
9.2 边框(border)
border: border-width | border-color | border-style
| border-width | 定义边框的粗细，单位为px |
| border-color | 改变边框的颜色 |
| border-style | 改变边框的样式其中 |
<style>
div {
background-color: pink;
width: 202px;
height: 200px;
border-width: 2px;
border-color: orange;
border-style: solid;
color:skyblue;
font: 12px/1.5 '微软雅黑';
}
</style>
</head>
<body>
<div>
<p>继承</p>
</div>
</body>
边框的复合写法
顺序为border-width | border-style | border-color
<style>
div {
background-color: pink;
width: 202px;
height: 200px;
/* border-width: 2px;
border-color: orange;
border-style: solid; */
border: 4px solid skyblue;
color:skyblue;
font: 12px/1.5 '微软雅黑';
}
</style>
</head>
<body>
<div>
<p>继承</p>
</div>
</body>
也可以单独修改边框，如只修改上边框
div {
background-color: pink;
width: 202px;
height: 200px;
border-top: 5px solid orange;
color:skyblue;
font: 12px/1.5 '微软雅黑';
}
</style>
</head>
<body>
<div>
<p>继承</p>
</div>
</body>
上下左右都是相同的方法。
注意：设置border边框属性时，会撑大盒子如图
刚开始设置盒子的宽为200px，高为200px，border为20px，则盒子就为240px，240px
9.3 内边距 (padding)
padding-left: px 上下左右同理
<style>
div {
background-color: pink;
width: 200px;
height: 200px;
padding-top: 20px;
padding-left: 20px
}
</style>
</head>
<body>
<div>
<p>Come and 喂</p>
</div>
</body>
padding的复合写法
注意：内边距也会影响盒子大小和上面border同理
但是如果当盒子没有设置宽度和高度的时候，border就不会影响盒子的大小
<style>
h1 {
height: 200px;
background-color: skyblue;
padding: 20px;
}
</style>
</head>
<body>
<h1>Come and 喂</h1>
</body>
不会影响宽度，只会影响高度。
9.4外边距(margin)
控制盒子与盒子之间的距离
margin-top 上下左右同理
margin的复合写法和padding的一样
外边距可以让块级盒子居中但必须满足两个条件：
1.盒子必须设置宽度
2.外边距左右两边都设置为auto
.nav{width: 200px;margin: 0,auto}
<style>
div {
background-color: skyblue;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
margin的三种写法:
1.margin-left: auto;margin-right: auto;
2.margin: auto;
3.margin: 0 auto;
9.5 嵌套块元素垂直外边距合并(父元素塌陷问题)
对于标准流的嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
问题：
<style>
.farther {
width: 400px;
height: 400px;
background-color: orange;
/* border: 1px solid transparent; */
/* padding: 1px; */
/* overflow: hidden; */
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<div class="farther">
<div class="son"></div>
</div>
</body>
如图所示当son的margin往下移时farther也会跟着往下移动。
解决办法有三种：
1.添加border: 1px solid transparent(透明)
2.指定padding: 1px
3.overflow: hidden（推荐）
<style>
.farther {
width: 400px;
height: 400px;
background-color: orange;
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<div class="farther">
<div class="son"></div>
</div>
</body>
问题解决。
9.6 清除内外边距
网页元素很多都带有默认的内外边距且不同浏览器不一样，在布局前要先清除网页元素内外边距
* {border: 0;margin: 0}
去掉无序列表前面的黑圆点ul li 的点
list-stay: none;
10 CSS上结束如有问题欢迎指教！
CSS下持续更新中，请等待~