CSS快速入门
CSS
引入方式
CSS 样式文件有两种引入方式，既可以写在 HTML 文件内，也可以作为独立的以.css结尾的文件存在
方式一：使用独立的 CSS 文件引入
当 CSS 样式作为单独的文件时，需要在 HTML 文件的<head>标签中使用link标签来引入该 CSS 文件。
例如，假设有一个名为styles.css的 CSS 文件，要将其引入到 HTML 文件中，需按以下方式在<head>标签内添加link标签：
<link rel="stylesheet" href="styles.css">
- 在上述代码中：
rel="stylesheet"的作用是表明所链接的文件为样式表，用于告知浏览器该文件的性质。href属性则用于指定 CSS 文件的具体路径。这里的路径可以是相对路径（也就是相对于当前 HTML 文件所在位置而言的路径），也可以是绝对路径（完整的文件访问路径）。
方式二：在 HTML 文件内定义 CSS 样式
如果选择将 CSS 样式直接写在 HTML 文件内，那就需要在 HTML 文件的末尾（通常建议放在<head>标签内）使用<style>标签来定义 CSS 样式，示例代码如下：
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
</style>
</head>
CSS 选择器
1. 元素选择器
根据 HTML 元素标签名来选择元素，例如p、h1、div等。
p {
font - family: Arial, sans - serif;
line - height: 1.6;
}
2. 类选择器
以一个点号（.）开头，后面跟着类名。它是通过 HTML 元素的class属性来选择元素，例如.header、.content等。
<button class="button">登录</button>
<input type="submit" class="button" value="注册"/>
. button {
background - color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
border - radius: 5px;
}
3. ID选择器
以一个井号（#）开头，后面跟着 ID 名称。它根据 HTML 元素的id属性来选择元素，例如#main - content、#navbar等。在一个 HTML 文档中，ID 应该是唯一的。
<div id="sidebar">
<ul>
<li>菜单1</li>
<li>菜单2</li>
</ul>
</div>
# sidebar {
width: 200px;
background - color: #F4F4F4;
padding: 10px;
}
常用CSS配置项
常用 CSS 配置项（完整请查看：W3school）
文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| font-size | 设置文本字号 |
| text-align | 对齐元素中的文本。值：left right center |
| vertical-align | 设置元素的垂直对齐方式。值：top middle bottom |
设置行内元素文本自动换行：
word-wrap: break-word
元素
| 属性 | 描述 |
|---|---|
| width | 宽度 |
| height | 高度 |
| line-height | 行高 |
| color | 字体颜色 |
| font-size | 字体大小 |
背景
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图像 |
| background-size | 设置背景图片的大小 |
盒子模型（Box Model）
一个盒子的组成包含：Margin外边距，Border边框，Padding内边距，Content内容。一、Border（边框）
组成
一、Border（边框）
- 除了像素值、实虚线、边框颜色这三个属性外，边框还可以通过
border-style属性设置具体的边框样式，如dotted（点状）、dashed（虚线）、double（双线）等。 - 可以单独设置某一边的边框，例如
border-top（上边框）、border-right（右边框）、border-bottom（下边框）、border-left（左边框），每个单独的边也可以分别设置像素值、样式和颜色。
二、Margin（外边距）
- 除了分别设置上、右、下、左的外边距值外，还可以使用
margin:auto来自动居中元素，通常与设置元素的宽度结合使用。 - 可以使用
margin:0 auto来实现水平居中，其中0表示上下外边距为 0，auto表示左右外边距自动分配，从而使元素在父容器中水平居中。
三、Padding（内边距）
- 同样可以单独设置某一边的内边距，如
padding-top、padding-right、padding-bottom、padding-left。 - 内边距会增加元素的总尺寸，在进行布局时需要考虑内边距对元素尺寸的影响。
四、boxShadow（元素阴影效果）
box-shadow属性可以接受多个参数，如box-shadow: h-shadow v-shadow blur spread color inset;，分别表示水平阴影位置、垂直阴影位置、阴影模糊半径、阴影扩展半径、阴影颜色和是否为内阴影（inset 表示内阴影，默认为外阴影）。- 例如
box-shadow: 5px 5px 10px #888888;表示在元素的右边和下边各产生 5 像素的水平和垂直阴影，模糊半径为 10 像素，阴影颜色为灰色。
五、border-radius（设置元素的外边框圆角）
- 可以分别设置四个角的圆角半径，如
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。 - 也可以使用简写形式，如
border-radius: 10px 20px 30px 40px;分别表示左上角、右上角、右下角、左下角的圆角半径。如果四个值相同，可以简写为一个值，如border-radius: 20px;。
flex布局
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
所有现代浏览器均支持 flexbox 属性。
如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
通过将 display 属性设置为 flex，flex 容器将可伸缩：
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<style>
.flex-container {
display: flex;
}
</style>
容器属性
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
flex-direction 属性
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
可选值：
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
可选值：
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
可选值：
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
可选值：
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的底部对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。