前言
本文章对Css结合HTML使用进行了介绍，是后端学习者参考文，并非前端专业文。
目录
一、CSS的基本概念以及使用方式
1.1、css基本概念
1.2、使用Css的好处：
1.3、css的使用
css与HTML结合方式
代码演示
<!--
*@packageName
*@className css内联方式一
*@author wang
*@date 2022/1/24 14:14
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS与HTML内联方式结合一</title>
</head>
<body>
<!--测试内联方式，通过style属性-->
<div style="color: gold">hello css</div>
</body>
</html>
<!--
*@packageName
*@className Css内部方式结合
*@author wang
*@date 2022/1/24 14:17
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部方式结合</title>
<!-- 该方式只能指定本文件，无法应用所有文件-->
<style>
div{
color: gold;
}
</style>
</head>
<body>
<!--测试内部方式结合 通过 在head标签内使用style标签-->
<div>哈哈哈哈哈Css</div>
</body>
</html>
<!--
*@packageName
*@className Css外部样式方式
*@author wang
*@date 2022/1/24 14:19
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css外部样式</title>
<!-- 在head标签中引入css资源文件-->
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--首先应该编写css资源文件-->
<div>hello world</div>
</body>
</html>css文件
二、选择器
2.1、选择器定义
2.2、分类
部分选择器代码演示
<!--
*@packageName
*@className 基础选择器
*@author wang
*@date 2022/1/24 14:40
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*ID选择器*/
#div1{
color: greenyellow;
}
/*元素选择器*/
div{
color: coral;
}
/*类选择器*/
.h{
color: red;
}
/*属性选择器*/
input[type='text'] {
border: 5px solid;
}
/*伪类选择器*/
/* 初始化的状态*/
a:link{
color: cyan;
}
/*鼠标悬浮状态*/
a:hover{
color: seagreen;
}
/*正在访问状态*/
a:active{
color:blue;
}
/*被访问过的状态*/
a:visited{
color: red;
}
</style>
</head>
<>
<!--测试基础选择器之ID选择器-->
<div id="div1">hello world</div>
<div>hello world2</div>
<hr>
<!--测试元素选择器-->
<div>hello world</div>
<div>hello world2</div>
<!--测试类选择器-->
<div class="h"> hello world</div>
<div>hello world2</div>
<!--测试属性选择器-->
<input type="text">
<!--测试伪类选择器-->
<a href="#">
点这里
</a>
</body>
</html>三、属性
边距图解
四、注册页面案例实践
案例效果
代码演示
<!--
*@packageName
*@className 注册页面Css
*@author wang
*@date 2022/1/24 18:54
*@Description
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面Css</title>
<style>
/*给页面设置背景*/
body{
background: url(img/register_bg.png) no-repeat center;
padding-top: 50px;
}
/*整个布局设置，三个盒子的大盒子*/
.rg_layout{
width: 900px;
height: 500px;
/*边界线的颜色，宽度*/
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
/*左边盒子相关设置*/
.rg_left{
/*border: 1px red solid;*/
float: left;
margin: 15px;
}
/*左边中文设置*/
.p-left1{
font-size: 20px;
color: #ffd026;
}
/*左边英文设置*/
.p-left2{
font-size: 20px;
color: #a6a6a6;
}
/*中间盒子设置*/
.rg_center{
margin-top: 55px;
/*border: 1px red solid;*/
float: left;
}
/*右边盒子设置*/
.rg_right{
/*border: 1px red solid;*/
float: right;
margin: 15px;
}
/*右边的文字字号*/
.p-right{
font-size: 15px;
}
/*右边的立即登陆颜色*/
.p-right2{
color: pink;
}
/*中间盒子的左半部分文字效果*/
.td-left{
width: 100px;
height: 45px;
text-align: right;
color: grey;
}
/*中间盒子的右半部分的文字效果*/
.td-right{
padding-left: 50px;
}
/*右半部分的边框效果*/
#username,#password,#email,#firstName,#phone,#birth{
width: 220px;
height: 25px;
padding-left: 15px;
color: grey;
border: 1px solid #a6a6a6;
/*边框圆角矩形*/
border-radius: 5px;
}
/*验证码边框*/
#checkCode{
width: 110px;
}
/*验证码图片效果*/
#img-check{
height: 25px;
vertical-align: middle;
}
/*注册按钮效果*/
#button-sub{
width: 150px;
height: 40px;
background-color: #ffd026;
border: 1px solid #ffd026;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p class="p-left1">新用户注册</p>
<p class="p-left2">USER REGISTER</p>
</div>
<div class="rg_center">
<!--定义一个表单 不要忘记属性-->
<form action="#" method="post">
<!-- 定义一个表格，不要忘记属性-->
<table >
<!-- 用户名-->
<tr>
<td class="td-left">
<label for="username">用户名</label>
</td>
<td class="td-right">
<input type="text" name="username" placeholder="请输入账号" id="username">
</td>
</tr>
<!-- 密码-->
<tr>
<td class="td-left">
<label for="password">密码</label>
</td>
<td class="td-right">
<input type="password" name="password" placeholder="请输入密码" id="password">
</td>
</tr>
<!-- email-->
<tr>
<td class="td-left">
<label for="email">Email</label>
</td>
<td class="td-right">
<input type="email" name="email" placeholder="请输入email" id="email">
</td>
</tr>
<!-- 姓名-->
<tr>
<td class="td-left">
<label for="firstName">姓名</label>
</td>
<td class="td-right">
<input type="text" name="name" placeholder="请输入真实姓名" id="firstName">
</td>
</tr>
<!-- 手机号-->
<tr>
<td class="td-left">
<label for="phone">手机号</label>
</td>
<td class="td-right">
<input type="text" name="phone" placeholder="请输入您的手机号" id="phone">
</td>
</tr>
<!-- 性别-->
<tr>
<td class="td-left">
<label>性别</label>
</td>
<td class="td-right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<!-- 出生日期-->
<tr>
<td class="td-left">
<label for="birth">出生日期</label>
</td>
<td class="td-right">
<input type="date" name="birthDate" id="birth">
</td>
</tr>
<!-- 验证码-->
<tr>
<td class="td-left">
<label for="checkCode">验证码</label>
</td>
<td class="td-right">
<input type="text" name="checkCode" id="checkCode">
<img src="img/verify_code.jpg" id="img-check">
</td>
</tr>
<!-- 注册按钮-->
<tr>
<td colspan="2" align="center">
<input type="submit" name="button" value="注册" id="button-sub">
</td>
</tr>
</table>
</form>
</div>
<div class="rg_right">
<p class="p-right">已有用户？<a class="p-right2" href="#">立即登陆</a></p>
</div>
</div>
</body>
</html>
