css教程與代碼索引

1、CSS(CadingStyleSheets)簡介簡介在學(xué)在學(xué)CSS之前之前學(xué)習(xí)CSS之前，首先應(yīng)學(xué)會寫HTML。如果你對HTML還一無所知，請參見HTML教程。CSS(CadingStyleSheets)簡介簡介當(dāng)初一幫技術(shù)人員想出HTML，主要側(cè)重于定義內(nèi)容，比如表示一個段落，表示標(biāo)題，而并沒有過多設(shè)計HTML的排版和界面效果。隨著Inter的迅猛發(fā)展，HTML被廣泛應(yīng)用，上網(wǎng)的人們當(dāng)然希望網(wǎng)頁做得漂亮些，因此HTML排版和界面效果的

2、局限性日益暴露出來。為了解決這個問題，人們也走了不少彎路，用了一些不好的方法，比如給HTML增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片，過多利用Table來排版，用空白的圖片表示白色的空間等。直到CSS出現(xiàn)。CSS可算是網(wǎng)頁設(shè)計的一個突破，它解決了網(wǎng)頁界面排版的難題?？梢赃@么說，HTML的Tag主要是定義網(wǎng)頁的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示(Layout)。CSS的英文是CadingStyleSheet

3、s，中文可以翻譯成串聯(lián)式樣式表。CSS按其位置可以分成三種：?內(nèi)嵌樣式(InlineStyle)?內(nèi)部樣式表(InternalStyleSheet)?外部樣式表(ExternalStyleSheet)內(nèi)嵌樣式內(nèi)嵌樣式(InlineStyle)InlineStyle是寫在Tag里面的。內(nèi)嵌樣式只對所在的Tag有效。這個Style定義里面的文字是20pt字體，字體顏色是紅色。顯示示例內(nèi)部樣式表內(nèi)部樣式表(InternalStyleSheet

4、)內(nèi)部樣式表是寫在HTML的里面的。內(nèi)部樣式表只對所在的網(wǎng)頁有效。H1.mylayoutbderwidth:1bder:solidtextalign:centercol:red這個標(biāo)題使用了Style。這個標(biāo)題沒有使用Style。顯示示例CSS語法語法基本語法基本語法一個樣式(Style)的語法由三部分構(gòu)成：(中文叫選擇器有點(diǎn)怪怪的，就用英文吧)，屬性(Property)，屬性值(Value)。property:value舉個例子，下面

5、的代碼p就是，col就是屬性，blue就是屬性值。pcol:blueHTML中所有的Tag都可以作為。注：如果你想為注：如果你想為Style加多個屬性，在兩個屬性之間要用分號加以分隔。加多個屬性，在兩個屬性之間要用分號加以分隔。下面的Style就包含2個屬性，一個是對齊方式居中，一個字體顏色為紅，當(dāng)中用分號分隔開。ptextalign:centercol:red為了提高Style代碼的可讀性，你也可以分行寫：ptextalign:cen

6、tercol:blackfontfamily:arial組合組合(Grouping)你也可以將相同的屬性和屬性值賦予多個。之間用逗號分隔之間用逗號分隔。h1h2h3h4h5h6col:red上面的例子是將所有正文標(biāo)題(到)的字體顏色都變成紅色。Class利用Class，你可以用同樣的HTMLTag構(gòu)成不同的樣式。比如說，你希望段落有兩種樣式，一種是居中對齊，一種是居右對齊。你就可以寫如下樣式：p.righttextalign:right