概念
CSS:页面美化和布局控制
Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效
好处
功能强大
将内容展示和样式控制分离
- 降低耦合度,解耦
- 让分工合作更容易
- 提高开发效率
CSS的使用:CSS与html结合方式
内联样式
在标签内使用style属性指定css代码
如:< div style=“color: red;”>内联样式< /div>
内部样式
在head标签内,定义style标签,style的标签的标签体内容就是css代码
如:
<style type="text/css">
h1{
font-size: 12px;
color: red;
}
</style>
<h1>标题1</h1>
外部样式
定义css资源文件
在head标签内,定义link标签,引入外部的资源文件(程序先加载CSS文件)
-
demo01.css文件:
h1{ color: #FF0000; font-size: 78px; }
-
demo01.html文件
<link type="text/css" rel="stylesheet" href="./css/demo01.css"> <h1>标题1</h1>
注意:css作用范围 内联样式 < 内部样式 < 外部样式
内联样式不常用
外部样式可以写为:(先加载HTML结构,再加载CSS文件)
<style>
@import "css/demo01.css";
</style>
css语法
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用 ; 隔开,最后一对属性可以不加
选择器:筛选具有相似特征的元素
分类
-
基本选择器
- id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一
语法:#id属性值{} - 元素选择器:选择具有相同标签名称的元素
语法:标签名称{}
注意:id选择器优先级要高于元素选择器 - 类选择器:选择具有相同的class属性值的元素
语法:. class属性值{}
注意:类选择器优先级要高于元素选择器
- id选择器:选择具体的id属性值的元素,建议在一个html页面中id值唯一
-
扩展选择器
- 选择所有元素:
语法:*{} - 并集选择器:
语法:选择器1,选择器2{} - 子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{} - 父选择器:筛选选择器2的父元素选择器1
语法:选择器1 > 选择器2{} - 属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]{} - 伪类选择器:选择一些元素具有的状态
语法:元素:状态{}
如:< a>
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态
- 选择所有元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
/* 标签(元素)选择器 */
h1{
font-size: 34px;
color: #FF0000;
border: 3px solid;
border-color: red;
}
/* id选择器 */
#test1{
font-size: 34px;
color: green;
border: 3px solid;
border-color: red;
}
/* 类选择器 */
.test2{
font-size: 24px;
color: red;
border: 3px solid #008000;/* 边框实线 */
}
/* 并集选择器 */
h1,h2{
font-size: 34px;
color: green;
border: 3px solid;
border-color: red;
}
/* 子选择器 */
div p{
color: #008000;
}
/* 父选择器 */
div>p{
border: 1px solid;
}
/* 属性选择器 */
input[type='text']{
border: 5px solid;
}
/* 伪类选择器 */
a:link{
color: #008000;
}
a:hover{
color: #FFFF00;
}
a:active{
color: #FF0000;
}
a:visited{
color: #aa55ff;
}
</style>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<div id="test1">div1</div>
<div class="test2">div2</div>
<div>
<p>标签1</p>
</div>
<p>标签2</p>
<input type="text"/>
<input type="password"/>
<a href="#">超链接</a>
</body>
</html>
属性
- 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
- 背景
background:- no-repeat 背景图片不重复
- 边框
border:设置边框,符合属性 - 尺寸
width:宽度
height:高度 - 盒子模型:控制布局
box-sizing:border-box;设置盒子的属性,让width和height为最终盒子的大小
float:浮动(left/right/none)
clear :消除浮动(left/right/none/both)
overflow :溢出(visible默认/hidden/scroll/auto)
margin:外边距(上、右、下、左 顺时针方向)
padding:内边距- 默认状况下内边距会影响整个盒子的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
/*
字体、文本
*/
color: #008000;/* 文本颜色 */
font-size: 30px;/* 字体大小 */
text-align: center;/* 对齐方式 */
line-height: 100px;/* 行高 */
/*
边框
*/
border: 1px solid red;
}
div{
border: 1px solid red;
}
.div1{
/*
尺寸
*/
height: 200px;
width: 200px;
/*
背景
*/
background: url(img/W2.png) no-repeat center;/* no-repeat不重复 */
padding: 50px;
box-sizing: border-box;/* 让width和height为最终盒子的大小 */
}
.div2{
height: 100px;
width: 100px;
/* margin: 50px;/* 外边距上、右、下、左(顺时针) */ */
}
.div3{
float: left;
}
.div5{
float: right;
}
</style>
</head>
<body>
<p>段落</p>
<div class="div1">
<div class="div2">
</div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<style type="text/css">
body{
background-color: #dbffec;
}
.body{
border: 4px solid #dfdfdf;
width: 700px;
height: 400px;
background-color: #ffffff;
margin: 30px;
}
.left{
width:150px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
.right{
width:150px;
float: right;
margin-top: 20px;
}
.center{
text-align: center;
width:300px;
float: left;
margin-left: 5px;
padding-top: 35px;
}
#l1 #l2{
font:bold 15px "黑体";
}
td{
text-align: right;
}
a{
font-size: 15px;
color: #ffda03;
text-decoration: none;
}
#register{
width: 60px;
height: 30px;
background-color:#ffda03 ;
border:0px ;
}
</style>
</head>
<body>
<div class="body">
<div class="left">
<span id="l1" style="color: #ffda03;">
新用户注册
</span><br>
<span id="l2" style="color: #c7c7c7;">
USER REGISTER
</span>
</div>
<div class="center">
<form action="" method="get">
<table border="0" cellspacing="10" cellpadding="0" align="center">
<tr>
<td><label for="username">用户名</label></td>
<td>
<input type="text" id="username" size="20" name="username" placeholder=" 请输入用户名"/>
</td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td>
<input type="password" id="password" name="password" size="20" placeholder=" 请输入密码"/>
</td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td>
<input type="email" id="email" name="email" size="20" placeholder=" 请输入Email"/>
</td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td>
<input type="text" id="name" name="name" size="20" placeholder=" 请输入真实姓名"/>
</td>
</tr>
<tr>
<td><label for="phone">手机号</label></td>
<td>
<input type="tel" id="phone" name="phone" size="20" placeholder=" 请输入您的手机号"/>
</td>
</tr>
<tr>
<td>性别</td>
<td style="text-align: left;">
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="fmale"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="date" size="20" placeholder=" 年 / 月 / 日"/>
</td>
</tr>
<tr>
<td><label for="check">验证码</label></td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" id="check" size="10" name="check" placeholder=" 请输入验证码"/>
</td>
<td>
<img src="img/check.png" width="55px" height="25px" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="注册" id="register"/>
</form>
</div>
<div class="right">
<span style="font-size: 15px;">已有账号?</span>
<a href="#">立即登录</a>
</div>
</div>
</body>
</html>