CSS學習筆記（一） --CSS基礎

本人大四渣前端一枚，目前還在求職狀態，雖然小公司的offer也拿到了不少，但是次次在大公司面試時碰壁，並且均被指出基礎不是特別紮實，因此最近在自我反省需要在重新將基礎打紮實，希望自己在學習前端的過程中可以在CSDN上分享一些學習的筆記和心得，歡迎廣大前端大佬前來指點，有錯誤和不足的地方指教！！！

CSS的出現

在早期的HTML中，過多的使用標籤或者屬性來表示文件中元素的樣式，如 <font size="+3" color="red">等，帶來了種種問題：

• HTML程式碼龐大，結構性降低。
• 樣式維護困難，不存在公共的樣式。

CSS 的樣式表能大大減少web人員的工作量,可以將CSS樣式表集中在頁面的某處,便於維護.還能將同一樣式表運用於多個頁面上。

• 層疊：根據層疊的優先順序，對於相同樣式優先順序高的會覆蓋優先順序低的，以此為基礎可以建立相當複雜的樣式表，以及瀏覽器的自帶樣式*（例如老人瀏覽器）*。
• 縮減檔案大小：將HTML中表示樣式的程式碼以樣式表的形式分離出來，僅將HTML作為網頁骨架，而單獨再另行下載CSS樣式表，可大大減少下載時間。
• 為未來做準備：W3C已經開始去除樣式元素，如 font、s、strike、center等。
• 除此之外，很重要的一點，在使用CSS製作炫酷吊炸天的頁面的時候務必記得，頁面應當包含有某些結構含義的資訊，才能讓頁面在一些極端情況下有更好的靈活度（定製瀏覽器、搜尋引擎等）。

CSS基本術語

• 元素：HTML中的標籤
• 替換元素和非替換元素：
  • 替換元素： 元素的內容本身並非文件的內容，如<img>、<input>
  • 非替換元素： 元素內容由文件內容直接指定，如<div>、<span>
• 塊級元素和行內元素（分別對應 display的block和inline屬性）：
  • 塊級元素：粗略的來說，塊級元素的兩旁自動新增的換行符，如<div>、<p>。
  • 行內元素：行內元素不能定義寬高、不會填充其父容器的內容區。

在文件中引入CSS

• link標記：<link rel="stylesheet" type="text/css" href="./sheet1.css" media="all" />，link必須放置在head中，使瀏覽器能更早的載入外部樣式表並加快renderTree的生成，其中
  • rel：當前文件和被連線文件之間的關係。
  • type：規定被連結文件的MIME型別。
  • href：規定被連結文件的地址。
  • media：代表該樣式表所要應用於哪些媒體。
• style元素：<style type="text/css">...</style>，這種匯入樣式的方法稱為文件樣式表。
• @import：

<style>
	 @import './index.css' screen; 
</style>

@import出現在<style>標籤中，並且只能出現在style的頂部，並且可以指定對應的載入的媒體型別。同時@import可以載入外部的CSS樣式表。

CSS註釋

<style>
	/* this is a  comment */
	...
</style>

內斂樣式

	<div style="font-size:20px;color:white;"></div>

但是不推薦這種寫法