css中的字体样式一般包含有就9中，常见的有7种。这7种依次为：
1.字体样式：font-family；
2.字体大小：font-size；
3.字体加粗：font-weight；
4.字体斜体：font-style；
5.颜色：color；
6.文本装饰线条：text-decoration；
7.文字阴影：text-shadow；
其中，
font-famil用于设置文字名称，可以使用多个名称，或者使用逗号 分隔，浏览器则按照先后顺序依次使用可用字体。其使用方式如下
font-family：”family-name“；
例：
p { font-family:‘宋体'，'黑体', 'Arial’ }；
使用font-family之后，文字会根据相应的字体呈现出不同的效果。
font-size用于设置文字的尺寸大小。它的使用方法为：
font-size ： <length> | <percentage>；
如果用百分比作为单位，则是基于父元素字体的大小。
例：
p{font-szie：20px}
font-weight用于设置文字的粗细。
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
使用了font-weight之后，文字将会呈现出不同的粗细效果。
例：
p { font-weight:bold;}
p标签中的文字将会以粗体的方式呈现。
font-style用于设置字体的样式，主要体现在字体的倾斜上。
font-style : normal | italic | oblique
其默认的属性值为normal，即正常显示的字体样式，其另外的两个属性值都讲呈现斜体的效果哦。
例：
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
对于上面的四个文字属性，我们可以简写，其简写的语法如下：
font : font-style || font-variant || font-weight || font-size || / line-height || font-family
例：
p { font:italic bold 14px/22px 宋体}
其结果等价于
p{ font-style:italic; font-weight:bold; font-size:14px; line-height:22px; font-family:宋体; }
剩下的color，text-decoration，text-shadow它们的语法分别为：
color：<color> text-decoration : none || underline || blink || overline || line-through text-shadow: h-shadow v-shadow blur color;
其中color的属性值有三种表示方式：1英文字母描述，如p{color:red;}；2#后接6位十六进制数，如p{color:#ff0000}其中十六进制数如果每两个相同可进行简写P{color:#f00}；3用rgba(0~255,0~255,0~255,0-1)，其中最后一个表示不透明度，可以省略，则默认值为1。rgb()。
text-decoration的属性值显示的效果为文本被线条穿过的位置，
例
p { text-decoration:overline;}
p { text-decoration:underline;}
p { text-decoration:line-through;}
这三个例子依次表现的是文本的上划线，下划线与中划线。
text-shadow是描述文本的阴影效果，它的前两个属性值为文字阴影的水平位移与垂直位移，后两个属性为阴影的模糊程度及阴影的颜色（可选）。
例：
h1{ text-shadow: 2px 2px #ff0000; }
表示的是h1标签中的文本会产生水平2像素，垂直2像素的红色阴影。
除上述的文本样式外，还有@font-face，它能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。该种样式并不常用。
除了字体样式外，元素样式是我们经常见到与使用的css样式了。它常见的样式有包括width，height，margin，padding。
其中width和height表示的分别是元素的宽度和高度，其值一般为px。
例：
div{width:300px;height:300px}
表示的是一个长度为300像素，高低为300像素的盒子。
margin和padding则表示的是元素的外边距和内边距，其值可设一到四个不等：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
padding的取值与margin类似。
注：以上四种元素的样式只适用于块级元素，若想在内联元素中使其达到相同的效果，则应在内联元素中加入样式{display：block}。
以上四种元素样式对于网页布局有着十分重要的作用。