馬克雜想...

發表文章

目前顯示的是有「CSS」標籤的文章

CSS之Selector

9月 09, 2010

以為把 W3C School CSS 看完, 而且考試考了95分, 就可以直接上寫幹活了. 結果才寫幾行就卡住又要查資料了. 問題在我的HTML長的像 <ul> <li></li> <li></li> </ul> 我不想把所有li的屬性都改掉, 但我又不知道要怎麼用CSS selector去選id是userinfo裡的ul tag裡的li tag. 只好查資料囉. 最好的來源自然是 w3.org 囉. Grouping h1 {xxxxx} h2 {xxxxx} h3 {xxxxx} 跟h1, h2, h3 {xxxxx}是一樣的. 逗號隔開代表同時指定這幾種tag的style. Universal selector *, 代表任何一種在document tree裡的element. Type selectors 這種最基本了, 任何一個HTML定義的基本tag. h1 {xxxx} Descendant selectors 跟Grouping語法很像, 只是不用逗號, 改用空格. h1 {color: red} em {color: red} h1 em {color: blue} This is h1 here is em this is h1 again 會顯示成 This is h1 here is em this is h1 again Descendant selectors div * p代表div裡, 不管多深的p tag. Child selectors body > p {line-height: 1.3} 代表body裡的第一層p child. 跟Descendant selectors很像, 差別是用>只會選到它的第一層直接child. Adjacent sibling selectors 這個一定很少用, 所以大多文章都沒有介紹到. h1 + h2 {margin-top: -5mm} 代表選h1之後的第一個h2 tag. h1.opener + h2 {margin-top: -5mm} 代表cla...

閱讀完整內容

CSS之二

8月 20, 2010

很多屬性都有分top, bottom, left, right. 通常可以合在一行寫, 有四種組合. padding: 25px 50px 75px 100px (上25, 右50, 下75, 左100) padding: 25px 50px 75px (上25, 左右50, 下75) padding: 25px 50px (上下25, 左右50) padding: 25px (上下左右都25) Grouping 可以用逗號隔開幾個selectors, 這幾個的效果是一樣的. h1,h2,p { color: green; } Nesting p { color: blue; text-align:center; } .marked { background-color: blue; } .marked p { color: white; } 要把某個東西隱藏起來. 用display: none; 或是visibility: hidden; 但是這兩個有點不同. display: none; (東西消失, 後面的東西擠過來) visibility: hidden; (東西消失, 但是還是會佔據一塊同樣大小的位置, 後面的東西不會擠過來) block element 像是<h1>, <p>, <div>這種, 它會把所有可用的寬度都佔掉. 而且在前後都換一行. inline element 像是<span>, <a>這些, 它只會用掉它自己需要的寬度. 以上這兩種屬性, 可以用display來改掉. li { display: inline; }

閱讀完整內容

CSS之三 Positioning

8月 19, 2010

這個是我比較有興趣的地方. 有四種定位的方法 Static Positioning 預設的方法不受top, bottom, left, right影響 Fixed Positioning (position: fixed;) 指定東西出現在某個相對於browser window的位置即使window在捲動時, 它還留在原位, 不會跟著捲 example 它接下來的element會當它不存在一樣, 繼續往下排 Relative Positioning (position: relative;) 相對於它原本應該出現的位置, 另外加上一個offset ex. (left: -20px;) 雖然用了relative positioning的element的顯示位置會變, 但是接下來的element, 還是會用它用本應該存在的座標, 繼續畫下去 Absolute Positioning (position: absolute;) 相對於他的parent的位置. 如果沒有parent, 那就是<html> 它接下來的element會當它不存在一樣, 繼續往下排 z-index, 大的排前面, 小的排後面. 可以是負的. cursor , 有一大堆屬性, 可以改變cursor的外觀 overflow: scroll; 可以讓內容超出範圍時, 加上一個scroll bar

閱讀完整內容

CSS之一

8月 17, 2010

現在在施行混亂學習大法, 寫到哪裡卡到哪裡, 卡到哪裡學到哪裡. 今天是卡在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一開始的hea...

閱讀完整內容