標籤: css

CSS 按鈕滑入、滑出、按下、停用樣式 input button css style hover click disable

:focus       // 焦點
:active      // 按下
:hover      // 滑出
:disabled  // 停用

<style type=”text/css”>
/* 原始 */
input[type=”button”]{
background:#F00;
border:2px solid #F00;
padding:10px;
}
/* 滑入 */
input[type=”button”]:hover{
background:#0F0;
background:inherit;
}
/* 按下 */
input[type=”button”]:active{
background:#00F;
background:inherit;
}
/* 焦點 */
input[type=”button”]:focus{
border:2px solid #00F;
background:inherit;
}
/* 停用 */
input[type=”submit”]:disabled{
background:#EBEBEB;
border:2px solid #ccc;
color:#999;
padding:10px;
}
</style>
<input type=”button” name=”button” id=”button” value=”正常按鈕” />
<input type=”submit” name=”button” id=”button” value=”停用按鈕” disabled=”disabled” />[……]

閱讀更多

CSS div height 無法 100% 問題

height的100%即為父層高度的100%，
但div在body之下仍然沒有辦法達到100%，
主要原因是HTML所有物件都會包在body之中，
大部份人都知道都會在CSS開頭初始body，如下：

body{
margin:0;
padding: 0;
width:100%;
height:100%;
}

但html常常都會忽略，body外面還有一層html，html一樣需要被初始，如下 ：

html, body{
margin:0;
padding: 0;
width:100%;
height:100%;
}

如此，初始了最外層的html & body為100%，裡面的物件才有可能被CSS設置到完全的100%[……]

閱讀更多

網頁預設字體大小 12pt VS 12px ~ 傻傻分不清楚

其一直被一個問題困擾著~
就是網頁的預設字體大小~
看很多人在設定CSS都用font-size:12px為預設字體大小~
很多套件的預設字體大小也是用font-size:12px~
但我印象中 12pt 才是網頁預設的字體大小呀~
但看大家都這麼做~我好像混淆了~
可是照12px做為預設字型~
怎麼覺得字好像變小了~
有點不太方便閱讀~
於是我做了個小實驗要把這2個12弄清楚~

Default = 未套用任何CSS
12pt = font-size:12pt
12px = font-size:12px


ie的截圖

firefox的截圖

chrome的截圖
由此可證，網頁預設字體大小為 12pt，
疑問來了，那為何要很多套件會使用12px呢?
主要原因是因為決大多數的套件都是以英文語系為主，
反而是12px較為美觀， 對此，我也做了下面的小小實驗，

ie的截圖

firefox的截圖

chrome的截圖
英文字體是不是12px反而好看多了呢~
對此我用多一點的文字來測試看看~
因此又做了一個小小的實驗~

中文12pt;

白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。

中文12px;

白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。白日依山盡，黃河入海流。欲窮千里目，更上一層樓。
———————————————————————————-

英文12pt;
My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good.

英文12px;
My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good. My English is not good.

小小的結論
終於弄懂 12pt & 12px 的差異~
12pt – 為網頁的預設字體大小。
用途：
12pt – 較方便閱讀。
12px – 較精緻美觀。
其實字體的大小並沒有一定的規範，只是一個使用者習慣，相信各家瀏器會把12pt當做預設字體大小，一定是此一大小最適合文字閱讀。

但在設計上主要就看客戶的需求、客戶屬性為何，挑選適當的字體大小為預設文字尺寸，滿足目標使用者的需求及網站的可用性；舉例而言：公家機關網站、無障礙網站，主要功能在於內容佈達型的網站，必需兼顧各種族群及閱覽的年齡層，易讀性可能會高過於美觀，因此我們就可以用12pt字體大小；而設計感強烈，講求風格特色的網站如空間設計、平面設計或主題餐廳，網站強調的可能是一種氛圍或形象，則美觀可能就會高過易讀性，這就可以用看起來比較精緻的12px字體大小。

以這兩種此寸為基準去推算，相信以後更能掌握網站字體的大小。

[……]

閱讀更多