WEB標準佈局（DIV+CSS）學習筆記（一）--基礎知識

時間 2019-11-13

標籤 web 標準佈局 div+css div css 學習筆記基礎知識欄目 HTML 简体版

原文原文鏈接

首先，CSS樣式有4種使用方式：css

一、外部樣式html

二、內部樣式程序員

三、行內樣式瀏覽器

四、導入樣式工具

外部樣式：把CSS樣式寫入到一個單獨的文件中，每一個HTML頁面連接該文件，是使用最爲普遍的方式，很好的體現了表達（CSS）與結構（HTML）的分離思想。佈局

<!-- 在head標籤內增長以下代碼，表明連接外部樣式 -->
<head>
  <link href="css/mystyle.css" rel="stylesheet" type="text/css" />
</head>

內部樣式：只在本HTML頁面內有效，不能做用於其餘頁面。在本頁面內，也可以實現表達（CSS）與結構（HTML）的分離。網站

<!-- 在head標籤內增長以下代碼，表明建立內部樣式 -->
<head>
  <style type="text/css">
    h1 {color:#000000;}
  </style>
</head>

行內樣式：在某個html標籤內，經過定義樣式，使該標籤的表達發生改變。這種方式並很差，由於表達（CSS）與結構（HTML）牢牢地耦合在一塊兒。但因爲使用DW等網頁可視化編輯工具，能夠很是方便的「所見即所得」，這種方式也被不少人所使用，但要知道，這是不對的，儘量避免。
url

<!-- 在p標籤內部，直接定義樣式 -->
<p style="font-size:18px;">內部樣式</p>

導入樣式：爲了樣式的重用，減小代碼冗餘，容許在某個css樣式文件中，導入另一個css樣式文件。好比global_style.css定義了全局最基礎的樣式，而index_style.css定義了網站首頁的樣式，而index_style.css中爲了使用global_style.css中的樣式，能夠在index_style.css中這樣寫spa

<!-- 導入globa_style.css中的樣式 -->
@import url("/css/global_style.css");

其次，說說CSS的優先級：
設計

一、id的優先級高於class

二、後面定義的的樣式覆蓋前面的

三、明確指定的樣式高於繼承的樣式

四、行內樣式高於內部或外部樣式

雖然有這樣的規定，但在實際使用中，儘量提早把樣式明明白白的規劃好，儘量不去重名，對於代碼的理解也有好處，不要沒事考驗瀏覽器和程序員的智商。

而後，很是很是重要的CSS的盒子模型：

這是WEB標準（CSS+DIV）佈局的基礎，也是核心概念。原來的網頁佈局更多靠大小不一的table相互組合嵌套，但這樣存在一些問題，好比佈局代碼很是複雜，樣式和結構不獨立，很難維護；不一樣瀏覽器對這種佈局的解釋，在兼容性也可能存在一些問題。採用WEB標準佈局後，網頁由大小不一的DIV相互組合嵌套，每一個DIV都很獨立，樣式和結構可以很好的獨立開，兼容性也有保障。

先看下面的圖，摘抄一段很是好的比喻（原文出自「標準之路」的《十天學會DIV+CSS》，很是感謝）：咱們能夠把它想像成現實中上方開口的盒子，而後從正上往下俯視，邊框至關於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，至關於爲防震而在盒子內填充的泡沫，邊界呢至關於在這個盒子周圍要留出必定的空間，方便取出。是否是這樣就很容易理解盒模型了。