乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

  • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s>

    • 分享

      css屬性列表和屬性值含義

       Long_way 2008-02-20
      css屬性列表
      屬性名稱

      字體屬性(Font)
      font-family
      font-style
      font-variant
      font-weight
      font-size


      顏色和背景屬性
      Color
      Background-color
      Background-image
      Background-repeat
      Background-attachment
      Background-position


      文本屬性
      Word-spacing
      Letter-spacing
      Text-decoration

      Vertical-align

      Text-transform

      Text-align
      Text-indent
      Line-height


      邊距屬性
      Margin-top
      Margin-right
      Margin-bottom
      Margin-left

      填充距屬性
      Padding-top
      Padding-right
      Padding-bottom
      Padding-left

      邊框?qū)傩?/font>
      Border-top-width
      Border-right-width
      Border-bottom-width
      Border-left-width
      Border-width
      Border-color
      Border-style
      Border-top
      Border-right
      Border-bottom
      Border-left
      Width
      Height
      Float
      Clear

      分級屬性
      Display
      White-space
      List-style-type
      List-style-image
      List-style-position
      List-style

      鼠標(Cursor)屬性
      屬性含義


      使用什么字體
      字體是否斜體
      是否用小體大寫
      字體的粗細
      字體的大小



      定義前景色
      定義背景色
      定義背景圖案
      重復方式
      設置滾動
      初始位置



      單詞之間的間距
      字母之間的間距
      文字的裝飾樣式

      垂直方向的位置

      文本轉(zhuǎn)換

      對齊方式
      首行的縮進方式
      文本的行高



      頂端邊距
      右側(cè)邊距
      底端邊距
      左側(cè)邊距


      頂端填充距
      右側(cè)填充距
      底端填充距
      左側(cè)填充距


      頂端邊框?qū)挾?br>右側(cè)邊框?qū)挾?br>底端邊框?qū)挾?br>左側(cè)邊框?qū)挾?br>一次定義寬度
      設置邊框顏色
      設置邊框樣式
      一次定義頂端
      一次定義右側(cè)
      一次定義底端
      一次定義左側(cè)
      定義寬度屬性
      定義高度屬性
      文字環(huán)繞
      哪一邊環(huán)繞


      定義是否顯示
      怎樣處理空白
      加項目編號
      加圖案
      第二行起始位置
      一次定義列表


      自動
      定位“十”字
      默認指針
      手形
      移動
      箭頭朝右方
      箭頭朝右上方
      箭頭朝左上方
      箭頭朝上方
      箭頭朝右下方
      箭頭朝左下方
      箭頭朝下方
      箭頭朝左方
      文本“I”形
      等待
      幫助
      屬性值


      所有的字體
      Normal、italic、oblique
      Normal、small-caps
      Normal、bold、bolder、lithter等
      Absolute-size、relative-size、length、percentage等


      顏色
      顏色
      路徑
      Repeat-x、repeat-y、no-repeat
      Scroll、Fixed
      Percentage、length、top、left、
      right、bottom等


      Normal <length>
      同上
      None|underline|overline|line-
      through|blink
      Baseline|sub|super|top|text-top|middle|bottom|text-bottom|
      Capitalize|uppercase|
      lowercase|none
      Left|right|center|justify
      <length>|<percentage>
      Normal|<number>|<length>|
      <percentage>


      Length|percentage|auto
      同上
      同上
      同上


      Length|percentage
      同上
      同上
      同上


      Thin|medium|thick|length
      同上
      同上
      同上
      同上
      Color
      None|dotted|dash|solid等
      Border-top-width|color等
      同上
      同上
      同上
      Length|percentage|auto
      Length|auto
      Left|right|none
      Left|right|none|both


      Block、inline、list-item、none
      Normal、pre、nowrap
      Disc、circle、square等
      <url>|none
      Inside、outside
      <keyword>|<position> |<url>


      Auto
      Crosshair
      Default
      Hand
      Move
      e-resize
      Ne-resize
      Nw-resize
      n-resize
      Se-resize
      Sw-resize
      s-resize
      w-resize
      Text
      Wait
      Help

       

       

      CSS屬性:

      1、媒體(Media)類型

      樣式單的一個最重要的特點就是它可以作用于多種媒體,比如頁面、屏幕、電子合成器等等。特定的屬性只能作用于特定的媒體,如"font-size"屬性只對可卷動的媒體類型有效(屏幕)。

      聲明一個媒體屬性可以用@import@media引入:

      @import url(loudvoice.css) speech;
      @media print {
      /* style sheet for print goes here */
      }

      也可以在文檔標記中引入媒體:

      <LINK rel="stylesheet" type="text/css" media="print" href="foo.css">

      可以看出,@import@media的區(qū)別在于,前者引入外部的樣式單用于媒體類型,后者直接引入媒體屬性。@import的使用方法是@import加樣式單文件的URL地址再加媒體類型,可以多個媒體共用一個樣式單,媒體類型之間用""分割符分開。@media用法則是把媒體類型放在前面,其他規(guī)則和rule-set基本一樣。下面列出各種媒體類型:

      SCREEN:指計算機屏幕。
      PRINT:指用于打印機的不透明介質(zhì)。
      PROJECTION:指用于顯示的項目。
      BRAILLE:盲文系統(tǒng),指有觸覺效果的印刷品。
      AURAL:指語音電子合成器。
      TV:指電視類型的媒體。
      HANDHELD:指手持式顯示設備(小屏幕,單色)
      ALL:適合于所有媒體。

      2、BOX模型(BOX Model)屬性

      什么是BOXCSSHTML中以<somesign>……</somesign>的部分稱為BOX(容器),BOX有三類屬性:padding、marginborder。

      Margin屬性:

      Margin屬性分為margin-top、margin-right、margin-bottom、margin-leftmargin五個屬性,分別表示BOX里內(nèi)容離邊框的距離,它的屬性值是數(shù)值單位,可以是長度、百分比或auto,margin甚至可以設為負值,造成BOXBOX之間的重疊顯示,關(guān)于margin的屬性詳見下表:

      屬性名稱: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
      屬性值: <margin-width>
      初始值: 0
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 相對于BOX的寬度

      例如:

      H1 { margin-top: 2em }
      H2 { margin-right: 12.3% }

      Margin還有一個快捷的書寫方法,就是直接用margin屬性,例如:

      BODY { margin: 1em 2em 3em 2em}

      等同于:

      BODY {
      margin-top:1em;
      margin-right:2em;
      margin-bottom:3em;
      margin-left:2em;
      }

      margin屬性后面可以有四個值,中間用空格隔開(記住不是逗號),順序是"上右下左",當然margin后面可以不足四個值,例如:

      BODY { margin: 2em } /* 所有的margin都設為2em */
      BODY { margin: 1em 2em } /*
      上下margin1em,右左margin2em */
      BODY { margin: 1em 2em 3em } /*
      margin1em,右左margin2em,下margin3em*/

      Padding屬性:

      Padding屬性用來描述BOX的邊框和內(nèi)容之間插入多少空間,和margin屬性類似,它也分為上右下左和一個快捷方式padding,關(guān)于padding的屬性詳見下表:

      屬性名稱: 'padding-top''padding-right'、'padding-bottom'、'padding-left' 'padding'
      屬性值: <padding-width>
      初始值: 0
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 相對于BOX的寬度

      例如:

      BLOCKQUOTE { padding-top: 0.3em }

      padding屬性和margin類似此處略去。

      Border屬性:

      平時我們在查看HTML文檔時,看到一段文字,并不會把它當作一個BOX,實際上BOX是有邊框的,只是平時不顯示出來罷了,而border屬性就是用來描述BOX邊框的。Border屬性分為border-widthborder-colorborder-style,而這些屬性下面又有分支。

      border-width屬性:

      border-width屬性又分為:border-top-width、border-right-width、border-bottom-width、border-left-widthborder-width屬性,border-width用長度表示為"thin/medium/thick"或長度單位表示,下面是border-width屬性的詳細列表:

      屬性名稱: 'border-top-width'、'border-right-width'、'border-bottom-width''border-left-width'、'border-width'
      屬性值: <border-width>
      初始值: medium
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      border-width為快捷方式,順序為上右下左,值之間用空格隔開。

      border-color屬性:

      border-color屬性用來顯示BOX邊框顏色,分為border-top-color、border-right-colorborder-bottom-colorborder-right-colorborder-color屬性,屬性值為顏色,可以用十六進制表示,也可用rgb()表示,屬性見下:
      屬性名稱: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'
      'border-color'

      屬性值: <color>
      初始值: 元素顏色的初始值
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      border-color為快捷方式,順序為上右下左,值之間用空格隔開。

      border-style屬性:

      border-style屬性用來設置BOX對象邊框的樣式,它的屬性值為CSS規(guī)定的關(guān)鍵字,平常看不到border是因為,初始值是none的緣故。屬性見下:

      屬性名稱: 'border-top-style''border-right-style''border-bottom-style''border-left-style'、'border-style'
      屬性值: <border-style>
      初始值: none
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      border-color為快捷方式,順序為上右下左,值之間用空格隔開。

      屬性值的名稱和代表意義如下:

      none:無邊框。
      dotted:邊框為點線。
      dashed:邊框為長短線。
      solid:邊框為實線。
      double:邊框為雙線。
      groove、ridge、insetoutset:顯示不同效果的3D邊框(根據(jù)color屬性)。

      border屬性:

      border屬性為Border的快捷方式,屬性值間用空格隔開,順序是"邊框?qū)挾?邊框樣式 邊框顏色",例如:

      <h1 style="border:.5em outset red">hello!</h1>

      還可以用border-top、border-rightborder-bottom、border-left分別作為上右下左的快捷方式,屬性值順序同border屬性。

      3、布局(Layout)屬性:

      在以前的HTML里,元素的位置只能靠元素的依次排列覺得,而在CSS里你可以更精確的定位元素。Netscape曾提出過Layer標記,它對于精確布局很有好處,但是并沒有被W3C承認,W3CCSS提出了類似于Layer標記的功能。

      position屬性:

      position屬性用來決定元素的位置類型,詳見屬性:

      屬性名稱: 'position'
      屬性值: absolute | relative | static
      初始值: static
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止
      其屬性值分別代表:
      absolute:屏幕上的絕對位置。
      relative:屏幕上的相對位置。
      static:固有位置。


      direction屬性:

      direction屬性決定BOX的排列方向,詳見屬性:

      屬性名稱: 'direction'
      屬性值: ltr| rtl
      初始值: ltr
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止


      floatclear屬性:

      HTML中圖片可以選擇飄浮的位置,現(xiàn)在BOX對象通過CSS對于也可以選擇飄浮的位置。改變BOXfloat屬性,BOX將飄浮在其他元素的左或右方:

      屬性名稱: 'float'
      屬性值: left| right|none
      初始值: none
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      例如:

      <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
      </STYLE>
      <BODY>
      <P>
      <IMG src=img.gif>
      Some sample text that has no other...
      </BODY>

      相反的,使用clear屬性將禁止元素在BOX的左方或右方飄?。?/span>

      屬性名稱: 'clear'
      屬性值: left| right|both|none
      初始值: none
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止


      絕對位置屬性:

      絕對位置屬性有四個屬性:top、right、bottomleft,屬性值為長度單位或百分數(shù):

      屬性名稱: 'top'、'right'、'bottom'、'left'
      屬性值: <length>|<percentage>|auto
      初始值: none
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      利用以上屬性,用戶就可以精確定義元素的位置,如:

      <P style="position: relative; margin-right: 10px; left: 10px;">
      I used two red hyphens to serve as a change bar. They
      will "float" to the left of the line containing THIS
      <SPAN style="position: absolute; top: auto; left: 0px; color: red;">--</SPAN>
      word.</P>

      z-index屬性:

      CSS中允許元素的重疊顯示,這樣就有一個顯示順序的問題,z-index屬性描述了元素的前后位置,如果把電腦屏幕看作X-Y平面的話,那么Z軸就是垂直于屏幕的,z-index使用整數(shù)表示元素的前后位置,數(shù)值越大,就會顯示在相對靠前的位置,并且CSS同意在z-index中使用負數(shù)。

      屬性名稱: 'z-index'
      屬性值: auto|<integer>
      初始值: auto
      適合對象: 使用position屬性的元素
      是否繼承: no
      百分比備注: 被禁止


      width屬性:

      規(guī)定BOXwidth屬性,可以使BOX的寬度不依靠它所包含的內(nèi)容的多少:

      屬性名稱: 'width'
      屬性值: <length> | <percentage> | auto
      初始值: auto
      適合對象: 塊元素
      是否繼承: no
      百分比備注:根據(jù)父元素的width而定

      CSS中還提供了min-widthmax-width屬性,使得BOX的寬度在最小寬度和最大寬度之間。

      屬性名稱: 'min-width'
      屬性值: <length> | <percentage>
      初始值: 0
      適合對象: all
      是否繼承: no
      百分比備注:根據(jù)父元素的width而定

      屬性名稱: 'max-width'
      屬性值: <length> | <percentage>
      初始值: 100%
      適合對象: all
      是否繼承: no
      百分比備注:根據(jù)父元素的width而定

      height屬性:

      相同的BOX還有height屬性來控制本身的高度:

      屬性名稱: 'height'
      屬性值: <length> | <percentage> | auto
      初始值: auto
      適合對象: 塊元素
      是否繼承: no
      百分比備注:根據(jù)父元素的height而定

      CSS中還提供了min-heightmax-height屬性,使得BOX的高度在最小高度和最大高度之間。

      屬性名稱: 'min-height'
      屬性值: <length> | <percentage>
      初始值: 0
      適合對象: all
      是否繼承: no
      百分比備注:根據(jù)父元素的height而定

      屬性名稱: 'max-height'
      屬性值: <length> | <percentage>
      初始值: 100%
      適合對象: all
      是否繼承: no
      百分比備注:根據(jù)父元素的height而定


      overflow屬性:

      在規(guī)定元素的寬度和高度時,如果元素的面積不足以顯示全部內(nèi)容的話就要用到overflow屬性:

      屬性名稱: 'overflow'
      屬性值: visible | hidden | scroll | auto
      初始值: visible
      適合對象: 元素的position屬性
      是否繼承: no
      百分比備注: 被禁止

      屬性值含義如下:

      visible:擴大面積以顯示所有內(nèi)容。
      hidden:隱藏超出范圍的內(nèi)容。
      scroll:在元素的右邊顯示一個滾動條。
      auto:當內(nèi)容超出元素面積時,顯示滾動條。

      clip屬性:

      CSS還提供了一種clip屬性,可以把元素區(qū)域剪切成各種形狀,但目前提供的只有方形一種:

      屬性名稱: 'clip'
      屬性值: <shape> | auto
      初始值: auto
      適合元素: 元素的position屬性被設為absolute
      是否繼承: no
      百分比備注: 被禁止

      <shape>值為rect(top right bottom left)

      line-heightvertical-align屬性:

      line-height屬性可以規(guī)定元素內(nèi)部的行間距,使用長度單位或百分數(shù):

      屬性名稱: 'line-height'
      屬性值: normal | <number> | <length> | <percentage>
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注:根據(jù)元素的字體大小而定

      例如下面的例子,雖然表達方式不同,但結(jié)果一樣:

      DIV { line-height: 1.2; font-size: 10pt }
      DIV { line-height: 1.2em; font-size: 10pt }
      DIV { line-height: 120%; font-size: 10pt }

      vertical-align屬性決定元素在垂直位置的顯示:

      屬性名稱: 'vertical-align'
      屬性值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
      初始值: baseline
      適合對象: inline elements
      適合繼承: no
      百分比備注: 根據(jù)元素的line-height屬性而定

      屬性值含義如下:
      baseline:與元素的基線對齊。
      middle:與元素中部對齊。
      sub:字下沉。
      super:字上升。
      text-top:文本頂部對齊。
      text-bottom:文本底部對齊。
      Top:和本行位置最高元素對齊。
      Bottom:和本行位置最低元素對齊。

      Visibility屬性:

      該屬性用于控制元素的顯示或隱藏:

      屬性名稱: 'visibility'
      屬性值: inherit | visible | hidden
      初始值: inherit
      適合對象: 所有元素
      是否繼承: 如果該值為inherit,則繼承父元素屬性
      百分比備注: 被禁止

      4、顏色和背景(Color and Background)屬性:

      這里介紹有關(guān)CSS中前景色和背景顏色、圖片的設定方法。

      color屬性:

      color屬性用于設定元素的前景色:

      屬性名稱: 'color'
      屬性值: <color>
      初始值: 根據(jù)用戶的初始值而定
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      color屬性的值可以是十六進制數(shù)值、rgb()函數(shù)或CSS承認的顏色名稱。如:

      EM { color: red }
      EM { color: rgb(255,0,0) }

      背景屬性:

      background-color屬性用于設定背景色,初始值為透明:

      屬性名稱: 'background-color'
      屬性值: <color> | transparent
      初始值: transparent
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止


      backgroud-image屬性用于設定背景的圖片:

      屬性名稱: 'background-image'
      屬性值: <url> | none
      初始值: none
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      其中url可以為絕對地址,也可以是相對地址,例如:

      BODY { background-image: url(marble.gif) }
      P { background-image: none }

      以上兩個屬性利用普通的HTML屬性也可以實現(xiàn),下面的屬性是CSS對原有HTML的擴展。
      background-repeat屬性用來描述背景圖片的重復排列方式:

      屬性名稱: 'background-repeat'
      屬性值: repeat | repeat-x | repeat-y | no-repeat
      初始值: repeat
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 被禁止

      其中屬性值的含義為:
      repeat:沿X軸和Y軸兩個方向重復顯示圖片。
      repeat-x:沿X軸方向重復圖片。
      repeat-y:沿Y軸方向重復圖片。
      none:不重復圖片。

      例如:

      BODY {
      background: red url(pendant.gif);
      background-repeat: repeat-y;
      }
      /*
      表示沿Y軸重復圖片"pendant.gif",其余部分以紅色為背景色*/

      background-attachment屬性表示在滾動整個文檔時,背景圖片的顯示方式。它的屬性值有兩種:fixedscrollfixed相當于IE4里的水印效果,也就是說在拖動文檔時,背景相對是靜止的,scroll則和文檔一起滾動。

      background-position屬性用來指定背景圖片顯示的位置:

      屬性名稱: 'background-position'
      屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
      初始值: 0% 0%
      適合對象: 容器元素
      是否繼承: no
      百分比備注
      : refer to the size of the element itself

      其中屬性值含義為:
      "top left""left top"表示"0% 0%"。
      "top""top center""center top"表示"50% 0%"。
      "right top""top right"都表示"100% 0%"。
      "left"、"left center""center left"表示"0% 50%"。
      "center""center center"表示"50% 50%"
      "right"、"right center""center right"都表示"100% 50%"
      "bottom left""left bottom"表示"0% 100%"。
      "bottom"、"bottom center""center bottom"都表示"50% 100%"
      "bottom right"
      "right bottom"表示"100% 100%"。
      例如:

      BODY { background: url(banner.jpeg) right top } /* 100% 0% */
      BODY { background: url(banner.jpeg) top center } /* 50% 0% */
      BODY { background: url(banner.jpeg) center } /* 50% 50% */
      BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

      background屬性是以上背景屬性的快捷方式,屬性和順序如下:

      屬性名稱: 'background'
      屬性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
      適合對象: 所有元素
      是否繼承: no
      百分比備注: 只在background-position中容許使用

      5、字體(Font)屬性:

      這里定義了關(guān)于字體的各種屬性。

      font-family屬性定義字體的名稱,可以是一個字體的名稱,也可以是一類字體的名稱,字體的名稱一定要和計算機系統(tǒng)里的完全一樣:

      屬性名稱: 'font-family'
      屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
      初始值: 根據(jù)用戶定義而定
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      有些計算機系統(tǒng)里如果沒有樣式單要求的字體,可以再設一個次字體以備萬一。例如:

      BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

      family-name是指確定的某字體,如Heisi Mincho W3,generic-family指某一類字體,如serif。

      font-style屬性描述字體的傾斜程度:

      屬性名稱: 'font-style'
      屬性值: normal | italic | oblique
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止


      font-variant屬性:

      屬性名稱: 'font-variant'
      屬性值: normal | small-caps
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      一個使用了small-caps屬性的元素中的小寫字母看起來要比正常的大寫字母小一些。

      font-weight屬性用來描述字重。

      屬性名稱: 'font-weight'
      屬性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      100900代表9種不同的字重,400代表normal700代表bold,900是最重的字體,bolderlighter表示字體的字重比父元素高或低一級,比如父元素字重為400,則bolder代表字重500,如果父元素本身字重為900,那么bolder后,字重還是900,同樣的lighter也一樣。有些字體并沒有100900那么全的字重,也許是從300700,那么字重的最小和最大值也為300700。例如:

      P { font-weight: normal } /* 400 */
      H1 { font-weight: 700 } /* bold */

      font-size屬性描述字體的大小:

      屬性名稱: 'font-size'
      屬性值: <absolute-size> | <relative-size> | <length> | <percentage>
      初始值: medium
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: relative to parent element's font size

      該屬性可以使用絕對大小,也可以使用相對大小,其中絕對大小可以使用,如下關(guān)鍵字表示:

      xx-small | x-small | small | medium | large | x-large | xx-large 分別代表最小、較小、小、中等、大、較大和最大。相對大小可以使用:larger smaller描述。例如:

      P { font-size: 12pt; }
      BLOCKQUOTE { font-size: larger }
      EM { font-size: 150% }
      EM { font-size: 1.5em }

      Font屬性是以上屬性的快捷方式,屬性如下:

      屬性名稱: 'font'
      屬性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 只在font-size使用

      例如:

      P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
      P { font: x-large/110% "new century schoolbook", serif }
      P { font: bold italic large Palatino, serif }
      P { font: normal small-caps 120%/120% fantasy }

      6、文本(Text)屬性:

      這里的屬性將影響WEB文檔中的文本顯示情況。

      text-indent屬性描述文本的縮進程度:

      屬性名稱: 'text-indent'
      屬性值: <length> | <percentage>
      初始值: 0
      適合對象: 容器元素
      是否繼承: yes
      百分比備注: 根據(jù)父元素的寬度而定

      下面的例子表明段落的縮進值為3em

      P { text-indent: 3em }

      Alignment屬性表明文本的對齊方式:

      屬性名稱: 'alignment'
      屬性值: left | right | center | justify
      初始值: 依照用戶定義
      適合對象: block-level elements
      是否繼承: yes
      百分比備注: 被禁止


      text-decoration屬性描述對文本的修飾方法:

      屬性名稱: 'text-decoration'
      屬性值: none | [ underline || overline || line-through || blink ]
      初始值: none
      適合對象: 所有元素
      是否繼承: no (see clarification below)
      百分比備注: 被禁止

      屬性值含義分別為:
      underline:下劃線。
      overline:上劃線。
      line-through:刪除線。
      blink:閃爍(如同Navigator中的blink標記的功能)

      text-shadow屬性可以為文本加入陰影的特效:

      屬性名稱: 'text-shadow'
      屬性值: none | <color> [, <color> ]*
      初始值: none
      適合對象: all
      是否繼承: No
      百分比備注: 只在描述透明度時有效

      例如:

      P { text-shadow: black }

      上例將在文本的右下方顯示黑色陰影,另外陰影將增大BOX的面積。

      letter-spacing屬性表明文本的字間距:屬性名稱: 'letter-spacing'

      屬性值: normal | <length> | auto
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      例如:

      BLOCKQUOTE { letter-spacing: 0.1em }

      word-spacing屬性表明文本中單詞間距:

      屬性名稱: 'word-spacing'
      屬性值: normal | <length>
      初始值: normal
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      例如:

      H1 { word-spacing: 1em }

      text-transform屬性可以將BOX內(nèi)的文本按指定的大寫或小寫形式顯示:

      屬性名稱: 'text-transform'
      屬性值: capitalize | uppercase | lowercase | none
      初始值: none
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      屬性值含義為:
      capitalize:把BOX中的每句句首字母變成大寫。
      uppercase:把BOX中所有的字母變成大寫。
      lowercase:把BOX中所有的字母變成小寫。

      White-space屬性描述如何顯示文本中的空格,在HTML中,空格是被省略的,也就是說你在一個段落標記的開頭無論輸入多少個空格都是無效的,要輸入空格有兩個方法,一是直接輸入空格的代碼" ",或者使用<pre>標記,CSS中也制定了類似于pre的屬性:

      屬性名稱: 'white-space'
      屬性值: normal | pre | nowrap
      初始值: normal
      適合對象: 容器元素
      是否繼承: yes
      百分比備注: 被禁止

      例如:

      UL { list-style: upper-roman inside } /* 對任何UL有效*/
      UL ~ UL { list-style: circle outside } /*
      對任何UL內(nèi)部的UL標記有效*

      7、列表屬性:

      這里的屬性用來描述列表(list)的一系列屬性。

      list-style-type屬性描述用于列表每一項前使用的符號:

      屬性名稱: 'list-style-type'
      屬性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
      初始值: disc
      適合對象: 列表元素
      是否繼承: yes
      百分比備注: 被禁止

      屬性值含義為:
      disc:圓餅形。
      circle:空心圓形。
      square:方形。
      decimal:十進制數(shù)值。
      lower-roman:小寫羅馬數(shù)字。
      upper-roman:大寫羅馬數(shù)字。
      lower-alpha:小寫希臘字母。
      upper-alpha:大寫希臘字母。

      例如:

      <STYLE>
      OL { list-style-type: lower-roman }
      </STYLE>
      <BODY>
      <OL>
      <LI> This is the first item.
      <LI> This is the second item.
      <LI> This is the third item.
      </OL>
      </BODY>

      還可以利用list-style-image把列表前面的符號換為圖形:

      屬性名稱: 'list-style-image'
      屬性值: <url> | none
      初始值: none
      適合對象: 列表元素
      是否繼承: yes
      百分比備注: 被禁止

      <url>可以是絕對地址,也可以是相對地址。

      list-style-position屬性用于描述列表的位置顯示:

      屬性名稱: 'list-style-position'
      屬性值: inside | outside
      初始值: outside
      適合對象: 列表元素
      是否繼承: yes
      百分比備注: 被禁止

      屬性值outsideinside分別表示在BOX外部顯示或內(nèi)部顯示,例如:

      <STYLE type="text/css">
      UL { list-style: outside }
      UL.compact { list-style: inside } </STYLE> <UL>
      <LI>first list item comes first
      <LI>second list item comes second
      </UL>
      <UL class=compact>
      <LI>first list item comes first
      <LI>second list item comes second
      </UL>

      list-style屬性為以上屬性的快捷方式:

      屬性名稱: 'list-style'
      屬性值: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
      初始值: no
      適合對象: 列表元素
      是否繼承: yes
      百分比備注: 被禁止

      例如:

      UL { list-style: upper-roman inside } /* 對任何UL有效*/
      UL ~ UL { list-style: circle outside } /*
      對任何UL內(nèi)部的UL標記有效*/

      PRE { white-space: pre }
      P { white-space: normal

      8、表格屬性:

      由于表格中的大部分屬性已經(jīng)在以上的各類屬性中探討過了,所以這里只有兩個屬性介紹:

      row-span屬性描述表格跨越的行的數(shù)目:

      屬性名稱: 'row-span'
      屬性值: <integer>
      初始值: 1
      適合對象: 表格元素
      是否繼承: no
      百分比備注: 被禁止


      column-span屬性描述表格跨越的列的數(shù)目:

      屬性名稱: 'column-span'
      屬性值: <integer>
      初始值: 1
      適合對象: 表格元素
      是否繼承: no
      百分比備注: 被禁止

      9、用戶界面屬性:

      cursor屬性,用戶可以指定在某個元素上要使用的光標形狀:

      屬性名稱: 'cursor'
      屬性值: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url>
      初始值: auto
      適合對象: 所有元素
      是否繼承: yes
      百分比備注: 被禁止

      屬性值分別代表鼠標指針在windows操作里的各種形狀,另外還可以指定指針圖標的url地址,不過CSS還暫時不支持ani動畫光標。

      結(jié)束語:

      到此,所有關(guān)于CSS現(xiàn)有的屬性都介紹完了(還有一些關(guān)于聽覺方面的樣式單,就不再作介紹),本文也該結(jié)束了,雖然現(xiàn)在支持樣式單的瀏覽器種類還不多,但也占到了大半,樣式單遲早會成為瀏覽器的統(tǒng)一標準,原因有兩個:一、樣式單是W3C唯一接受的樣式標準,而且沒有任何跡象表明W3C會把Javascript樣式單作為樣式單標準;二則是CSS有效的解決了把事件引入元素的問題,配合腳本程序,是動態(tài)HTML不可缺少的一部分,嘗試著用樣式單建立Web頁,你會發(fā)現(xiàn)它真的很方便。希望我的這些努力能為你熟練掌握樣式單盡一點力。


        本站是提供個人知識管理的網(wǎng)絡存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
        轉(zhuǎn)藏 分享 獻花(0

        0條評論

        發(fā)表

        請遵守用戶 評論公約

        類似文章 更多