HTML 樣式- CSS CSS（Cascading Style Sheet）可譯為“層級樣式表”或“ ”，它決定如何顯示HTML元素，用于控制網(wǎng)頁界面的外觀。通過使用CSS實際頁面的內(nèi)容與表格形式分離，極大提高了工作效率。樣式存儲在樣式表中，通常釋放于<head>部分或存儲在外部CSS文件中。作為網(wǎng)頁標(biāo)準(zhǔn)設(shè)計的趨勢，CSS得了滲透瀏覽器廠商的廣泛支持，正越來越多被應(yīng)用到網(wǎng)頁設(shè)計中去。
網(wǎng)頁現(xiàn)在的新標(biāo)準(zhǔn)是W3C。目前的模式是Html + Css + Javascript ，怎么理解呢，就是Html是網(wǎng)頁的結(jié)構(gòu)，CSS是網(wǎng)頁的樣式，Javascript是行為。結(jié)構(gòu)就是蓋房子先要把結(jié)構(gòu)建出來，然后用CSS來裝飾。其實你在用Dreamweaver做網(wǎng)頁的時候就已經(jīng)用到了CSS，比你用DW的屬性面板來設(shè)置一個字體、顏色和大小，當(dāng)你選好后，就會自動生成一個。 style1紅色代碼，在 <style></style> 之間不知道你注意到?jīng)]有，這就是 CSS。
CSS (Cascading Style Sheets) 使用于渲染 HTML 元素標(biāo)簽的樣式。
看！ 款式和顏色 操縱文本
顏色， 盒子
和更多...
嘗試一下 ?
嘗試一下 - 實例 HTML 使用樣式 本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進(jìn)行樣式化。
本例演示如何使用類型屬性做一個沒有下線的鏈接。 如何使用類型屬性做一個沒有下線的鏈接。
鏈接到一個外部樣式 顯示示例如何顯示 標(biāo)記鏈接到一個外部樣式顯示。
如何使用 CSS CSS 是在 HTML 4 開始使用的，是為了更好的染 HTML 元素而引入的。
CSS 可以通過以下方式添加到 HTML 中：
內(nèi)聯(lián)樣式- HTML 元素中使用"style" 屬性 內(nèi)部樣式表 - HTML 文檔頭部 <head> 區(qū)域使用 <style> 元素 來包含 CSS 外部引用 - 使用外部 CSS 文件
最好的方式是通過外部引用CSS文件。
在本站的HTML教程中我們使用了內(nèi)聯(lián)CSS樣式來介紹實例，這是為了簡單化的實例，也使你能夠足夠容易更多在線編輯代碼并在線運(yùn)行實例。
你可以通過本站的 CSS 教程 CSS 教程 學(xué)習(xí)更多的 CSS 知識，或者學(xué)習(xí)者學(xué)習(xí)更容易理解的 CSS 微課 。
內(nèi)聯(lián)式 當(dāng)特殊的樣式需要應(yīng)用到個別元素時，就可以使用內(nèi)部樣式，你可以在<head>部分通過<style>標(biāo)簽確定內(nèi)部樣式表。內(nèi)部連接樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示如何更改部分分解下的顏色。
例子
<p style="color:blue;margin-left:20px;">這是一個段落。</p>
學(xué)習(xí)更多樣式，請訪問 CSS教程 。
HTML樣式實例 - 背景顏色 背景顏色屬性（background-color）定義一個元素的背景顏色：
例子 <!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
試一試 ?
早期背景顏色（background-color）是使用 bgcolor 屬性指定。
嘗試一下: 舊版HTML來設(shè)置背景方式
HTML 樣例 - 字體, 字體顏色 ，字體大小 我們可以使用 font-family（字體），color（顏色），和 font-size（字體大小）屬性來確定正確字體的樣式：
實例 <!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
試一試 ?
現(xiàn)在通常使用font-family（字體），color（顏色），和font-size（字體大?。傩詠泶_定合法文本樣式，而不是使用<font>標(biāo)簽。
HTML 樣例實例 - 文本對齊方式 使用text-align（文字對齊）屬性指定文本的水平與垂直對齊方式：
實例 <!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
試一試 ?
文本對齊屬性 text-align 刪除了舊標(biāo)簽 <center> 。
試一試
內(nèi)部樣式表 當(dāng)單個文件需要特殊樣式時，就可以使用內(nèi)部樣式表。你可以在<head>部分通過<style>標(biāo)簽確定內(nèi)部樣式表：
實例
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
試一試 ?
外部樣式表 當(dāng)樣式需要被應(yīng)用到很多頁面的時候，外部樣式將是理性的選擇。使用外部樣式，你就可以通過修改一個文件來修改改變整個站點(diǎn)的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML 樣式標(biāo)簽 已廢棄的標(biāo)簽和屬性 在 HTML 4 中，最初支持確定義 HTML 元素樣式的標(biāo)簽和屬性已被棄用。這些標(biāo)簽將不支持新版本的 HTML 標(biāo)簽。
不建議使用的標(biāo)簽有：<font>, <center>, <strike>
不建議使用的屬性：color 和 bgcolor。
學(xué)習(xí) HTML + CSS 的書籍推薦 1、《CSS那些事兒》
本書專注于CSS技巧實例的講解，由淺入深地分析了CSS樣式在發(fā)布時所需要理解的原理。繞開隨處可見的基礎(chǔ)知識、網(wǎng)網(wǎng)絡(luò)中能隨意搜索到的黑客技巧，側(cè)重原理分析，拓展讀者使用 CSS 布局的思維方式，通過本書的閱讀者將會了解使用 CSS 布局的強(qiáng)大能力。
全書以傳達(dá)CSS布局思維為中心，通過頁面中的文字、圖片、表格、表格等常見見元素的處理及各種頁面布局方式的使用，讀者可以深入了解如何在頁面中更好地運(yùn)用CSS布局。尤其是在頁面布局的部分中，全面分析了多種布局方式，著重分析了兩列等高和三列等高的幾種方式，并相應(yīng)說明了等高布局的不足之處。
無論是 CSS 布局的初學(xué)者還是具有一定水準(zhǔn)的讀者，閱讀本書之后將會發(fā)現(xiàn)，原來 CSS 樣式居然是這么好玩的東西。本書適合網(wǎng)站開發(fā)人員、網(wǎng)頁設(shè)計人員參考學(xué)習(xí)，同時也適合作為相關(guān)培訓(xùn)機(jī)構(gòu)的教材。
2、《 Head First HTML and CSS 2nd Edition 》
《 Head First HTML5 》
這兩本應(yīng)該都有翻譯，但是建議看原版
3、《 Eric Meyer 談 CSS 》（上下冊）
《 Eric Meyer 談 CSS (卷1) 》融匯了世界級專家 Eric Meyer 極富價值的 CSS 實戰(zhàn)經(jīng)驗，運(yùn)用 13 個典型實際項目，采取手把手的方式來指導(dǎo)讀者如何使用 CSS 來解決實際問題。項目包括轉(zhuǎn)換現(xiàn)有網(wǎng)頁、設(shè)置新聞網(wǎng)頁的樣式、設(shè)置日歷樣式、設(shè)置菜單樣式、創(chuàng)建打印樣式多列布局等。
4、《 CSS 禪意花園 》
這本書的作者是世界著名的網(wǎng)站設(shè)計師，書中的范例來自網(wǎng)站設(shè)計領(lǐng)域最著名的網(wǎng)站——CSS Zen Garden（CSS 禪意花園）。全書分為兩個主要部分。第1章為第一部分，討論網(wǎng)站“CSS 禪意花同”及其最基本的主題，包含正確的標(biāo)記結(jié)構(gòu)和靈活性規(guī)劃等。第二部分包括 6 章，占據(jù)了書中的大部分篇幅。
每章剖析“CSS 禪意花園”收錄的 6 件設(shè)計作品，這些作品圍繞一個主要的設(shè)計概念展開，如文字的使用等。通過探索 36 件設(shè)計作品面臨的挑戰(zhàn)和解決的問題，讀者將洞悉主要的 Web 設(shè)計原則以及它們運(yùn)用的CSS 布局技巧，理解 CSS 設(shè)計的精髓，恰當(dāng)?shù)靥幚韴D形和字體來創(chuàng)建界面優(yōu)美、性能優(yōu)良且具有強(qiáng)大生命力的網(wǎng)站。
5、《 精通 HTML 》 本書深入地探討了 (X)HTML 及相關(guān)技術(shù)包括 CSS、微格式、語義網(wǎng)等，重點(diǎn)闡述了如何在恰當(dāng)?shù)臅r候使用恰當(dāng)?shù)臉?biāo)簽，全書始終貫徹現(xiàn)代的 Web 設(shè)計理念，從而使讀者可以學(xué)習(xí)如何充分利用各種標(biāo)記提供的多樣性，創(chuàng)建語義豐富和結(jié)構(gòu)合理的網(wǎng)站。
本書適合具備初步 HTML 和 CSS 知識的 Web 設(shè)計開發(fā)人員閱讀。
6、《精通 CSS: 高級 Web 標(biāo)準(zhǔn)解決方案》 本書將最有用的 CSS 技術(shù)匯總在一起，在介紹基本的 CSS 概念和最佳實踐之后，討論了核心的 CSS 技術(shù)，例如圖像、鏈接、列表操縱、表單設(shè)計、數(shù)據(jù)表格設(shè)計以及純 CSS 布局。每一章內(nèi)容由淺入深，直到建立比較復(fù)雜的示例。之后本書用兩章討論招數(shù)、過濾器、bug 和 bug 修復(fù)，最后由 Simon Collison 和 Cameron Moll 兩位杰出的 CSS 設(shè)計人員，將書中討論的許多技術(shù)組合起來，給出了兩個實例研究。本書還集中介紹了現(xiàn)實的瀏覽器問題，是彌補(bǔ) CSS 知識欠缺不可或缺的參考書。
本書適合具有 (X)HTML 和 CSS 基本知識的任何網(wǎng)頁設(shè)計人員閱讀。
7、《 深入淺出 html 》
本書是一部講述現(xiàn)代 web 標(biāo)準(zhǔn)的優(yōu)秀教程，徹底摒棄了過時的內(nèi)容，始終貫徹三層分離的思想。書中結(jié)合實例講述如何使用 html、css 設(shè)計符合現(xiàn)代web標(biāo)準(zhǔn)的網(wǎng)頁，并講解了如何使用 javascript 添加動態(tài)行為。書中的主體部分讓讀者接觸 html、xhtml 的各種主題，逐漸熟悉各種元素。最后一章將書中講述的各種技術(shù)付諸應(yīng)用，帶領(lǐng)讀者一步步地創(chuàng)建一個實用的網(wǎng)站。
8、《 CSS 權(quán)威指南 》（第3版）
你是否既想獲得豐富復(fù)雜的網(wǎng)頁樣式，同時又想節(jié)省時間和精力？本書為你展示了如何遵循 CSS 最新規(guī)范（ CSS2 和 CSS2.1 ）將層疊樣式表的方方面面應(yīng)用于實踐。
9、《 網(wǎng)站重構(gòu) 》（第 3 版）
《網(wǎng)站重構(gòu):應(yīng)用 Web 標(biāo)準(zhǔn)進(jìn)行設(shè)計(第3版)》內(nèi)容簡介：暢銷書作家、設(shè)計師、網(wǎng)頁標(biāo)準(zhǔn)教父 jeffrey zeldman 再次更新了他經(jīng)典的、顛覆行業(yè)的指南書。這已經(jīng)是《網(wǎng)站重構(gòu)：應(yīng)用 Web 標(biāo)準(zhǔn)進(jìn)行設(shè)計(第 3 版)》的第 3 版了,此次更新基本涵蓋了隨著環(huán)境和技術(shù)的變化，Web 標(biāo)準(zhǔn)所面臨的挑戰(zhàn)以及因此而發(fā)生的改善。第 3 版讓基于標(biāo)準(zhǔn)的設(shè)計思想更加清晰,更加易于理解,幫助你在這個領(lǐng)域中保持聰明和領(lǐng)先。
10、《 html+css+js 網(wǎng)頁制作從入門到精通》
《 HTML\CSS\JavaScript 網(wǎng)頁制作從入門到精通》共分為 18 章和 4 個附錄，重點(diǎn)介紹使用 HTML 進(jìn)行網(wǎng)頁制作的方方面面，同時講解了目前流行的 Web 標(biāo)準(zhǔn)與 CSS 網(wǎng)頁布局實例，以及基于 JavaScript 語言的網(wǎng)頁特效制作。為了便于讀者學(xué)習(xí)，附錄中匯集了經(jīng)過作者精心整理的網(wǎng)頁制作技巧 60 多例。
免費(fèi)AI編程助手
更多建議：