avaScript開發基礎——CSS知識

使用CSS技術可以對文檔進行精細的頁面美化，CSS不僅可以對單個頁面進行格式化，還可以對多個頁面使用相同的樣式進行修飾，以達到統一的效果。

CSS的相關概念

CSS是英文Cascading Style Sheets（層疊樣式表單）的縮寫，通常又稱為風格樣式表（Style Sheet）或級聯樣式表，它是用來進行網頁風格設計的。給網頁添加CSS，最大的優勢就是在后期維護中只需要修改代碼即可。

CSS能做什么

通過在網頁中添加CSS樣式表，只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者不同網頁的外觀和格式。具體來講，CSS的作用有以下幾個方面。

在幾乎所有的瀏覽器上都可以使用。

以前一些非得通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。

使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。

用戶可以輕松地控制頁面的布局。

用戶可以將許多網頁的風格、格式同時更新，不用再一頁一頁地更新了。

用戶可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發生變動。

瀏覽器與CSS

CSS制定完成之后，具有了很多新功能，即新樣式。但這些新樣式在瀏覽器中不能獲得完全支持，主要在于各個瀏覽器對CSS的很多細節處理上存在差異。例如，一個標簽的某個屬性被一種瀏覽器支持，而另外一種瀏覽器則不支持，或者兩個瀏覽器都支持，但其顯示效果不一樣。

各主流瀏覽器為了自己產品的利益和推廣，定義了很多私有屬性，以便加強頁面顯示樣式和效果，導致現在每個瀏覽器都存在大量的私有屬性。雖然使用私有屬性可以快速構建效果，但是對網頁設計者來說這是一個大麻煩，設計一個頁面需要考慮在不同瀏覽器上的顯示效果，一個不注意就會導致同一個頁面在不同瀏覽器上顯示效果不一致，甚至有的瀏覽器不同版本之間也具有不同的屬性。

如果所有瀏覽器都支持CSS樣式，那么網頁設計者只需要使用一種統一標簽，就會在不同瀏覽器上顯示統一樣式效果。

當CSS被所有瀏覽器接受和支持的時候，整個網頁設計將會變得非常容易，其布局更加合理，樣式更加美觀，到那個時候，整個Web頁面顯示會煥然一新。雖然現在CSS還沒有完全普及，各個瀏覽器對CSS的支持還處于發展階段，但CSS是一個新的、具有發展潛力很高的技術，在樣式修飾方面，是其他技術無可替代的。學習CSS技術，

CSS的局限性

CSS的局限性主要體現在定位屬性上的局限性以及不同瀏覽器之間的限制。在使用絕對定位屬性的時候，由于元素的位置已經確定，并獨立于文檔之外，所以當元素中的內容發生變化時，其他元素無法根據絕對定位元素的變化而做出相應的調整，最終將會導致頁面中內容重疊或者產生空白。

在使用相對定位屬性的時候，由于頁面中會保留元素原來占有的位置，所以會在原有位置上產生空白區域，同時，由于相對定位的優先級高于普通元素，所以也可能造成元素內容的重疊。

瀏覽器支持的不一致性。瀏覽器的漏洞或缺乏支持的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排效果。例如，在微軟IE 6.0的舊版本，執行了許多自己的CSS2.0屬性，曲解了很多重要的屬性，例如width、height和float。

CSS沒有父層選擇器，CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如XPath）有助于進行復雜的樣式設計。

不能明確地指定繼承性樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上。垂直控制的局限元素的水平放置普遍地易于控制，垂直控制則是非憑直覺性的、較迂回的，甚至是不可能的。

CSS的優缺點

CSS通過控制頁面結構的風格，進而控制整個頁面的風格，那么使用CSS控制網頁風格有什么優點與缺點呢？

使用CSS的優點如下。

（1）加速用戶的開發。CSS可以幫助用戶做好基礎工作，因此可以更快地開始開發。例如，如果兩個開發團隊一起工作，那么就可以共享彼此的CSS代碼，從而提高團隊的工作效果。

（2）可以使用跨瀏覽器功能。CSS已經編寫成跨瀏覽器兼容了，所以用戶可以專注于自定義和創建內容而不是調整基礎的樣式，更好的是CSS還會消除瀏覽器特定的bug。

（3）給用戶干凈和對稱的布局。基于網格的CSS建立了一個預定義寬度的多列布局，所以用戶可以專注于創建內容而不是排列文本塊。

（4）強制使用好的網頁設計習慣。CSS強制使用好的習慣，如引入打印樣式表。它還提供了一系列的選擇器，用戶可以在所有使用框架的網站或Web應用中使用，這使得網頁設計具有一致性。

使用CSS的缺點如下。

（1）限制開發自由。因為CSS有標準的網格、選擇器和其他代碼，所以限制了用戶可以設計的東西，如布局大小、網格寬度、按鍵類型、樣式等。

（2）添加額外代碼。CSS不可避免地有一些用戶不需要的代碼，因此需要被迫接受一些額外的代碼。

（3）強迫用戶使用語法。通過使用CSS，用戶需要被迫接受語法的變化，特別是在使用非標準命名模式的情況下。

CSS的基礎語法

在網頁中加入CSS樣式的目的是將網頁結構代碼與網頁格式風格代碼分離開來，從而使網頁設計者可以對網頁的布局進行更多的控制。

CSS構造規則

構造CSS的規則由3部分組成，分別是選擇符（selector）、屬性（property）和屬性值（value）

CSS注釋語句

CSS注釋可以幫助用戶對自己寫的CSS文件進行說明，如說明某段CSS代碼所作用的地方、功能、樣式等。

CSS的編寫方法

CSS文件是純文本格式文件，在編寫CSS時，常用的編寫方法有兩種：一種是使用簡單純文本編輯工具，如記事本；另一種是使用專業的CSS編輯工具，如Dreamweaver。

使用記事本編寫CSS

使用記事本編寫CSS，首先打開記事本，然后輸入相應CSS代碼。具體步驟如下。

第一步：打開記事本，輸入HTML網頁代碼。

輸入HTML網頁代碼

第二步：添加CSS代碼。

第三步：運行網頁文件。

使用Dreamweaver編寫CSS

Dreamweaver的CSS編輯器具有提示和自動創建CSS功能，深受開發人員喜愛。使用Dreamweaver創建CSS

理解CSS選擇器

選擇器是CSS中很重要的概念，所有HTML中的標簽都是通過不同的CSS選擇器進行控制的。用戶只需要通過選擇器對不同的HTML標簽進行控制，賦予各種樣式聲明，即可實現各種效果。

將自己進大廠前花5w買的內部python培訓課程，整整400集，現在拿出來分享給大家，手把手教學，輕松就業不是夢，_嗶哩嗶哩_bilibili

eb開發是一個很依賴經驗的領域，然而這對初學者很不友好。

知識一旦脫離了應用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學習效率的關鍵。

下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！

1 HTML是骨架

很難想象一個人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網”到底是在做什么？

獲取信息。

重點在“信息”，一種看不見摸不著卻真實存在的東西。無論“1 + 1=2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內容——信息。

所以，在CSS和JavaScript出現之前，HTML就出現了。這是必然的，因為如果連最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。

除滿足承載核心信息的需求外，HTML還解決了一個重要的問題——將信息結構化。

試想有這樣一篇文章：

背影

我說道：“爸爸，你走吧?！彼囃饪戳丝?，說：“我買幾個橘子去。你就在此地，不要走動?！蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

評論

王花花 大概，天底下的父親，老去的樣子都有些共同的特質吧

李拴蛋 我們都不愿意承認他老了

劉備備 想吃橘子...

此時上面的信息基本沒有結構，只能通過斷行或縮進盡可能讓內容更易讀，編輯時的狀態就是其最終的顯示效果。

HTML就派上了用場，見下方的代碼：

代碼

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧?！彼囃饪戳丝?，說：“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<divclass="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

一頭霧水沒關系，后面我們會細說每一個部分?？傊@段內容給人感覺反而更繁瑣。但繁瑣是代價，重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀（甚至是交互）。

以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果：

效果

這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯，即便是這樣也比純文字狀態易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用，與HTML沒有關系。而重點就在這里，這意味著我們可以基于這個結構設計自己的頁面效果，見下方的示例。

代碼

<style>

body { font-family: 'Microsoft YaHei', sans-serif; }

#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

#comment-list .title {

color: #777; font-size: 1.1rem; padding-bottom: 5px;

border-bottom: 1px solid #ccc;

}

</style>

<artcle>

<h1>背影</h1>

<p>

我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個橘子去。你就在此地，不要走動?！蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。

</p>

</artcle>

<section id="comment-list">

<div class="title">評論</div>

<div class="comment">

<strong class="username">王花花</strong>

<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質吧</span>

</div>

<div class="comment">

<strong class="username">李拴蛋</strong>

<span class="content">我們都不愿意承認他老了</span>

</div>

<div class="comment">

<strong class="username">劉備備</strong>

<span class="content">想吃橘子...</span>

</div>

</section>

效果

這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化，進而讓用戶體驗有所差異（或差距）。“千變萬化”因CSS靈活、強大，“輕而易舉”因HTML簡潔、有序。結構的力量！

CSS是皮膚

一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后，就會想方設法改進瀏覽的體驗。比如，讓自己的博客以多欄顯示，以便在視覺上區分不同板塊；修改字體顏色，以便強調一些重要信息等。

起初的做法是——準備幾種特殊的標簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態（以下代碼均不需要看懂）：

代碼

<h1>標題</h1>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構下。

如果想讓標題居中，則需要給其添加元素<center>，見下方的示例。

代碼

<center>

<h1>標題</h1>

</center>

<p>

從前有座山，山里有個廟，廟里...

</p>

效果

此時的頁面結構如下。

居中標題的目的確實達到了，但是有一個很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行，但如果是復雜的頁面，這種做法的工作量就是噩夢，因為每個地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差，很多時候為了一種樣式要修改很多不必要的結構，枯燥、重復、削足適履的工作太多，基本上寫一次就再也不想改了。

這個問題亟待解決，而且解決方案還要兼容現有規則。現有規則是什么？HTML的語法及結構。不過既然HTML已經有結構了，為什么不好好利用呢？

以前面示例中的文章頁面為例，如果我們想更改標題，是否可以先統一選中所有標題，然后說明想要什么樣式規則呢？就像下面這樣：

所有h1 元素聽著

對齊方式 居中。

字體顏色 黑色。

如果想將所有段落字體放大，則像下面這樣：

所有p 元素聽著

字體大小 150%。

這種方式的確很高效！同時這個規則與HTML語法無關，相當于另一種語言。這樣結構和樣式就不會互相影響，結構是結構，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護。這就是CSS，只不過其語法更簡潔。

下面以修改標題對齊方式為例：

h1 { /* 所有h1 元素聽著 */

text-align: center; /* 對齊方式 居中 */

}

通過批量選擇和處理，極大地提高了開發效率，降低了維護成本，四兩撥千斤。

（完）

圖書推薦

《HTML 5與CSS 3核心技法（全彩）》

表嚴肅 著

本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架，同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

想從事前端開發的，可將本書作為學習的起點。正從事前端開發的，可將本書作為速查的手冊。

HTML從哪入手？

自學的話，首先要理解html的作用。html，hypertext markup language，超文本標記語言，用來展示網頁中的內容。同時 HTML 也是我們學習前端開發的基礎。隨著 web 前端技術的飛速發展，HTML 和 CSS 也成為了編程者的必備技能。而要想做一個網頁光會這一門語言是不夠的，還需要自學css，JavaScript。其中html和css較JavaScript容易。

可以這樣理解，HTML，是一個文件類型，可以被瀏覽器解析。如果不使用瀏覽器打開，我們看到的將是一行行代碼，在瀏覽器中打開以后呢，就會出現一些靜態效果了。下面介紹一下初步的一些HTML語法知識。

HTML 標簽非常注重語義化，很多標簽都是通俗易懂的，大大降低了我們學習的難度。這套 HTML 教程更是為了避免初學者走太多的彎路，指出了許多其它 HTML 教程中沒有提到的學習誤區，并且給初學者提供了一個具體的學習思路，除了注重 HTML 知識點的講解，更加注重 web 前端開發技巧和思維。幫助大家快速入門，其中包含大量的實踐經驗，將知識系統化，濃縮為精華，用通俗易懂的語言直指網頁設計初學者的痛點。

學海無涯，苦做舟，學習如同修行，只有潛心才可以領悟真諦。HTML 中的每一個小知識點都可以讓頁面發生不同的變化，現在就讓我們行動起來，跟著 HTML 教程的步伐，讓我們一起走進 HTML 的世界。

HTML語言特點

超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下：

● 簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。

● 可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。

● 平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。

● 通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

什么時候用HTML

B（Browser）/S（Server）架構方向，也是我們以后主攻方向

為什么要學HTML

我們以后主要為企業內部提供解決方案，例如：企業內部的辦公系統、供應鏈管理系統、客戶關系管理系統等，而這些系統通常對界面的表現要求較低，對業務處理和數據處理要求較高，并且要求降低升級維護的成本，B/S架構可以更好的被企業接受，所以我們以后主要的方向是開發基于B/S架構的應用，B/S架構的開發通常又被叫做Web開發，Web開發通常包括Browser瀏覽器端的開發以及Server服務器端的開發。

雖然我們是學習Java后臺服務器編程，但是前端頁面編寫要了解，能看懂，簡單的頁面效果可以實現即可；

怎么開發HTML

創建一個以 .html或 .htm 結尾的文件，用文本編輯器打開就可以開發

怎么運行HTML

用瀏覽器打開以.html或.htm的文件就可以自上而下解析執行，不需要編譯

DTD：Document Type Definition

● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● DTD文件的作用

● 幫助你編寫合法的代碼

● 它讓瀏覽器正確地顯示器代碼，或者說DTD只是寫給檢查器看的

HTML與W3C（World Wide Web:www）

HTML規范是由w3c負責制定的，W3C是世界萬維網聯盟（World Wide Web:www）

安裝瀏覽器

FireFox、Google、IE

HTML元素

HTML標簽

<>表示開始標記

</>表示結束標記

<html>開始標簽

</html>結束標簽

html為元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。

HTML 元素語法

● HTML 元素以開始標簽起始

● HTML 元素以結束標簽終止

● 元素的內容是開始標簽與結束標簽之間的內容

● 某些 HTML 元素具有空內容（empty content）

● 空元素在開始標簽中進行關閉（以開始標簽的結束而結束）

● 大多數 HTML 元素可擁有屬性

嵌套 HTML 元素

大多數 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文檔由嵌套的 HTML 元素構成。

HTML 文檔實例

上面的例子包含三個 HTML 元素。

HTML 實例解釋

● <p> 元素：

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素擁有一個開始標簽 <p>，以及一個結束標簽 </p>。

元素內容是：This is my first paragraph。

● <body> 元素：

<body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標簽 <body>，以及一個結束標簽 </body>。

元素內容是另一個 HTML 元素（p 元素）。

<html> 元素：

這個元素擁有一個開始標簽 <html>，以及一個結束標簽 </html>

元素內容是另一個 HTML 元素（body 元素）。

不要忘記結束標簽

即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：

上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。

注釋：未來的 HTML 版本不允許省略結束標簽。

空元素

有一些元素必須使用單個標簽表示。這些被稱為空元素。

一個這樣的元素是 hr 。

hr 是一個分組元素，用于表示一個段落級別的內容。

您可以使用以下兩種方式之一使用void元素 - 第一種方法是僅指定開始標記，如以下代碼所示。

瀏覽器知道hr是一個void元素，因此不希望看到結束標記。

您可以使元素與空元素一致，如下面的代碼所示。

HTML注釋

注釋是關于HTML元素的有用信息。注釋使HTML文檔更易讀和可理解。

HTML中的注釋以標簽<！-- 開頭，并以 --> 結尾。

瀏覽器將忽略您在這些標記中放置的任何內容。

以下代碼具有HTML注釋。

HTML標簽

超文本標記語言（外國語簡稱：HTML）標記標簽通常被稱為HTML標簽，HTML標簽是HTML語言中最基本的單位，HTML標簽是HTML（標準通用標記語言下的一個應用）最重要的組成部分。

HTML標簽的大小寫無關的，例如“主體”<body>跟<BODY>表示的意思是一樣的，推薦使用小寫。

實例

標簽定義及使用說明

<html> 標簽告知瀏覽器這是一個 HTML 文檔。

<html> 標簽是 HTML 文檔中最外層的元素。

<html> 標簽是所有其他 HTML 元素（除了 <!DOCTYPE> 標簽）的容器。

瀏覽器支持

所有瀏覽器都支持 <html> 標簽。

段落標簽：<p></p>

定義：可以把 HTML 文檔分割為若干段落

標題字：<h1></h1>至<h6></h6>

標題是通過 <h1> - <h6> 等標簽進行定義的

<h1>定義最大標簽，<h6>定義最小標簽

換行：<br>

定義：<br> 可插入一個簡單的換行符

<br> 標簽是空標簽，它沒有結束標簽

注釋：<!-- 這是HTML注釋 -->

水平線：<hr/>

預留格式<pre>內容</pre>

定義：頁面中輸入什么樣式就顯示什么樣式

實例：< >

搭配視頻效果更佳~~

https://www.ixigua.com/690746767030039398