内嵌式排版样本：
内嵌式排版中所有的样式定义都必须在<style>..</style>之间，而<style>..</style>又必须在<head>..</head>之间。
其功能又分为三种：
1、标记定义型格式：
<head>
<style type="text/css">
标记名称{属性1；属性2；属性3；}
标记名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称>...</标记名称>
</body>
2、class定义型格式：
<head>
<style type="text/css">
.定义名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 class"定义名称">...</标记名称>
</body>
class定义型分组格式：
<head>
<style type="text/css">
.定义名称，.定义名称1{属性1；属性2；属性3；}
.定义名称{属性1；属性2；属性3；}
.定义名称1{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 class"定义名称">...</标记名称>
<标记名称 class"定义名称1">...</标记名称>
</body>
3、id定义型格式：
<head>
<style> <style type="text/css">
#定义名称{属性1；属性2；属性3；}
#定义名称{属性1；属性2；属性3；}
</style>
</head>
<body>
<标记名称 id="定义名称">...</标记名称>
</body>
外部排版样式定义：
独立的样式排版：
标记名称{属性1；属性2；属性3；}
.定义名称{属性1；属性2；属性3；}
在<head>...</head>之间使用<link>格式：
<head>
<link rel="stylesheet" type="text/css" href=定义的文件名.css/>
</head>
在<head>...</head>之间使用inport格式：
<head>
<style type="text/css">
@inport "定义的文件名.css"
</style>
</head>
并集选择器用“逗号”进行分隔；交集选择器用“.”进行分隔；后代选择器用“空格”进行分隔
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* 并集选择器 */
div,.test2,#test3,span {
font-size: 16px;
font-weight: 400;
color: red;
}
</style>
</head>
<body>
<div>测试数据1</div>
<p class="test2">测试数据2</p>
<h1 id="test3">测试数据3</h1>
<span>测试数据4</span>
</body>
</html>
设置元素内容的字体：
（1）字体的名称：font-family属性定义文字使用的字体的名称
（2）设置字体倾斜程度：font-style属性描述字体的倾斜程度，可选的属性值包括normal、small-oblique
(3)设置字体的变体：font-variant属性的用于设置字体的变体形式，可选属性值包括normal和samll-caps
(4)设置 字体的字重：font-weight:
(5)字体的大小：font-size：
font顺序应该按照font-style;font-variant; font-weight; font-size;font-family
设置元素的文本属性
（1）设置文本首行缩进：text-indent:1em
(2)设置文本对齐方式：text-align:left(right,center)
text-align:justity;两端对齐（只对英文有用）
(3)设置文本的修饰：text-decoration:none(underline下划线，overline上划线，line-through删除线）
(4)设置行高：line-height:数字，百分比
（5）设置间距：word-spacing:1em——单词与单词之间的距离（针对英文有效）
letter-spacing:1em——文字与文字之间的距离（针对中文有效）
（6）英文大小写的转换：text-transform:capitalize 单词首字母大写
uppercase:全部字母大写
lowercase:全部字母小写
盒子的概念：在css中，一个独立的盒子模型内容、边框、内边距和外边距4个部分构成。
内边距：padding-top (left, right, bottoom):10px;
外边距：margin-top (left, right, bottoom):10px;
<span>行元素的宽度和高度是无效的，padding的垂直方向是无效的，水平方向有效，margin没有重叠的效果，水平方向是有效的
margin的的垂直方向会重叠，margin会取最大的值，水平方向是有效的
元素的浮动;
使用了float属性后，浮动的元素从文档正常流中脱离出来，同时对布局中的元素造成一定的影响
列：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
div{
1000px;
height:1952px;
border:1px solid #bb8755;
background:url("././././images/border[1].jpg");
}
.hd1{
960px;
height:1902px;
background:url("././././images/container_bg[1].jpg");
border:none;
margin-left:40px;
margin-top:35px;
}
.bk{
342px;
height:1724px;
border:1px solid red;
margin-left:137px;
margin-top:179px;
}
</style>
</head>
<body>
<div>
<div class="hd1">
<div>
<p class="bk">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
</div>
</div>
</div>
</body>
</html>