写在标签的属性里面，直接使用
样式写在<style></style>标签之间
为一个独立的.css文件，需要通过<link href="路径"/>导入以便使用
优先级：(就近原则)内联样式>内部样式表>外部样式表
font-weight bold定义粗体字符
100-900(粗细程度)
font-style字体风格 normal默认/italic斜体
font-family字体类型 隶书、楷体等
font-size 字体大小
color 设置文本的颜色
line-height 设置文本的行高
text-indent 设置首行文本缩进
text-align 设置元素水平对齐方式
left（左对齐） center（居中） right（右对齐）
text-decoration 设置文本的装饰
none：默认，标准文本
underline：定义文本下划线
overline：定义文本上划线
line-through：定义穿过文本的一条线
01 default
默认光标 02 help
指示可用的帮助
03 text
指示文档 04 crosshair
鼠标呈现十字状
05 wait
等待状态 06 pointer
超链接指针
background-color 背景颜色
background-image:url（图片路径） 背景图片地址
background-repeat 背景重复方式
no-repeat不重复 repeat-x水平重复 epeat-y垂直重复 repeat默认重复
background-position 背景定位
水平方向：left center right
垂直方向：top center bottom
background-size不能在缩写里设置
背景样式简写background：图片地址，图片重复方式，背景颜色，背景定位
list-style-type
list-style-image
list-style-position
列表样式简写list-style：列表标记属性，自定义列表标记图片，列表标记定位
用法： 标签:伪类{}
常用伪类有以下四个：
link（点击访问前） visited（单击访问后） hover 鼠标悬浮其上 active单击未释放
CSS伪类样式设置时按照此顺序
用法： 标签::伪元素{}
常用伪元素有以下两个：after(之后),before(之前)
边框（border）
border-top同时设置上边框 border-right同时设置右边框
border-bottom同时设置下边框 border-left同时设置左边框
边框样式(border-style)
none：无边框
solid：实线边框
dashed：虚线边框
dotted：点状边框
double：双线边框
hidden：与none相同，应用于解决边框冲突
边框颜色(border-color)
边框粗细(border-width)
padding内边距（同分上下左右）
box-sizing: content-box(默认)
盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
以撑开盒子的方式来调整位置
border-box
盒子的实际高度和宽度包括元素内容、边距和内边距
调整位置不会撑开盒子
margin外边距(分上下左右）
当margin-bottom设置的距离>当前页面margin-bottom时,右侧出现滚动条
但margin-right不会,不会出现左右滚动条
盒子模型有四个方位的属性简写：
【4个】xxxx简写：上 右 下 左(顺时针)
【2个】xxxx简写：上下 左右
【1个】xxxx简写：上下左右
由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
*/ div.one{}
多个选择器通过逗号连接而成
没有先后顺序
*/ h1,span,em{}
外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔
使用标签选择器、地选择器、类选择器没有先后顺序
*/div span{}
通过>连接在一起而成
仅作用于子元素
*/div>h1{}
选取带有指定属性的元素
选取带有指定属性和值的元素
*/input[name]{}
<h1> - <h6>、<p>、<div>、列表等
<span>、<a>、<img>、<strong>等
控制元素的显示和隐藏
块级元素和内联（行内）元素的转变
none:设置元素不会被显示
inline：元素显示为行内元素
block：元素会被显示为块级元素
inline-block：行内块元素
top：相对自身原来位置向顶部进行偏移
left: 相对自身原来位置向左侧进行偏移
right 相对自身原来位置向右侧进行偏移
bottom: 相对自身原来位置向底部进行偏移
1.fixed 固定定位
(1) 使用了固定定位的元素【会】脱离标准文档流 宽度由文字撑开,原本位置被占领
(2) 基于 【浏览器窗口】进行偏移
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
2.relative 相对定位
(1) 使用了相对定位的元素【不会】脱离标准文档流
(2) 基于自身原来在网页的位置 进行偏移
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
3.absolute 绝对定位
(1) 使用了绝对定位的元素【会】脱离标准文档流
(2) 使用了绝对定位的元素以它最近的一个“已经的行为”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位
(3) 所有定位元素都基于top、left、right、bottom四个方位进行偏移
float：是css样式中的定位属性，用于设置标签对象的浮动布局。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
left元素向左浮动 right元素向右浮动 none默认值，元素不浮动
clear属性
none：默认值，允许浮动元素出现在两侧
left：在左侧不允许浮动元素
right：在右侧不允许浮动元素
both：在左、右两侧不允许浮动元素
overfloat属性
auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出内容
hidden：内容会被修剪，并且超出的内容是不可见的
visible：默认值。内容不会被修剪，会呈现在盒子之外
英文单词或数字写在div里时要设置word-break:break-all
补充：
/* 去掉标签默认边框 */
outline: none;
/* 去掉浏览器提供的默认样式 */
-webkit-appearance: none;
/* box-shadow:水平阴影距离 垂直阴影距离 阴影模糊距离 阴影颜色 */
transition: linear 3s width; /*transition:匀速 时间 变化的属性 */
transform: scale(1.2); /*transform：scale(倍数) */
