《JavaScript權威指南》第六版有1004頁厚，看不完，看不下去，咋辦？就看濃縮版的唄

JavaScript權威指南》第二章詞法結構筆記（嫌排版不好的，評論區有pdf版下載哦）

一、區分大小寫

例如："online"、"Online"、"OnLine"和"ONLINE"是4個不同的變量名

二、注釋

分單行注釋和多行注釋，注釋不能嵌套

例子：

//這里是單行注釋

/*這里是一段注釋*///這里是另一段注釋

*這又是一段注釋

*這里的注釋可以連寫多行

三、直接量

所謂直接量（literal），就是程序中直接使用的數據值。

書上把它稱之為直接量，其實等同于其它編程語言中的常量

例子：

12 //數字

1.2 //小數

"hello world" //字符串文本

'Hi' //另一個字符串

true //布爾值

false //另一個布爾值

/javascript/gi //正則表達式直接量（用做模式匹配）

null //空

另如果有更復雜的表達方式，可以寫成數組或對象，例如：

{x:1,y:2}//對象

[1,2,3,4,5]//數組

四、標識符和保留字

標識符就是一個名字。在JavaScript中，標識符用來對變量和函數進行命名。

JavaScript標識符必須以字母、下劃線（_）或美元符（$）開始。后續的字符可以是字母、數字、下劃線或美元符（數字是不允許作為首字符出現的）。下面是合法的標識符：

my_variable_name

v13

_dummy

$str

JavaScript保留了一些標識符為自己所用，我們是用不了的

五、可選的分號

雖然javascript對分號的處理比較靈活，但我們還是按照一行一句，每句代碼分號結尾的規則去寫好了，不會有問題

信推出小程序后，html5越來越火熱了，未來H5方向的專業人才必定水漲船高。

我整理了一些關于html的書籍

響應式Web設計:HTML5和CSS3實戰

BenFrain (作者), 王永強 (譯者)

推薦指數：★★★★

簡介：全書主要是帶領讀者做一個小網頁來寫的，其實響應式的東西講得比較少，大半內容是介紹H5和css3的基礎知識。如果同時想了解H5和css3和響應式設計入門，這本書不錯。

HTML5移動Web開發實戰詳解

林瓏 (作者)

推薦指數：★★★★☆

簡介：本書由淺入深，全面、系統、詳盡地介紹了HTML5相關技術和其在移動開發領域的應用。書中提供了大量的代碼示例，讀者可以通過這些例子理解知識點，也可以直接在開發實戰中稍加修改應用這些代碼。《HTML5移動Web開發實戰詳解》涉及面廣，從基本原理到實戰，再到項目工作流，幾乎涉及一個合格的前端開發工程師需要具備的所有重要知識。

瘋狂HTML 5/CSS3/JavaScript講義

李剛 (作者)

推薦指數：★★★★

簡介：這是一本全面介紹HTML 5、CSS 3和JavaScript前端開發技術的圖書，系統地介紹了HTML 5常用的元素和屬性、HTML5的表單元素和屬性、HTML 5的繪圖支持、HTML5的多媒體支持、CSS 3的功能和用法、最前沿的變形與動畫功能等。除此之外，《瘋狂HTML 5/CSS 3/JavaScript講義》還系統地介紹了JavaScript編程知識，包括JavaScript基本語法、DOM編程，以及HTML 5新增的本地存儲、離線應用、JavaScript多線程、客戶端通信支持、WebSocket編程等。

HTML5觸摸界面設計與開發

伍茲 (StephenWoods) (作者), 覃介右谷岳 (譯者)

推薦指數：★★★★☆

簡介：《HTML5觸摸界面設計與開發》專注于觸摸界面的開發，內容的結構和優化網站的思路大概一致。上半部分涵蓋了能使各類網站，特別是移動網站變快的基本概念。書的后半部分是專門講觸摸界面的，特別是盡可能地讓它們更平穩和快速。本書適合具有一定經驗的Web開發者閱讀參考。

HTML5與CSS3權威指南(上下冊)(第3版)

陸凌牛(作者)

推薦指數：★★★★☆

簡介：本書分為上下兩冊。上冊全面系統地講解了HTML5相關的技術，以HTML5對現有Web應用產生的變革開篇;下冊全面系統地講解了CSS3相關的技術，以CSS3的功能和模塊結構開篇，順序講解了各種選擇器及其使用、文字與字體的相關樣式、盒相關樣式、背景與邊框相關樣式、布局相關樣式、變形處理、動畫、顏色相關樣式等內容。

HTML5+CSS3+jQuery Mobile輕松構造APP與移動網站

陳婉凌著

推薦指數：★★★★☆

簡介：這是目前唯一一本真正的HTML5 App開發教材，目前已在復旦、北大、西安交大、北京理工等五十多所高校投入教學使用。它的特點是由淺入深、由易到難，將開發技巧、和開發工具結合在一起闡述，同時選取了多個商業項目APP的實戰案例進行要點講解，通俗易懂。

和上面推薦的幾本書不同之處在于，本書是面向應用型本科和高等職業院校設計的標準化教材，并經過官方權威認證，且該教材能與國家及國際權威認證考試無縫對接。

html和css都是web前端的基礎，在這里，就給大家推薦幾個新手小白必去的網站！

1、w3school

http://www.w3school.com.cn

用來查找一些標簽的屬性,每一個剛學習前端的伙伴,都會用到這個網站.

2.csdn

CSDN上可以獲得一些不錯的資訊,也可以找到很多需要的資料,也是一個交流的平臺,有些不懂得問題也可以找到人去解答.

3.開源中國

獲取到許多項目案例的源碼,獲得最新web前端發展的一些動向,資訊.

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

為你強力推薦經典css書籍

1.精通CSS：高級Web標準解決方案（第2版）(Amazon第一CSS暢銷書全新改版)

本書將最有用的css書籍技術匯總在一起，還總結了css設計中的最佳實踐，討論了解決各種實際問題的技術，填補了一直以來css圖書的空白。

2.精通CSS+DIV 網頁樣式與布局

本書系統地講解了css層疊樣式表的基礎理論和實際運用技術，通過大量實例對css進行深入淺出的分析，主要包括css的基本語法和概念，設置文字、圖片、背景、表格、表單和菜單等網頁元素的方法，以及css濾鏡的使用。

3. CSS權威指南(第三版)

最新版《css權威指南》css書籍經過全面更新，涵蓋了internet explorer 7，詳細介紹了各個css屬性以及屬性之間的相互作用，并指導你如何避免一些常見的錯誤。

希望對你有幫助，下一個優秀的前端工程師就是你！

SS 是自定義網頁呈現的語言。它用于添加顏色、背景圖像和紋理，以及在頁面上排列元素。然而，CSS 不僅僅是繪制漂亮的圖片。它還能增強網站的可用性。下圖顯示了 YouTube 的首頁。左邊是頁面的常規渲染，右邊是沒有 CSS 的頁面。

右側的圖像不僅不那么有趣，而且使用起來也更加困難

在這個簡短的指南中，我們將介紹 CSS、演示 CSS 語法、解釋 CSS 的工作原理、向您展示如何將 CSS 標記添加到 HTML 文檔中，并為您提供來自網絡的大量資源，您可以在其中了解有關 CSS 的更多信息。

什么是 CSS？

CSS 代表層疊樣式表，它是用于設置網頁視覺呈現樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現網頁的不同部分的語言。

網頁上的每個項目或元素都是以標記語言編寫的文檔的一部分。在大多數情況下，HTML 雖然是標記語言，但也有其他語言在使用，例如 XML。在本指南中，我們將使用 HTML 來演示 CSS 的實際應用，請記住，如果您使用 XML或不同的標記語言，同樣的原則和技術也適用。

CSS 與 HTML 有何不同？

談到 CSS 提問題時，首先要了解的是何時使用 CSS 等樣式語言以及何時使用 HTML 等標記語言。

所有重要的網站內容都應使用 HTML 等標記語言添加到網站。
網站內容的呈現應該由樣式語言定義，例如 CSS。

不屬于網頁演示的博客文章、頁面標題、視頻、音頻和圖片都應使用 HTML 添加到網頁中。背景圖像和顏色、邊框、字體大小、排版以及網頁上項目的位置都應該由 CSS 定義。

做出這種區分很重要，因為未能使用正確的語言可能會導致將來難以對網站進行更改，并為使用純文本瀏覽器或屏幕閱讀器的網站訪問者造成可訪問性和可用性問題。

CSS 語法

CSS 語法包括選擇器、屬性、值、聲明、聲明塊、規則集、at 規則和語句。

選擇器是一個代碼片段，用于標識受樣式影響的網頁元素或元素。
屬性是要受影響的元素的方面。例如，顏色、內邊距、邊距和背景是一些最常用的顏色 CSS 屬性。
值用于定義屬性。例如，屬性顏色可能被賦予紅色值，如下所示color: red;：
屬性和值的組合稱為聲明。
在許多情況下，多個聲明應用于單個選擇器。聲明塊是用于指代應用于單個選擇器的所有聲明的術語。
單個選擇器和緊隨其后的聲明塊組合稱為規則集。
At-rules類似于規則集，但以**@符號而不是selector開頭。最常見的@media規則是通常用于創建基于查看網頁的設備大小應用的 CSS 規則塊的規則。
規則集和at-rules都是CSS語句。

CSS 語法示例

讓我們使用一段 CSS 來闡明這些項目是什么。

h1 { 
    color: red; 
    font-size: 3em; 
    text-decoration: underline; 
    }

在本例中，h1是選擇器。選擇器后跟一個包含三個聲明的聲明塊。每個聲明與下一個聲明之間用分號分隔。制表符和換行符是可選的，但大多數開發人員使用它來使 CSS 代碼更易于閱讀。

通過h1用作選擇器，我們是說網頁上的每個 1 級標題都應遵循此規則集中包含的聲明。

規則集包含三個聲明：

color:red;
font-size: 3em;
text-decoration: underline;

color、font-size 和text-decoration都是性質。您可以使用數百個 CSS 屬性，但常用的只有幾十個。

我們將值red、3em和underline應用于我們使用的屬性。每個 CSS 屬性都被定義為接受以特定方式格式化的存在。

對于color屬性，我們可以使用顏色關鍵字或 Hex、RGB 或 HSL 格式的顏色公式。在這種情況下，我們使用了 color 關鍵字red。CSS3 中有幾十個顏色關鍵字可用，但其他顏色模型可以訪問數百萬種顏色。

我們將的值應用于3em屬性font-size。我們可以使用多種尺寸單位，包括像素、百分比等。

最后，我們將值添加underline到屬性text-decoration中。我們也可以使用overlineorline-through作為的值text-decoration。此外，CSS3 允許使用純線、雙線、點線、虛線和波浪線樣式，這些都是文本裝飾顏色的規范。我們可以通過使用這樣的聲明一次應用所有三個值：

text-decoration: blue double underline;

該規則將導致h1我們最初示例中的用藍色雙線下劃線。color文本本身將保持為我們屬性中定義的紅色。

為樣式準備 HTML 標記

CSS 應該用于向網頁添加內容。該任務最好由 HTML 和 XML等標記語言處理。相反，CSS 用于選擇網頁上已經存在的項目并定義每個項目的顯示方式。

為了盡可能容易地選擇網頁上的項目，應將標識符添加到網頁上的元素中。這些標識符，在 CSS 上下文中通常稱為鉤子，可以更容易地識別應該受 CSS 規則影響的項目。

類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現方式不受使用類和鉤子的影響，但它們使開發人員能夠精確定位他們希望設置樣式的 HTML 元素。

類和 ID 不可互換。知道何時使用它們很重要。

何時使用類

當單個網頁上有多個元素需要設置樣式時，請使用類。例如，假設您希望頁面頁眉和頁腳中的鏈接以一致的方式設置樣式，但與頁面正文中的鏈接不同。要查明這些鏈接，您可以為每個鏈接或包含鏈接的容器添加一個類。然后，您可以使用該類指定樣式，并確保它們僅應用于具有該類屬性的鏈接。

何時使用 ID

對僅在網頁上出現一次的元素使用 ID。例如，如果您使用 HTML 無序列表進行站點導航，則可以使用nav等 ID為該列表創建唯一的掛鉤。

這是一個用于基本電子商務網站的簡單導航欄的 HTML 和 CSS 代碼示例。

<style>
    #nav { 
         background: lightgray; 
         overflow: auto; 
         } 
     #nav li {
         float: left; 
         padding: 10px;
         } 
      #nav li:hover {
         background: gray; 
         } 
  </style> 
  <ul id="nav"> 
      <li><a href="">Home</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Contact Us</a></li> 
  </ul>

該代碼將生成一個從頁面左側開始的淺灰色背景的水平導航菜單。每個導航項目的四周都有 10 像素的間距，當您將鼠標懸停在每個項目的背景上時，它的背景會變暗。

同一網頁上的任何其他列表都不會受到該代碼的影響。

#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

何時不使用 Hooks

您不必為 HTML元素添加類或 ID 即可使用 CSS對其進行樣式設置。如果您知道要為網頁上特定元素的每個實例設置樣式，則可以使用元素標簽本身。

例如，假設您要創建一致的標題樣式。與向每個標題添加類或 ID 相比，使用標題標簽簡單地設置所有標題元素的樣式會容易得多。

<style> 
   ul { 
       list-style-type: upper-roman; 
       margin-left: 50px; 
       } 
     p { 
       color: darkblue 
       } 
 </style> 
 <p>Some paragraph text here. Two short sentences.</p> 
 <ul> 
 <li>A quick list</li>
 <li>Just two items</li> 
 </ul> 
 <p>Additional paragraph text here. This time let's go for three sentences. Like this.
 </p>

該代碼顯示的效果如下：

.code_sample ul {
list-style-type: upper-roman;
左邊距：50px；
}
.code_sample p {
顏色：深藍色
}

這里有一些段落文本。兩個短句。

快速列表
只有兩個項目
此處附加段落文本。這次讓我們來三句話。像這樣。

另一個清單
仍然只有兩個項目

在這種情況下，即使我們只為ul和p元素編寫了一次樣式規則，但會影響多個項目。通過在網站的每個頁面上創建一致的標題、列表和段落文本樣式，使用元素選擇器是創建有吸引力、可讀性和一致的網站體驗的好方法。

為樣式準備標記的最佳實踐

既然您知道如何將類、ID 和元素標簽用作 CSS 規則集的鉤子，那么您如何才能最好地利用這些知識來編寫標記，以便輕松定位特定元素？

自由而一致地應用課程。對應該在一個方向或另一個方向對齊的項目以及在單個網頁上重復出現的任何元素使用類。
將 ID 應用于在網頁上僅出現一次的項目。例如，在div包含您的網頁內容的ul、包含導航菜單的以及div包含您的網頁標題的上使用 ID。

將 CSS 規則鏈接到 HTML 文檔的方法

向網頁添加 CSS 規則的方法有以下三種：

內聯樣式
內部樣式表
外部樣式表

在絕大多數情況下，應該使用外部樣式表。但是，在某些情況下可以使用內聯樣式或內部樣式表。

內聯樣式

內聯樣式應用于特定的 HTML 元素。HTML 屬性style用于定義僅適用于該特定元素的規則。下面看一下編寫內聯樣式的語法。

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

該代碼將導致該標題以紅色下劃線文本和所有邊的 10 像素填充呈現。在極少數情況下應該使用內聯樣式。在幾乎所有情況下，都應該避免它們并將樣式添加到樣式表中。

內部樣式表

前面的示例使用了內部樣式表。內部樣式表是添加到 HTML 文檔head元素的 CSS 塊。style元素用于開始和結束標簽之間，head所有的 CSS 聲明都添加在style標簽之間。

我們可以使用這種語法在內部樣式表中復制上面代碼中的內聯樣式。

<head> 
     <style> 
         h1 { 
              color: red; 
              padding: 10px; 
              text-decoration: underline;
             } 
      </style> 
   </head> 
<body> 
       <h1>Example Heading</h1>
</body>

該代碼將產生與內聯樣式相同的結果。但是，使用內部樣式表而不是內聯樣式的好處是h1頁面上的所有元素都會受到樣式的影響。

外部樣式表

外部樣式表是只包含 CSS 語句的文檔。文檔中定義的規則通過使用 HTML 文檔元素中的link標記鏈接到一個或多個 HTML文檔。head

要使用外部樣式表，首先要創建 CSS 文檔。

/************************************************* 
Save with a name ending in .css such as styles.css 
*************************************************/
h1 { 
    color: red; 
    padding: 10px; 
    text-decoration: underline;
    }

現在我們有了一個帶有一些樣式的外部樣式表，我們可以使用該link元素將它鏈接到一個 HTML 文檔。

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
</head> 
<body> 
    <h1>Example Heading</h1>
</body>

加載此 HTML 文檔時，該link標記將導致將文件styles.css中*的樣式加載到網頁中。因此，所有 1 級標題元素都將顯示為紅色文本、帶下劃線，并且每邊都應用了 10 像素的填充。

何時使用每種方法

在幾乎所有情況下，外部樣式表都是設置網頁樣式的正確方法。使用外部樣式表的主要好處是它們可以鏈接到任意數量的 HTML 文檔。因此，可以使用單個外部樣式表來定義整個網站的呈現方式。

設計簡單的單頁網站時可以使用內部樣式表。如果網站永遠不會超出使用內部樣式表的單個初始頁面是可以接受的。

內聯樣式可以在兩種情況下使用：

編寫僅應用于單個網頁上的單個元素的 CSS 規則時。
當被集成到內容管理系統（如 WordPress）中的 tinyMCE 編輯器等所見即所得編輯器應用時。

在所有其他情況下，應避免使用內聯樣式以支持外部樣式表。

CSS 是如何工作的

在編寫 CSS 時，很多時候編寫的規則相互沖突。例如，在設置標題樣式時，以下所有規則都可能適用于h1元素。

h1在網站的所有頁面上創建一致呈現的元素級規則。
定義在特定位置呈現的元素的類級別規則h1——例如博客文章的標題。
一個 id 級別的元素，定義了一個h1元素在一個或多個網頁上的一個地方的渲染——例如網站名稱。

開發人員如何編寫足夠通用的規則以涵蓋每一個h1又足夠具體的規則，以定義只應出現在給定元素的特定實例上的樣式？

CSS 樣式遵循兩個規則，您需要了解這些規則才能編寫有效的 CSS。了解這些規則將幫助您編寫在需要時可以廣泛使用的 CSS，但在需要時卻可以非常具體。

控制 CSS 行為方式的兩個規則是繼承和特異性。

級聯繼承

為什么CSS 樣式被稱為級聯？當編寫多個相互沖突的規則時，將執行最后編寫的規則。通過這種方式，樣式向下級聯并應用最后寫入的規則。

讓我們看一個例子。讓我們在一個內部樣式表中編寫兩個直接相互矛盾的 CSS 規則。

<head>
     <style> 
         p {color: red;} 
         p {color: blue;} 
      </style> 
</head> 
<body> 
<p>What color will the text of this paragraph be?</p> 
</body>

瀏覽器將級聯樣式并應用遇到的最后一個樣式，推翻所有以前的樣式。結果，標題是藍色的。

.code_sample_p {顏色：紅色；}
.code_sample_p {顏色：藍色；}

這一段的文字是什么顏色的？

當使用外部樣式表時，同樣的級聯效應也會發揮作用。使用多個外部樣式表是很常見的。head發生這種情況時，樣式表會按照它們在 HTML 文檔元素中出現的順序加載。如果樣式表規則之間發生沖突，則每個樣式表中包含的 CSS 規則將覆蓋先前加載的樣式表中包含的那些規則。以下面的代碼為例：

<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>

如果這兩個樣式表中包含的樣式之間存在沖突，則將應用styles_2.css中的規則。

樣式的繼承是 CSS 樣式級聯行為的另一個例子。

當您為父元素定義樣式時，子元素會收到相同的樣式。例如，如果我們將顏色樣式應用于無序列表，則子列表項將顯示相同的樣式。

<head>
    <style>
        ul {color: red;} 
    </style>
 </head> 
 <body> 
   <ul> 
 <li>Item 1</li> 
 <li>Item 2</li>
   </ul> 
 </body>

以下是該代碼的呈現方式。

.code-sample-ul {顏色：紅色；}
項目 1
第 2 項

并非每個屬性都從父元素傳遞到其子元素。瀏覽器將某些屬性視為非繼承屬性。邊距是不從父元素傳遞到子元素的屬性的一個示例。

特異性

確定對每個 HTML 元素應用哪些規則的第二個規則是[特異性規則。

具有更多特定選擇器的CSS 規則將覆蓋具有較少特定選擇器的 CSS 規則，無論哪個先出現。正如我們所討論的，三個最常見的選擇器是元素標簽、類和 ID。

最不具體的選擇器類型是元素級別選擇器。
當一個類被用作選擇器時，它會否決使用元素標簽作為選擇器編寫的 CSS 規則。
當一個 ID 用作選擇器時，它會否決使用元素或類選擇器編寫的 CSS 規則。

影響特異性的另一個因素是編寫 CSS 樣式的位置。與屬性內聯style編寫的樣式會覆蓋在內部或外部樣式表中編寫的樣式。

增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如，如果您想精確定位列表上的無序列表項目，其中包含divid 為“example-div”的類“example-list”，您可以使用以下選擇器來創建具有高度特異性的選擇器。

div#example-div > ul.example-list > li {styles here}

雖然這是創建非常具體的選擇器的一種方法，但建議限制使用這些類型的選擇器，因為它們比簡單的選擇器需要更多的時間來處理。

一旦您了解了繼承和特異性的工作原理，您將能夠高度準確地定位網頁上的元素。

CSS 能做什么？

一個更好的問題可能是：“CSS 不能做什么？”

CSS 可用于將 HTML 文檔轉換為專業、精美的設計。下面是一些你可以通過 CSS 完成的事情：

創建一個靈活的網格，用于設計在任何設備上都能呈現精美的完全響應式網站。
從排版到表格，再到表格等，應有盡有。
float使用諸如、position、overflow、flex和等屬性將網頁上的元素相對于彼此定位box-sizing。
將背景圖像添加到任何元素。
創建形狀、交互和動畫。

這些概念和技術超出了本入門指南的范圍，但以下資源將幫助您解決這些更高級的主題。

盒子模型

如果您打算使用 CSS 來構建網頁布局，那么首先要掌握的主題之一就是盒子模型。盒子模型是一種可視化和理解網頁上每個項目如何組合內容、填充、邊框和邊距的方法。

了解這四個部分如何組合在一起是一個基本概念，在繼續討論其他 CSS 布局主題之前必須掌握它。

了解盒子模型的兩個好地方包括：

來自萬維網聯盟的盒子模型的解釋。
來自 Mozilla 開發者網絡的CSS 盒子模型介紹。

創建布局

有許多技術和策略用于使用 CSS 創建布局，理解盒子模型是每個策略的先決條件。掌握了盒子模型后，您將準備好學習如何操作網頁上的內容盒子。

Mozilla 開發者網絡對 CSS 布局進行了很好的介紹]。這篇簡短的閱讀涵蓋了 CSS 布局背后的基本概念，并快速介紹了諸如text-align、float和position.

W3C 提供了更廣泛、更深入的 CSS 布局指南：CSS 布局模型。本文檔是面向專業開發人員的資源，因此如果您是 CSS 新手，請花點時間查看它。這不是快速閱讀。但是，您需要了解的有關創建 CSS 布局的所有信息都包含在本文檔中。

多年來，網格布局一直是設計響應式布局的首選策略。CSS 網格已經從零開始創建多年，市場上有許多不同的網格生成網站和開發框架。然而，在幾年內，對網格布局的支持將成為 CSS3 規范的一部分。您可以通過閱讀 W3C 網站上的主題來了解很多關于網格的知識。有關網格布局的更輕松、更簡短的介紹。

幾年之內，CSS3靈活框或flexbox有望成為設計網站布局的主導模型。flexbox 規范還沒有完全完成和最終確定，并且瀏覽器之間對 flexbox 的支持并不一致。然而，每個初露頭角的 CSS 開發者都需要熟悉flexbox并準備在不久的將來實現它。

網頁字體和排版

可以做很多事情來增加個性并提高網站內容的可讀性。在我們的字體和網頁排版指南中了解有關為網絡選擇字體和排版的更多信息。

創建一致的跨瀏覽器體驗

每個瀏覽器對 HTML 規范的解釋略有不同。因此，當在兩個不同的瀏覽器中呈現相同的代碼時，呈現代碼的方式通常會存在細微差別。

以這段簡短的代碼為例。

<h1>Heading 1</h1> 
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p> 
<h2>Heading 2</h2>
<ul>
   <li>Just a short list</li>
   <li>Three items on this list</li> 
   <li>We'll make it an unordered list</li>
 </ul>
  <h3>Heading 3</h3>
  <p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

如果我們在兩個不同的瀏覽器中渲染該代碼，我們會看到細微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現該代碼的方式。

你能看出細微的差別嗎？左邊的 Firefox 在每個標題元素周圍增加了一點邊距。此外，在 Edge 中渲染時，項目符號點會小一些。雖然這些差異不是必然的，但在某些情況下，瀏覽器之間的這些微小差異可能會產生問題。

CSS 可用于解決這些跨瀏覽器兼容性問題。一種流行的方法是實現一個名為normalize.css的樣板 CSS 文檔。這個免費提供的 CSS 文件可以鏈接到任何 HTML 文檔，以幫助最小化跨瀏覽器的呈現差異。

在您的設計工作中包含normalize.css的最簡單方法是鏈接到Google 托管的副本。為此，只需將這行代碼放入HTML 文檔的元素中。head

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

在線咨詢

上一篇：HTML5如何實現視頻直播功能
下一篇：JavaScript表格隔行變色怎么寫？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

《JavaScript權威指南》第六版有1004頁厚，看不完，看不下去，咋辦？就看濃縮版的唄

什么是 CSS？

CSS 與 HTML 有何不同？

CSS 語法

CSS 語法示例

為樣式準備 HTML 標記

何時使用類

何時使用 ID

何時不使用 Hooks

為樣式準備標記的最佳實踐

將 CSS 規則鏈接到 HTML 文檔的方法

內聯樣式

內部樣式表

外部樣式表

何時使用每種方法

CSS 是如何工作的

級聯繼承

特異性

CSS 能做什么？

盒子模型

創建布局

網頁字體和排版

創建一致的跨瀏覽器體驗

您的項目需求