css中的字体样式及元素样式

　　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}。

　　以上四种元素样式对于网页布局有着十分重要的作用。