CSS基本概念與結構

Download Report

Transcript CSS基本概念與結構 

CH.1
CSS基本概念與結構、版本與套用樣式
CH.1
CSS基本概念與結構、版本與套用樣式
目錄
網頁概念：html、CSS、javaScript
網頁概念：網頁的結構化
網頁概念：CSS的價值
css&html頁面連結方式(行內套用 、嵌入套用 、外部連接套用 、匯入套用)
CSS樣式影響html顯示的強弱排序
CSS內外部樣式的使用時機
網頁概念：html、CSS、javaScript
HTML
CSS
文字內容
<h1> <h2> <h3>
<p>
排版定位
h1{} h2{} h3{}
p{}
javaScript
版型動畫
網頁概念：網頁的結構化
搜尋引擎最佳化（Search Engine Optimization，簡稱SEO）
內容結構
<h1> <h2> <h3> 有加權分數
但是經過多年的搜尋引擎演算法的調整，現在較重
要的影響標籤為：
• <title>
• <meta>
• <h1>
• <img>中的 alt屬性
網頁文字與內容結構會影響搜尋排名
網頁概念：CSS的價值
內容的易讀性
HTML與CSS分離
使用的方便性
調整CSS樣式值，就可以改變所指定的外觀
@import url(“CSS1.css");
@import url("CSS2.css");
@import url("CSS3.css");
<link rel=stylesheet href=“layout.css“ type="text/css" >
HTML.1
HTML.1
HTML.2
HTML.2
HTML.3
HTML.4
CSS1
@import
Layout.css
CSS2
HTML.3
HTML.4
CSS3
css&html頁面連結方式
行內套用(Inline stylesheet)
在 HTML 文件內直接宣告樣式
<h1 style= color: rgb(255, 102, 102); font-size:16;'>This is font size 16.</ h1 >
嵌入套用(Embedded stylesheet)
<head>
<style type="text/css">
h1 { color: #FF6666; font-size:16;}
</style>
</head>
<body>
<div> 背景顏色是紅色 </div>
</body>
只有此h1標籤中的內容受影響
嵌入於 HTML 文件中(在 <head> 內)
只有此頁面中的h1格式受影響
css&html頁面連結方式
外部套用(Linked stylesheet)
在 HTML 文件內直接宣告樣式
在 HTML 文件的 <header> .. </header> 之中
<link rel=stylesheet href=“layout.css“ type="text/css" >
連結的形式
樣式表
所在位置
連結css檔案
樣式型態
本文格式：串接排版樣式
有串接css的頁面都會受到影響
可接多個外部套用，後加入的效果會較前加入的效果強
匯入套用(Imported stylesheet)
使用時機：NO.1
@import url(http://www.test.com/ reset.css);
@import url("reset.css");
在CSS加入多個 CSS 樣式(加入的 CSS順位較弱)
css&html頁面連結方式
匯入套用(Imported stylesheet)
使用時機：NO.2
外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。
語法
<STYLE TYPE="text/css">
<!-@import url(http://www.mysite.com/style.css);
-->
</STYLE>
@import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。
不過，現在已經沒有這個必要。
現在用 @import 的目的，最常是要加入多個 CSS 樣式。
當多個 CSS 樣式被 @import 的方式加入，
而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位
CSS樣式影響html顯示的強弱排序
串接(cascade)
串接是指當不同樣式表中對相同屬性有不同定義時，
應該要用哪一個樣式表中的定義的規則。
最基本的規則是，越接近 HTML 本身的樣式越有優先權。
最高優先權到最低優先權的排名如下：
• 內行套用樣式表 (Inline stylesheet)
• 嵌入套用樣式表 (Embedded stylesheet)
• 外部連結套用樣式表 (Linked stylesheet)
• 匯入套用樣式表 (Imported stylesheet)
• 瀏覽器預設樣式表 (Browser's own stylesheet)
• 若匯入套用樣式表用於外部CSS再套用其他CSS時，只會比瀏覽器本身的樣式表優先
CSS內外部樣式的使用時機
使用外部樣式的優勢
• 不同的HTML頁面可重複使用相同的CSS樣式，樣式同時更改，方便維護
• 檔案較小，原始碼簡潔
使用內部樣式的使用
• 指定的網頁頁面中需要一些額外的規則(其他頁面沒有的)
• 若頁面的CSS樣式為單獨規則，無長期維護之需求時(如單一活動頁)
• 會影響到原本CSS樣式顯示時(如電子報)
本章重點練習
css&html頁面連結方式練習
行內套用 、嵌入套用 、外部連接套用 、匯入套用，
並比較彼此的強弱性