看到大叔在老莫的動態留言，我喜歡他所說的
學習CSS的ID、class、span、div、grouping、nesting
- happiness is only real when shared .
看到沈易霖老師分享這段影片，一位老師從大學時補教名師到決定走向偏鄉，發揮創意激發孩子對學習的熱忱，進而成為自己的主人，真的太正了這段影片
讀了一篇還不錯的文章，讓我想起大學時偶爾讀原文書，大部分時間都拿來讀閒書探索自我，與來到這世界的意義
學習CSS的ID、class、span、div、grouping、nesting
參考mike-map的index.html，一邊學習需要哪些HTML5與CSS的知識，看到這篇文章發現，可以把CSS風格寫在另一個外部檔案，然後
在這篇我們知道可以用<link> tag來從外部import進來.css來當作style sheet華麗大衣
- Each page must include a link to the style sheet with the <link> tag.
由上數來第二個paradigm可以看到，類似我們在index.html裡出現的body{...}。不過要注意的是，.css檔裡面不能有html tag
另外也可以透過<style> tag直接寫在.html檔裡，寫成<style>body{...}</style>，在Internal Style Sheet這節的paradigm裡可看到，它是在<head>...</head>裡包入<style></style>，我回去看了一下index.html，它是把<style></style>寫在最前面，之後才寫<script>渲染動畫</script>。
於是我就去測了一下，發現就算不把<style> tag寫在<head></head>裡也可以，甚至寫在</html>之後也可以
參考mike-map的index.html，可以知道自己需要寫些什麼，在讀code時常看到#、@之類的東西，不知道它事幹嘛的，後來估狗發現Wiki裡就有說明了
在此讀到CSS全名cascading style sheet，cascade的意思是階層狀的瀑布。另外在這篇才知道，CSS裡的註解無法用傳統的//，但是可以用/**/，意即/*...註解內容...*/，從中我們也知道#elementname，#這符號英文讀作hash (from Hashtag - Wikipedia)，在CSS中代表我們的ID，對於這篇文章中的class與ID，解釋的還不夠清楚，找到了另一篇文章
(以下內容11/9更新)
首先來談談span與div這兩個tag(或稱之為element)有什麼不同吧。一開始的時候我閱讀CSS DIV 與 CSS Span - 1Keydata CSS 語法教學這篇，試圖去理解他們的差異，只知道兩者都是可以讓我們顯示出一個區域，然後在這區域裡放我們想要的文字，但是仍然難以體會其中的差別，後來改讀這篇文章
在這篇文章知道，span主要是拿來處理in-line，也就是只有一行的一小段文字，若是想處理block-line，也就是有一個區塊，較多的文字時，可以改用div這個element。div也就是division，division當作名詞時有分割、分開、分配、區域的意思。由於好奇，我也去查了一下sapn的意思，根據奇摩字典span當作名詞：跨度、指距、全長；動詞：橋、拱等、橫跨，跨越、以指距量、測量、持續、延伸到。
對於CSS語法的學習一開始是讀CSS 語法這篇，但老實說我還是較喜歡英文的這篇
下面這段文字非常地清楚解釋了HTML tag與CSS的關聯，這篇文章也另外介紹了CSS裡面的長度與百分比：px、em、pt、%個代表什麼
在這篇文章它提到id與class的差異
(以上內容11/9更新)
(以下內容11/10更新)
在11/9的內容，我們已經知道了CSS的基本觀念，再來我們要更進一步學習，來簡化我們的code
閱讀這篇知道，Groping可以把不同selector但相同的property寫在同一行，透過逗號","來分隔各個selector，以此來簡化我們的code。
另一個有趣的做法Nesting，是直接在定義selector的properties時，就直接指派給所要用的tag。它的做法是在一個div裡，定義一次ID，然後讓這div裡不同的段落文字p、h1、2...etc都可用#IDname p、#IDname h1、#IDname h2，在客製的#IDname tag裡，properties可以不同於一開始在div所定義的ID
首先來談談span與div這兩個tag(或稱之為element)有什麼不同吧。一開始的時候我閱讀CSS DIV 與 CSS Span - 1Keydata CSS 語法教學這篇，試圖去理解他們的差異，只知道兩者都是可以讓我們顯示出一個區域，然後在這區域裡放我們想要的文字，但是仍然難以體會其中的差別，後來改讀這篇文章
在這篇文章知道，span主要是拿來處理in-line，也就是只有一行的一小段文字，若是想處理block-line，也就是有一個區塊，較多的文字時，可以改用div這個element。div也就是division，division當作名詞時有分割、分開、分配、區域的意思。由於好奇，我也去查了一下sapn的意思，根據奇摩字典span當作名詞：跨度、指距、全長；動詞：橋、拱等、橫跨，跨越、以指距量、測量、持續、延伸到。
對於CSS語法的學習一開始是讀CSS 語法這篇，但老實說我還是較喜歡英文的這篇
下面這段文字非常地清楚解釋了HTML tag與CSS的關聯，這篇文章也另外介紹了CSS裡面的長度與百分比：px、em、pt、%個代表什麼
- Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets.
但是只是這些還是不夠，所以我們繼續讀下一篇資料
喔喔喔，這篇很正，它解惑我長久以來的盲點。- In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).
- The HTML refers to the CSS by using the attributes id and class.
在這篇文章它提到id與class的差異
- The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
(以上內容11/9更新)
(以下內容11/10更新)
在11/9的內容，我們已經知道了CSS的基本觀念，再來我們要更進一步學習，來簡化我們的code
閱讀這篇知道，Groping可以把不同selector但相同的property寫在同一行，透過逗號","來分隔各個selector，以此來簡化我們的code。
- You can simply separate selectors with commas in one line and apply the same properties to them all so
另一個有趣的做法Nesting，是直接在定義selector的properties時，就直接指派給所要用的tag。它的做法是在一個div裡，定義一次ID，然後讓這div裡不同的段落文字p、h1、2...etc都可用#IDname p、#IDname h1、#IDname h2，在客製的#IDname tag裡，properties可以不同於一開始在div所定義的ID
- If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.
在這篇文章中，開始解構CSS Model
看到一篇文章滿有趣的，介紹html tag 與 body tag的意義
首先它先介紹div tag裡的overflow這property作為引子，透過div tag可以創建一個框框：
<div style="....; overflow:visible"> ...內容... </div>
- 如果paragraph超出框框，依舊會讓你看見
<div style="....; overflow:hidden"> ...內容... </div>
- 如果paragraph超出框框，依舊會讓你隱藏
<div style="....; overflow:auto"> ...內容... </div>
- 如果paragraph超出框框，就會產生scrollbar，產生捲軸上下平移來看
有了overflow:auto的概念後，它的概念就像html與body一樣，body是你的網頁全部的內容，但礙於螢幕大小有限，所以只能顯示部分內容，也就是我們螢幕的大小，而這符合螢幕大小的內容就是html
Learning Web Design and see it easiest and the cheapest one just try it now
回覆刪除Html tutorial