css教程與代碼索引

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

2、局限性日益暴露出來(lái)。為了解決這個(gè)問(wèn)題，人們也走了不少?gòu)澛罚昧艘恍┎缓玫姆椒?，比如給HTML增加很多的屬性結(jié)果將代碼變得很臃腫，將文本變成圖片，過(guò)多利用Table來(lái)排版，用空白的圖片表示白色的空間等。直到CSS出現(xiàn)。CSS可算是網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)突破，它解決了網(wǎng)頁(yè)界面排版的難題?？梢赃@么說(shuō)，HTML的Tag主要是定義網(wǎng)頁(yè)的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁(yè)內(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)嵌樣式只對(duì)所在的Tag有效。這個(gè)Style定義里面的文字是20pt字體，字體顏色是紅色。顯示示例內(nèi)部樣式表內(nèi)部樣式表(InternalStyleSheet

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

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

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