html不能没有css，就像西方不能没有耶路撒冷。
css在html文件中如何使用呢？
css在html中的使用主要有以下几种方式
1、内联样式
在HTML标签的style属性中直接定义CSS样式。
<p style="color: red;">这是一段红色的文字。</p>
这种方式的优点是简单快捷，而且一目了然，但是不利于维护，内容展示和样式没有实现解耦。
2、内部样式
在HTML文件的<head>标签内使用<style>标签定义CSS样式。
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>
内部样式的优点是样式与内容展示结构分离，但仅适用于当前HTML文件。
3、外部样式
将CSS样式定义在一个独立的外部CSS文件中，然后在HTML文件中通过<link>标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段红色的文字。</p>
</body>
//styles.css文件内容
p {
color: red;
}外部样式的优点是可以在多个HTML文件中共享样式，便于维护和复用。
导入样式
与外部样式类似，只是引入外部样式文件的方式不同，这里是在CSS文件中使用@import语句引入其他CSS文件。
<head>
<style>
@import url("styles.css");
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>
小结
从内联样式到内部样式，再到外部样式，css的作用范围逐渐增大，且耦合度逐渐降低。
选择合适的css使用方式也有助于提高开发效率。
以下是一个基本注册界面的结合css的简单美化。
css美化前：
看着就略显敷衍有没有，和现如今多彩的网络世界多少有点隔离，像是那种打开网页卡了没加载完的界面哈哈哈哈。
css美化后：
虽然也还不是很好看，但看上去确实舒服多了不是吗，起码比美化前年轻了10岁，提升大大的有，俺井汉三的审美就一点点，点到为止。
这么一对比，css的作用确实很明显。
附上注册界面的简单源码，有需要的小伙伴可以多多实践。
html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>registerCss</title>
<!-- <style>
@import url(registerstyles.css);
</style> -->
<link rel="stylesheet" href="registerstyles.css" />
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p class="left_p1">新用户注册</p>
<p class="left_p2">USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!-- <form action="#" method="get"> -->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input
type="text"
name="username"
id="username"
placeholder="账号"
/>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input
type="password"
name="password"
id="password"
placeholder="密码"
/>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right">
<input
type="email"
name="email"
id="email"
placeholder="email"
/>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right">
<input
type="text"
name="name"
id="name"
placeholder="真实姓名"
/>
</td>
</tr>
<tr>
<td class="td_left"><label for="phone">手机号</label></td>
<td class="td_right">
<input
type="text"
name="phone"
id="phone"
placeholder="手机号"
/>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input
type="radio"
name="gender"
id="gender"
value="male"
/>男
<input
type="radio"
name="gender"
id="gender"
value="female"
/>女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right">
<input type="date" name="birthday" id="birthday" />
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">验证码</label></td>
<td class="td_right">
<input
type="text"
name="checkcode"
id="checkcode"
placeholder="验证码"
/>
<img id="img_check" src="image/verify_code.jpg" alt="" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="btn_sub" value="注册" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
css文件内容
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
background: url(image/background2.jpg) no-repeat center;
}
.rg_layout {
width: 900px;
height: 500px;
border: 8px solid #eeeeee;
background-color: white;
margin: auto;
margin-top: 20px;
background-color: #eff4ff;
}
.rg_left {
/* border: 1px solid red; */
float: left;
margin: 15px;
}
.rg_left > p:first-child {
color: #fddd64;
font-size: 20px;
}
.rg_left > p:last-child {
color: #929295;
font-size: 20px;
}
.rg_center {
float: left;
padding-top: 20px;
}
.rg_right {
/* border: 1px solid red; */
float: right;
margin: 15px;
font-size: 30px;
}
.rg_right > P:first-child {
font-size: 10px;
}
.rg_right p a {
color: red;
}
.td_left {
width: 100px;
text-align: right;
height: 45px;
}
.td_right {
padding-left: 50px;
}
#username,
#password,
#email,
#name,
#phone,
#birthday,
#checkcode {
width: 250px;
height: 32px;
border: 1px solid #929295;
/* 边框圆角 */
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 100px;
}
#img_check {
height: 32px;
vertical-align: middle;
}
#btn_sub {
width: 150px;
height: 40px;
background-color: #fede65;
border: 1px solid #fede65;
border-radius: 5px;
margin-top: 15px;
}