定义：层叠样式表 Cascading Style Sheets，控制页面的展示效果
1.基本语法规范
选择器 + 1/n条声明
- 选择器决定针对谁修改
- 声明决定修改啥
- 声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值
2.格式
style标签可放在head标签（通常）或body标签中，也可放在两标签之间
<style>
p {
color: red;
font-size: 40px;
}
</style>3.引入方式
内部样式表
通过style标签将css嵌套到html页面中，上方格式中的代码就采用这种方式
优点：让样式和页面结构分离
缺点：分离的不够彻底，尤其是css内容多的时候
行内样式表
<h1 style="color: blue; font-size: 20pxc;">你好</h1>行内样式表优先级高于内部样式表
外部样式表
创建一个.css文件，在head标签中使用link标签引入css
<link rel="stylesheet" href="/demo.css">4.选择器
4.1基础选择器
1> 标签选择器：格式中的代码即是标签选择器
2> 类选择器：差异化表示不同的标签，多个类名用于样式叠加
<p class="eat food">吃饭</p>
<p class="sleep">睡觉</p>.eat { ……
}
.food { ……
}
.sleep { ……
}3> id选择器：#开头
<p id="fe">前端开发</p>
<p id="server">后端开发</p>#fe { ……
}
#server{ ……
}4> 通配符选择器：使用 * 选取所有标签，在实际应用开发中用来针对页面中所有元素默认样式进行消除，主要用来消除边距
* {
color：red;
}4.2复合选择器
1> 后代选择器：又叫包含选择器，选择某个父元素中的某个子元素
ol li {
color: red;
}<ul>
<li>吃饭</li>
<li>睡觉</li>
</ul>
<ol>
<li>吃饭</li>
<li>睡觉</li>
</ol>2> 伪类选择器：定义元素状态
- a:link：选择未被访问过的链接
- a:visited：选择已被访问过的链接
- a:hover：选择鼠标指针悬停上的链接
- a:active：选择活动链接（鼠标按下了但未弹起）
a {
color:black;
}
a:hover {
color:red;
}
a:active {
color:green;
}
input {
color:blue;
}
input:hover {
color:black;
}
input:active {
color:red;
}<a herf="#">不跳转</a>
<br>
<input type="button" value="按钮">5.常用元素属性
5.1字体属性
外观：多个字体用逗号分隔，从左到右查找字体，找不到则使用默认字体
<!--style在head标签中-->
<style>
div {
font-family: 'Microsoft YaHei';
font-size: 60px;
}
</style>
<body>
<div>微软雅黑</div>
</body>颜色：三种表示方法，单词、十六进制形式、RGB方式
<style>
div {
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
</style>
<body>
<div>红色</div>
</body>粗细：normal (默认 400)、bold (粗体 700)、bolder (更粗)、lighter (更细)、inherit (继承父元素)
<style>
div {
font-weight: bolder;
font-weight: 300;
}
</style>
<body>
<div>粗体</div>
</body>样式：normal (默认)、italic (斜体)、oblique (倾斜)、inherit (继承父元素)
<style>
div {
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
}
</style>
<body>
<div>倾斜</div>
</body>5.2文本属性
位置：left、center、right
<style>
h1 {
text-align: left;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
</style>
<body>
<h1>靠左</h1>
<h2>居中</h2>
<h3>靠右</h3>
</body>缩进：单位使用 px 或 em，一个 em 就是当前元素的文字大小；缩进可以是负的，表示向左缩进
* lorem：生成长文字
<style>
div {
text-indent: 20px;
}
p {
text-indent: -2em;
}
</style>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas a***usamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas a***usamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati.</p>
</body>装饰： underline (下划线)、overline (上划线)、line-through (删除线)、none (啥都没有，可给a标签去掉下划线)
<style>
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
a {
text-decoration: none;
}
</style>
<body>
<div>hello world</div>
<p>delete</p>
<a href="#">不跳转</a>
</body>行间距：上下文本行之间的基线距离
基准线：顶线、中线、基线、底线
<style>
p {
line-height:40px;
}
</style>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio perspiciatis deleniti, sit doloribus quia perferendis eaque nobis. Optio quos te***ur suscipit in expedita at odio architecto, libero illum quo error!Lorem</p>
</body>5.3背景属性
颜色：同字体
<style>
div {
background-color: aqua;
}
p {
/* 背景透明 */
background-color: transparent;
}
</style>图片： URL可以加引号也可不加
<style>
div {
background-image: url(abc.jpg);
height: 300px;
}
</style>平铺：repeat (平铺 默认)、no-repeat (不平铺)、repeat-x (水平平铺)、repeat-y (垂直平铺)
<style>
div {
background-image: url(rose.jpg);
background-repeat: repeat-x;
}
</style>位置：相当于坐标轴 (x, y)
- 方位名词：（top，left，right，bottom）
- 精确单位：坐标或百分比（以左上角为原点）
- 混合单位：同时包含方位名词和精确单位
<style>
div {
background-image: url(flower.jpg);
background-position: top;
background-position: 200px,200px;
background-position: 100px,center;
}
</style>尺寸：
- 具体尺寸：20px 30px，表示（宽度 高度）
- 百分比：按照父元素尺寸设计
- cover：使背景图像完全覆盖背景区域
- contain：覆盖并使图像宽度高度完全适应内容区域
<style>
div {
background-image: url(tree.jpg);
background-size: 300px 400px;
background-size: contain;
}
</style>5.4文本框属性
使边框带圆角效果，length是内切圆的半径，数值越大，弧线越强烈
- 圆形：使length的值为正方形边长的一半
- 圆角矩形：：使length的值为矩形高度的一半
<style>
div {
width: 200px;
height: 200px;
border: 2px green solid;
border-radius: 50%;
}
</style>还可以对四个角分别设置：
<style>
div {
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-left-radius: 2em;
<!-- 顺时针 -->
/* border-radius: 10px 20px 30px 40px; */
}
</style>6.元素的显示模式
6.1块级元素
h1-h6 p div ul ol ……
6.2行内元素
a img ……
我们要做到是将行内元素与块级元素之间的转换：
- display：block 改成块级元素
- display：inline 改成行内元素
- display：inline-block 改成行内块元素
<style>
a {
/* 使两个a标签分别占用一行 */
display: block;
}
</style>
<body>
<a href="#">链接1</a>
<a href="#">链接2</a>
</body>7.盒模型
每一个Html元素相当于一个矩形的盒子
构成：边框border，内容content，内边距padding，外边距margin
7.1边框
- 粗细：border-width
- 样式：border-style 默认无边框，solid (实线)，dashed (虚线)，dotted (点线)
- 颜色：border-color
层叠性依据就近原则
<style>
div {
width: 200px;
height: 100px;
border-width: 10px;
border-style: solid;
border-color: green;
/* 支持混写，没有顺序要求 */
border: 2px dotted red;
/* 可改变四个方向的边框 */
border-top: 3px;
border-left: 4px;
}
</style>浏览器默认边框会撑大“盒子”，可使用box-sizing修改浏览器的行为
* {
box-sizing: border-box;
}7.2内边距
默认内容是顶着边框放置的，使用padding可控制这个距离
可给四个方向上都加上边距：padding-top/bottom/left/right
<style>
div {
width: 200px;
height: 100px;
padding-left: 5px;
padding-bottom: 3px;
/* 混合写法 */
padding: 5px; /*四个方向都是5px*/
padding: 5px 10px; /*上下内边距5px,左右内边距10px*/
padding: 2px 5px 10px; /*上内边距2px,左右内边距5px,下内边距10px*/
padding: 2px 5px 10px 20px; /*上右下左 顺时针*/
}
</style>7.3外边距
控制盒子和盒子之间的距离
可给四个方向上都加上边距：margin-top/bottom/left/right
<style>
div {
border: solid 10px red;
margin-top: 2px;
margin-bottom: 2px;
/*混合写法同内边距padding*/
/*块级元素水平居中*/
margin: auto;
margin-right: auto;
margin-left: auto;
}
</style>8.弹性布局
flex item，可以纵向排列，也可横向排列，称为flex direction (主轴)
- justify-content：设置主轴上的子元素排列方式 。start (居左 默认)、end (居右)、center (居 中)、space-between (均匀分布)
- align-items：设置侧轴上的子元素排列方式。start (居上 默认)、end (居下)、center (居 中)、space-between (均匀分布)
<style>
div {
height: 300px;
width: 400px;
background-color: green;
display: flex; /*弹性布局*/
justify-content: center; /*主轴*/
align-items: end; /*侧轴*/
}
div span {
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
