CSS:页面美化和布局控制
1. 概念:Casscading Style Sheets 层叠样式表
* 层叠:多个样是可以作用在同一个html元素上,同时生效
2. 好处:
1. 功能强大
2. 将内容的展示和样式的控制分离
* 降低耦合度,解耦
* 让分工协作更容易
* 提高开发效率
3. CSS的使用:CSS与html结合的方式
1. 内联样式
*在标签内使用style属性指定CSS代码
*如:<div style="color: red;">hello css</div>
2. 内部样式
*在head标签内,定义style标签,style标签的标签体内容就是css代码
*如:
<style>
div{
color: blue;
}
</style>
<div>hello css</div>
3. 外部样式
1.定义css资源文件
2.在head标签内,定义link标签,引入外部资源文件
*如:<link rel="stylesheet" href="css/a.css">
*注意:
1,2,3的方式css作用范围越来越大
1方式不常用,常用的方式一般是2,3
4. css语法:
*格式:
选择器{
属性1:属性值1;
属性2:属性值2;
···
}
*选择器:筛选就有相似特征的元素
*注意:每一对属性需要使用:隔开,最后一对属性可以不加
5. 选择器:
*分类:
1. 基础选择器
1. id选择器:选择其具体的id属性元素,建议在一格html种id唯一
*语法:#id属性值{}
2. 元素选择器:选择具有相同标签名称的元素
*语法:标签名称{}
*注意:id选择器优先级高于元素选择器
3. 类选择器:选择就有相同class属性值的元素
*语法:.class属性值{}
*注意:类选择器优先级高于元素选择器
*优先级:id选择器>类选择器>元素选择器
2. 扩展选择器
1.选择所有元素:
*语法:*{}
2. 并机选择器:选择选择器1和选择器2的元素
*语法:选择器1,选择器2{}
3. 子选择器:去筛选选择器1下的选择器2
*语法:选择器1 选择器2{}
4. 父选择器:筛选选择器2上的父元素选择器1
*语法:选择器1>选择器2
5. 属性选择器:选择元素名称,属性=属性值的元素
*语法:元素名称[属性名=“属性值”]{}
6. 伪类选择器:选择一些元素所具有的状态
*语法:元素:状态{}
*如:<a>
*状态:
*link:初始化的状态
*visited:被访问过的状态
*active:正在访问的状态
*hover:鼠标悬浮状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color: red;
}
div{
color: blue;
}
.clas1{
color: green;
}
</style>
</head>
<body>
<div id="div1">竹鼠一号</div><br>
<div>竹鼠商人</div><br>
<p class="clas1">竹鼠二号</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
div p{
color: red;
}
div > a{
color: green;
}
input[type="text"]{
border: 5px solid;
}
a:link{
color: hotpink;
}
a:hover{
color: green;
}
a:active{
color: red;
}
a:visited{
color: blue;
}
</style>
</head>
<body>
<div>
<p>竹鼠商人</p>
</div>
<p>竹鼠一号</p>
<div>
<a>aaa</a>
</div>
<input type="text">
<br>
<a href="#">状态选择器</a>
</body>
</html>
6. 属性
1. 字体、文本
*font-size:字体大小
*color:文本颜色
*text-align:对齐方式
*line-height:行高
2. 背景
*background:符合属性
3. 边框
*border:设置边框,复合属性
4. 尺寸
*width:宽度
*height:高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
p{
color:red;
font-size: 30px;
text-align: center;
line-height: 100px;
border: 1px solid red;
}
div{
border: 1px deeppink solid;
height: 20px;
width: 200px;
background: url("../image/桌面.png") no-repeat center;
}
</style>
</head>
<body>
<P>竹鼠商人</P>
<div></div>
</body>
</html>
5. 盒子模型:控制布局
*margin:外边距
*padding:内边距,默认情况下内边距会影响整个盒子的大小
*float:浮动
*left
*right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<style>
div{
border: 1px deeppink solid;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
</div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>
案例
<!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/桌面.png");
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
margin: auto;
margin-top: 150px;
opacity: 0.8;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color: #FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
font-size: 20px;
color: #A6A6A6;
}
.rg_center{
float: left;
width: 450px;
}
.rg_right{
float: right;
margin: 15px;
}
.rg_right >p:first-child{
font-size: 15px;
}
.rg_right p a{
color: deeppink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username , #userpass , #email , #name , #tel ,#brith{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 15px;
}
#ma{
width: 110px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 15px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_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_reg">新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_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="userpass">密码</label></td>
<td class="td_right"><input type="password" name="userpass" id="userpass" 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="text" 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 for="sex">性别</label></td>
<td class="td_right"><input type="radio" name="sex" id="sex" value="man">男
<input type="radio" name="sex" id="sex" value="woman">女
</td>
</tr>
<tr>
<td class="td_left"><label for="brith">出生日期</label></td>
<td class="td_right"><input type="date" name="brith" id="brith"></td>
</tr>
<tr>
<td class="td_left"><label for="ma">验证码</label></td>
<td class="td_right"><input type="text" name="ma" id="ma" placeholder="输入验证码"><img id="img_check" src="验证码.jpg" alt="" width="100px" height="20px"></td>
</tr>
<tr><td colspan="2" align="center"><input id="btn_sub" type="submit" value="提交"></td></tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<P>已有账号?<a href="#">立即登陆</a></P>
</div>
</div>
</body>
</html>