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>