你的位置:首页 > 网页设计

[网页设计]CSS知识总结(三)


CSS的常用样式

 

1.字体样式

  1)字体名称(font-family)

   font-family  :  <family-name>

   设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体。

   如果字体名称包含空格或中文,则应使用引号括起。

  例子 源代码:

/* CSS代码 */p{  font-family:"微软雅黑","宋体";}

<!-- HTML代码 --><body>  <p>文字,是承载语言的符号。</p></body>

  效果:

文字,是承载语言的符号。

 

   2)字体大小(font-size)

   设置文字的尺寸

   font-size : <length> | <percentage>

   <length>:用长度值指定文字大小,不允许负值。

   <percentage>:用百分比指定文字大小,其百分比取值是基于父对象中字体的大小,不允许负值。

  例子 源代码:

/* CSS代码 */.length{font-size:20px;}.percentage{font-size:20px;}.percentage span{font-size:60%;}

<!-- HTML代码 --><body>  <p class="length">文字,是承载语言的符号。</p>  <p class="percentage">文字,<span>是承载语言的符号。</span></p></body>

  效果:

文字,是承载语言的符号。

文字,是承载语言的符号。

 

  3)字体加粗(font-weight)

    控制字体粗细

   font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

   normal:正常的字体,相当于数字值400

   bold:粗体,相当于数字值700

   bolder:定义比继承值更重的值

   lighter:定义比继承值更轻的值

   **推荐使用"bold"。

  例子 源代码:

/* CSS代码 */.normal{font-weight:normal;}.bold{font-weight:bold;}

<!-- HTML代码 --><body>  <p class="normal">这是正常的字体</p>  <p class="bold">这是加粗的字体</p></body>

  效果:

这是正常的字体

这是加粗的字体

 

  4)字体斜体(font-style)

   控制字体是否倾斜

   font-style : normal | italic | oblique 

   normal:指定文本字体样式为正常的字体

   italic:指定文本字体样式为斜体

  例子 源代码:

/* CSS代码 */.normal{font-style:normal;}.italic{font-style:italic;}

<!-- HTML代码 --><body>  <p class="normal">这是正常的字体</p>  <p class="italic">这是斜体的字体</p></body>

  效果:

这是正常的字体

这是斜体的字体

 

   5)字体样式缩写(font

   font : font-style || font-variant || font-weight || font-size || / line-height || font-family

   例如:

/* CSS代码 */p{  font-style:italic;  font-weight:bold;  font-size:14px;  line-height:22px;  font-family:"宋体";}

  缩写后:

/* CSS代码 */p {font:italic bold 14px/22px "宋体"}

 

 

  6)字体颜色(color)

   color : <color>

   颜色属性值分为三种格式:

   1、英文单词,比如 red , yellow ,green …

   2、十六进制表示方式,#开头,6个十六进制的字符或数字组合,比如:#FFFFFF

   3、RGB模式,红 0-255,绿 0-255,蓝 0-255,比如: RGB(12,34,56)

      RGBA模式,最后的A表示透明度,比如:RGBA(0,0,0,0.5)

  例子 源代码:

/* CSS代码 */p {color:red;}

<!-- HTML代码 --><body>  <p>文字,是承载语言的符号。</p></body>

  效果:

文字,是承载语言的符号。

 

  7)文本装饰线条(text-decoration)

   控制文本装饰线条

   text-decoration : none | underline | blink | overline | line-through

   underline:下划线

   overline:上划线

   line-through:删除线

   例子 源代码:

/* CSS代码 */.sup{  text-decoration:overline;  /*上划线*/}.del{  text-decoration:line-through;  /*删除线*/}.sub{  text-decoration:underline; /*下划线*/}

<!-- HTML代码 --><body>  <p class="sup">这是上划线</p>  <p class="del">这是删除线</p>  <p class="sub">这是下划线</p></body>

  效果:

这是上划线

这是删除线

这是下划线

 

   8)文字阴影(text-shadow)

   控制文字的阴影部分

   text-shadow: h-shadow v-shadow blur color;

   h-shadow:必需,水平阴影的位置,允许负值。

   v-shadow:必需,垂直阴影的位置,允许负值。

   blur:可选,模糊的距离。

   color:可选,阴影的颜色。

  例子 源代码:

/* CSS代码 */.shadow{  font-size:20px;  font-weight:bold;  /*color: transparent;*/  /*字体透明*/  text-shadow:3px 3px 3px #b28118;  /*水平距离 垂直距离 模糊距离 颜色*/}

<!-- HTML代码 --><body>  <p class="shadow">有阴影的哦</p></body>

  效果:

有阴影的哦