星期二, 8月 17, 2010

CSS之一

現在在施行混亂學習大法, 寫到哪裡卡到哪裡, 卡到哪裡學到哪裡. 今天是卡在CSS上. 有個簡單排版的效果我做不出來, 查了好一陣子. 最後還是在PTT上問到答案... 在這裡記錄一下CSS我在W3CSchool做了啥.

  • CSS是Cascading Style Sheet的縮寫 (話說cascading出現在我的碩士論文裡很多次)
  • HTML本來不是設計來做排版的, 而是設計來描述一篇文章的結構. 例如head, title, paragraph等等. 用font, color來做一些效果, 一直都是問題.
  • 在HTML 4之後, 號稱可以把這些描述怎麼畫內容的方法, 都獨立於HTML之外, 寫在css檔裡.
  • selector 跟 declarations
  • selector有幾種方法, 最簡單的就是統html的tag, 像是p, h1等等.
    p {
    color: red;
    text-align: center;
    }
  • css裡的註解寫法跟C的一樣, 用/* */包起來.
  • 也可以設id的style, id就是某個element的特定的名字, 應該只能有一個. 要用#來指定.
    #para1 {
    color: red;
    text-align: center;
    }
  • id不可以是數字開頭的!
  • class是第三種, 跟id不同的是, 它是描述一"類", 而不只是特定一個tag. 它是用.來指定.
    .center {
    text-align: center;
    }
  • class也可以特別指定要在哪一種tag上生效. 例如下面, 就只有<p class="center"></p>的會生效.
    p.center {
    text-align: center;
    }
  • 加入CSS也有三種方法, external, internal, inline.
  • external就是在HTML一開始include一個css檔進來.
    <head>
    <link rel="stylesheet" type="text/css" href="xxx.css" />
    </head>
  • internal則是在HTML一開始的header裡寫一些css script.
    <head><br /><style type="text/css"><br />hr {color:sienna;}<br />p {margin-left:20px;}<br />body {background-image:url{"images/back40.gif"};}<br /></style><br /></head> 
  • inline就在該tag裡直接加了.
    <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  • 如果一個tag的style同時被不同的selector指定時,  所有的attribute都會被設下去. 如果有重覆的attribute, 優先權以inline最大, internal其次, external第三(跟HTML裡include的順序有關), browser的預設值最小.

沒有留言: