我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点一个简单的文档必须包含的内容，使用div和span，使用id和class，认识显示模式，CSS样式，应用CSS样式，设计第一个样式示例
1.一个简单的文档必须包含的内容，网页的基本元素 head body标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个简单的文档包含内容</title>
</head>
<body>
<h1>我的第一个网页文档</h1>
<p>HTML文档必须包含三个部分：</p>
<ul>
<li>html——网页包含框</li>
<li>head——头部区域</li>
<li>body——主体内容</li>
</ul>
</body>
</html>
2.使用div和span
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a hzef="#">联系</a></li>
</ul>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a hzef="#">联系</a></li>
</ul>
</body>
</html>
demo3
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>新闻标题</h1> <p>新闻内容</p> <p>......</p> <p>发布于<span class="date">2016年12月</span>，由<span class="author">张三</span>编辑</p> </body> </html>
3.使用id和class
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a hzef="#">联系</a></li>
</ul>
</body>
</html>
demo2
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1 class="newsHead">标题新闻</h1> <p class="newsText">新闻内容</p> <p>......</p> <p class="newsText"><a href="news.php" class="newsLink">更多</a></p> </body> </html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="news">
<h1>标题新闻</h1>
<p>新闻内容</p>
<p>......</p>
<p><a href="news.php">更多</a></p>
</div>
</body>
</html>
4.认识显示模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标准模式</title>
<style type=text/css>
div {
border:solid 50px red;
padding:50px;
background:#ffccff;
width:200px;
height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div>标准显示盒模型</div>
</body>
</html>
demo2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>怪异模式</title>
<style type=text/css>
div {
border:solid 50px red;
padding:50px;
background:#ffccff;
width:200px;
height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div>怪异显示盒模型</div>
</body>
</html>
5.CSS样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{font-size: 12px; color: #333;}
</style>
<title></title>
</head>
<body>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{font-size: 12px; color: #333;}p{background-color: #FF00FF;}
</style>
<title></title>
</head>
<body>
</body>
</html>
6.应用CSS样式
<!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> </style> <title></title> </head> <body> <span style="color:red;">红色字体</span> <div style="border:solid 1px blue; width:200px; height:200px;"></div> </body> </html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {/*页面基本属性*/
font-size: 12px;
color: #333;
}
/*段落文本基础属性*/
p { background-color: #FF00FF; }
</style>
<title></title>
</head>
<body>
</body>
</html>
7.设计第一个样式示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一个样式页面</title>
<style type="text/css">
div { /*定义div元素方形显示 */
width:200px;
height:200px;
border:solid 2px blue;
float:left;
margin:4px;
}
.green { background-color: green; }/* 设置背景颜色为绿色 */
.red { background-color: red; }/* 设置背景颜色为红色 */
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
