1、css导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 第一种导入方式-->
<style type="text/css">
@import "index.css";
</style>
<!-- 第二种导入方式-->
<style>
p{
background: azure;
}
</style>
<!-- 第三种导入方式-->
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>注册页面</h1>
<form method="post" enctype="multipart/form-data">
<p>用户名
<input type="text" placeholder="用户名">
</p>
<p>密码
<input type="password" placeholder="密码">
</p>
<!-- 第四种导入方式-->
<p style="background: aquamarine">style</p>
<div>这是链接式导入css</div>
</form>
</body>
</html>
2、css选择器
通用选择器 （*）：样式作用于所有标签
标签选择器（标签名） ：通过标签名来使用样式
ID选择器（#） ：根据ID名来匹配样式
class选择器（.） ：根据class名来匹配样式
后代选择器 .c p{color:red;} 只改变p标签的颜色
子代选择器 .c>p{color:red;} 只子儿子层找
多元素选择器 .div,p{color:red;} 改变p和div标签的颜色
3、css属性操作
文本属性
文本颜色
color:red 文本颜色为红色
color:green 文本颜色为绿色
格式： color：颜色
对齐方式
text-align:center 居中对齐
text-align:right 右边对齐
text-align:justify 两端对齐
text-align:left 左边对齐
vertical-align:-20px; 设置元素的垂直对齐方式
文本大小
font-size: 10px;
首行缩进10px
text-indent:10px;
字母间距10px
letter-spacing:10px;
单词间距
word-spacing:10px;
首字母大写
text-transform:capitalize;
所有字母大写
text-transform:uppercase;
所有字母小写
text-transform:lowercase;
浏览器显示一个标准的字体样式
font-style:normal;
浏览器会显示一个斜体的字体样式
font-style:italic;
浏览器会显示一个倾斜的字体样式
font-style:oblique;
从父元素继承字体样式
font-style:inherit;
删除链接的下划线
text-decoration:none;
加上下划线
text-decoration:underline;
设置文本的粗细
font-weight
背景属性
background-color:red; 背景颜色
background-image:url('图像路径')； 背景图像
background-repeat:no-repeat;前面设置的图像不重复
background-repeat:repeat;前面设置的图像重复
background-position：10px,10px;以10 10 背景图像的位置
盒子属性
外边距
margin-bottom:10px;下外边距为10
margin-left:10px; 左外边距为10
margin-right:10px; 右外边距为10
margin_top:10px; 上外边距为10
简写：
margin:10px 20px 30px 40px; 上右下左
margin:10px 5px 1px; 上10，右左5，下1
margin:10px 5px; 上下10，左右5
内边距
padding 用法同margin
边框属性 border
border-style:solid；定义实线
border-style:dotted;定义点状边框
border-style:dashed;定义虚线
border-style:double;定义爽线
边框颜色
border-color:red green blue black;
边框宽度
border-width:thin;定义细的边框
border-width:medium;默认
border-width:thick;定义粗的边框
border-width:length;自定义边框
设置列表项标记的类型
list-style-type:none; 无标记
list-style-type:circle; 标记是空心圆
list-style-type: square; 标记是实心方块
list-style-type: disc; 默认，标记是实心圆
display属性
display:inline;将块级标签设置成内联标签
display:block;将内联标签设置成块级标签
display:inline-block;具有块级标签和内联标签的属性（像块级标签一样设置长宽，像内联一样在一行显示）
display:none;隐藏元素，而且该元素占用的空间也消失
visibility:hidden隐藏元素，但是占用空间存在
内联标签不能设置长宽
溢出处理
overflow（定义溢出元素内容区的内容如何处理）
/*overflow: visible; 内容不会被修改，会呈现在元素框之外*/
/*overflow: hidden; !*内容会被修改，并且其余内容不可见*!*/
/*overflow: scroll; !*内容会被修剪，但是会显示其余内容*、*/
overflow: auto;/*如果内容被修改，会显示其余内容*/
设置元素透明度
opacity:value; 规定不透明度，从0.0（完全透明）到1.0（完全不透明）
clear规定元素的那一侧不允许有其他浮动元素
clear: left; 不允许左侧有浮动元素
clear: right; 不允许右侧有浮动元素
clear: both; 左右两侧不允许有浮动元素
clear: none; 允许左右两侧有浮动元素
float定义元素在哪个方向浮动
float：left; 元素向左浮动
float：right; 元素向右浮动
float: none; 元素不浮动
position规定元素的定位类型
position: absolute; 绝对定位的元素，相对于static定位以外的第一个父元素进行定位
position: static; 默认值，无定位
position: relative; 相对定位，参照自己本身位置定位
position: fixed; 绝对定位，相对于浏览器窗口进行定位
z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
z-index: auto；默认。堆叠顺序与父元素相等
z-index: number;设置元素的堆叠顺序,值越大越在前面
top规定元素的顶部边缘。一个定位元素的上外边距边界与其包含块上边界之间的便宜
bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移
left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
 是空格
line-height:10px; 设置行间距（行高）