RSS

Category Archives: CSS

CSS style

CSS 縮寫

善用CSS縮寫可以縮小檔案的大小。修改起來也方便。

顏色

顏色的縮寫是最基本且簡單的,顏色的HEX值為六碼,要簡寫的話2碼當一組,2碼只要有重複的話就可以縮寫為三碼。例如

HEX值(六碼)    簡寫(三碼)
白色         #FFFFFF         #FFF
紅色         #FF0000         #F00
黑色         #000000         #000
綠色         #00FF00         #0F0

邊框 BORDER

BORDER的屬性有寬度、樣式、顏色

.class {
border-width:1px;
border-type:solid;
border-color:#efefef;
}

邊框的縮寫依序為:width type color ( 寬度 -> 樣式 -> 顏色 )

.class { border:1px solid #efefef; }

距離 MARGIN, PADDING

不論是margin, padding,四個方向的距離也可縮寫,直接寫距離即可。

1. 四個方向距離完全一樣。

.class {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

.class { margin:10px; }

2. 上下一樣、左右一樣,依序為:top/bottom right/left

.class {
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

.class { margin:5px 10px; }

3. 上下不一樣、左右一樣,依序為:top right/left bottom

.class {
margin-top:5px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}

.class { margin:5px 10px 20px; }

4. 上下左右四個方向都不一樣,依序為:top right bottom left

.class {
margin-top:5px;
margin-right:10px;
margin-bottom:20px;
margin-left:15px;
}

.class { margin:5px 10px 20px 15px; }

文字 FONT

FONT的屬性有字體大小、粗細、樣式、字型、行高等。

.class{
font-size:12px;
font-family:”Lucida Grande”,Verdana,Arial;
font-variant:small-caps;
font-style:italic;
font-weight:bold;
line-height:150%;
}

文字的縮寫依序為:style variant weight size/line-height family ( 樣式 -> 變化 -> 粗細 -> 大小/行高 -> 字型 )

.class { font:italic small-caps bold 12px/150% “Lucida Grande”,Verdana,Arial; }

背景 BACKGROUND

BACKGROUND的屬性有顏色、圖片、、樣式、字型、行高等。

.class {
background-attachment:fixed;
background-color:#666;
background-image:url(images/img.png);
background-position:0 0;
background-repeat:no-repeat;
}

背景的縮寫依序為:color image repeat attachment position (顏色 -> 圖片 -> 重複 -> 固定/隨捲軸滾動 -> 位置)

.class {background:#666 url(images/img.png) 0 0 no-repeat fixed};

Advertisements
 
Leave a comment

Posted by on July 5, 2011 in CSS

 

CSS input指定type的樣式

簡單透過css控制input的各種type的樣式。

基礎

設定type為text時的樣式(password、checkbox沒有設定,當作對照)。

[語法]

input[type=”text”] { border:1px solid #c03; padding:3px; }

[解釋]

需指定type為text時邊框為紅色,在input後方加入[type=”text”],即可針對type指定css樣式。
css-type-text

變化

設定type為text時的hover樣式(password、checkbox沒有設定,當作對照)。

[語法]

input[type=”text”]:hover { background-color:#fcf3ef; }

[解釋]

需指定type為text時hover為粉紅色,在input[type=”text”]後方加入:hover即可。
css-type-text-hover

進階

設定type為text時的disabled樣式(password、checkbox沒有設定,當作對照)。

[語法]

input[type=”text”][disabled]{ background-color:#f6f5ea; border:1px solid #5f5854; }

[解釋]

在type後面再加入[disabled]指定disabled即可。
css-type-text-disabled

 
2 Comments

Posted by on January 21, 2011 in CSS