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的預設值最小.
留言