前端工程師需要學會的語法,您參透了幾項?
有時在 HTML 中,前端工程師會對同一個標籤給予兩個以上的 Class 名稱,如以下所示:
推薦閱讀:
簡易HTML5教學讓沒有相關背景的人,也都成為程式工程師
網頁設計學習零負擔-簡易的HTML5教學
HTML5教學教你網頁設計標籤的活用
讓你實現目標與夢想的技術實力-Java課程
透過對的Java課程,讓你從茫然的畢業生中脫穎而出!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了
有時在 HTML 中,前端工程師會對同一個標籤給予兩個以上的 Class 名稱,如以下所示:
<div class="first second"></div>
對於這種有兩個以上的 Class 名稱的 HTML,其 CSS 選擇器可能會表示如以下三種。你分辨得出這些 CSS有什麼不同呢?
/*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second對於 CSS 的初學者來說,上述三種 CSS 因為長得很有點像,所以常常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號,到底差在哪裡? 前端工程師分別講解如下:
1. 兩個 class 中有空格的例子:五個區塊中,階層必須是要在 first 區塊之下的 second 區塊才會顯示黑底白字的 CSS 設定
2. 兩個 class 中沒有空格的例子:五個區塊中, div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定
3. 兩個 class 中有逗號的例子:五個區塊中,只要 div class 名稱中有 first 或是 second 的區塊,就會顯示黑底白字的 CSS 設定
註 : 以上三個範例的 HTML 碼都一樣推薦閱讀:
簡易HTML5教學讓沒有相關背景的人,也都成為程式工程師
網頁設計學習零負擔-簡易的HTML5教學
HTML5教學教你網頁設計標籤的活用
讓你實現目標與夢想的技術實力-Java課程
透過對的Java課程,讓你從茫然的畢業生中脫穎而出!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了