今天在逛同事 Bruce 的部落格, 看到了一個在 CSS 裡執行 js 的方式
原來還有這一招阿! 趕快給它學起來...
<style>
a{
noframe:expression(this.onFocus=this.blur());
/*noframe為自訂屬性名，可替換為任意名稱*/
}
img.altImg1{
text:expression(src="myImage.jpg");
width:expression(300 +"px");
}
</style>
...(略)
<img id="altImg" class="altImg1">
<a href="#">這個連結點下去時不會有虛線框</a>
如上，透過在 css 裡面執行 expression() 方法，就可以替該 DOM 元素的屬性給值
但可別高興得太早阿
經過我驗證之後，發現這個功能是 IE 擴充的，而非 W3C 標準
也就是說它在其他瀏覽器上沒有作用!!
哇哩咧...這不是白玩了嗎??
不過也許可以利用這一點來做一些 IE hack
例如 IE 不支援的 fixed定位，或是 max-width 與 max-height
下次有機會再來 try try 看吧
2009/11/10
2009/05/18
瀏覽器不支援 height: 100% 問題
標籤：
CSS與Html
用 flash 做了一個全版面的網站
但在新版瀏覽器上面卻顯示不正常
這問題起因於在標準規格中不建議將高度設為100%
有沒有解決的方式呢?
一定有
今天試了幾種不同的方式
最後取消了 Dreamweaver 在 HTML 檔案第一行所寫的<!DOCTYPE;>宣告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
問題解決了
不過客戶還是希望把宣告加回去
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
這樣寫是 OK 的
XHTML 1.0 跟 HTML 4.01 之間到底規格差別如何呢??
加了<!DOCTYPE;>宣告跟沒有加<!DOCTYPE;>宣告的差別又真的很重要嗎??
查了一下維基百科裡關於 XHTML 的說明以及關於 HTML 的說明
並沒有發現有相關的解釋
至於在 XHTML 1.0 下面實現 100% 高度的方法
在論壇上面求教高手後得到了解答
趕快記錄下來
CSS:
html, body, #fullContainer {
margin: 0;
padding: 0;
height:100%;
border: none;
text-align: center;
}
#fullContainer {
width:100%
text-align: left;
vertical-align: middle;
}
---------------------------------
HTML:
<body>
<div id="fullContainer">
This is centered
</div>
</body>
此程式碼是修改自 http://apptools.com/examples/tableheight.php
這樣可以在網頁中製造一個 100% 滿版且置中的效果
table tag 可以換成 div tag
但是 vertical-align: middle; 會失效
所以還是使用 table 比較完美
但在新版瀏覽器上面卻顯示不正常
這問題起因於在標準規格中不建議將高度設為100%
有沒有解決的方式呢?
一定有
今天試了幾種不同的方式
最後取消了 Dreamweaver 在 HTML 檔案第一行所寫的<!DOCTYPE;>宣告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
問題解決了
不過客戶還是希望把宣告加回去
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
這樣寫是 OK 的
XHTML 1.0 跟 HTML 4.01 之間到底規格差別如何呢??
加了<!DOCTYPE;>宣告跟沒有加<!DOCTYPE;>宣告的差別又真的很重要嗎??
查了一下維基百科裡關於 XHTML 的說明以及關於 HTML 的說明
並沒有發現有相關的解釋
至於在 XHTML 1.0 下面實現 100% 高度的方法
在論壇上面求教高手後得到了解答
趕快記錄下來
CSS:
html, body, #fullContainer {
margin: 0;
padding: 0;
height:100%;
border: none;
text-align: center;
}
#fullContainer {
width:100%
text-align: left;
vertical-align: middle;
}
---------------------------------
HTML:
<body>
<div id="fullContainer">
This is centered
</div>
</body>
此程式碼是修改自 http://apptools.com/examples/tableheight.php
這樣可以在網頁中製造一個 100% 滿版且置中的效果
table tag 可以換成 div tag
但是 vertical-align: middle; 會失效
所以還是使用 table 比較完美
2009/05/06
IE6 hack
標籤：
CSS與Html
針對舊版瀏覽器 IE6 在 CSS 上會出現較不同的視覺呈現
克服的方式有以下幾種
1.
*html Selector {....}
例:
#myDiv {padding:10px;}
* html #myDiv {padding:0;} /*IE6 Hack*/
2.
_屬性名稱
例:
padding-top:10px;
_padding-top:0; /*IE6 Hack*/
3.
!important 設定
margin: 0 0 0 24px !important; /*IE不支援!important所以略過此行*/
身為網頁設計師
對於各家瀏覽器不同的呈現當然要盡量要求能沒有差別是最理想
這才是專業的地方
克服的方式有以下幾種
1.
*html Selector {....}
例:
#myDiv {padding:10px;}
* html #myDiv {padding:0;} /*IE6 Hack*/
2.
_屬性名稱
例:
padding-top:10px;
_padding-top:0; /*IE6 Hack*/
3.
!important 設定
margin: 0 0 0 24px !important; /*IE不支援!important所以略過此行*/
身為網頁設計師
對於各家瀏覽器不同的呈現當然要盡量要求能沒有差別是最理想
這才是專業的地方
2008/06/07
連結( Link )
標籤：
CSS與Html
a 針對連結的一般設定
a:link 連結正常狀態
a:visited 已造訪過的連結
a:hover 滑鼠移上時的狀態
a:active 滑鼠點下時的狀態
相關屬性:
text-decoration: none/overline/underline/line-through/blink/inherit
(由於border的樣式比較多, 因此也可消除底線之後使用 border 設計新的底線外觀)
display:block
(搭配 background-color 屬性將連結作為區塊顯示)
*連結可用span標籤夾分隔符號(如: | )隔開
*可以利用
display:none;
將不想顯示的資訊隱藏(也可用於預載必要的圖檔)
--------------------------------------------------------------
下拉選單:(需配合 javascript)
.menu{
position:relative;
left:0;
top:0;
}
.submenu{
visibility:hidden;
position:absolute;
left:0;
/* 將子選單的 position 設成 absolute;
left 設成0 避免隱藏時滑鼠仍感應到子選單範圍 */
}
#menu1{
left:0;
top:0;
}
#menu2{
position:absolute;
left:200px;
top:0;
}
...
javascript部分則可以下類似這樣的描述
function showSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="visible";
}
function hideSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="hidden";
}
a:link 連結正常狀態
a:visited 已造訪過的連結
a:hover 滑鼠移上時的狀態
a:active 滑鼠點下時的狀態
相關屬性:
text-decoration: none/overline/underline/line-through/blink/inherit
(由於border的樣式比較多, 因此也可消除底線之後使用 border 設計新的底線外觀)
display:block
(搭配 background-color 屬性將連結作為區塊顯示)
*連結可用span標籤夾分隔符號(如: | )隔開
*可以利用
display:none;
將不想顯示的資訊隱藏(也可用於預載必要的圖檔)
--------------------------------------------------------------
下拉選單:(需配合 javascript)
.menu{
position:relative;
left:0;
top:0;
}
.submenu{
visibility:hidden;
position:absolute;
left:0;
/* 將子選單的 position 設成 absolute;
left 設成0 避免隱藏時滑鼠仍感應到子選單範圍 */
}
#menu1{
left:0;
top:0;
}
#menu2{
position:absolute;
left:200px;
top:0;
}
...
javascript部分則可以下類似這樣的描述
function showSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="visible";
}
function hideSubmenu(n){
obj = document.getElementById("submenu"+n).style.visibility="hidden";
}
圖片
標籤：
CSS與Html
img 標籤的 alt 屬性與 title 屬性:
alt 用於影像無法顯示時的替代文字,
title 用於游標移上圖片時出現的文字
(而一般小圖示應該把 alt 設為"" 以免影響瀏覽)
圖片的對齊方式:
vertical-align: bottom/middle/top/text-bottom/text-top
(還有 baseline/inherit/sub/super)
文繞圖
float:left/right (還有 none/inherit)
(針對段落指定文繞圖時, 應指定段落寬度, 以免float無法呈現)
背景圖
background-image:url(圖檔位置)
(使用背景影像時, 最好也記得指定可以正確顯示文字的背景色, 免得圖出現問題或未完全載入時字看不清楚)
background-repeat:no-repeat/repeat/repeat-x/repeat-y/inherit
background-position: Xpx Ypx
(還有 left/center/right/bottom/top/inherit)
alt 用於影像無法顯示時的替代文字,
title 用於游標移上圖片時出現的文字
(而一般小圖示應該把 alt 設為"" 以免影響瀏覽)
圖片的對齊方式:
vertical-align: bottom/middle/top/text-bottom/text-top
(還有 baseline/inherit/sub/super)
文繞圖
float:left/right (還有 none/inherit)
(針對段落指定文繞圖時, 應指定段落寬度, 以免float無法呈現)
背景圖
background-image:url(圖檔位置)
(使用背景影像時, 最好也記得指定可以正確顯示文字的背景色, 免得圖出現問題或未完全載入時字看不清楚)
background-repeat:no-repeat/repeat/repeat-x/repeat-y/inherit
background-position: Xpx Ypx
(還有 left/center/right/bottom/top/inherit)
2008/06/03
文字
標籤：
CSS與Html
font-size (WCAG 建議使用 em 而不是 px / % / ... 等)
相關屬性:
color (字體顏色)
background-color
font-family (字體採用順序)
font-style: normal/italic/inherit/
text-align (對齊)
line-height (行距)
width (文字區塊寬度)
border-top
border-bottom
border-left (邊框-左方)(可用來做文字左方的色塊或圖案)
border-right
border (統一做邊框設定)
margin-top (外距)
margin-bottom
margin-left
margin-right
padding-top (內距)
padding-bottom
padding-left
padding-right
| Standard Mode | h1~h6 | px | em |
|---|---|---|---|
| xx-large | h1 | 32 | 2 |
| x-large | h2 | 24 | 1.5 |
| large | h3 | 18 | 1.25 |
| medium | h4 | 16 | 1 |
| small | h5 | 12 | 0.75 |
| x-small | h6 | 10 | 0.625 |
| xx-small | --- | 9 | 0.5625 |
相關屬性:
color (字體顏色)
background-color
font-family (字體採用順序)
font-style: normal/italic/inherit/
text-align (對齊)
line-height (行距)
width (文字區塊寬度)
border-top
border-bottom
border-left (邊框-左方)(可用來做文字左方的色塊或圖案)
border-right
border (統一做邊框設定)
margin-top (外距)
margin-bottom
margin-left
margin-right
padding-top (內距)
padding-bottom
padding-left
padding-right
CSS 與 HTML 注意事項
標籤：
CSS與Html
注意事項:
1. 標準規格的概念, 是將格式(如字體, 對齊, ...等) 都從HTML中移出, 而由 CSS 檔案做管理
2. !DOCTYPE標籤中 HTML 4.01 的種類:
Strict -- 嚴格(未使用應避免使用的屬性與要素)
Transitional -- 過渡性的(有使用應避免使用的屬性與要素)
Frameset -- 頁框設定的(使用頁框及應避免使用的屬性與要素)
3. 套用外部樣式表
使用 link 標籤 rel="stylesheet" type="text/css" href="css檔案路徑" media="all"
(關於 media 屬性: all/screen/print ,media 屬性的不同可指定於不同情形下使用不同 CSS 樣式, 如列印版本可套用較適合列印的 CSS 樣式)
4. 強調文字
使用 em 標籤 或 strong 標籤
5. 網頁概要與關鍵字(由於常被濫用, 因此目前搜尋引擎已不大重視此部份)
網頁概要 -- meta 標籤中 http-equiv="Content-Type" content="在此描述網頁概要"
關鍵字 -- meta 標籤中 http-equiv="keywords" content="逗號分隔的關鍵字, 逗號分隔的關鍵字"
6. 群組化: div 與 section 標籤的功能
div -- 常用
section -- 可層級化(xHtml 2.0)
7. address標籤的使用, 用作版權宣告與作者資料描述
1. 標準規格的概念, 是將格式(如字體, 對齊, ...等) 都從HTML中移出, 而由 CSS 檔案做管理
2. !DOCTYPE標籤中 HTML 4.01 的種類:
Strict -- 嚴格(未使用應避免使用的屬性與要素)
Transitional -- 過渡性的(有使用應避免使用的屬性與要素)
Frameset -- 頁框設定的(使用頁框及應避免使用的屬性與要素)
3. 套用外部樣式表
使用 link 標籤 rel="stylesheet" type="text/css" href="css檔案路徑" media="all"
(關於 media 屬性: all/screen/print ,media 屬性的不同可指定於不同情形下使用不同 CSS 樣式, 如列印版本可套用較適合列印的 CSS 樣式)
4. 強調文字
使用 em 標籤 或 strong 標籤
5. 網頁概要與關鍵字(由於常被濫用, 因此目前搜尋引擎已不大重視此部份)
網頁概要 -- meta 標籤中 http-equiv="Content-Type" content="在此描述網頁概要"
關鍵字 -- meta 標籤中 http-equiv="keywords" content="逗號分隔的關鍵字, 逗號分隔的關鍵字"
6. 群組化: div 與 section 標籤的功能
div -- 常用
section -- 可層級化(xHtml 2.0)
7. address標籤的使用, 用作版權宣告與作者資料描述
訂閱：
文章 (Atom)