亚洲人成网7777777国产,翘臀后进少妇大白嫩屁股,无码一区二区三区中文字幕

CSS的優先級特性Specificity

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

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

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

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

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

　　也許你看起來p元素在div元素里面的顏色是藍色，就像后面p元素的規則，但是第一個選擇器的特性卻是紅色。基本上，一個選擇器越多特性，樣式沖突的時候將顯示它的樣式。
　　一組嵌套選擇器的實際特性可以計算出來。基本的，使用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選擇器，一個類選擇器）

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

CSS基礎教程: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作用到元素的頂行。你可以，例如為段落創建一個drop caps和首行加粗。

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

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

Before and after 前后

　　before和after用來聯系content屬性不使用HTML確定一個元素的內容位置。
　　content屬性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引號標記里關閉任何字符串或使用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基礎教程:CSS的At-Rules@規則

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

At-rules分裝不同的CSS規則，應用在特定場合。

Importing

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

Media types

　　media@規則應用內容使用特定媒體，比如打印，例如：

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

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

Charachter sets 字符設定

　　charset@規則簡單設定外部樣式里的編碼。它出現在樣式的最上面例如@charset “ISO-8859-1”;

Font faces 字體外觀

　　font-face@規則用來詳細描述字體，可以在CSS里嵌入外部字體。
　　它需要font-family描述符引用字體，它的值可以是字體的名稱或是新命名一個。嵌入一個字體，使用src描述符。其他添加到font-face@規則里的描述符將影響正在使用的內含字體，例如如果你添加font-weight: bold粗體到@規則，font-family的src只能運用到帶有font-family屬性的選擇器里，而且選擇器里font-weight屬性同樣設置成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字體轉換成壓縮的OpenType字體（只有這個你才能使用URI指定）。由于這個限制（顯得非常復雜）兼容性，最好不要使用系統沒有的字體。

Pages

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

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

頁面媒體里的偽標簽

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

CSS基礎教程:CSS網頁布局Page Layout

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

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

Positioning 定位

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

　　使用絕對定位布局
　　可以使用絕對定位創建傳統的兩列布局，如下：

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;
}

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

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

#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 */
}

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

Floating 浮動

　　浮動元素可以在一條線上移動。
　　浮動一般使用在定位頁面里的小型元素，但也可使用在大塊里，比如導航。
　　上面的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將在所有列下面，不管它們的長度如何。
　　這篇介紹了定位和浮動的基本情況，強調頁面的大塊，但記住，上面方法可以運用到塊里面的任何元素。通過組合使用position,floating,margins,padding和border，你可以表現出任何網頁設計，table布局能做的CSS沒有什么不能做。
　　使用表格布局的理由就是考慮古老的瀏覽器。CSS的優勢在于擁有很高的可用性，而且體積上只有使用table布局的部分大小。

CSS基礎教程:CSS的display屬性

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

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

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

　　設定表現可以更好運用在網頁制作上。

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

　　設定標題h1為行元素，可以和后面的元素在同一行。

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

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

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

表格

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

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

　　最后，inline-table設定表格前后不換行。

　　使用CSS表格會嚴重損害可用性。HTML應該用來傳遞語意，所以如果你有表格數據，那可以使用HTML表格。使用CSS表格僅僅會產生糟糕的數據如果沒有CSS數據將不可讀。

其他表現形式

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

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

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

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

CSS基礎教程: 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的值）
　　把它們總結在一起，試下下面的代碼：

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;
}

　　推薦大家使用縮寫形式，促進CSS代碼的精簡、優化！

CSS基礎教程:CSS的Pseudo Classes 偽類

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

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

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

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

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里可以省略它們，但維護不同顏色的鏈接對于新手是個很好的練習。由于偽類（相比hover）不是經常使用，作為公用屬性是非常不幸的特性。由于這樣，它不像以前那么重要，但如果為最優用戶響應考慮，應該使用它。

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

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

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

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

Grouping 分組

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

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

　　上面的可以寫成這樣：

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

Nesting 嵌套

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

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

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

Chocolate curry

This is my recipe for making curry purely with chocolate

Mmm mm mmmmm

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

CSS基礎教程:Class以及ID選擇器

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

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

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

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

　　html頁面通過id和class屬性調用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屬性的段落。