详细介绍：css样式学习
1、概念：层叠样式表，多个样式可以同时作用在一个html元素上，同时生效
2、好处：功能强大，将内容元素和样式控制分离，一套css可以作用于多套页面
3、css的使用：css与html的结合方式
内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
内联样式：在标签内使用style属性来指定css代码
内部样式：在head标签内，定义style标签
-->
<div style="color: blue">hello css</div>
</body>
</html>内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color: brown;
}
</style>
</head>
<body>
<!--
内部样式：在head标签内，定义style标签写css代码
-->
<div>hello css</div>
<div>hello css</div>
<div>hello css</div>
</body>
</html>外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--<link rel="stylesheet" href="css/aa.css">-->
<style>
@import "css/aa.css";
</style>
</head>
<body>
<!--在head标签里定义link标签，来引入外部的资源文件-->
<div>hello css</div>
<p>red</p>
</body>
</html>4、选择器：
分类
1、基本选择器：id选择器（建议一个页面中id唯一）、元素选择器、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<!--基础选择器
id选择器：语法#属性值{}
元素选择器
类选择器：
-->
<!--id选择器优先级高于元素选择器-->
<style>
#div1{
color: darkorange;
}
div{
color: blue;
}
.cls1{
color: brown;
}
</style>
</head>
<body>
<div id="div1">aaaaa</div>
<div>nnnnn</div>
<p class="cls1">aaaaaa</p>
</body>
</html>2、扩展选择器：选择所有元素的选择器、并集选择器、子选择器、父选择器，属性选择器、伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<!--link连接初始状态、hover连接悬浮状态、active正在点击状态、visited访问完毕状态-->
<style>
div p{
color: brown;
}
div > p{
border: 1px solid;
}
input[type="text"]{
border: 5px solid;
}
a:link{
color: deeppink;
}
a:hover{
color: yellow;
}
a:active{
color: green;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<p>yyyyyyy</p>
<div >
<p>
jjjjjjjj
</p>
</div>
<div>
kkkkkkk
</div>
<input type="text">
<input type="password">
<br>
<a href="#">hhhhhhh</a>
</body>
</html>3、属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
p{
color: white;
font-size: 30px;
text-align: center;
line-height: 100px;
border: black;
background: url("image/8c33674415e050b1b1ad845d764f763.png");
}
</style>
</head>
<body>
<p>博客</p>
</body>
</html>3、盒子模型：外边距：margin、内边距：padding（默认情况下，内边距会影响盒子的大小）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.cls1{
width: 200px;
height: 200px;
box-sizing: border-box;
padding: 50px;
}
.cls2{
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<div class="cls1">
<div class="cls2"></div>
</div>
<div class="div3">aaaaaaa</div>
<div class="div4">bbbbbbb</div>
<div class="div5">ccccccc</div>
</body>
</html>4、注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("image/8c33674415e050b1b1ad845d764f763.png");
}
.div1{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 15px;
}
.left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.left > p:first-child{
color: yellow;
font-size: 20px;
}
.left > p:last-child{
color: #999999;
font-size: 20px;
}
.center{
border: 1px solid red;
float: left;
width: 450px;
}
.right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.right > p:first-child{
color: #555555;
font-size: 15px;
}
.right p a{
color: deeppink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#Email,#name,#birth,#tel,#check{
width: 251px;
height: 32px;
border: 1px solid #999999;
border-radius: 5px;
padding-left: 10px;
}
#check{
width: 110px;
}
#imgcheck{
height: 32px;
vertical-align: middle;
}
#sub{
width: 150px;
height: 40px;
background-color: yellow;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">
<p>新用户注册</p>
<p>user register</p>
</div>
<div class="center">
<div class="form">
<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="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名：</label></td>
<td class="td_right"><input type="name" name="name" id="name" placeholder="请输入真实用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号：</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别：</label></td>
<td class="td_right"><input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
</td>
</tr>
<tr>
<td class="td_left"><label for="birth">出生日期：</label></td>
<td class="td_right"><input type="date" name="birth" id="birth">
</td>
</tr>
<tr>
<td class="td_left"><label for="check">验证码：</label></td>
<td class="td_right"><input type="text" name="check" id="check" placeholder="请输入验证码">
<img src="image/963867e171133ee5396f2b2abadc6fb.png" id="imgcheck">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册" id="sub"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="right">
<p>已有账号<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号