返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: div+css >

css入门知识上

2020-04-17 文章标签: css 前端 浏览次数:

我们来介绍css入门,我们从基础标签介绍起,现阶段我们看到的网站大部分是div和css可以实现,一些效果要借助于javascript。我们先总css说起,包含知识点一个简单的文档必须包含的内容,使用div和span,使用id和class,认识显示模式,CSS样式,应用CSS样式,设计第一个样式示例

1.jpg

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>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。