我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，一些效果要借助于javascript。我们先总css说起，包含知识点css设置字体类型，css设置字体大小，css设置字体颜色，css设置字体粗细，css设置斜体字体，css设置装饰线，css设置字体大小写，css设置文本水平对齐，css设置文本垂直对齐，css设置字间距和词间距
1.css设置字体类型，比如设置字体黑体，微软雅黑，或者其他网络字体，这样看的更舒服
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
p { font: 14px "黑体"; }
</style>
<title>上机练习</title>
</head>
<body>
<p>定义字体类型</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p { font-family:"Times New Roman", Times, serif}
</style>
<title>上机练习</title>
</head>
<body>
<p>定义字体类型</p>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body { font-size: 36px; }
.serif { font-family: "Times New Roman", Times, serif; }
.sans-serif { font-family: Arial, Helvetica, sans-serif; }
.monospace { font-family: "Courier New", Courier, monospace; }
</style>
<title>上机练习</title>
</head>
<body>
<p class="serif">衬线字体 - serif</p>
<p class="sans-serif">无衬线字体 - sans-serif</p>
<p class="monospace">等宽字体 - monospace</p>
</body>
</html>
2.css设置字体大小,一般网页字体大小是12px有的用户觉得小，每个标签也有自己的默认属性和大小，比如H1到H6标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{font-size:20px;} /* 以像素为单位设置div标签中的字体大小*/
.p1{ font-size: 0.6in; } /* 以英寸为单位设置字体大小 */
.p2{ font-size: 0.8em; } /* 以父辈字体大小为参考设置大小 */
.p3{ font-size: 2cm ; } /* 以厘米为单位设置字体大小*/
.p4{ font-size: 16pt; } /* 以点为单位设置字体大小 */
.p5{ font-size: 2pc; } /* 以皮卡为单位设置字体大小 */
</style>
<title>上机练习</title>
</head>
<body>
<div>
<p class="p1">春晓 0.6in</p>
<p class="p2">春眠不觉晓, 0.8em</p>
<p class="p3">处处闻啼鸟。 2cm</p>
<p class="p4">夜来风雨声, 16pt</p>
<p class="p5">花落知多少? 2pc</p>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {font-size: 1.2em; }
</style>
<title>上机练习</title>
</head>
<body>
<div id="content">《水调歌头 明月几时有》
<div id="sub">苏轼
<p>明月几时有，把酒问青天。</p>
<p>不知天上宫阙，今夕是何年。</p>
<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
<p>起舞弄清影，何似在人间。</p>
<p>转朱阁，低绮户，照无眠。</p>
<p>不应有恨，何事长向别时圆？</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<p>但愿人长久，千里共婵娟。 </p>
</div>
</div>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body, div, p {font-size:0.75em;}
</style>
<title>上机练习</title>
</head>
<body>
<div id="content">《水调歌头 明月几时有》
<div id="sub">苏轼
<p>明月几时有，把酒问青天。</p>
<p>不知天上宫阙，今夕是何年。</p>
<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
<p>起舞弄清影，何似在人间。</p>
<p>转朱阁，低绮户，照无眠。</p>
<p>不应有恨，何事长向别时圆？</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<p>但愿人长久，千里共婵娟。 </p>
</div>
</div>
</body>
</html>
demo4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body, div, p {font-size:0.75;}
</style>
<title>上机练习</title>
</head>
<body>
<div id="content">《水调歌头 明月几时有》
<div id="sub">苏轼
<p>明月几时有，把酒问青天。</p>
<p>不知天上宫阙，今夕是何年。</p>
<p>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</p>
<p>起舞弄清影，何似在人间。</p>
<p>转朱阁，低绮户，照无眠。</p>
<p>不应有恨，何事长向别时圆？</p>
<p>人有悲欢离合，月有阴晴圆缺，此事古难全。</p>
<p>但愿人长久，千里共婵娟。 </p>
</div>
</div>
</body>
</html>
3.css设置字体颜色
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.p1 { color:red;}
.p2 { color:#ff0000;}
.p3 { color:rgb(255,0,0);}
.p4 { color:rgba(255,0,0,1);}
.p5 { color:hsl(360,100%,50%);}
.p6 { color:hsla(360,100%,50%,1.00);}
</style>
<title>上机练习</title>
</head>
<body>
<p class="p1">颜色名：color:red;</p>
<p class="p2">HEX：color:#ff0000;</p>
<p class="p3">RGB：color:rgb(255,0,0);</p>
<p class="p4">RGBA：color:rgba(255,0,0,1);</p>
<p class="p5">HSL：color:hsl(360,100%,50%)</p>
<p class="p6">HSLA：color:hsla(360,100%,50%,1.00);</p>
</body>
</html>
4.css设置字体粗细
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p { font-weight: normal }
h1 { font-weight: 700 }
div{ font-weight: bolder }
.bold { font-weight:bold; }
</style>
<title>上机练习</title>
</head>
<body>
<p>文字粗细是normal</p>
<h1>文字粗细是700</h1>
<div>文字粗细是bolder</div>
<p class="bold">文字粗细是bold</p>
</body>
</html>
5.css设置斜体字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.italic {
Font-size: 24px;
font-style: italic;
}
</style>
<title>上机练习</title>
</head>
<body>
<p>设置<span class="italic">文字斜体 </span></p>
</body>
</html>
6.css设置斜体字体
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.underline {text-decoration:underline;}
.overline {text-decoration:overline;}
.line-through {text-decoration:line-through;}
</style>
<title>上机练习</title>
</head>
<body>
<p class="underline">设置下划线</p>
<p class="overline">设置顶划线</p>
<p class="line-through">设置删除线</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p.one{ text-decoration:underline overline; }
p.two{ text-decoration:underline line-through; }
p.three{ text-decoration:overline line-through; }
p.four{ text-decoration:underline overline line-through; }
</style>
<title>上机练习</title>
</head>
<body>
<p class="one">下划线文字，顶划线文字</p>
<p class="two">下划线文字，删除线文字</p>
<p class="three">顶划线文字，删除线文字</p>
<p class="four">三种效果同时</p>
</body>
</html>
7.css设置字体大小写,ps 对字体大小写，javascript可以实现，php也可以操作，css同样可以操作，不过要注意浏览器兼容性,通过css实现首字母大写，首字母小写，字母全小写，字母全大写等
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.capitalize {/
text-transform:capitalize;
}
.uppercase {
text-transform:uppercase;
}
.lowercase {
text-transform:lowercase;
}
</style>
<title>上机练习</title>
</head>
<body>
<p class="capitalize">text-transform:capitalize;</p>
<p class="uppercase">text-transform:uppercase;</p>
<p class="lowercase">text-transform:lowercase;</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.small-caps {
font-variant:small-caps;
}
</style>
<title>上机练习</title>
</head>
<body>
<p class="small-caps">font-variant:small-caps;</p>
</body>
</html>
8.css文本水平对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify;}
</style>
<title>上机练习</title>
</head>
<body>
<p align="left">align="left"</p>
<p class="center">text-align:center;</p>
<p class="right">text-align:right;</p>
<p class="justify">text-align:justify;</p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
div {
height: 200px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #bbb;
padding:1px;
width: 600px;
}
</style>
<title>上机练习</title>
</head>
<body>
<div>
<h1>网页标题</h1>
<p>网页文本</p>
</div>
</body>
</html>
9.css文本垂直对齐
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.super {
vertical-align:super;
}
</style>
<title>上机练习</title>
</head>
<body>
<p>vertical-align:super;表示<span class="super">上标</span></p>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.outer {
display:table-cell;
vertical-align:middle;
width:300px;
height:200px;
border:solid 1px red;
}
.inner {
width:100px;
height:50px;
background:blue;
}
</style>
<title>上机练习</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
10.css字间距和词间距
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.lspacing {
letter-spacing:2em;
}
.wspacing {
word-spacing:2em;
}
</style>
<title>上机练习</title>
</head>
<body>
<p class="lspacing">letter spacing（字间距）</p>
<p class="wspacing"> word spacing（词间距）</p>
</body>
</html>
