语法：font：[ [ <font-style>|| <font-weight>][ <font-size><font-family>] 默认值：看独立属性自身取值：<font-style>：指定文本字体样式<font-variant>：指定文本是否为小型的大写字母<font-weight>：指定文本字体的粗细<font-size>：指定文本字体尺寸<line-height>：指定文本字体的行高<font-family>：指定文本使用某个字体或字体序列 这是一段修饰文字的代码：<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>font_CSS参考手册_web前端开发参考手册系列</title><meta name="author" content="Joy Du(飘零雾雨),
[email protected]" /><meta name="copyright" content="www.doyoe.com" /><style>.test p{margin:15px 0border:1px solid #000}.font1 p{font:18px Simsun,arial,sans-serif}.font2 p{font:italic 18px Simsun,arial,sans-serif}.font3 p{font:italic small-caps 18px Simsun,arial,sans-serif}.font4 p{font:italic small-caps bold 18px Simsun,arial,sans-serif}.font5 p{font:italic small-caps bold 18px/2 Simsun,arial,sans-serif}.caption p{font:caption}.icon p{font:icon}.menu p{font:menu}.message-box p{font:message-box}.small-caption p{font:small-caption}.status-bar p{font:status-bar}</style></head><body><ul class="test"><li class="font1"><strong>只指定字体大小和字体：</strong><p>本段文字将显示为18px宋体。</p></li><li class="font2"><strong>只指定字体样式、大小和字体：</strong><p>本段文字将显示为斜体的18px宋体。</p></li><li class="font3"><strong>只指定字体样式、小型大写字母、大小和字体：</strong><p>本段文字将显示为斜体的带小型大写字母的18px宋体。大小型大写字母对比：AaBbCcDdEeFfGg</p></li><li class="font4"><strong>只指定字体样式、小型大写字母、粗细、大小和字体：</strong><p>本段文字将显示为斜体的带小型大写字母的加粗18px宋体。</p></li><li class="font5"><strong>只指定字体样式、小型大写字母、粗细、大小、行高和字体：</strong><p>本段文字将显示为行高为2的斜体的带小型大写字母的加粗18px宋体。</p></li><li class="caption"><strong>指定字体为caption：</strong><p>本段文字将以caption的字体显示。</p></li><li class="icon"><strong>指定字体为icon：</strong><p>本段文字将以icon的字体显示。</p></li><li class="menu"><strong>指定字体为menu：</strong><p>本段文字将以menu的字体显示。</p></li><li class="message-box"><strong>指定字体为message-box：</strong><p>本段文字将以message-box的字体显示。</p></li><li class="small-caption"><strong>指定字体为small-caption：</strong><p>本段文字将以small-caption的字体显示。</p></li><li class="status-bar"><strong>指定字体为status-bar：</strong><p>本段文字将以status-bar的字体显示。</p></li></ul></body></html>复制上面这段代码编辑成.html格式文件用浏览器打开即可查看文字属性信息，如果没有编辑软件那就使用记事本编辑保存文件后缀为.html打开即可
分拆纵向独立属性。为元素设置上、下外边距。
分拆横向独立属性。为元素设置上、下外边距。
分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。
属性值描述:
1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影。
2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
3.Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。
4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
5.阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
6.阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
注：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
3.border-image-width：定义元素边框图像的厚度。
该属性用于指定使用多厚的边框来承载被裁剪后的图像。
当该属性省略未定义时，因为默认值是 1 ，所以该属性的计算值会是 1 * border-width ，相当于会直接使用 border-width 的定义。
4.border-image-outset：定义边框图像从边框边界向外偏移的距离。
5.border-image-repeat：定义分割图像怎样填充边框图像区域。
2.background-image:定义元素使用的背景图像。
3.background-repeat:定义元素的背景图像如何填充。
4.background-attachment：定义滚动时背景图像相对于谁固定。
5.background-position:指定背景图像在元素中出现的位置。
example:假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。
6.background-origin:指定的背景图像计算background-position时的参考原点(位置)。
取值：
border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。 （默认）
content-box：从content区域开始显示背景图像。
注意，如果设置background-origin后，设置background-position会相对于background-origin设置的位置做参考来偏移背景图，比如设置在border开始显示图片，这是设置background-position：left 10px top 10px是相对于边框进行左边偏移10px上面偏移10px，如果没设置background-origin，默认是相对于padding处进行偏移。
7.background-clip：指定对象的背景图像向外裁剪的区域。
取值：
border-box：从border区域（含border）开始向外裁剪背景。(默认)
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
8.background-size：定义背景图像的尺寸大小
最简单的方法是使用浮动。
1、可以用一个最大的div层 包裹住，左边一个div 左浮动，右边一个div右浮动，左边的就是一个logo图，主要处理在右边。
2、右边的div定义好之后，在细分为上中下，三个大div，最上面的div 可以左右浮动，左边一个span标签放定位，右边可以用 ul li标签 来进行分配。
3、中间的div同理。左右div浮动，进行处理。
4、最后的导航用 ul li 实现。如图只是做了一个大体的框架，具体实现需要做一些调整。
![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
