\

美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

熱門課程

CSS 基礎 - 1. 如何在HTML 檔案中引入「化妝師」 CSS ?

  • 時間:2019-01-15
  • 發布:達內教育台灣
  • 來源:HTML5課程

我們可以把 CSS 想像成是 HTML 標記的「化妝師」,透過 CSS 格式的設定,可讓網頁的排版更美觀。新版的 CSS 加入了動態的功能,透過適當的應用,還可在網頁上做出動態的效果。

在 HTML 檔案中,除非你做的是整體網頁的設計,不然每一個 CSS 片段都是依附在一個標記、id 或是 class 之下。

標準的 CSS 語法如下:
tag1,tag2,..., tagn {
attribute 1: value;
attribute 2: value;

attribute n:value;
}

語法解析:
tag1,tag2,..., tagn:最前方以要設定的標記名稱 ( 如本例為「tag1」) 為開始。如有超過一個以上的標記,就使用逗號隔開。
{ }:以大括號來包含該標記的所有的設定
attribute 1: value;:"attribute "為要設定的屬性名稱,"value"為屬性值,屬性名稱與值以冒號來做隔開。如有超過一個以上的屬性設定,就使用分號隔開。

以上例子為所有的標記名稱 (tag1,tag2,..., tagn) 均設定同樣的屬性,但這些標記各自獨立,無依屬關係。如有依屬關係則為以下所示:

tag1 tag2 {
attribute 1: value;
attribute 2: value;

attribute n:value;
}

此例中,tag1 與 tag2 中間無任何的逗號,而 tag2 在 tag1 的後方,意思為「tag2 是 tag1 裡面的標記」,也就是我們要設定的屬性值是「tag1 裡面的 tag2 所屬的內容」,而不是把 tag1 和 tag2 設定成同一組屬性值。

至於如何把所設定的 CSS 值在網站中生效? 有兩種方法:

 

1. 以外部的檔案存檔

先把上述的 css 內容以「.css」的檔案名稱存在網站主機上。此例為「style.css」,然後在其對應的 HTML 檔案中使用「<link>」標記引入,如下所示:
<link rel=stylesheet type=“text/css” href=“style.css”>
此種方式一定要確定檔案「style.css」可以在網站中存取才行。這是適合於要設定許多 CSS 樣式的時候使用。

 

2. 使用<style>標記,直接把 css 代碼放在 HTML 檔案的最前面:

相較於第一種  css 是以外部的檔案存檔,此種做法是直接在 HTML 檔定義 css 樣式,通常都是把 css 代碼放在檔案的最前面,如下表示:
<style type=“text/css”>
h1, h2, h3,...h6, p {
font family: 微軟正黑體;
}
</style>

許多筆者常用此方法來定義網頁中的中文字形,把 h1-h6 以及 p 的字型都設定為微軟正黑體。只要瀏覽器有此自行就會採用。

 


3. HTML 行內設定

第三種方法,則是在 HTML 的同一行中設定專門屬於單一特定 HTML 標記的格式設定,如下所示:
<p style=“font-family:微軟正黑體; font-size:12pt; line-height:120%”></p>
這例子只有針對此格式的設定 (此例為 <p>) 有效,出了 <p> 就無效了,但因為它是最內層,所以擁有比第一種與第二種有更高優先順序的設定;也就是說,如果這三種一起設定的話,則以最接近 (就是行內設定) 的值為準。


以上這三種方式可以自由搭配使用,如果對於同一種屬性,有不同的值的設定的話,則以最後一格設定的為準。若不確定最後一個落在甚麼地方,則可以檢視原始碼。



上一篇:網路行銷人員也該上的HTML5教學2-認識HTML表格標籤
下一篇:網路行銷人員也該上的HTML5教學1-認識HTML基礎標籤與免費網頁編輯器
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省