1. 打开“CSS样式”面板。
2. 在“所选内容的摘要”窗格中双击某一个属性，打开“CSS 规则定义”对话框。如下图所示：
一、定义CSS的类型属性
在“CSS 规则定义”对话框中，在“分类”下拉框中选择“类型”，然后可以在右边“类型”部分设置属性：
Font-family：设置字体系列。在下拉菜单中选择字体。
Font-size：定义文字的字体大小。
Font-weight：对字体应用特定或相对的粗体量。
Font-style：指定“正常”、“斜体”或“偏斜体”作为字体样式。
Font-variant：设置文本的小型大写字母变体。
Line-height：设置文本所在行的高度。
Text-transform：将所选内容中的每个单词的首字母大写或将文本设置为全部大写或小写。
Text-decoration：向文本中添加下划线、上划线或删除线，或使文本闪烁。
Color：设置文本的颜色。
提示：如果某一个属性不需要设置，可以将其保留为空。
可以用行内css、行外css、外链css
举例：
行内css：
<div style=""></div>
行外css：
<head>
<style>
</style>
</head>
外链css：
<head>
<link rel="stylesheet" type="test/css" href="#">
</head>
一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：
<link rel="stylesheet" type="text/css" href="./css/style.css" media="all"><link rel="stylesheet" href="./css/phone.css" media="(max-width:620px)">
<link rel="stylesheet" href="./css/pad.css" media="screen and (max-width:1024px) and (min-width:621px)">
只有一个css文件情况下，根据分辨率调整css样式，示例：
@media screen and (max-width:620px){.logo{width: 300pxmargin-left: -140px}
}
@media screen and (max-width:1024px) and (min-width:621px) {
.logo{width: 220pxmargin-left: -99px}
.nav li:nth-of-type(2),.nav li:nth-of-type(3){width: 8%}
.nav li:nth-of-type(5),.nav li:nth-of-type(6){width: 12%}
}
