css

2012年6月10日 星期日

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>


             
  2. 匯入

                    <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>
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)