- top, bottom, center, left, right
- x% y%
- xpos ypos
例如:
background: url(mygirl.jpg) no-repeat left 20px;背景圖會齊左並從y位置20px之處顯示一次背景圖。
background: url(mygirl.jpg) no-repeat 30% center;則會在視窗寬30%之處上下居中顯示一次背景圖。
Monday, July 09, 2007
背景屬性--Part 2
背景的四大屬性, 位置的部分, 可以運用三種方式搭配x軸與y軸的設定:
例如:
背景圖會齊左並從y位置20px之處顯示一次背景圖。
則會在視窗寬30%之處上下居中顯示一次背景圖。
例如:
背景圖會齊左並從y位置20px之處顯示一次背景圖。
則會在視窗寬30%之處上下居中顯示一次背景圖。
外部檔案 (URL) 路徑的設定
設定背景圖或者是css外部樣式檔時, 一定會運用到url這個屬性, 通常圖檔存放的位置, 不一定會與網頁檔案相同, 在此便需指定檔案存放的路徑位置, 例如:
即影像檔放在網頁所在目錄的次目錄 mynoteimg之下, 可以不必從根目錄寫起。
或者是
URL列出完整的網址。
background: url(mynoteimg/faint.jpg) 100% top;即影像檔放在網頁所在目錄的次目錄 mynoteimg之下, 可以不必從根目錄寫起。
或者是
background: url(http://myblog/faint.jpg) no-repeat;URL列出完整的網址。
Monday, March 19, 2007
背景屬性
要設定背景，可利用CSS background properties來完成，它可控制某一元素的背景顏色 (background-color) 、 設定背景圖 (background-image)、水平或垂直地來重複背景影像 (background-repeat)、或是把影像放在頁面的某一位置(background-position)。
若嫌個別設定這些屬性很麻煩，還可以用background屬性，一次做完所有相關的設定。
例如：
則會在ID為sidebar的div中，在其右下角的位置加入單一的arrow.gif背景影像。
延伸應用:
由於arrow.gif是div內的背景，若要讓它看起來突出於內容之外，可以利用padding屬性，加大底部的padding，使圖形看起來好像是落在內容的下方。例如：
詳細屬性可見：w3schools的解說
若嫌個別設定這些屬性很麻煩，還可以用background屬性，一次做完所有相關的設定。
例如：
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat;}
則會在ID為sidebar的div中，在其右下角的位置加入單一的arrow.gif背景影像。
延伸應用:
由於arrow.gif是div內的背景，若要讓它看起來突出於內容之外，可以利用padding屬性，加大底部的padding，使圖形看起來好像是落在內容的下方。例如：
div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; background: url(arrow.gif) 100% 100% no-repeat; padding: 0 0 15px;}詳細屬性可見：w3schools的解說
Friday, March 31, 2006
萬用Selector
* 表示 "anything", 如果指定 * {color: green;}
則所有文字都會變綠色（指定了其他規則者除外）
它有一個有趣的用法，可作為子selector的相反，例如：
表示會影響任何身為p tag之孫selector的em tag內容物，p tag的子selector為何並不重要，但如果em為p的子selector則其內容物並不受影響。
則所有文字都會變綠色（指定了其他規則者除外）
它有一個有趣的用法，可作為子selector的相反，例如：
p * em {font-weight: bold;}表示會影響任何身為p tag之孫selector的em tag內容物，p tag的子selector為何並不重要，但如果em為p的子selector則其內容物並不受影響。
Tuesday, March 28, 2006
Class與ID
運用Class與ID可以針對文件的特定區域進行樣式設定
<h1 class="specailtext">This is a heading with the <span >same class</span> as the second paragraph</h>
<p>This tag has no class.</p>
<p class="specialtext">When a tag has a class attribute, we can target it <span>regardless</span> of its position in the hierachy.</p>
如果希望selector影響的範圍更局限在某一條件下, 可以將標籤名稱再結合class名稱(tag+class), 例如:
p.specialtext {color: red;}
則只有第三段的文字變成紅色。
若再加入另一個selector則可指定得更細 (tag+class+tag), 例如:
p.specialtext span {font-style: italic;}
則第三段內span標籤內的字還會變成斜體。
ID的使用放式與Class類似，只是它是以#來表示，例如：
#uniquetext {font-weight: bold;}
<p id="uniquetext">This is the special text</p>
Class與ID的差異
Class可以重複出現很多次，而一個特定的ID則只能在一個頁出現一次。
Class好比西洋棋中的士兵，而ID就像皇后。
Class與Id雖然好用，但小心不要用度使用，否則會落到如同Font tag般的下場。
<h1 class="specailtext">This is a heading with the <span >same class</span> as the second paragraph</h>
<p>This tag has no class.</p>
<p class="specialtext">When a tag has a class attribute, we can target it <span>regardless</span> of its position in the hierachy.</p>
如果希望selector影響的範圍更局限在某一條件下, 可以將標籤名稱再結合class名稱(tag+class), 例如:
p.specialtext {color: red;}
則只有第三段的文字變成紅色。
若再加入另一個selector則可指定得更細 (tag+class+tag), 例如:
p.specialtext span {font-style: italic;}
則第三段內span標籤內的字還會變成斜體。
ID的使用放式與Class類似，只是它是以#來表示，例如：
#uniquetext {font-weight: bold;}
<p id="uniquetext">This is the special text</p>
Class與ID的差異
Class可以重複出現很多次，而一個特定的ID則只能在一個頁出現一次。
Class好比西洋棋中的士兵，而ID就像皇后。
Class與Id雖然好用，但小心不要用度使用，否則會落到如同Font tag般的下場。
Thursday, March 16, 2006
CSS的規則
CSS的規則基本上由二個成份組成：selector {declartion}
例如：p {color: red}
則所有套用<p>標籤的內容皆會變成紅色。
此規則又可延伸如下：
span與div的差異：div為區塊元素，會強迫換行，而span則為行內元素，不會強迫換行。
strong會產生粗體字，em則會產生斜體字。
透過Contextual Selectors，可以縮小樣式指定的範圍，例如：
div p {color: red;}
則只有在div之內的p標籤的內容會變成紅字
還可以像以下：
p span em{color: green;}
則只有在p段落中，span標籤中，在em標籤內的內容才會變成綠色。
最接近 {declaration}的標籤中的內容，才會受影響，其前面的tag只是用來指定其影響範圍而已。
Child Selectors
可用來指定一標籤規則必須是某一個標籤的children，用法如下：
p>em {color: green;}
但此規則目前IE不適用。
例如：p {color: red}
則所有套用<p>標籤的內容皆會變成紅色。
此規則又可延伸如下：
- 在一個規則中可包含多重的declaration，例如：
p {color:red; font-size:12px; line-height:15px;} - 多個selectors也可以組合在一起，例如：
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;} - 多種規則也可以套用到同一個selectors上，例如：
h1, h2, h3, h4, h5, h6 {color:blue; font-weight:bold;}
h3 {font-style: italic;}
span與div的差異：div為區塊元素，會強迫換行，而span則為行內元素，不會強迫換行。
strong會產生粗體字，em則會產生斜體字。
透過Contextual Selectors，可以縮小樣式指定的範圍，例如：
div p {color: red;}
則只有在div之內的p標籤的內容會變成紅字
還可以像以下：
p span em{color: green;}
則只有在p段落中，span標籤中，在em標籤內的內容才會變成綠色。
最接近 {declaration}的標籤中的內容，才會受影響，其前面的tag只是用來指定其影響範圍而已。
Child Selectors
可用來指定一標籤規則必須是某一個標籤的children，用法如下：
p>em {color: green;}
但此規則目前IE不適用。
Wednesday, February 15, 2006
Box - Formatting Model
padding及marign屬性，可一次設完四邊值，順序為上-右-下-左，可省略部分參數，例如：
padding: 0 15px 2px 0 (上／左為0px, 右為15px, 下為2px)
padding: 0 0 15px (上／右／左為0px, 下為15px)
padding: 0 15px (上／下為0px, 左右為15px)
Friday, January 27, 2006
三種設定網頁CSS樣式的方法
一、行內樣式 Inline Style
直接把某一段文字的樣式標示在<p>標記中。
例如：
<p style="font-size: 25pt; font-weight: bold; font-style: italic; color: red;">這一段文字已加入行內樣式了</p>
<p>下一段文字則完全不受影響</p>
出來的結果為：
二、嵌入樣式 Embedded Style
將樣式表置於XHTML文件的<head></head>之間
例如:
<head>
....(略)
<style type="text/css">
/* <![CDATA[ */
h1 {font-size: 16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>
</head>
只要在每個XHTML網頁的標題中加入以下一行，便可以將樣式表套用到許多XHTML網頁中。
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
其中media設定為screen，表示是透過螢幕（即網頁）來觀看內容。
所以還可以加一行作為列印時所用的樣式表：
<link href="my_style_sheet_print.css" media="print"
rel="stylesheet" type="text/css" />
參考character entity
直接把某一段文字的樣式標示在<p>標記中。
例如：
<p style="font-size: 25pt; font-weight: bold; font-style: italic; color: red;">這一段文字已加入行內樣式了</p>
<p>下一段文字則完全不受影響</p>
出來的結果為：
這一段文字已加入行內樣式了
下一段文字則完全不受影響- 影響範圍只限它所加入的tag
- 一般應避免使用行內樣式
- 在建立樣式表前，可先利用行內樣式來測試結果，但要記得最後將tag中的style屬性完全移除。以免日後找不到為何樣式發生問題。
- 行內樣式會蓋過嵌入樣式及樣式表所定義的樣式。
二、嵌入樣式 Embedded Style
將樣式表置於XHTML文件的<head></head>之間
例如:
<head>
....(略)
<style type="text/css">
/* <![CDATA[ */
h1 {font-size: 16pt; font-weight:bold;}
p {color:blue;}
/* ]]> */
</style>
</head>
- 嵌入樣式影響範圍只限於包含此樣式的頁面
- 若設計的版型很複雜，較容易的做法是先把樣式嵌入在文件的的head中，完成後再移到主樣式表中
- 頁面樣式會蓋過樣式表所定義的樣式。
只要在每個XHTML網頁的標題中加入以下一行，便可以將樣式表套用到許多XHTML網頁中。
<link href="my_style_sheet.css" media="screen"
rel="stylesheet" type="text/css" />
其中media設定為screen，表示是透過螢幕（即網頁）來觀看內容。
所以還可以加一行作為列印時所用的樣式表：
<link href="my_style_sheet_print.css" media="print"
rel="stylesheet" type="text/css" />
參考character entity
Subscribe to:
Posts (Atom)
