我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点css背景颜色，css版块配色，css设置背景图像，css背景平铺，css背景定位，css固定背景，css定位参考，css背景裁剪
1.css背景颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body { /*页面基本属性*/
background-color: #EDA9EB;/* 设置页面背景颜色 */
margin: 0px;
padding: 0px;
}
img { /*图片样式*/
width: 350px;
float: right; /*右浮动*/
}
p { /*段落样式*/
font-size: 15px;/* 正文文字大小 */
padding-left: 10px;
padding-top: 8px;
line-height: 1.6em;
}
h1 { /* 首字放大 */
font-size: 80px; /* 定义大字体，实现占据3行下沉效果 */
font-family: 黑体; /* 设置黑体字，首字下沉更醒目 */
float: left; /* 左浮动，脱离文本行限制 */
padding-right: 5px; /* 定义下沉字体周围空隙 */
padding-left: 10px;
padding-top: 8px;
margin: 24px 6px 2px 6px;
}
</style>
</head>
<body>
<h1>春</h1>
<p><img src="//freemuban.com/img/202004171621picture.jpg" ></p>
<p>你悄悄地走来，默默无声，一眨眼，大地披上了金色衣裳。</p>
<p>你悄悄走来，走进田间，麦子香味四飘，那亩亩庄稼，远看好似翻滚的千层波浪；近看，麦子，笑弯了腰，高梁涨红了脸、玉米乐开了怀，地里的人忙及了，"唱一曲呀收获的歌，收了麦子，收高梁啊，收了玉米，收大豆啊，收获完了送国家啊。"悠洋的歌声道出了农家秋收的喜悦。</p>
<p>你悄悄的走来，带来一件黄衣裳，一见红衣裳，瞧着边的山，像是渡上了一层金色。飘飘悠悠从上面飞下无数黄蝴蝶，一伙在半空中盘旋，不知过了多长时间深黄的衣裳变成了浅黄；浅黄又变成了赫石，你看，它多像一个顽皮的小鬼，瞧那边的山上，高梁如醉，简直是一片红海，遮盖了半个天际，和霞光连在一起，红的像火焰似的燃烧。这一黄一红的连成一片，给人一种说不出的温暖，甚至都忘了在过几天，寒冬就要来临了。</p>
<p>你悄悄的走来，带来了美丽的秋光美景，带来了丰硕的果实，听，锣鼓喧天，好热闹，忙了一年的人们脸上露出了内心压仰不住的喜悦："又迎来了一个丰收年。"我迷恋着秋！秋--绚丽多彩的时节，果实收获的时节，欣欣向荣的时节。</p>
</body>
</html>
2.css版块配色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body { text-align: center; } /* 网页居中 */
#wrap {
width: 400px; /* 固定包含框的宽度 */
margin: 0 auto; /* 网页居中 */
text-align: left; /* 文本左对齐 */
}
#header {
height: 40px; /* 固定高度 */
line-height: 40px; /* 定义行高 */
margin: 0 0 2px 0; /* 头部区域的外边距 */
text-align: center; /* 文本居中对齐 */
}
ul#nav {
list-style: none; /* 清楚项目符号 */
margin: 2px 0 0 0; /* 导航栏外边距 */
padding: 10px 0 0 10px; /* 导航栏内边距 */
float: left; /* 向左浮动 */
width: 84px; /* 固定宽度 */
height: 190px; /* 固定高度 */
}
#wrap #main {
float: right; /* 向右浮动 */
height: 200px; /* 固定高度 */
width: 300px; /* 固定宽度 */
margin: 2px 0 0 2px; /* 增加外边距 */
}
ul#nav li { line-height: 1.5em; } /* 导航行高 */
#main div { padding: 12px 2em; } /* 主体区域内边距 */
/* 配色 */
body {
color: #FF0000; /* 网页字体基本色，一般多为黑色或深灰色 */
background: #99FFFF; /* 网页背景色 */
}
#header {
color: #FF0000; /* 标题栏字体色 */
background: #66CC66; /* 标题栏背景色 */
}
ul#nav {
color: #000; /* 导航侧栏字体色 */
background: #CCFF33; /* 导航侧栏背景色 */
}
#wrap #main {
color: #000; /* 主体区域字体色 */
background: #FF99CC; /* 主体区域背景色 */
}
</style>
</head>
<body>
<div id="wrap">
<h3 id="header">网页标题</h3>
<ul id="nav">
<li>链接1</li>
<li>链接2</li>
<li>链接3</li>
<li>……</li>
</ul>
<div id="main">
<div>正文内容……</div>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body { /*页面基本属性*/
margin: 0px;
padding: 0px;
text-align: center;
}
.container { /*container容器的样式*/
width: 800px;
margin: 0 auto;
}
.header { /*页面banner部分的样式*/
width: 800px;
height: 200px;
background: url(//freemuban.com/img/202004171622bg.jpg);/* 页面背景图片 */
}
.chara { /*导航栏样式*/
font-size: 16px;
background-color: #90bcff;/* 导航栏的背景颜色 */
}
.leftbar { /*左侧栏目样式*/
width: 200px;
height: 600px;
background-color: #d4d7c6; /*左侧栏目背景颜色*/
float: left;
}
.content { /* 正文部分的样式 */
width: 600px;
height: 600px;
background: #e5e5e3; /* 正文部分的背景颜色 */
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<table width="800px" cellpadding="2" cellspacing="2" class="chara" align="center">
<tr>
<td>首页</td>
<td>我的博文</td>
<td>班级故事</td>
<td>我的收藏</td>
<td>成长心得</td>
<td>我爱挑战</td>
<td>友情链接</td>
</tr>
</table>
<div class="main">
<div class="leftbar"></div>
<div class="content"></div>
</div>
</div>
</body>
</html>
3.css设置背景图像
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body { background-image: url('//freemuban.com/img/20200417bg.jpg'); }/* 页面背景图片 */
</style>
</head>
<body>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
background-image: url('//freemuban.com/img/2020041716251.png');
background-color: #6AC3FF;
}
</style>
</head>
<body>
</body>
</html>
4.css设置背景平铺
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
#call {
width: 218px;
font-size: 14px;
}
#call_tit {
background: url(//freemuban.com/img/call_top.gif);
background-repeat: no-repeat;
height: 43px;
color: #fff;
font-weight: bold;
text-align: center;
line-height: 43px;
}
#call_mid {
background-image: url(//freemuban.com/img/call_mid.gif);
background-repeat: repeat-y;
padding:3px 14px;
height: 140px;
}
#call_btm {
background-image: url(//freemuban.com/img/call_btm.gif);
background-repeat: no-repeat;
height: 11px;
}
</style>
</head>
<body>
<div id="call">
<div id="call_tit">公司公告</div >
<div id="call_mid">公告内容</div >
<div id="call_btm"></div >
</div>
</body>
</html>
5.css设置背景平铺
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body { /*页面基本属性*/
padding: 0px;
margin: 0px;
background-image: url(//freemuban.com/img/202004171627bg.jpg);/* 背景图片 */
background-repeat: no-repeat;/* 不重复 */
background-position: bottom right;/* 背景位置，右下 */
}
p { /*段落样式*/
line-height: 1.6em;
margin: 0px;
font-size: 14px;
padding-top: 10px;
padding-left: 6px;
padding-right: 300px;
}
</style>
</head>
<body>
<h1>可爱的企鹅</h1>
<p>去南极，第一个想到的就是企鹅，那毛茸茸的肉嘟嘟的样子非常可爱。我们第一次登陆就是去看它，兴奋的心情和期待的心情交织在一起，但是，真正踏上南极半岛的一瞬间不是因为看到企鹅而兴奋，而是因为企鹅在自己的脚边而惊讶。</p>
<p>看惯在围栏里的动物，第一次如此近距离的接触的如此可爱的温柔的动物，心底的柔情会不由的升起来。这和在美国看到野牛和鹿还不一样，那些大家伙给你一些恐惧感：自己不敢过于亲近。而企鹅却让人想抱抱。但是，这样的想法是不能实现的，在南极，投放食物都是违法的。</p>
<p>企鹅是鸟纲企鹅目（拉丁文：Sphenisciformes）所有种类的通称。主要生活在地球的南半球，目前已知全世界的企鹅共有十八种。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以绝热。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
<p>我们在南极看到三种，遗憾的是没有看到最大的一种叫：帝企鹅，它也是最漂亮的一种。而这三种企鹅，我们都不知道叫什么名字，因为我们听不懂船上开的科考课。如果哪位网友知道的话，麻烦给大家讲讲。</p>
</body>
</html>
demo2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>随堂练习</title>
<style type="text/css">
body {/* 清除页边距 */
margin:0; /* 边界为0 */
padding:0; /* 补白为0 */
}
div {/* 盒子的样式 */
background-image:url(//freemuban.com/img/202004171627grid.gif); /* 背景图像 */
background-repeat:no-repeat; /* 禁止背景图像平铺 */
width:400px; /* 盒子宽度 */
height:400px; /* 盒子高度 */
border:solid 1px red; /* 盒子边框 */
}
</style>
</head>
<body >
<div id="box"></div>
</body>
</html>
demo3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>随堂练习</title>
<style type="text/css">
body {/* 清除页边距 */
margin:0; /* 边界为0 */
padding:0; /* 补白为0 */
}
div {/* 盒子的样式 */
background-image:url(//freemuban.com/img/202004171627grid.gif); /* 背景图像 */
background-repeat:no-repeat; /* 禁止背景图像平铺 */
background-position:center left;
width:400px; /* 盒子宽度 */
height:400px; /* 盒子高度 */
border:solid 1px red; /* 盒子边框 */
}
</style>
</head>
<body >
<div id="box"></div>
</body>
</html>
6.css设置固定背景
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background-image: url(//freemuban.com/img/202004171629top.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
#content {
height: 2000px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上机练习</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: url(//freemuban.com/img/202004171629top.png) no-repeat fixed top center;
}
#content {
height: 2000px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
7.css设置定位参考
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height:600px;
width:416px;
border:solid 1px red;
padding:120px 4em 0;
background:url(//freemuban.com/img/202004171631p3.jpg) no-repeat;
-moz-background-origin:border-box;
-webkit-background-origin:border-box;
background-origin:border-box;
-moz-background-size:cover;
-webkit-background-size:cover;
background-size:cover;
overflow:hidden;
}
div h1 {
font-size:18px;
font-family:"幼圆";
text-align:center;
}
div p {
text-indent:2em;
line-height:2em;
font-family:"楷体";
margin-bottom:2em;
}
</style>
</head>
<body>
<div>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水长起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。 </p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。</p>
</div>
</body>
</html>
8.css设置定位参考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上机练习</title>
<style>
h1 { font-size: 20px; }
h2 { font-size: 16px; }
p {
width: 400px;
height: 50px;
margin: 0;
padding: 20px;
border: 10px dashed #666;
background: #aaa url(//freemuban.com/img/demo1.jpg) no-repeat;
}
.border-box p { background-clip: border-box; }
.padding-box p { background-clip: padding-box; }
.content-box p { background-clip: content-box; }
.text p {
width: auto;
height: auto;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 120px;
}
</style>
</head>
<body>
<h1>background-clip</h1>
<ul class="test">
<li class="border-box">
<h2>border-box</h2>
<p>从border区域（不含border）开始向外裁剪背景</p>
</li>
<li class="padding-box">
<h2>padding-box</h2>
<p>从padding区域（不含padding）开始向外裁剪背景</p>
</li>
<li class="content-box">
<h2>content-box</h2>
<p>从content区域开始向外裁剪背景</p>
</li>
<li class="text">
<h2>text</h2>
<p>从前景内容的形状作为裁剪区域向外裁剪背景</p>
</li>
</ul>
</body>
</html>
