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;前面设置的图像不重复