css简述
CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
作用及优势：
1.美化网页，提供了丰富的样式
2.与HTML代码分离，降低了代码耦合性
CSS的三种引入方式
1.行内引入：
<p style="color: red;">举个栗子叭</p>
特点：只能为指定元素添加样式
2。内部引入：
<style type="text/css">
p{
color: green;
}
</style>
特点：只能在该HTML文件中使用、
3.外部引入：
在css目录创建test.css文件：
p{
color: red;
}
可以在多个HTNL文档中引入该样式：
方式一：<link href="../css/demo.css" />
方式二：
<style>
@import url("../css/demo.css");
</style>
特点：可以在多个HTML文档中使用
注：由于html文档加载是由上而下的，所以下面的样式会覆盖上面的样式。
CSS选择器
元素选择器
根据元素/标签名进行选择
格式：
div{内容}
类名选择器
根据标签class值进行选择
格式：
.class值{内容}
ID选择器
根据标签id值进行选择
格式：
#id值{内容}
注：
1.id值在文档中是唯一的
2.由属性名和属性值构成，属性名和属性值用 “:”隔开
3.属性值有多个 ，值与值之间用 空格隔开
4.多个属性之间用";"隔开
CSS样式
边框背景样式
所有的HTML标签都有边框，默认边框不可见
| 属性名 | 属性说明 |
|---|---|
| border | 边框 |
| width | 宽度 |
| height | 高度 |
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 平铺方式 |
| no-repeat | 不平铺 |
字体
- font-size 字体大小
- color 颜色
布局
float（浮动）
应用场景：通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性
格式
选择器{
float:属性值
}
| 属性名 | 属性说明 |
|---|---|
| none | 元素不浮动 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
注：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的板式），从而会影响其他元素的样式，所以设置浮动以后，页面样式需要重新调整
clear（清除浮动）
应用场景：
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。
格式
选择器{
clear:属性值
}
| 属性名 | 属性说明 |
|---|---|
| both | 同时清除左右两侧浮动的影响 |
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
display（转换）
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素（div）和行内元素(span)。
块级元素：以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行，可以设置宽高
行内元素：根据内容多少来占用行内空间，不会自动换行，不可以设置宽高
常见的行内元素：
<span>、<font>、<a>
常见的块级元素：
<div>、<p>、<hn>
1、块级元素转行内元素
display：inline(显示当前元素为行内元素)
2、行内元素转块级元素
display：block(显示当前元素为块级元素)
3、隐藏元素
display：none 隐藏当前元素(不再占用空间)
CSS盒子模型
概念引入：所有的HTML元素，我们都可以看成一个四边形，即一个盒子。用CSS来设置元素盒子的 内边距、边框 和 外边距 的样式的方式，相当于设置盒子的样式，所以我们将其称之为 盒子模型
边框（border）可以设置：
- border-top:上边框
- border -right:右边框
- border -bottom:下边框
- border -left:左边框
内边距（padding）可以设置：
- padding-top:上边距
- padding-right:右边距
- padding-bottom:下边距
- padding-left:左边距
外边距（margin）可以设置：
- margin-top:上边距
- margin -right:右边距
- margin -bottom:下边距
- margin -left:左边距
转载：https://blog.csdn.net/ye398091/article/details/105258114