定义：层叠样式表 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 accusamus 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 accusamus 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 tenetur 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>
