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; }
