CSS的概念
Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效
CSS的好处
- 功能强大
- 将内容展示和样式控制分离
*降低耦合度——解耦
*让分工协作更容易
*提高开发效率
CSS的使用：CSS与html结合
一、内部样式
在head标签内，定义style标签，style标签的标签体内容就是CSS代码
<head>
<metacharset="UTF-8">
<title>标题</title>
<style>
div{
color: aqua;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
二、外部样式
- 定义CSS资源文件
- 在head标签内，定义link标签，引入外部的资源文件
<!-- 输入标签名或者标签名的一部分，然后按下Tab键,idea自动补全代码-->
<linkrel="stylesheet"href="css/a.css">
选择器
- 格式：
选择器 {
属性名1:属性值1；
属性名2:属性值2；
……
} - 选择器：筛选具有相似特征的元素
- 注意点：每一对属性需要使用；隔开，最后一对属性可以不加
一、基本选择器
id建议唯一，class可重复
1.id选择器
选择具体id属性值的元素
语法：#id属性值{}
2.元素选择器
选择具有相同标签名称的元素
语法：标签名称{}
3.类选择器
选择具有相同的class属性值的元素
语法：.class属性值{}
二、扩展选择器
1.选择所有元素
语法：*{}
2.并集选择器
语法：选择器1，选择器2{}
3.子选择器
语法：选择器1 选择器2{}
筛选选择器1元素下的选择器2元素
4.父选择器
语法：选择器1 > 选择器2{}
筛选选择器2的父元素选择器1
5.属性选择器
语法：元素名称[属性名=“属性值”]{}
选择元素名称，属性名=属性值的元素
适用input标签的type属性
6.伪类选择器
选择一些元素具有的状态
语法：元素：状态{}
例如：<a>状态有
link：初始化的状态
visited：被访问过的状态
active：正在访问的状态
hover：鼠标悬浮的状态
a:link{
color: #1E9FFF;
}
属性
1.字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：对齐方式
style="text-align: center;" //文字居中
- line-height：行高
2.背景
- background：背景，复合属性
3.边界
- border：设置边框，复合属性
style="margin: 4px; border-bottom: dotted #ccc;padding: 4px;"
//外边距为4px，下边界为点缀型，颜色#ccc，内边距为4px
4.尺寸
- width：宽度
- height：高度
div{
background: url("image/DominusNoob.jpg") no-repeatcenter;
border: 1pxredsolid;
width: 1000px;
height: 1000px;
}
| 值 | 描述 |
| auto | 默认。浏览器会计算出实际的高度。 |
| length | 使用 px、cm 等单位定义高度。 |
| % | 基于包含它的块级对象的百分比高度。 |
| inherit | 规定应该从父元素继承 height 属性的值。 |
5.盒子模型：控制布局
padding：内边距
- 内边距会影响整个盒子的大小。因为内容是固定的，修改内边距（内容与边界的距离），等于修改盒子大小
- box-sizing：border-box；设置盒子的属性，让width和height就是最终盒子的大小
.div1{
width: 200px;
height: 200px;
border: 1pxredsolid;
padding: 50px;
box-sizing: border-box;
}
padding: 8px 16px; //上下的内边距是8px，左右的内边距是16px
margin：外边距
margin:20px 上下左右外边距都是20px
margin: 10px 0px; //上下10px，左右0px
float：浮动
盒子默认换行，若想让盒子不换行，就添加浮动属性
非盒子模型的标签
经常会发现正常div的属性在a标签上或者p标签上都不管用，这是因为a标签和p标签都不是盒子模型。
例如：
<div style="margin-top:5px;"></div>
这是有效的距离，但是
<a style="margin-top:5px;"></a>
这就是无效的距离
原因很简单，margin是针对盒子的，a标签和p标签都不是盒子模型，但是可以把他们变成盒子模型
style="display:block"
变成块级元素后，就成为盒子模型了，就可以设置margin等属性了。
7. position
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
- static
- relative
- fixed
- absolute
- sticky
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
注意：
relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。
这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。
static
static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。
这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。
注意，static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
relative
相对定位
position: relative; 的元素相对于其正常位置定位
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。
fixed
固定定位
position: fixed; 的元素是相对于窗口定位的（固定的显示在屏幕上），这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。
固定定位的元素不会在页面中通常应放置的位置上留出空隙。
absolute
绝对定位
position: absolute; 的元素相对于 static 定位以外的第一个父元素进行定位
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用
注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
style="position: absolute;right: 10px;" //绝对定位，右边距父元素10px
8. z-index
zIndex 属性设置元素的堆叠顺序。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。
style="position: absolute;right: 10px;" //绝对定位，右边只剩下10px
style="position: fixed;width: 100%;z-index: 999;" //固定定位，宽度占窗口100%，
9. display
display 属性设置元素如何显示
| 值 | 描述 |
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
