<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    gembin

    OSGi, Eclipse Equinox, ECF, Virgo, Gemini, Apache Felix, Karaf, Aires, Camel, Eclipse RCP

    HBase, Hadoop, ZooKeeper, Cassandra

    Flex4, AS3, Swiz framework, GraniteDS, BlazeDS etc.

    There is nothing that software can't fix. Unfortunately, there is also nothing that software can't completely fuck up. That gap is called talent.

    About Me

     

    學習CSS的結構和規(guī)則

    基本語法

    規(guī)則

    選擇符

    任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,

    P { text-indent: 3em }

    當中的選擇符是P。

    類選擇符

    單一個選擇符能有不同的CLASS(類),因而允許同一元素有不同樣式。例如,一個網頁制作者也許希望視其語言而定,用不同的顏色顯示代碼 :

    code.html { color: #191970 }
    code.css  { color: #4b0082 }

    以上的例子建立了兩個類,css和html,供HTML的CODE元素使用。CLASS屬性是用于在HTML中以指明元素的類,例如,

    <P CLASS=warning>每個選擇符只允許有一個類。

    例如,code.html.proprietary是無效的。</p>

    類的聲明也可以無須相關的元素:

    .note { font-size: small }

    在這個例子,名為note的類可以被用于任何元素。

    一個良好的習慣是在命名類的時候,根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為small,但如果網頁制作者決定改變這個類的樣式,使得它不再是小字體的話,那么這個名字就變得毫無意義了。

    ID 選擇符

    ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用,因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如,ID選擇符可以指定如下:

    #svp94O { text-indent: 3em }

    這點可以參考HTML中的ID屬性:

    <P ID=svp94O>文本縮進3em</P>

    關聯(lián)選擇符

    關聯(lián)選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字符串。這些選擇符可以指定一般屬性,而且因為層疊順序的規(guī)則,它們的優(yōu)先權比單一的選擇符大。例如, 以下的上下文選擇符

    P EM { background: yellow }
    是P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。

    聲明

    屬性

    一個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字體。



    聲明的值是一個屬性接受的指定。例如,屬性顏色能接受值red。

    組合

    為了減少樣式表的重復聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:

    H1, H2, H3, H4, H5, H6 {
      color: red;
      font-family: sans-serif }

    繼承

    實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色值也會應用到段落的文本中。

    有些情況是內部選擇符不繼承周圍的選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性是不會繼承的;直覺上,一個段落不會有同文檔BODY一樣的上邊界值。

    注解

    樣式表里面的注解使用C語言編程中一樣的約定方法去指定。CSS1注解的例子如以下格式:

    /* COMMENTS CANNOT BE NESTED */

    偽類和偽元素

    偽 類和偽元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。偽類區(qū)別開不同種類的元素(例如,visited links(已訪問的連接)和 active links(可激活連接)描述了兩個定位錨(anchors)的類型)。偽元素指元素的一部分,例如段落的第一個字母。

    偽類或偽元素規(guī)則的形式如

    選擇符:偽類 { 屬性: 值 }



    選擇符:偽元素 { 屬性: 值 }

    偽類和偽元素不應用HTML的CLASS屬性來指定。一般的類可以與偽類和偽元素一起使用,如下:

    選擇符.類: 偽類 { 屬性: 值 }


    選擇符.類: 偽元素 { 屬性: 值 }
    定位錨偽類

    偽 類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素 可給出偽類link、visited或active。一個已訪問連接可以定義為不同顏色的顯示,甚至不同字體大小和風格。

    一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然后,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:

    A:link    { color: red }
    A:active  { color: blue; font-size: 125% }
    A:visited { color: green; font-size: 85% }

    首行偽元素

    通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作為一個偽元素。首行偽元素可以用于任何塊級元素(例如P、H1等等)。以下是一個首行偽元素的例子:

    P:first-line {
      font-variant: small-caps;
      font-weight: bold }

    首個字母偽元素

    首個字母偽元素用于加大(drop caps)和其他效果。含有已指定值選擇符的文本的首個字母會按照指定的值展示。一個首個字母偽元素可以用于任何塊級元素。例如:

    P:first-letter { font-size: 300%; float: left }
    會比普通字體加大三倍。

    層疊順序

    當使用了多個樣式表,樣式表需要爭奪特定選擇符的控制權。在這些情況下,總會有樣式表的規(guī)則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。 

    ! important 

    規(guī)則可以用指定的! important 特指為重要的。一個特指為重要的樣式會凌駕于與之對立的其它相同權重的樣式。同樣地,當網頁制作者和讀者都指定了重要規(guī)則時,網頁制作者的規(guī)則會超越讀者的。以下是! important 聲明的例子:

    BODY { background: url(bar.gif) white;
           background-repeat: repeat-x ! important }
    Origin of Rules (Author’s vs. Reader’s) 

    正如以前所提及的,網頁制作者和讀者都有能力去指定樣式表。當兩者的規(guī)則發(fā)生沖突,網頁制作者的規(guī)則會凌駕于讀者的其它相同權重的規(guī)則。而網頁制作者和讀者的樣式表都超越瀏覽器的內置樣式表。

    網 頁制作者應該小心地使用! important 規(guī)則,因為它們會超越用戶任何的! important 規(guī)則。例如,一個用戶由于視覺關系,會要求大字 體或指定的顏色,而且這樣的用戶會有可能聲明確定的樣式規(guī)則為! important,因為這些樣式對于用戶閱讀網頁是極為重要的。任何的!  important 規(guī)則會超越一般的規(guī)則,所以建議網頁制作者使用一般的規(guī)則以確保有特殊樣式需要的用戶能閱讀網頁。

    選擇符規(guī)則: 計算特性

    基于它們的特性級別,樣式表也可以超越與之沖突的樣式表,一個較高特性的樣式永遠都凌駕于一個較低特性的樣式。這只不過是計算選擇符的指定個數的一個統(tǒng)計游戲。

    統(tǒng)計選擇符中的ID屬性個數。 

    統(tǒng)計選擇符中的CLASS屬性個數。 

    統(tǒng)計選擇符中的HTML標記名格式。 

    最后,按正確的順序寫出三個數字,不要加空格或逗號,得到一個三位數。( 注意,你需要將數字轉換成一個以三個數字結尾的更大的數。)相應于選擇符的最終數字列表可以很容易確定較高數字特性凌駕于較低數字的。以下是一個按特性分類的選擇符的列表:

    #id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
    LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
    LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

    特性的順序

    為了方便使用,當兩個規(guī)則具同樣權重時,取后面的那個。

    posted on 2008-03-26 10:24 gembin 閱讀(310) 評論(0)  編輯  收藏 所屬分類: CSS

    導航

    統(tǒng)計

    常用鏈接

    留言簿(6)

    隨筆分類(440)

    隨筆檔案(378)

    文章檔案(6)

    新聞檔案(1)

    相冊

    收藏夾(9)

    Adobe

    Android

    AS3

    Blog-Links

    Build

    Design Pattern

    Eclipse

    Favorite Links

    Flickr

    Game Dev

    HBase

    Identity Management

    IT resources

    JEE

    Language

    OpenID

    OSGi

    SOA

    Version Control

    最新隨筆

    搜索

    積分與排名

    最新評論

    閱讀排行榜

    評論排行榜

    free counters
    主站蜘蛛池模板: 亚洲av无码不卡| 亚洲精品无码成人AAA片| 亚洲福利视频网站| 无码av免费一区二区三区| 日韩亚洲变态另类中文| 久久国产精品免费一区二区三区| 亚洲国产综合无码一区二区二三区| 含羞草国产亚洲精品岁国产精品 | 69式互添免费视频| 久久亚洲AV无码精品色午夜麻豆| 99xxoo视频在线永久免费观看| 一区二区三区亚洲| 国产大片91精品免费观看不卡| 亚洲欧洲尹人香蕉综合| 成人免费视频网址| 全部一级一级毛片免费看| 中文字幕亚洲日韩无线码| 日韩精品无码免费专区午夜| 亚洲AV无码成人精品区天堂| 亚州免费一级毛片| 亚洲av成人片在线观看| 亚洲精品麻豆av| 99国产精品免费视频观看| 亚洲五月综合缴情婷婷| 国产免费131美女视频| 国产在线观a免费观看| 亚洲天堂久久精品| 国产精品视频免费一区二区三区| 国产成人无码免费网站| 亚洲国语精品自产拍在线观看| 欧美大尺寸SUV免费| 国产激情久久久久影院老熟女免费 | 免费人成动漫在线播放r18| 亚洲精品无码不卡在线播HE| 国产男女爽爽爽爽爽免费视频| 美国毛片亚洲社区在线观看 | 亚洲AV一区二区三区四区| 国产亚洲人成无码网在线观看 | 国产一区二区三区在线免费观看 | 57pao一国产成视频永久免费| 亚洲精品理论电影在线观看|