css

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$ ,稱為 CRLF 兩個符號;

 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)表


&#060;less than sign<&#062;greater than sign>
&#064;at sign@&#091;left bracket[
&#093;right bracket]&#096;back apostrophe`
&#123;left curly brace{&#124vertical bar|
&#125;right curly brace}&#126;tilde~
&#133;ellipsis&#134dagger
&#135;double dagger&#145;left single quote
&#146;right single quote&#147;left double quote
&#148;right double quote&#149;bullet
&#150;short dash&#151;longer dash
&#153;trademark&#161;inverted excallamation point¡
&#162;cent sign¢&#163;pound sign£
&#165;yen sign¥&#166;broken vertical bar¦
&#169;copyright sign©&#171;double left than sign«
&#172;logical not sign¬&#174;registered trademark sign®
&#176;degree sign°&#177;plus or minus sign±
&#178;superscript 2²&#179;superscript 3³
&#185;superscript 1¹&#187;double greather than sign»
&#188;fraction 1/4¼&#189;fraction 1/2½
&#190;fraction 3/4¾&#191;inverted question mark¿
&#247;division sign÷&#8220;left double quote
&#8221;right double quote&#8212;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碼和網頁一致)
                    
      引用方式:

            
  1. 超連結


  2.          <head>
             <link rel="stylesheet"  href="font.css">
             </head>


             
  3. 匯入

                    <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>