日期:2014-04-11  浏览次数:20730 次

■ FONT-VARIANT:

  FONT-VARIANT 可以将正常文字尺寸缩小一半后转为大写:

  • h2 {font-variant:small-caps}
 ■ TEXT-TRANSFORM:

  完全控制字母大小写:

  • 全部大写:h2 {text-transform:uppercase};
  • 全部小写:h2 {text-transform:lowercase};
  • 单词第一个字母大写:h2 {text-transform:capitalize};
  • 取消所有设定:h2 {text-transform:none};
 ■ TEXT-DECORATION:

  哪天你突发奇想,希望链接没有下划线,现在你可以做到:

  • 文字下划线:A:link{text-decoration:underline};
  • 文字上划线:A:link{text-decoration:overline};
  • 文字删除线:A:link{text-decoration:line-through};
  • 文字闪烁:A:link{text-decoration:blink};
  • 不要任何效果:A:link{text-decoration:none}
  • ■ 字间距:

      利用字间距属性word-spacing,可以调整单词间的距离。

    • h2 {word-spacing:5pt}
     ■ 字母间距:

      利用字母间距属性letter-spacing,可以调整单词中每个字母间的距离。

    • h2 {letter-spacing:10pt};
     ■ 行高:

      与字距不同的是行距line-height,它调整的是行与行间垂直方向的距离,有三种方法设置:

    • 数值:h3 {font-size:12pt; line-height:2};/*此处line-height=2x12pt=24pt */
    • 长度单位:h3 {font-size:12pt; line-height:24pt};
    • 比例:h3 {font-size:12pt; line-height:200%};

      无论是字距或字母间距或行距都有一个共同的参数:normal,一旦设为normal就是要浏览器使用默认值。

    ■ 水平对齐:

      利用文字对齐属性text-align,可以控制段落的水平对齐:

    • h2 {text-align:center}
    • h2 {text-align:left}
    • h2 {text-align:right}

      这项属性可作用于<P>,<h1>-<h6>,<blockquote>和<ul>标记。

     ■ 垂直对齐:

      利用垂直对齐属性vwrtical-align,可以控制对象(包括文字或图形)相对于母体的垂直位置:

    • h2 {vertical-align:top}
    • h2 {vertical-align:text-top}
    • h2 {vertical-align:bottom}
    • h2 {vertical-align:text-bottom}
    • h2 {vertical-align:baseline}
    • h2 {vertical-align:middle}
    • h2 {vertical-align:sub}/*上标*/
    • h2 {vertical-align:super}/*下标*/

      这些属性具体对齐效果如何,希望大家自已去试验。

     ■ 首行缩进:

      首行缩进text-indent,在文档排版中经常用到:

    • h3 {text-indent:24pt};
    • ■ 容器的概念:

        根据CSS对网页样式的定义,页面上的所有元素都放在一个容器里,这个容器叫BOX。BOX也就包括:

      • 元素本身;
      • 围绕元素的空格;(padding)
      • 围绕元素空格外的边框;(border)
      • 边框外的边距。(margin)
       ■ 四个边距:

        margin用于设定上,右,下,左,边距:

      • body {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px}
      • body {margin:10px 20px 30px 40px}/*效果与上面方式相同*/

        以上参数值同样可以是其他长度单位(如:pt,em等)或比例。

       ■ 顶,底,左,右空格填充:

        padding用于设置空格填充范围,用法与边距属性相同:

      • h3 {margin-top:10px;margin-right:20px;margin-bottom:30px;margin-
        left:40px};
      • h3 {margin:10px 20px 30px 40px}
       ■ 边框:

        border可设定的属性很多,包括颜色和宽度,关键是可以指定每个边的宽度和每个边的颜色 。

      • 边框宽度border-width可以是thin,medium,thick或长度值:
        • h3 {border-top-width:2px;border-right-width:4px;border-bottom-width:6px;border-left-width:8px};
        • h3 {border-width:2px 4px 6px 8px}/*与上面相同*/

        • p {border-top-width:thin;border-right-width:medium;border-bottom-
          width:thick;border-left-width:none};
        • p {border-width:thin medium thick none}/*与上面相同,左边框将不显示*/

      • 边框颜色border-color定义方法与宽度定义相似,颜色值也可以用RGB值(如#ff00ff):
        • h3 {border-color:red blue yellow green}/*上:红;右:蓝;下:黄;左:绿*/
        • h3 {border-color:red blue }/*上,下:红;右,左:蓝;*/
        • h3 {border-color:#ff00ff }/*所有边框为#ff00ff色*/

      • 边框线的线条式样border-style,有九个关键字来描述:
        • none /*不画边框,不论边框厚度是多少*/
        • dotted /*由点组成的虚线*/
        • dash /*由短线组成的虚线*/
        • solid /*实线 */
        • double /*双实线*/
        • groove /*3D沟状*/
        • ridge /*3D脊状*/
        • inset /*3D内嵌*/
        • outset /*3D外嵌*/