亚洲午夜无码久久久久蜜臀av,国产熟人av一二三区,亚洲夂夂婷婷色拍ww47

CSS的優(yōu)先級特性Specificity

sj33cn — Sun, 09 Mar 2008 15:08:00 +0000

如果同個元素有兩個或以上沖突的CSS規(guī)則，瀏覽器有一些基本的規(guī)則來決定哪一個非常特殊而勝出。
　　它可能不像其它那么重要，大部分案例你不需要擔(dān)心沖突，但大型而且復(fù)雜的CSS文件，或有很多CSS文件組成的，可能產(chǎn)生沖突。
　　選擇器一樣的情況下后面的會覆蓋前面的屬性。比如：

p { color: red; }
p { color: blue; }

　　p元素的元素將是藍(lán)色，因為遵循后面的規(guī)則。
　　然而，你不可能經(jīng)常用相同的選擇器沖突達(dá)到目的，當(dāng)你使用嵌套選擇器，合理的沖突來了。比如：

div p { color: red; }
p { color: blue; }

　　也許你看起來p元素在div元素里面的顏色是藍(lán)色，就像后面p元素的規(guī)則，但是第一個選擇器的特性卻是紅色。基本上，一個選擇器越多特性，樣式?jīng)_突的時候?qū)@示它的樣式。
　　一組嵌套選擇器的實際特性可以計算出來。基本的，使用ID選擇器的值是100，使用class選擇器的值是10，每個html選擇器的值是1。它們加起來就可以計算出特性的值。

　　p的特性是1（一個html選擇器）
　　div p的特性是2（兩個html選擇器）
　　.tree的特性是10（1個class選擇器）
　　div p.tree的特性是1+1+10=12，（兩個html選擇器，一個class選擇器）
　　#baobab的特性是100（1個ID選擇器）
　　body #content .alternative p的特性是112（兩個html選擇器，一個ID選擇器，一個類選擇器）

　　按照上面的規(guī)則，div p.tree的特性比div p高，body #content .alternative p又比它們兩個都高。

CSS基礎(chǔ)教程:CSS的偽元素Pseudo Elements

sj33cn — Sun, 09 Mar 2008 15:06:00 +0000

偽元素吸附在選擇上和pseudo classes偽類很像，像這樣selector:pseudoelement{property: value;}。有四種方式。

First letters and First lines 首字母和首行

　　first-letter偽元素作用到元素的第一個字母，first-line作用到元素的頂行。你可以，例如為段落創(chuàng)建一個drop caps和首行加粗。

p:first-letter {
    font-size: 3em;
    float: left;
}

p:first-line {
    font-weight: bold;
}

Before and after 前后

　　before和after用來聯(lián)系content屬性不使用HTML確定一個元素的內(nèi)容位置。
　　content屬性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引號標(biāo)記里關(guān)閉任何字符串或使用url(imagename)圖片。

blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: “POW: “
}
p:before {
    content: url(images/jam.jpg)
}

　　聽起來不錯吧，可惜大部分用戶不能體會到before或after的效果，因為IE不支持。

CSS基礎(chǔ)教程:CSS的At-Rules@規(guī)則

sj33cn — Sun, 09 Mar 2008 15:04:00 +0000

At-rules分裝不同的CSS規(guī)則，應(yīng)用在特定場合。

Importing

　　import@規(guī)則引用另外的樣式。例如，如果你想添加另外樣式到現(xiàn)在的樣式，可以這樣：
　　@import url(addonstyles.css);
　　這很像使用link元素連接CSS到HTML，本質(zhì)上說有一個內(nèi)容樣式像下面：
　　@import url(monkey.css);
　　這是為了照顧老版本瀏覽器，比如Netscape4不支持@規(guī)則所以不能鏈接樣式表，已經(jīng)構(gòu)建好標(biāo)簽的HTML頁面會失去樣式表提供的功能。

Media types

　　media@規(guī)則應(yīng)用內(nèi)容使用特定媒體，比如打印，例如：

@media print {
    body {
        font-size: 10pt;
        font-family: times new roman, times, serif;
    }
    #navigation {
        display: none;
    }
}

　　媒體形式：
　　all，所有媒體。
　　aural，言語合成器。
　　handheld，移動設(shè)備
　　print，打印
　　projection，投影
　　screen，電腦屏幕
　　你還可以使用braille,embossed,tty或者tv。
　　注意：說了這么多，IE只支持all,screen和print。

Charachter sets 字符設(shè)定

　　charset@規(guī)則簡單設(shè)定外部樣式里的編碼。它出現(xiàn)在樣式的最上面例如@charset “ISO-8859-1”;

Font faces 字體外觀

　　font-face@規(guī)則用來詳細(xì)描述字體，可以在CSS里嵌入外部字體。
　　它需要font-family描述符引用字體，它的值可以是字體的名稱或是新命名一個。嵌入一個字體，使用src描述符。其他添加到font-face@規(guī)則里的描述符將影響正在使用的內(nèi)含字體，例如如果你添加font-weight: bold粗體到@規(guī)則，font-family的src只能運用到帶有font-family屬性的選擇器里，而且選擇器里font-weight屬性同樣設(shè)置成bold。
　　看下面例子：

@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}
p {
    font-family: somerandomfontname;
    font-weight: bold;
}

　　如上面的例子，段落里的字體將是somefont的字體（如果p選擇器沒有font-weight: bold，那字體就不是somefont）
　　嵌入字體還湊合著用，因為Mozilla瀏覽器不支持也沒有計劃添加這個功能。只有IE有分寸的支持，但這也不是說可以直接使用，IE瀏覽器嵌入字體，你還需要微軟WEFT軟件，它提供Truetype字體轉(zhuǎn)換成壓縮的OpenType字體（只有這個你才能使用URI指定）。由于這個限制（顯得非常復(fù)雜）兼容性，最好不要使用系統(tǒng)沒有的字體。

Pages

　　page@規(guī)則服務(wù)頁面媒體，是個高級方式應(yīng)用于打印媒體樣式。它定義了頁面塊，在盒模型上擴展，所以你可以定義單一頁面的大小和表現(xiàn)。
　　應(yīng)用page@規(guī)則有許多規(guī)定，比如沒有padding和border，而且也不上我們說的電腦屏幕，所以pixels和ems單位不被允許使用。
　　有許多特定屬性可以使用，比如size，可以設(shè)定portrait縱向,landscape橫向,auto自動或長度。marks屬性可以用來定義裁剪標(biāo)志

@page {
    size: 15cm 20cm;
    margin: 3cm;
    marks: cross;
}

頁面媒體里的偽標(biāo)簽

　　有三種偽標(biāo)簽用來鏈接特定page@規(guī)則，如下形式：@page :pseudo-class {stuff}。
　　:first應(yīng)用到頁面媒體里的第一頁
　　:left和:right應(yīng)用到左邊和左邊頁面。這可能用在指定有非常大margin的左邊頁面和有非常大margin的右邊頁面。
　　還有一些頁面@規(guī)則，比如page-breaks頁面中斷和named pages頁面命名，但這些@規(guī)則在瀏覽器里很難工作，你也許浪費了許多時間閱讀這篇文章，不過這些都是不錯的想法。

CSS基礎(chǔ)教程:CSS網(wǎng)頁布局Page Layout

sj33cn — Sun, 09 Mar 2008 15:02:00 +0000

使用CSS布局非常簡單，如果你習(xí)慣使用tables布局，可能開始時有點困難，但其實很容易，事實上只是觀念的不同。
　　你需要把網(wǎng)頁的每個部分看成獨立的塊，你可以絕對或相對定位塊。

Positioning 定位

　　positon屬性可以指定元素為absolute,relative,static或是fixed。
　　static是元素默認(rèn)屬性，按HTML出現(xiàn)的先后順序。
　　relative比較像static，但元素可以使用top,right,bottom和left設(shè)定初始屬性。
　　absolute把元素從HTML里面拉出，一切由它自己決定，在這里，絕對定位元素可以使用top,right,bottom,left定位在任何地方。
　　fixed行為像absolute，但它絕對定位的元素參照瀏覽器窗口與網(wǎng)頁沒有關(guān)系。所以，理論上，fixed元素可以固定在屏幕上當(dāng)頁面滾動時。為什么說是理論上的？因為IE7以下的瀏覽器不支持。

　　使用絕對定位布局
　　可以使用絕對定位創(chuàng)建傳統(tǒng)的兩列布局，如下：

Ra ra banjo banjo

Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.

(Ra ra banjo banjo)

　　上面加上CSS：

#navigation {
position: absolute;
top: 0;
left: 0;

width: 10em;
}
#content {
margin-left: 10em;
}

　　上面導(dǎo)航條設(shè)定在左邊，寬度是10em。因為導(dǎo)航條是絕對定位，所以流動的頁面上什么也不動，需要設(shè)定內(nèi)容的左邊margin等于導(dǎo)航條的寬度。

　　真是簡單。你沒有限制這兩列的距離，使用聰明的布局，你可以隨心所欲安排許多塊。如果你想添加第三列，比如：

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

　　最后階段去絕對定位元素，因為它們獨立存在，無法正確了解它們哪里結(jié)束。如果你使用上面的例子，所有的頁面有小的導(dǎo)航條和大的內(nèi)容區(qū)域到可以，但是，特別是寬度和大小使用相對值，你必須經(jīng)常放棄定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮動模式比絕對定位好。

Floating 浮動

　　浮動元素可以在一條線上移動。
　　浮動一般使用在定位頁面里的小型元素，但也可使用在大塊里，比如導(dǎo)航。
　　上面的HTML例子使用下面CSS：

#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

　　如果你不希望接下來的元素包圍浮動對象，可以使用clear屬性。clear:left清除浮動在左邊的元素，clear:right清除浮動在右邊的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：

#footer {
clear: both;
}

　　footer將在所有列下面，不管它們的長度如何。
　　這篇介紹了定位和浮動的基本情況，強調(diào)頁面的大塊，但記住，上面方法可以運用到塊里面的任何元素。通過組合使用position,floating,margins,padding和border，你可以表現(xiàn)出任何網(wǎng)頁設(shè)計，table布局能做的CSS沒有什么不能做。
　　使用表格布局的理由就是考慮古老的瀏覽器。CSS的優(yōu)勢在于擁有很高的可用性，而且體積上只有使用table布局的部分大小。

CSS基礎(chǔ)教程:CSS的display屬性

sj33cn — Sun, 09 Mar 2008 14:59:00 +0000

操作HTML元素的訣竅在于明白它們工作的方法在于沒有特定的形式。一些由標(biāo)簽組成的大部分頁面可以設(shè)定任何樣式。瀏覽器默認(rèn)的樣式里的大部分html元素由字體樣式、margin,padding組成，本質(zhì)上是顯示類型。

　　display屬性基本上分為inline,block,和none。
　　inline就像它的本意――顯示為inline的元素為行。strong,anchor錨和em強調(diào)元素默認(rèn)是行。
　　block元素前后換行。標(biāo)題和段落元素是塊元素。
　　none，意思不顯示元素，在可用性上可以實現(xiàn)漂亮的效果，交替樣式或hover效果的高級運用。

　　設(shè)定表現(xiàn)可以更好運用在網(wǎng)頁制作上。

h1 {
    display: inline;
    font-size: 2em;
}
#header p {
    display: inline;
    font-size: 0.9em;
    padding-left: 2em;
}

　　設(shè)定標(biāo)題h1為行元素，可以和后面的元素在同一行。

#navigation, #seeAlso, #comments, #standards {
display: none;
}

　　上面的代碼可以使用在打印樣式里，比如在導(dǎo)航使用，可以在打印時不顯示導(dǎo)航這些無關(guān)緊要的東西。

　　display:none和visibility:hidden;的不同在于display:none完全取消元素的顯示，visibility:hidden保持元素位置但視覺上的內(nèi)容不可見。例如，如果3的第二段設(shè)置為display:none，第一段將僅跟在第三段，如果設(shè)置為visibility:hidden，段落間就會空出。

表格

　　明白表格相關(guān)的表現(xiàn)屬性值最好的方法想象html表格。table是最初的表現(xiàn)，你可以使用table-row模擬table-cell模擬td。

　　display屬性更進(jìn)一步，可以通過使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。現(xiàn)在可以直接使用columns構(gòu)建表格，比在html中使用行構(gòu)建快速。

　　最后，inline-table設(shè)定表格前后不換行。

　　使用CSS表格會嚴(yán)重?fù)p害可用性。HTML應(yīng)該用來傳遞語意，所以如果你有表格數(shù)據(jù)，那可以使用HTML表格。使用CSS表格僅僅會產(chǎn)生糟糕的數(shù)據(jù)如果沒有CSS數(shù)據(jù)將不可讀。

其他表現(xiàn)形式

　　list-item列表項目，就像期待HTML里的li元素。它們需要嵌套在元素里面顯示。
　　run-in元素的表現(xiàn)形式由它的父元素決定。IE和Mozilla都不支持。
　　compat根據(jù)上下阿文決定表現(xiàn)形式，同樣IE和Mozilla都不支持。
　　maker僅僅使用在:before和:after偽元素，設(shè)定content屬性的表現(xiàn)。content屬性默認(rèn)表現(xiàn)就是maker，所以它只有在覆蓋原來屬性時才有用。
　　content屬性，它的默認(rèn)就是maker，所以只有在覆蓋原來屬性時使用。

CSS基礎(chǔ)教程: CSS的Background Images 背景圖片

sj33cn — Sun, 09 Mar 2008 14:57:00 +0000

背景圖片Background Images有許多屬性可以操作。
　　幸運的是，可以使用background處理所有：

body {
background: white url(//images.sj33.cn/uploads/allimg/200803/20080309225852658.gif) no-repeat top right;
}

　　上面合并了下面屬性：

　　background-color出現(xiàn)在前面。
　　background-image圖片的位置。
　　background-repeat圖片重復(fù)的形式。背景圖片可以重復(fù)repeat（這就像建筑用的瓦片一樣），repeat-x在x軸（左右）重復(fù)，repeat-y在y軸（上下）重復(fù)，no-repeat不重復(fù)只顯示一個。
　　background-position可以使用top,center,bottom,left,right或任何可以看到的組合，比如above在上面。
　　可以為大部分html元素設(shè)置背景圖片，不只是整個頁面（body），可以用來制作簡單但效果顯著的美化，比如圓角等等不同的邊角形狀。

　　使用背影圖片非常簡單，而且可以使用在頁面的任何地方。許多人喜歡使用色彩鮮艷的圖片作為背景的頁面，帶給用戶判讀前臺文字困難加大。這是一個極端的例子，但事實上，大部分對用戶友好、可讀性強的文本是白色背景上顯示黑色，或是黑色背景顯示白色（建議使用柔和的顏色做為背景，減少刺眼的顏色）

　　所以，最佳使用背景圖片的位置要么是上面沒有內(nèi)容要么是背景非常淡，這樣同樣有利于減少圖片大小，因為使用更少的顏色。（建議使用索引色格式，比如GIF）

CSS基礎(chǔ)教程: CSS的屬性縮寫

sj33cn — Sun, 09 Mar 2008 14:54:00 +0000

一些CSS屬性允許使用一串值代替許多屬性，值使用空格分開。

　　margin,pdding和border-width允許合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像這樣：property:top right bottom left;逆時針順序。
　　所以下面的：

p {
    border-top-width: 1px;
    border-right-width: 5px;
    border-bottom-width: 10px;
    border-left-width: 20px;
}

　　可以寫成：

p {
border-width: 1px 5px 10px 20px;
}

　　border-width,border-color,border-style同樣可以合并到一起，例如：

p {
border: 1px red solid;
}

　　（同樣可以運用到border-top,border-right等等）
　　如果只使用兩個值（比如margin: 1em 10em;），第一個值包括頂部和底部，第二個值包括左右。

　　字體屬性同樣可以使用font屬性合并。

p {
font: italic bold 1em/1.5 courier;
}

　　（上面”/1.5″是 line-height的值）
　　把它們總結(jié)在一起，試下下面的代碼：

p {
    font: 1em/1.5 “Times New Roman”, times, serif;
    padding: 3em 1em;
    border: 1px black solid;
    border-width: 1px 5px 5px 1px;
    border-color: red green blue yellow;
    margin: 1em 5em;
}

　　推薦大家使用縮寫形式，促進(jìn)CSS代碼的精簡、優(yōu)化！

CSS基礎(chǔ)教程:CSS的Pseudo Classes 偽類

sj33cn — Sun, 09 Mar 2008 14:52:00 +0000

請你注意一些CSS偽類屬性不被所有瀏覽器支持，但有四個偽類可以安全使用在鏈接上

　　偽類像是指定選擇器狀態(tài)或關(guān)聯(lián)選擇器的門閂。它們的形式如：selector:pseudo class { property: value; }，在選擇器和偽屬性之間使用冒號。

　　link 沒有點擊過的鏈接
　　visited以點擊過的鏈接
　　active獲得焦點時的鏈接（比如在點擊時）
　　hover 鼠標(biāo)在鏈接上面

a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}

　　盡管CSS里可以省略它們，但維護不同顏色的鏈接對于新手是個很好的練習(xí)。由于偽類（相比hover）不是經(jīng)常使用，作為公用屬性是非常不幸的特性。由于這樣，它不像以前那么重要，但如果為最優(yōu)用戶響應(yīng)考慮，應(yīng)該使用它。

　　傳統(tǒng)默認(rèn)，文本鏈接是藍(lán)色，訪問后是紫色，理論上可以使用很多不同顏色效果，但，再次，逐漸廣泛使用CSS，使得鏈接變得不再普通，平均用戶也不再認(rèn)為鏈接必須是藍(lán)色或紫色。

　　除了鏈接其他元素也可以使用hover偽類。不幸的是，ie7以下的瀏覽器不支持，這樣有許多漂亮的效果不能在IE上實現(xiàn)。

CSS基礎(chǔ)教程: CSS的分組(Grouping)和嵌套(Nesting)

sj33cn — Sun, 09 Mar 2008 14:50:00 +0000

Grouping 分組

　　當(dāng)許多選擇器有同樣屬性時，可以使用逗號組合它們。
　　例子：

h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}

　　上面的可以寫成這樣：

h2, .thisOtherClass, .yetAnotherClass
{
color: red;
}

Nesting 嵌套

　　如果CSS結(jié)構(gòu)良好，不需要使用很多class或ID選擇器。這是因為CSS可以設(shè)定選擇器里面選擇器的屬性。
　　例子：

#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}

　　如果你碰到下面這樣的形式，記得處理掉你網(wǎng)頁上的class或ID。

Chocolate curry

This is my recipe for making curry purely with chocolate

Mmm mm mmmmm

　　這是由于，通過使用空格分離選擇器，我們可以設(shè)定IDtop里面的h1顏色為#ff0，p是red和blod。
　　這可能比較復(fù)雜，因為嵌套可以多級使用，所以需要多加練習(xí)。

CSS基礎(chǔ)教程:Class以及ID選擇器

sj33cn — Sun, 09 Mar 2008 14:49:00 +0000

前面的學(xué)習(xí)我們僅僅使用HTML選擇器（在HTML頁面里為html標(biāo)簽，如 P）
　　現(xiàn)在我們學(xué)習(xí)使用clss和id定義屬于自己的選擇器。
　　這樣，同樣的html元素可以通過class或ID使用不同的表現(xiàn)。
　　在CSS里，使用點號（.）創(chuàng)建class選擇器，使用hash符號（#）創(chuàng)建ID選擇器。
　　例子：

#top {
background-color: #ccc;
padding: 1em
}

.intro {
color: red;
font-weight: bold;
}

　　html頁面通過id和class屬性調(diào)用CSS，像下面這樣：

Chocolate curry

This is my recipe for making curry purely with chocolate

Mmm mm mmmmm

　　id和class的不同指出在于一個頁面同一個ID只能只有一次，而class可以無限制使用。
　　同樣，你可以在html選擇器后面使用一個選擇器來指定特殊HTML元素，比如p.jam{值}將作用到帶有’jam’class屬性的段落。