2012年6月28日星期四

CSS 文字屬性

一.字體 font-family

兩大類的字體定義:

1.family-name 字型名稱:Arial, Time New Roman, 新細明體, 細明體, 標楷體

2.generic-family汎用字集:serif(襯線字), sans-serif(無襯線字),cursive(捲曲字體),fantasy(花俏字
體),monospace(等寬字體)

Font Family 定義方式:

定義一集合(數個)字型當作備用 ,若瀏覽器不支援第一字型,則使用第二字型,依此類推。

若字型名稱超過一個WORD須用雙引號括起來 , 不同字型間用逗號隔開 , 結尾用泛用字體。

p{font-family:"新細明體", "Times New Roman", Times, Sans-serif;}

二.字體大小font-size

不要用字體的大小來區分何者為標題,何者為文章段落;

應使用<h1> ~ <h6> 標示標題 , <p> 標示段落。

絕對大小: 指定文字特定大小 ; 無法由瀏覽器變更字體大小。

相對大小: 指定相對於周邊元素的大小 ;可由瀏覽器變更字體大小。

若未指定字體大小,預設字體大小為normal text , <p>為16px (16px=1em)

1.使用Pixelx指定大小 :

p {font-size:14px;}

2.使用Em指定大小, 預設1em=16px

pixels 轉換 em 公式: pixels / 16 = em

ex: 40px / 16 = 2.5em

h1 {font-size:2.5em;}

3.結合Percent 和　Em

body {font-size:100%;}

h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

可在所有瀏覽器正常執行,可由瀏覽器改變字型大小。

2012年6月20日星期三

DOS 與 Linux 的斷行字元

Windows 系統建立的檔案，使用的斷行字元為 ^M$ ,稱為 CR 與 LF 兩個符號;

Linux 下僅有 LF ($) 這個斷行符號。

可使用
cat -A 檔案或
od -t c 檔案        來觀察檔案內斷行符號的不同。

轉換方式

dos2unix [-kn] file [newfile]        windows格式轉為unix格式

unix2dos [-kn] file [newfile]        unix格式轉為windows格式

-k ：保留該檔案原本的 mtime 時間格式 (不更新檔案上次內容經過修訂的時間)
-n ：保留原本的舊檔，將轉換後的內容輸出到新檔案，如： dos2unix -n old new

ex: dos2unix -n old.txt new.txt

參考:鳥哥的linux私房菜

2012年6月13日星期三

CSS Text 屬性

1.Text Color 設定內文顏色

顏色可由
1.十六進位值
2.RGB值
3.顏色名稱
指定

body {color:blue;background-color='yellow'}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

若符合W3C之標準,指定text顏色屬性時,也需同時定義背景顏色屬性

2.Text Alignment 設定內文文件水平對齊

屬性值:center,left,right,justified(左右對齊,使每行等寬)

p.jy {text-align:justify;}

3.Text Decoration 設定或取消內文的裝飾

屬性值:none,underline,overline,line-through,blink

h4 {text-decoration:underline;}

ps.在 IE, Chrome, or Safari 中不支援blink

4.Text Transformation 設定字母大小寫轉換

屬性值:uppercase,lowercase,capitalize

p.capitalize {text-transform:capitalize;}

5.Text Indentation 設定首行縮排

p {text-indent:50px;}

6.letter-spacing   增加或減少字母與字母之間距

屬性值:normal,length(可用負值)

h3 {letter-spacing:5px;}

h2 {letter-spacing:-2px;}

7.word-spacing      增加或減少字與字之間距

屬性值:normal,length(可用負值)

p
{
word-spacing:30px;
}

8.line-height     設定行高

屬性值:normal,number(1,2,3,4),length(px,pt,cm),%(120%)

網友分享行高詳細說明
http://blog.mukispace.com/css-line-height/trackback/

2012年6月12日星期二

css的背景屬性

1.background-color 背景顏色

在CSS中顏色通常由
‧十六進位值 - "#ff0000"
‧RGB值 - "rgb(255,0,0)"
‧顏色名稱 - "red"　　　　

來指定。

body
{
background-color:#b0c4de;
}

2.background-image    背景圖片

預設(repeat)圖片會水平及垂直重複出現。

body {background-image:url(.\pic\back061005.gif');}

3.background-repeat   背景圖重複水平或垂直方向

屬性值:repeat,repeat-x,repeat-y,no-repeat。

ex:設定背景圖水平重複。

body.imgx {
background-image:url('.\pic\back061005.gif');
background-repeat:repeat-x;
}

ex:設定背景圖垂直方向重複

body.imgy {
background-image:url('.\pic\back060003.gif');
background-repeat:repeat-y;
}

4.background-attachment 背景圖案是否固定,是否隨scroll移動

屬性值:scroll,fixed

body
{
background-image:url('.\pic\back060003.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

5.background-position 背景圖位置

屬性值:left top,left center,left bottom,
            right top,right center,right bottom,
             center top,center center,center bottom,
             x% y%,xpx ypx

設定圖片位置及不重複

body
{
background-image:url('img_005.png');
background-repeat:no-repeat;
background-position:right top;
}

2012年6月10日星期日

HTML 跳脫字元(Escape Characters)表

<	less than sign	<	>	greater than sign	>
@	at sign	@	[	left bracket	[
]	right bracket	]	`	back apostrophe	`
{	left curly brace	{	&#124	vertical bar	\|
}	right curly brace	}	~	tilde	~
	ellipsis	…	&#134	dagger	†
	double dagger	‡		left single quote	‘
	right single quote	’		left double quote	“
	right double quote	”		bullet	•
	short dash	–		longer dash	—
	trademark	™	¡	inverted excallamation point	¡
¢	cent sign	¢	£	pound sign	£
¥	yen sign	¥	¦	broken vertical bar	¦
©	copyright sign	©	«	double left than sign	«
¬	logical not sign	¬	®	registered trademark sign	®
°	degree sign	°	±	plus or minus sign	±
²	superscript 2	²	³	superscript 3	³
¹	superscript 1	¹	»	double greather than sign	»
¼	fraction 1/4	¼	½	fraction 1/2	½
¾	fraction 3/4	¾	¿	inverted question mark	¿
÷	division sign	÷	“	left double quote	“
”	right double quote	”	—	dash	—

CSS宣告及使用方式

CSS宣告方式

                      Selector                                 Declaration

       網頁標籤 or 自訂id ,class名稱 {屬性名稱:設定值;}

                                                                Property:Value

ex: 1.用一般標籤

           宣告: font {font-size:9pt;}

           使用方式: <font>test</font>

        2.用class

             宣告:  .normalfont {font-size:12pt; color:#008000;}

             使用方式: <font class="normalfont">測試用class</font>


        3.用id

                #largefont {font-size:16pt; color:#008080;}

               使用方式:<font id="largefont">測試用id</font>




         PS.    class和id的不同

       1.一個網頁標籤可使用多個class,但不能有多個id。

         2.id可被javascropt的GetElementByID函數引用,但class不行。

CSS宣告位置及引用:

   1. 內嵌樣式(Embeded Styles /Internal Style Sheet) : 獨立於每頁page

        <head>
        <style type="text/css">
           font {font-size:9pt}
        </style>
        </head>

    2.外部樣式表 (External Style Sheet)   : 定義成.css檔案再引用
   (.css檔案也須編成UTF8碼和網頁一致)

      引用方式:

超連結

<head>

匯入

                    <head>
                   <style type="text/css">
                   @import url(font.css);
                    </style>
                    </head>

  3.行內定義 (Inline Styles)

    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>

css

2012年6月28日 星期四