什么是css骑篙？
CSS是一種為您的網(wǎng)站添加樣式（顏色，圖像谎势，邊框杨名，邊距...）的語言。這真的很簡(jiǎn)單台谍。CSS不用于在您的網(wǎng)站上放置任何內(nèi)容，它只是用于獲取您擁有的內(nèi)容并使其變得漂亮典唇。首先要做的是將CSS文件鏈接到HTML文檔。通過添加以下行來執(zhí)行此操作：
? ? <link rel="stylesheet" href="style.css" type="text/css">
該行應(yīng)放在您的<head>代碼之間恨胚。如果您有多個(gè)頁(yè)面炎咖，則可以為所有頁(yè)??面添加完全相同的行，并且它們都將使用相同的樣式表升熊，但稍后會(huì)有更多相關(guān)內(nèi)容绸栅。讓我們看看我們剛剛鏈接到的文件“style.css”。
? ? h1 { font-size: 40px;
? ? height: 200px;
? ? }
? ? .warning { color: red; font-weight: bold;
? ? }
? ? #footer { background-color: gray;
? ? }
你有三個(gè)選擇那里粹胯，h1，.warning和#footer况鸣。選擇器只指向HTML文檔中的某個(gè)位置竹观。它可以以多種方式構(gòu)建潜索，并且可以是以下構(gòu)建塊的組合：
1.元件
2.類
3.ID
我將通過所有這三個(gè)并解釋他們做了什么懂酱。
一個(gè)元素在HTML標(biāo)簽指向某個(gè)網(wǎng)頁(yè)上玩焰。在上面的示例中，我們要為`<h1>`-tag 設(shè)置樣式昔园。請(qǐng)注意，使用類似的元素會(huì)影響具有該名稱的所有標(biāo)記甥郑，因此使用`p { margin-left: 100px; }`給所有 `p -tags`一個(gè)左邊距荤西。
使用類也很簡(jiǎn)單。在編寫時(shí).your_class勉躺，所有標(biāo)簽都使用名為“your_class”的類來設(shè)置樣式觅丰。在上面的例子中，我們有.warning這將樣式如`<div class="warning">`和`<em class="warning">`妇萄，那就是與類警告任何元素。如果您想以某種方式設(shè)置幾個(gè)標(biāo)簽的樣式轻掩，可能會(huì)使用類懦底，也許您希望某些鏈接變紅？將類添加到所有這些鏈接丐重。
你還需要一個(gè)構(gòu)建塊：id拱层。這次你設(shè)置一個(gè)元素宴咧，其屬性“id”設(shè)置為你選擇的id。除了一件事以外烙肺，它的工作方式與類完全相同; 在每個(gè)HTML文檔中只能有一個(gè)具有特定名稱的ID。在上面的例子中我們風(fēng)格`<div id="footer">`桃笙。如果您查看示例，它確實(shí)有意義：HTML文檔可能包含多個(gè)警告但只包含一個(gè)頁(yè)腳鼠锈。當(dāng)您只想設(shè)置一個(gè)特定標(biāo)簽時(shí)星著，應(yīng)該使用ID。
使用這三個(gè)構(gòu)建塊將帶您走遠(yuǎn)同欠，但是當(dāng)您進(jìn)入更高級(jí)的布局時(shí)横缔，您可能希望將構(gòu)建塊組合到更高級(jí)的選擇器中。只是給你兩個(gè)你可以做的例子：em.warning只設(shè)置那些`<em>`帶有類.warning集的標(biāo)簽襟锐。您還可以使用#footer a僅設(shè)置嵌套在ID為“footer”的標(biāo)記內(nèi)的鏈接的樣式斗蒋。很好，不是嗎泉沾？
每個(gè)選擇器都有一組與它們相關(guān)的聲明跷究。每個(gè)聲明都有一個(gè)屬性，描述我們想要更改的內(nèi)容和值俊马，我們應(yīng)該將其更改為什么。那里的條款太多了解寝？你還在聽我說嗎艘儒？讓我用一個(gè)例子來解釋：`a { color: Blue; font-size: 3em; }`夫偶。您有選擇器 a觉增，因此文檔中的所有鏈接都將被設(shè)置樣式。我們有兩個(gè)聲明：color: Blue和font-size: 3em;说铃。最后嘹履，每個(gè)聲明由兩部分組成：屬性 color和值 Blue。嘌媒狻焰枢！做得好到目前為止。上面的術(shù)語很有用暑椰，因?yàn)樗鼮槟峁┝艘环N談?wù)揅SS的方法荐绝。如果你加入一個(gè)CSS頻道尋求代碼的幫助，他們會(huì)告訴你“你在第二個(gè)聲明中的a-selector中有錯(cuò)誤”你知道確切的位置低滩！對(duì)恕沫？
現(xiàn)在你可能會(huì)問有什么屬性。你看過了font-size婶溯，color但還有什么？答案是褐筛，有很多東西你可以風(fēng)格和玩耍叙身。另外（接近）所有標(biāo)簽在CSS中是相同的，因此如果您僅使用HTML晃痴，則可以像使用表一樣設(shè)置任何元素的邊框和顏色。開始看到可能性？
CSS就是分離
CSS最少遵循的部分之一就是它背后的理念定罢，即內(nèi)容和設(shè)計(jì)分離的想法。這里的想法是所有網(wǎng)站都包含兩個(gè)主要部分琼蚯，內(nèi)容：所有文章惠况，文字和照片以及設(shè)計(jì)：圓角，顏色和效果峦睡。通常這兩個(gè)是在網(wǎng)頁(yè)的生命周期的不同部分制作的权埠。設(shè)計(jì)在開始時(shí)確定，然后您開始填充內(nèi)容并保持設(shè)計(jì)固定攘蔽。因此满俗，如果您只是想為您的網(wǎng)站添加內(nèi)容，您不希望被迫使用該設(shè)計(jì)唆垃，是嗎？反過來也是如此与柑，如果您決定重新設(shè)計(jì)蓄坏，為什么還要弄亂內(nèi)容，確保它適合新的布局结蟋？
在CSS中渔彰，你只需添加<link>我告訴你的關(guān)于HTML文檔頭部的nifty -tag推正，你就已經(jīng)創(chuàng)建了一個(gè)指向你設(shè)計(jì)的鏈接植榕。在HTML文檔中尼夺，您只放置內(nèi)容，而您的鏈接確保它看起來正確淤堵。您還可以在許多頁(yè)面上使用完全相同的鏈接，為它們提供相同的設(shè)計(jì)慰毅。你想添加內(nèi)容嗎扎阶？只需編寫一個(gè)簡(jiǎn)單的HTML文檔，并考慮標(biāo)記為“標(biāo)題”而不是“大藍(lán)色標(biāo)題”统台，并使用CSS使所有標(biāo)題看起來像你想要的方式啡邑！
這是一種不同的網(wǎng)頁(yè)思考方式，這需要一段時(shí)間讓我理解贵扰。為了幫助你流部，我寫了一些好的和壞的編碼的例子。這有什么問題舞丛？
? ? <font size="3">Welcome to my page</font>
注釋：font-tag的設(shè)計(jì)和設(shè)計(jì)不應(yīng)該在HTML文檔中果漾。所有設(shè)計(jì)都應(yīng)該在CSS文件中！而是這樣做：
在HTML中：
? ? <h1>Welcome to my page</h1>
在CSS中：
? ? h1 { font-size: 2em; }
還有一個(gè)例子：
? ? <b>An error occurred</b>
評(píng)論：這看起來不對(duì)嗎吨凑？但如果你抬頭`<b>`找到什么代表你很快就會(huì)發(fā)現(xiàn)大膽。但大膽的當(dāng)然是設(shè)計(jì)糙臼，所以它仍然不屬于HTML文檔恩商。一個(gè)更好的選擇是`<em>`代表強(qiáng)調(diào)或簡(jiǎn)單地說“這段文字很重要”。因此怠堪，不要說“這個(gè)文本看起來像這樣”研叫，而是說“這個(gè)文本很重要”璧针，你讓看起來由CSS決定。似乎是一個(gè)小改動(dòng)申屹，但它說明了如何選擇您的標(biāo)簽隧膏。請(qǐng)改用：
? ? In the HTML:
? ? <em>An error occured</em>
? ? In the CSS:
? ? em { font-weight: bold;
? ? color: Red;
? ? }
最后一個(gè)例子：
? ? <table>
? ? <tr>
? ? <td><a href="">北京尚學(xué)堂</a>
? ? </td>
? ? </tr>
? ? <tr>
? ? <td><a href="">www.bjsx.com</a>
? ? </td>
? ? </tr>
? ? ...
? ? </table>
評(píng)論：很多人都像上面的例子那樣格式化他們的導(dǎo)航菜單。但導(dǎo)航菜單真的是一張桌子嗎杆煞？如果您查找表的定義腐泻，您會(huì)看到它是為表格數(shù)據(jù)制作的，您將在Excel工作表中輸入相同類型的數(shù)據(jù)构诚。該示例只有一列數(shù)據(jù)铆惑，沒有標(biāo)題......有些人聲稱他們使用表格，因?yàn)檫@意味著他們可以在導(dǎo)航中獲得邊框和背景顏色丑蛤，但這正是CSS文件的用途（而不是HTML文檔） ）撕阎。那我們?cè)撛趺崔k？深入了解w3schools的HTML元素列表名斟，你會(huì)發(fā)現(xiàn)一個(gè)叫做無序列表的東西<ul>∶铺唬看看這個(gè)：
? ? In the HTML:
? ? <ul>
? ? <li><a href="">北京尚學(xué)堂</a></li>
? ? <li><a href="">www.bjsxt.com</a></li>
? ? ...
? ? </ul>
? ? In the CSS:
? ? li {
? ? border: 1px solid;
? ? }
這可能是一種不同于HTML習(xí)慣的方式岩梳，而不是相信我，但是當(dāng)你使用它一段時(shí)間后冀值，你會(huì)看到它的強(qiáng)大功能列疗。這種編碼方式不僅可以為您提供更合理的結(jié)構(gòu)，還可以證明這可以提高您在搜索引擎中的排名抵栈，并使輔助功能設(shè)備更容易閱讀您的網(wǎng)站古劲。這種設(shè)計(jì)方式很棒。
接下來产艾，我們將構(gòu)建一個(gè)簡(jiǎn)單的HTML模板闷堡，以便在構(gòu)建新頁(yè)面時(shí)用作開始。喜歡看嗎缚窿？
構(gòu)建基于標(biāo)準(zhǔn)的HTML模板
我們已經(jīng)討論了CSS和HTML背后的理論倦零，它們共同構(gòu)成了一個(gè)與設(shè)計(jì)分離的良好結(jié)構(gòu)的網(wǎng)站。但是你打字時(shí)扫茅，構(gòu)建頁(yè)面的第一部分總是一樣的
? ? <!doctype html>
? ? <html>
? ? <body>
? ? <div id="header">
? ? <!-- Header here! -->
? ? </div>
? ? <div id="navigation">
? ? <!-- Navigaiton here! -->
? ? </div>
? ? <div id="content">
? ? <!-- Content here -->
? ? </div>
? ? </body>
? ? </html>
好吧蹋嵌，那里可能會(huì)有一些新東西讓我們一個(gè)接一個(gè)地瀏覽。首先我們說明這個(gè)文檔的doctype：我們使用什么語言葫隙。您可能聽說過XHTML栽烂，這是另一種類似的Web語言，但是對(duì)于第一頁(yè)，我們不需要能夠訪問的功能腺办，保持簡(jiǎn)單焰手，只需使用HTML。此外怀喉，`<!doctype html`>上面設(shè)置文檔使用嚴(yán)格的 HTML。要了解您需要知道瀏覽器中有兩種呈現(xiàn)方式躬拢。一個(gè)遵循W3C設(shè)置的標(biāo)準(zhǔn)躲履，“標(biāo)準(zhǔn)模式”，一個(gè)用于舊頁(yè)面聊闯，稱為“怪癖模式”工猜。標(biāo)準(zhǔn)模式是我們想要使用的。它使得頁(yè)面在現(xiàn)代瀏覽器中呈現(xiàn)（幾乎）相同菱蔬，并使我們不再依賴于特定的瀏覽器篷帅，我們只會(huì)遵循標(biāo)準(zhǔn)。Quirks模式是一種bug模式汗销。它是保持舊頁(yè)面看起來與瀏覽器開始嘗試遵循標(biāo)準(zhǔn)之前的相同犹褒，因此故意充滿了奇怪的錯(cuò)誤抵窒。瀏覽器根據(jù)我們使用的doctype確定要使用的渲染模式弛针，因此請(qǐng)確保使用正確的文檔類型！
好李皇。對(duì)于單行代碼削茁，這是很多解釋，我現(xiàn)在會(huì)更快掉房，下一行茧跋。您可能`<html>`以前在文檔的開頭寫過。除了我在lang="en"那里添加之外卓囚，我的界限幾乎就是這樣瘾杭。該行告訴瀏覽器我們將使用哪種語言。為什么我們使用哪種語言很重要哪亿？你問......好吧粥烁，有一種輔助技術(shù)可以向網(wǎng)絡(luò)讀者大聲讀取網(wǎng)頁(yè)。那些人必須知道能夠發(fā)音的語言是什么蝇棉。你可以很容易地添加這幾個(gè)字符讨阻，為什么不這樣做呢？如果您不打算制作英文頁(yè)面篡殷，可以通過訪問WAIs語言代碼找到您自己的語言代碼钝吮，并在那里查看兩個(gè)字母的名稱（注意： 語言代碼是小寫的。
接下來我們有文件的負(fù)責(zé)人。頭部包含一些關(guān)于頁(yè)面的元信息奇瘦，如字符編碼棘催，標(biāo)題和要使用的樣式表（CSS文件）。那里的charset是最棘手的链患，所以讓我們先拿出來巧鸭。一種語言中有很多不同的字母。當(dāng)最初構(gòu)建工程師的計(jì)算機(jī)只考慮美國(guó)/英語時(shí)麻捻，他們甚至沒有想到瑞典的字母?纲仍，?，?或deutschumlautü或者＆-sign贸毕？有很多角色郑叠，起初沒有就如何處理它們達(dá)成一致意見。這時(shí)明棍，有人想出了將其分組為的聰明的主意套乡革，在世界某些地方使用的字符組。因此摊腋，元標(biāo)記所做的只是簡(jiǎn)單地說：“這個(gè)人想要輸入西方字符（拉丁字符1個(gè)字符）”沸版，這告訴瀏覽器要使用什么字符集。更通用的方法是使用utf-8字符集但很快就會(huì)變得棘手兴蒸。最后视粮，我們?cè)谀抢镉幸粋€(gè)text / html，它只是告訴服務(wù)器將文檔作為HTML發(fā)送橙凳，而不是像圖像那樣蕾殴。該`<title>`和<link>你應(yīng)該熟悉，如果沒有岛啸，baidu一下:)
這只是幾行代碼的很多信息钓觉，我希望我沒有給人的印象是這些東西很難，因?yàn)樗皇羌岵取Ｒ褂蒙厦娴膬?nèi)容荡灾，您只需復(fù)制并粘貼它，然后開始填充內(nèi)容瞬铸。
文檔的主體由一堆分區(qū)組成批幌，讓我們?yōu)樗鼈兲砑右恍﹥?nèi)容：
? ? ...
? ? <div id="header">
? ? <h1>The name of this page</h1>
? ? </div>
? ? <div id="navigation">
? ? <h2>Navigation</h2>
? ? <ul>
? ? <li><a href="first.html">First</a></li>
? ? <li><a href="second.html">Second</a></li>
? ? <li><a href="third.html">Third</a></li>
? ? </ul>
? ? </div>
? ? <div id="content">
? ? <h2>Content</h2>
? ? 北京尚學(xué)堂科技有限公司是一家從事JAVA、前端赴捞、hadoop大數(shù)據(jù)云計(jì)算技術(shù)開發(fā)為一體的軟件公司逼裆。公司由海外留學(xué)人員和國(guó)內(nèi)IT精英人士創(chuàng)建，主要成員均擁有碩士以上學(xué)位赦政，畢業(yè)于國(guó)內(nèi)著名大學(xué)如：清華大學(xué)胜宇，北京航空航天大學(xué)等耀怜。
? ? ? ? </div>
? ? <div id="footer">
? ? This page is written by [Your name] and builds on a
? ? <a >Friendlybit template</a>.
? ? </div>
? ? ...
我們?cè)谶@做了什么？首先桐愉，您應(yīng)該注意财破，文檔的快速概述會(huì)告訴您很多內(nèi)容。你可以很容易地看到一些東西是標(biāo)題（h1从诲，h2）左痢，有些只是一個(gè)鏈接列表（ul，li系洛，a）俊性。讓我們快速瀏覽一下代碼：
首先我們有一個(gè)標(biāo)題。標(biāo)題通常是一個(gè)大圖像和一些文本描扯。有些頁(yè)面根本沒有HTML標(biāo)題定页，它們只鏈接到圖像并在該圖像中包含文本。問題在于搜索引擎和屏幕閱讀器都無法獲得標(biāo)題文本绽诚。由于標(biāo)題文本是最重要的描述典徊，訪問者必須訪問他們所訪問的頁(yè)面，因此您確實(shí)遇到了問題恩够。所以請(qǐng)相信我卒落，保留那里的文字。
接下來我們有導(dǎo)航蜂桶。導(dǎo)航應(yīng)該幾乎總是標(biāo)記為無序的鏈接列表儡毕。我已經(jīng)看到了這個(gè)最奇怪的變體，包括表格屎飘，嵌套表格妥曲，每行之后的`-tags等等，但是唯一的內(nèi)容是鏈接列表，為什么不是這樣呢碉就？使用列表并不意味著它必須以某種方式查看躯砰，請(qǐng)記住，稍后在CSS中處理所有設(shè)計(jì)虐秦，這只是我們?cè)谶@里處理的HTML。注意：您可以輕松刪除子彈標(biāo)記list-style: none;，這不是使用其他HTML的理由唱凯。
HTML文檔中最重要的部分是內(nèi)容。這就是人們?cè)L問您網(wǎng)頁(yè)的原因谎痢，這是您應(yīng)該投入大部分精力的地方磕昼。使用適當(dāng)?shù)臉?biāo)題標(biāo)記標(biāo)記您的標(biāo)題，并確保它們看起來與普通文本不同节猿，這樣可以更輕松地快速掌握您想說的內(nèi)容票从。在段落周圍使用段落標(biāo)記可以更輕松地設(shè)置文本樣式漫雕。CSS text-indent: 2em;只在每個(gè)段落中的第一個(gè)單詞之前添加了一些空格，只是為了說明當(dāng)你使用好的標(biāo)記時(shí)可以用CSS做的一件簡(jiǎn)單的事情峰鄙。
最后浸间，在頁(yè)面中添加頁(yè)腳可能是個(gè)好主意。確保您在此處或您網(wǎng)站上的其他位置有某種聯(lián)系信息吟榴，誰知道人們會(huì)問你什么魁蒜？如果您想幫助我，您也可以在您網(wǎng)站的某個(gè)位置添加指向此網(wǎng)站的鏈接吩翻。如果你這樣做兜看，非常感謝！
在這篇簡(jiǎn)短的初學(xué)者指南的下一頁(yè)（也就是最后一頁(yè)）中狭瞎，我們將包裝所有內(nèi)容并添加一些示例CSS铣减。您可以在頁(yè)面上免費(fèi)復(fù)制和使用所有內(nèi)容。準(zhǔn)備脚作？
完整的HTML模板和示例CSS
讓我們首先將我展示的兩個(gè)HTML放在一起葫哗，然后將它與一些示例CSS結(jié)合起來：示例HTML + CSS。您可以在下面找到制作該頁(yè)面的所有代碼球涛。您可以隨意復(fù)制以下代碼并自行試驗(yàn)劣针。
? ? <html lang="en">
? ? <body>
? ? <div id="header">
? ? <h1>The name of this page</h1>
? ? </div>
? ? <div id="navigation">
? ? <h2>Navigation</h2>
? ? <ul>
? ? <li><a href="first.html">First</a></li>
? ? <li><a href="second.html">Second</a></li>
? ? <li><a href="third.html">Third</a></li>
? ? </ul>
? ? </div>
? ? <div id="content">
? ? <h2>Content</h2> Some sample content, add your own here
? ? </div>
? ? <div id="footer"> This page is written by [Your name] and builds on a
? ? <a >Friendlybit template</a>. </div> </body> </html>
我們來看看上面的六條規(guī)則。首先我們?cè)O(shè)置body的背景顏色亿扁，body是所有內(nèi)容的背景捺典，所以這將與HTML中的bgcolor相同。
接下來从祝，我們?cè)陧?yè)面上的所有分區(qū)上設(shè)置一些樣式襟己。我們有四個(gè)，通過這個(gè)單一的規(guī)則牍陌，我們會(huì)影響他們擎浴。首先，我們將黑色邊框設(shè)置為3像素寬（請(qǐng)注意毒涧，CSS中的數(shù)字和單位之間沒有空格）贮预。然后我們將填充（邊框和內(nèi)容之間的空間）設(shè)置為7像素，最后我們將所有div的寬度設(shè)置為600像素（請(qǐng)注意契讲，邊距仿吞，邊框和填充不包括在寬度中）。
第三個(gè)規(guī)則選擇頁(yè)面上的所有標(biāo)題捡偏，并從中刪除邊距（邊框和其他附近元素之間的空格）唤冈。在元素之間使用逗號(hào)將相同的CSS應(yīng)用于所有元素。
接下來银伟，我們?yōu)槿齻€(gè)部門制定了一些具體規(guī)則你虹。我們將導(dǎo)航定位在內(nèi)容的左側(cè)凉当。這是通過使用浮動(dòng)來完成的，這是一種并排放置的方法售葡。如果你在HTML中的圖像上使用了align-attribute看杭，你就會(huì)知道浮點(diǎn)數(shù)是如何工作的，它們將元素盡可能地移動(dòng)到左邊挟伙，然后讓下一個(gè)元素緊跟在它旁邊楼雹。如果你想在浮子下面放一些東西，你需要清除它尖阔。清除將元素向下移動(dòng)贮缅，直到它位于任何浮動(dòng)的下方，正好是我們想要頁(yè)腳的位置介却。因此谴供，導(dǎo)航和內(nèi)容都會(huì)浮動(dòng)并給定寬度以匹配600像素寬的標(biāo)題，并且頁(yè)腳將被清除齿坷。
希望對(duì)大家有所幫助桂肌，大家多多關(guān)注！
