1.行间样式
给单独的标签添加样式.
<div style="width:100px; height:100px; background-color:red;"></div>
优点：比较方便可以即时的添加属性。
缺点：修改属性非常麻烦、需要一个个去修改。
2.内联样式表
<style>
div{ <!--选择器跟{}符号 属性写在里面-->
}
</style>
优点：针对当前HTML文件有效。
缺点：多页面修改时繁琐困难。
3.外联样式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>
边框：
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>
<!--
边框组成：
1、边框的粗细 1px;
2、边框的样式 solid(实线); dashed（虚线）;
3、边框的颜色 red;
边框的方向:
top right bottom left
上右下左 可以单独设置边框方向和属性
改变某一个方向边框的做法：
border-top-color:red;
border-top-style:
border-top-width:
边框的形状：非矩形
边框画三角形实例：
首先设置边框宽度，背景色跟背景一致(假如背景为白色)。
border:20px solid white
然后设置边框某一方向样式（设置TOP为向下三角形）颜色，为三角形颜色。
border-top-color:red;
以上为红色三角形。
设置某一方向样式颜色会生成方向相反的三角形。
-->
<body>
<div></div>
</body>
边框练习的步骤及需求.
1.先分析设计图的结构.
2.根据所分析的结构,进行结构编码.
3.根据所书写的结构,进行CSS编码.
4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.
5.样式添加.
background 背景
background-color 背景颜色
颜色英文关键字
RGB
十六进制
background-image 背景图
背景图默认铺满整个容器大小
background-repeat
背景是否重复
no-repeat
不重复
repeat-x;
X轴方向横向平铺
repeat-y;
Y轴方向纵向平铺
repeat；
X\Y都重复
background-position:X Y;
背景图位置
具体数值：
X轴：left right center
Y轴：top bottom center
当第二个Y轴属性值没有填写，默认居中。
background-attachment: fixed;
背景图是否滚蛋
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
background
不分属性书写顺序的
颜色相关 图片相关
<!--内容：
<img src="url">这样的图片链接样式会撑开容器宽高
背景不会占用容器宽高 -->
切图：
1、头部区域（第一个块）切一张完整的图片
2、内容区域里的每一个小块需要有ICO并且还有背景颜色
文字样式：
font-weight 文字加粗
bold 加粗
normal 正常
font-style 文字倾斜
italic斜体
font-size 文字大小
font-family 字体
line-height 行高 文字在一行里面所占用的位置
heigth:400px;
line-height:400px;
当行高的值与容器高度一致时 文字会垂直居中显示
多行文字测量行高的方法：
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2，得出来的值就是每行文字的上下的空隙大小。
3.1当行高为奇数时，那么文字的上方要比下方少一个像素。
3.2当行高为偶数时，文字上下的空隙一致。
4.通过辅助线测量多行文字的行高。
文字的复合样式：
font:bold italic 26px "微软雅黑";
font复合样式需要注意书写顺序
font: font-weight | font-style | font-size/line-height | font-family
文本设置：
color
文字颜色
text-align
文本对齐（显示）方式
left（默认值）
right（右边）
center（中间）
text-indent
首行缩进