差點忘了今天是CSS Naked Day.....
To know more about why styles are disabled on this website visit the
Annual CSS Naked Day website for more information.
Results tagged “CSS” from XXC@Blog
從網路暴民Jacky處看到：CSS Naked Day 2007
根據活動網站上的說明，舉辦這個裸體日的目的是為了推廣網頁設計的標準。的確，沒有比把視覺設計的部份脫光光這種作法，更能夠強調出把語意(Semantic)與視覺表徵(Visual Representation)區分出來的設計原則了。
今天才看到，是有點晚啦。不過還可以脫光個大半天吧。一脫下來就知道我整個網站的語意結構還要再加強才是。
拍照留念：
-
Stu Nicholls 建立的這個CSSplay網站有許多的CSS效果示範。特別是許多不需要javascript的CSS ":hover" 效果：如選單、按鈕、相簿、影像地圖等等。
-
十個步驟學會CSS定位
-
在email 中使用 CSS 語法的相容性比較。完整的測試了Web-base (Gmail, Hotmail, Yahoo! Mail, Windows Live Mail), PC與Mac 的電子郵件軟體 (PC: Outlook 2003/OE, AOL 9, Lotus Notes, Thunderbird. Mac: Mac Mail, Entourage, Eudora)
-
了解CSS Box Model 的概念。一圖勝千言，更何況是互動的。
似乎有點武俠小說的感覺。在CSS Insider處，看到這篇 Friendly Bit » Levels of CSS knowledge。文中區分一般人對CSS的理解程度，頗有趣，簡單翻譯如下(每層的解釋我沒有照翻，有興趣者請自行至原文處。而與原文解釋不同的部分，如有錯誤，文責完全在我)：
問題：「你會用CSS嗎？」
第0層的回答：「CSS？ 是新出的線上遊戲嗎?」
第1層的回答：「喔，我知道啊。我會用CSS來去掉超連結下面的底線。」
第2層的回答：「沒有，我不喜歡用DIV；TABLE比較好用。」
第3層的回答：「有啊，那很優喔，但是我沒用，因為......」
第4層的回答：「CSS？喔，當然。我所有的頁面都是用DIV來排的。」
第5層的回答：「我用CSS來設計網頁，CSS比TABLE好，因為......」
第6層的回答：「那一版的CSS？...喔，有啊，你有讀過我寫的那本書......」
Continue reading 你對CSS，掌握到第幾層了？.
前言
最近市面上出現了幾本CSS教學的書，如《The Zen of CSS－網頁視覺設計的王道》，《Eric Meyer再談CSS網頁排版設計》、《Web CSS網頁樣式設計學》、《CSS網頁設計師手札－101個您一定會遇到的問題與解答》等等。同學也買了後兩本來自修CSS。我翻了一下，發現有關於版面編排(layout)的問題分別是放在第七章與第八章來說明的，前面的章節都在教讀者如何修改字型與顏色等等。當然，一開始初步如何呼叫使用CSS是最基本的，但是我自己認為，應該先對CSS 編排有最基本的概念，才能往下學習各種修飾語法。其中一本竟然還教讀者使用表格(table)來編排頁面，真是越教越回去了。
我才想起我以前(2004)有翻譯了幾篇A List Apart關於CSS觀念的入門文章，我以為我早就放在網路上了，沒想到今天在學校上網既然遍尋不到。回家一看，原來還壓在一堆檔案裡面。我已經忘了當初是什麼原因沒有放上來，好像是翻譯授權的關係。我今天又上A list apart 看，發現翻譯是可以免費取得授權的，只要註明原文來源，與不要任意更動文句，與不從事販賣等商業行為就可以了。
這篇文章是由Jeffrey Zeldman在2001年寫好的，說明了從以往網頁設計演進到使用CSS設計的過程，許多環境因素已經與當時大不相同，A list apart的網站也早已改版多次，文中所說的三欄或兩欄式的CSS編排也早就是大部分主流blog的用法。但是，對大部分已經會作網頁，但是還不瞭解CSS編排的精神的，這是一篇值得參考的文章；另一方面，我們也可以瞭解到，當初費盡心思發展出CSS三欄編排所為何來。文章中最主要說明的是，網頁標準的精神在於：
- 內容與視覺樣式分開；
- 將資料結構化；
- 讓CSS控制所有的視覺編排工作。
Continue reading 從表格編排技巧到CSS：一個網頁設計者的歷程.
因為IE跟Mozilla支援的CSS不盡相同，所以為了讓兩種瀏覽器看起來一樣，總要動點手腳。
如果用CSS來作的話，基本上原則是要利用某些語法只有其中一種支援，加上越後面設定的CSS指令較優先執行，或是越具體的CSS指令越優先執行的特點，所作出來的。
- 首先是Box Model Hack--
利用 IE不認得斜線的缺點，但是對於IE6來說，這種Hack有時候不怎麼有效......還搞不清楚為什麼
voice-family: "\"}\""; voice-family: inherit;
- A quick and dirty CSS hack: PNG backgrounds : evolt.org, Visual Design--
用 IE不認得 child selectors (「大於」符號)的缺點
div.hack { color:#fff;} body > * div.hack { color:#ff0; }
- CSS hack for IE6 and NN6
利用IE會自動修正註解，而Mozilla不會的特點
pre { color: blue; anyword: "; /* For Mozilla only, but won't work only the next rule */ color:; color: red; background: #ccc; /*";/* here IE can read */ font-weight: bold; }這個Hack要用到一個假造的非法屬性，所以可能CSS驗證不會過
- 最完整的集大成在：Hide CSS from Browsers，提供了各種CSS與瀏覽器的破解法，這裡是各種瀏覽器對於CSS語法支援程度的整理
最近為了一堂CSS的課程，翻譯了WDG的Guide to Cascading Style Sheets，作為課程的基本教材資料。
雖然我還是不清楚三個小時的CSS可以教到什麼，想了各種可能，問了很多朋友，結果還是沒個準。我想，就先認識CSS可以做什麼，然後實作基本的CSS，也許在看看未來可能的發展方向吧。
不過這分教材，請大家參考看看吧。
授權部分，版權部分是根據WDG採用的OPL，我也附上了原作的網址與作者了。
根據OPL的條文，翻譯跟更改文件需要：
- The modified version must be labeled as such. / 更改的版本必須與同原作標題。
- The person making the modifications must be identified and the modifications dated. / 更動者必須標明更改的時間
- Acknowledgement of the original author and publisher if applicable must be retained according to normal academic citation practices. / 依照學術引用慣例，必要時需向原作者或出版處知會
- The location of the original unmodified document must be identified. / 必須標明原作的出處位置
- The original author's (or authors') name(s) may not be used to assert or imply endorsement of the resulting document without the original author's (or authors') permission. / 不可以在沒有原作者的同意的情況下，將原作者的名字用來當作對於這份文件的擁護或是背書的暗示。
除了注意這幾點，沒有找到國內有什麼「如何使用OPL」的文件，不過反正OPL的作者也轉向支持Creative Commons。
本站所有內容，皆採取創作共用授權。簡單的說，只要附上作者姓名，您可以自由的使用此內容。
This weblog is licensed under a Creative Commons License.
