<h3>1.文本</h3>
<style type="text/css">
body{
/*color：颜色*/
color:#F00;
/*字符间距*/
letter-spacing:10px;
/*对齐方式*/
text-align:center;
/*文本修饰 下划线-underline， 中划线(line-through) 上划线-overline 没有:none*/
text-decoration:underline;
/*单词间距*/
word-spacing:10px;
}
</style>
Paste_Image.png
<h3>2.字体</h3>
<style type="text/css">
body{
/*字体类型
注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。
*/
/*
font-family:"宋体";
*/
/*字体大小*/
/*
font-size:24px;
*/
/*字体样式: 正(normal默认) 斜(italic)*/
/*
font-style:italic;
*/
/*字体粗细 bold 加粗*/
/*
font-weight:bold;
*/
/* font: 简写属性 */
font:italic bold 36px "黑体";
}
</style>
Paste_Image.png
<h3>3.背景</h3>
<style type="text/css">
body{
/*背景颜色
background-color:#0CF;
背景图片
background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
设置背景图片是否重复，或如何重复
not-repeat: 不重复
repeat-x: x轴重复
repeat-y: y轴重复
repeat: x和y轴重复(默认)
background-repeat:no-repeat;
设置背景的起始位置
background-position:top center;
简写属性*/
background:#3FF url(./程序员.jpg) repeat top center;
}
</style>
Paste_Image.png
<h3>4.列表</h3>
<style type="text/css">
ul{
/*列表符号类型*/
list-style-type:none;
/*
常用
circle:空心
disc:实心
decimal:数字
upper-roman:大写I
lower-roman:小写i*/
/*设置列表符号的图片*/
list-style-image:url(./animal.png);
/*以上二者选其一*/
}
</style>
</head>
<body>
系统菜单
<ul>
<li>学生管理</li>
<li>教师管理</li>
<li>课程管理</li>
</ul>
</body>
Paste_Image.png
<h3>5.表格</h3>
<style type="text/css">
table{
/*合并表格的边框*/
border-collapse:collapse;
/*
collapse:折叠
separate:分割(默认)*/
}
</style>
</head>
<body>
<table border="1px" width="400px" height="200px" align="center">
<caption>2014年期末考试成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>狗娃</td>
<td>计算机1班</td>
<td>80</td>
</tr>
<tr>
<td>狗剩</td>
<td>计算机2班</td>
<td>78</td>
</tr>
<tr>
<td>狗蛋</td>
<td>软件1班</td>
<td>90</td>
</tr>
</tbody>
</table>
Paste_Image.png
<h3>6.边框</h3>
<style type="text/css">
div{
/*边框颜色
简写属性
1) 默认设置方向属性： 上 右 下 左
2）如果当前方向没有设置颜色，那么取对面的颜色
border-color:#F00;
border-left-color:#F00;
border-right-color:#0F0;
border-top-color:#00F;
border-bottom-color:#C90;
边框宽度
简写属性
border-width:10px;
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
边框样式(注意： 边框只有加了border-style才会显示出来)
solid: 单实线
dashed:虚线
dotted: 点
double: 双实线
简写属性
border-style:solid;
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
所有边框属性的简写属性*/
border:2px solid #0F0;
}
</style>
</head>
<body>
<div>div</div>
Paste_Image.png
