--- slideOptions: tradsition: slide tags: YunNET --- # 進階HTML/CSS ## HTML ---- ```htmlembedded= <p id=”footer”>這是用 ID 選擇器的例子。</p> ``` * id屬性 for all HTML elements。 * 它的作用是在頁面的所有元素中，**將某個元素獨立辨識出來**。 * 他的值必須以字母或底線(_)做開頭(X數字 X非英文字元） * 同一個頁面上的兩個元素**不能有相同的id屬性**值（id唯一性） * 透過js，id屬性可以讓程式碼與該特定元素互動。 * id屬性是**全域**屬性（global attribute），因為他可以用在任何元素上 ---- ```htmlembedded= <p class=”applylarge applyred”>這是多重 Class 的例子。</p> ``` * 每個HTML元素都可以使用class屬性。 * 當你想**將幾個元素從其他元素中獨立出來**時。 * 在任何元素上的class屬性都可以**共用相同的值** ---- ### BUT... * Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。 * 對於CSS而言，id和class都是選擇器，唯一不同的地方在於權重不同。 同權重: !important > id > class > tag * 一般來說，id會留給程式開發(JS)來用，CSS一般用class就好 但是有一種狀況就必須得用到id----“getElementById” ##### HTML ```htmlembedded= <!DOCTYPE html> <html> <head> <title>getElementById ex.</title> </head> <body> <p id="apple">這是文字</p> <button onclick="changeColor('blue');">blue</button> <button onclick="changeColor('red');">red</button> </body> </html> ``` ##### JS ```javascript= function changeColor(newColor) { var element = document.getElementById('apple'); element.style.color = newColor; } ``` <br> 看看[結果](https://codepen.io/kzjnqteu/pen/YzrPNpV)ㄅ --- ## CSS_Flexbox(彈性盒子) 使排版變得更加方便；具有主軸起點、終點、尺寸與交錯軸起點、終點、尺寸的特性 方便frontender進行布局規畫 ![](https://i.imgur.com/GEhjWuR.png) ---- | 屬性定義 | | -------- | |justify-content 主軸線排版| |align-items 交錯軸線排版| |flex-wrap 換行(當子元素數量多時)| |align-content| |flex-direction 將內容物直向排列| |order 對「子元素」排列順序| |flex-basis、flex-grow、flex-shrink (子元素)個別調整長度，「伸展」、「壓縮」的比例| |align-self 個別調整子元素在交錯軸線的位置| ---- [詳細資料](https://w3c.hexschool.com/flexbox/4a029043) Of course you can [review it.](https://codepen.io/peiqun/pen/WYzzYX?editors=1100)