HTML+CSS網頁設計與佈局從入門到精通摘要

阿新 • • 發佈：2019-01-26

HTML網頁文件結構：

1.首先應該明確一個概念，HTML不是一種程式語言，而是一種描述性的標記語言，用於描述超文字中內容的顯示方式。

2.<html>標記：<html>標記放在HTML檔案的開頭，並沒有什麼實質性的功能，只是一個形式上的標記，但還是希望讀者形成一個良好的編寫習慣，在HTML檔案開頭使用<html>標記來做一個形式上的開始。

3.<head>標記：<head>也稱為頭標記，一般放在<html>標記裡，其作用是放置關於此HTML檔案的資訊，如提供索引、定義CSS樣式等。

4.<title>標記：<title>稱為標題標記，包含在<head>標記內，它的作用是設定網頁標題，可以看見在瀏覽器左上方的標題欄中顯示這個標題，此外，在Windows工作列中顯示的也是這個標題

。

5.<body>標記：<body>又稱為主體標記，網頁所要顯示的內容都放在這個標記內，它是HTML檔案的重點所在。它並不僅僅是一個形式上的標記，它本身也可以控制網頁的背景顏色或背景影象。

6.<hn></hn>(n表示從1到6的數字):這個標記用來設定標題文字以及加粗方式顯示在網頁中。它共有6個層次，也就是可以設定6種大小樣式。

7.<b></b>：這個標記的作用是使其中的文字以加粗的形式顯示。

8.<i></i>：這個標記的作用是使其中的文字以傾斜的形式顯示。

9.<center></center>：這個標記可以將其中的內容顯示在視窗正中間。

10.<blockquote></blockquote>：這個標記可以使其中的內容縮排。

11.<font></font>：color屬性是顏色，size屬性控制文字大小，face屬性用於設定文字的字型(宋體，楷體等)。如果顯示這個頁面的瀏覽器所在的計算機中沒有安裝相應的字型，瀏覽器仍然按照預設的字型顯示。

12.<sup></sup>：為上標標記，用於將數字縮小後顯示於上方。

13.<sub></sub>：為下標標記，用於將數字縮小後顯示於下方。

14.字元“÷” “±”

“&permil;”

“↔”

雙向箭頭 “⇔”

15.GIF圖片和JPG圖片的區別：

16.<img>標記的作用就是網頁中插入圖片，其中屬性src是該標記的必要屬性。width屬性控制圖片的寬度，height屬性控制圖片的高度。alt屬性為影象設定替換文字，當影象顯示不出來的時候就顯示這段文字。

注意：如果高度和寬度屬性不設定的話，圖片會以預設高度和寬度顯示，但是如果指明瞭預設高度和寬度，這樣會使網頁顯示速度更快。

17.錨：<a href="#目標名稱">連結文字</a>意思是指明王網頁所要跳到哪個目標名稱的位置上。

<a name="目標名稱"></a>意思是設定相應的跳轉目標位置。例：

<a href="#one">第一段</a>
<a href="#two">第一段</a>
<a href="#three">第一段</a>
<h3><a name="one">11111111</a></h3>
<h3><a name="two"></a>22222222</h3>
<h3><a name="three"></a>33333333</h3>

18.當點選某個超連結後出現電子郵件的客戶端軟體：<a href="mailto:[email protected]"></a>

19.在預設情況下，當點選連結的時候，目標頁面還是在同一個視窗中顯示。如果要在新視窗顯示，就需要在<a>標籤中設定"target屬性"。

將"target"屬性設定為"_blank"，就會自動開啟一個新視窗，顯示目標頁面。

將"target"屬性設定為"_self"，相當於不設定target屬性，即在原視窗中顯示連結的目標頁面。

將"target"屬性設定為"_top"，表示在頂級框架，也就是在瀏覽器視窗中顯示連結的目標頁面。

將"target"屬性設定為"_partent"，表示在"上一級"框架中顯示連結的目標頁面。

20.熱點區域：

21.<frameset></frameset>和<frame></frame>：

<frameset>標籤是將整個網頁分割成幾塊，然後每塊都可以獨立地顯示一個網頁。需要注意的是，<frameset></frameset>標記是與<body> </body>同級的。因此，不要將<frameset>標籤包含在<body>標記中，否則<frameset>標記將無法使用。視窗框架的分割方式有兩種，一種是上下分割，另一種是左右分割。cols屬性是左右分割，rows屬性是上下分割。

例如：這個是巢狀分割

<frameset cols="30%,*">
	<frame></frame>
  		<frameset rows="40%,*">
  		<frame></frame>
	<frame></frame>
	</frameset>
</frameset>

<frame>標籤可以用於建立“嵌入式框架”，也稱為“浮動框架”，可以自由控制視窗的大小，可以配合表格隨意地在網頁中的任何位置插入視窗。實際上就是在視窗中再建立一個視窗。使用<iframe>不需要先建立框架集，直接插入<iframe>標記即可。

例：

<iframe width="800" height="200" src="http://www.baidu.com"></iframe>

CSS:

基本選擇器有標記選擇器、類別選擇器和ID選擇器3種。

1.標記選擇器：

h1{
color:#33FF00;
font-size:14px;
}

h1:表示所有<h1>標籤，花括號裡的是屬性：值

2.類級別選擇器：類級別選擇器的出現，是為了解決例如不想所有某個標籤的樣式都一樣的情況。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文件</title>
<style>
	.red{
		color:#FF0000;
		font-size:36px;
	}
</style>
</head>

<body>
	<p class="red">class選擇器1</p>
</body>

類選擇器的格式： .類名{屬性:值;}

在HTML的標記中，還可以同時給一個標記運用多個class類別選擇器，從而將兩個類別的樣式風格同時運用到一個標記中。

<style>
	.red{
		color:#FF0000;
		font-size:50px;
	}
	.green{
		font-size:36px;
	}
</style>
</head>

<body>
	<p class="red">class選擇器1</p>
	<p class="green">class選擇器2</p>
	<p class="green red">33333333333333</p>
	<p class="green red">34444444</p>
</body>

3.ID選擇器：ID選擇器只能在HTML頁面中使用一次。

<style>
	#red{
		color:#FFFF00;
	}
</style>
</head>

<body>
	<p id="red">class選擇器1</p>
	<p id="red">class選擇器2</p>
</body>
</html>

上面那個例子兩個P標籤都顯示了CSS的方案，換句話話說在很多瀏覽器下，ID選擇器也可以用於多個標記。但這裡需要指出的是，將ID選擇器用於多個標記是錯誤的，因為標記定義的ID不只是CSS可以呼叫，JavaScript等其他指令碼語言同樣可以呼叫。如果一個HTML中有兩個相同ID的標記，那麼將會導致JavaScript在查詢id時出錯，例如函式getElementById()。所以我們在編寫CSS程式碼時，應該養成良好的編寫習慣，一個ID最多隻能賦予一個HTML標記。另外，id="red green "這種是完全錯誤的語法。

注意：對於樣式的定義行內式>嵌入式>外部樣式 <p color="red">行內式嵌入式是指在HTML頁面裡寫的CSS語句，即在<style>裡的語句外部樣式分為匯入式(import)和連結式(<link>) 這兩種樣式在一起的話，誰在後面誰起效。

CSS程式碼的註釋：在CSS中，註釋的語句都位於"/*"與"*/"之間，其內容可以是單行也可以是多行。另外，在<style>與</style>之間有時會見到""將所有的CSS程式碼包含於其中，這是為了避免老式瀏覽器不支援CSS、將CSS程式碼直接顯示在瀏覽器上而設定的HTML註釋。

4.複合選擇器：兩個或多個基本選擇器，通過不同方式連線而成的選擇器。

（1）.交集選擇器：“交集”複合選擇器由兩個選擇器直接連線構成，其結果是選中二者各自元素範圍的交集。其中第一個必須是標記選擇器，第二個必須是類別選擇器或ID選擇器。這兩個選擇器之間不能有空格，必須連續書寫。

例如：

h3.class{屬性:值} 表示為h3標籤的類名為class的標籤

<style>
	p{
		color:red;
	}
	p.xxc{
		color:green;
	}
	.xxc{
		color:yellow;
	}
</style>
</head>

<body>
	<p>第一段</p>     <!-- 紅色 -->
	<h3>第二段</h3>  <!-- 無樣色 -->
	<p class="xxc">第三段</p>   <!-- 綠色 -->
	<h3 class="xxc">第四段</h3>   <!-- 黃色 -->
</body>

從上面這個例子可以看出第三個css樣式的定義並不會影響到第二個css樣式的定義。

（2）.並集選擇器：同時選中各個基本選擇器所選擇的範圍。任何形式的選擇器（包括標記選擇器、class類別選擇器、ID選擇器等）都可以作為並集選擇器的一部分。並集選擇器是多個選擇器通過逗號連線而成的。

例如：

<style>
	h1,h2,h3,p{
		color:#FF00CC;
	}
	p.xxc,.xxc,#zzz{
		font-size:36px;
		color:#FFFF33;
	}
</style>
</head>

<body>
	<h1>11111111111111111</h1>
	<h2 class="xxc">22222222222222222</h2>
	<h3>33333333333333333</h3>
	<p>4444444444444444</p>
	<p class="xxc">5555555555555</p>
	<p id="zzz">6666666666666666</p>
</body>

（3）.後代選擇器：後代選擇器的寫法就是把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔。當標記發生巢狀時，內層的標記就為外層標記的後代。

例如：

<p>這是最外層的文字，<span>這是中間層的文字，<b>這是最內層的文字，</b></span></p>

最外層是<p>標記，裡面嵌套了<span>標記，<span>標記中又嵌套了<b>標記，則稱<span>是<p>的子元素，<b>是<span>的子元素。

<style>
	p span{
		color:red;
	}
	span{
		color:blue;
	}
</style>
</head>

<body>
	<p>巢狀使<span>用CSS(紅色)</span>標記的方法</p>
	巢狀之外的<span>標記（藍色）</span>不生效
</body>

效果如下

從上面可以看出在使用巢狀標記宣告CSS的時候，即使後面聲明瞭巢狀內的標記的CSS樣式也不會覆蓋巢狀標記宣告的CSS樣式

後代選擇器的使用非常廣泛，不僅標記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行巢狀。如：

<style>
	td.out .inside strong{
		color:blue;
	}
</style>
</head>

<body>
	<td class="out">
		<p class="inside">
			其他內容<strong>CSS控制的部分</strong>其他內容
		</p>
</body>

效果如下

經驗：選擇器的巢狀在CSS的編寫中可以大大減少對class和id的宣告。因此在構建頁面HTML框架時通常只給外層標記（父標記）定義class或者id，內層標記（子標記）能通過巢狀表示的則利用巢狀的方式，而不需要再定義新的class或專用id。只有當子標記無法利用此規則時，才單獨進行宣告。例如一個<ul>標記中包含多個<li>標記，而需要對其中某個<li>單獨設定CSS樣式時才賦給該<li>一個單獨id或者類別，而其他<li>同樣採用"ul li{...}"的巢狀方式來設定。

注意：後代選擇器產生的影響不僅限於元素的“直接後代”，而且會影響到它的“各級後代”。

（4）子元素選擇器：如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

例如：

<style>		
 	h1 strong{
        color:blue;
    }
</style>
</head>

<body>
	<h1>This is <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

<style>		
 	h1>strong{
        color:blue;
    }
</style>
</head>

<body>
	<h1>This is <strong>very</strong> important.</h1>
	<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

CSS的繼承特性：

CSS繼承指的是子標記會繼承父標記的所有樣式風格，並可以在父標記樣式風格的基礎上再加以修改，產生新的樣式，而子標記的樣式風格完全不會影響父標記。

例如：

<style type="text/css">
  	h1{
  		color: blue;
  		text-decoration: underline;
  	}
  	em{
  		color:red;
  	}
</style>
</head>
  
<body>
	<h1>哈哈<em>呵呵</em>嘎嘎</h1>
</body>

可以看到其子標記em也顯示出下劃線，說明對父標記的設定也對子標記產生效果；而em標記內的文字顯示為紅色，h1標題中其他文字仍為藍色，說明子標記的設定不會對其父標記產生影響。

<style type="text/css">
  	p{
  		color:green;
  	}
  	.red{
  		color:red;
  	}
  	.purple{
  		color:purple;
  	}
  	#line3{
  		color:blue;
  	}
</style>
</head>
  
<body>
	<p>這是第1行文字</p>  <!-- 綠色 -->
	<p class="red">這是第2行文字</p> <!-- 紅色 -->
	<p id="line3" class="red">這是第3行文字</p>  <!-- 藍色 -->
	<p style="color: orange;" id="line3">這是第4行文字</p> <!-- 橙色 -->
	<p class="purple red">這是第5行文字</p> <!-- 粉色  原因是兩個選擇器級別相同 ，以前者為準-->
</body>

從上面這個例子可以看出優先順序為：行內樣式 > ID樣式 > 類別樣式 > 標記樣式

CSS顏色定義：

<b>和<strong>標籤的區別：

這本書到這裡日常工作中接觸的CSS已經差不多有個瞭解，餘下的是一些CSS深入的排版知識，抽空再看。

HTML+CSS網頁設計與佈局從入門到精通摘要

HTML+CSS網頁設計與佈局從入門到精通摘要

《精通DIV.CSS網頁樣式與佈局》.pdf

《Altium Designer 16+14 電路設計與模擬從入門到精通》等5本書+光碟原始檔

精通CSS+DIV網頁樣式與佈局 CSS文字效果

精通CSS+DIV網頁樣式與佈局頁面背景

精通CSS DIV網頁樣式與佈局濾鏡的使用

CSS+DIV網頁樣式與佈局——文字樣式&段落（二）

【BS學習】精通CSS.DIV網頁樣式與佈局總結

《高效學習CSS佈局之道：通過244個範例掌握網頁樣式與佈局技術》陳剛.掃描版.pdf

精通CSS.DIV網頁樣式與佈局（六）——頁面和瀏覽器元素

精通CSS+DIV網頁樣式與佈局--初探CSS

精通CSS.DIV網頁樣式與佈局（八）——濾鏡的使用

簡單網頁設計與布局

DIV+CSS網頁設計規範

網頁設計與制作常見問題

網頁設計與制作第一章

網頁設計：vim使用入門

HTML CSS筆記列表與表格

交錯、反交錯與IVTC —— 從入門到放棄

《PHP動態網頁設計與製作案例教程》房愛蓮.掃描版.pdf

HTML+CSS網頁設計與佈局從入門到精通摘要

相關推薦