HTML CSS 學習心得

基礎應用 及 筆記

我想從事WEB後端開發，但我認為最基本的前端也是必須知道，這段時間學到基礎HTML的標籤、CSS的外觀變化，簡單動畫的使用、HTML5的SVG作圖、Pug模板引擎在撰寫HTML文件時，結構化的簡化語法，在視覺及思考上都感覺非常美好、emmet幫助簡寫各種HTML的標籤、CSS的前置處理器SASS，其變數及mixin功能，幫助設計網頁時可以系統化的整理。

<script src=”https://gist.github.com/Min-Feng/96a312ec95b8b8c0e2577d4dd68cb133.js"></script>

我是在codepen這個網站進行前端的學習，裡面有非常多美麗的設計，你可以看到這些設計是怎麼藉由HTML跟CSS表現出來，也可以註冊後，開啟一個newpen專案，直接在上面撰寫html、CSS、JS，非常適合用來學習前端。

以下是我練習時的小作品，分別是靜態網站名片的呈現[1]，初級應用Jquery進行簡易的計數器[2]以及購物清單的增減[3]。

[1] https://codepen.io/CaesarTsai/pen/vaEEYE

[2] https://codepen.io/CaesarTsai/pen/qybjXR?editors=1010

[3] https://codepen.io/CaesarTsai/pen/MBpWRQ?editors=0010

接下來的內容會紀錄這幾天學習的筆記，來加強一下印象，日後還會繼續學習jquery、RWD、bootstrap、Vue.js，都只是學習基本的應用，好好了解前端的工作內容。

再來會好好把四本【你所不知道的JS】好好讀完，開始學習使用node.js進行後端開發，畢竟我目前最想從事的還是後端。

<div>元素是block element 會換行

<span>元素是inline element 不會換行

<h1>等標籤，可視為有預設style的<div>

賦予class，可重複給予多個class，Example:<div class=”button button_black”></div>，使用CSS套用樣式時，會先套用button的樣式然後才套用button_black的樣式

CSS位置定位(position)有四種方式:static、relative、absolute、fixed，其中static是所有元素的預設方式，通常使用absolute令元素對其父元素做位置排版，父元素要設定為非static的方式，才可以正常使用absolute，否則會依照整個網頁(HTML元素)做定位

用position設定位置，偏移後不會影響其他元素的排列，而使用padding或margin會影響其他元素的排列

CSS中，框線(border)的設定佔有體積，若不希望影響排版，可以將框線往內縮，使用box-sizing:border-box

文字排版 text-align:center、right、left

切分版面時設定vertical-align:top、middle、bottom可以設定與父元素的對齊方式

元素HTML標籤間的空白、換行及Tab字元將佔用一格空間，斷行會造成元素之間有小間隙，若是把兩個Inline-Block元素寫在同一行，就可以消去此間隙，又或者是將父元素Font-Size設為0px，再明確指定子元素Font-Size

使用偽元素(pseudo element)一定要設定content，即使為空白""也可以，偽元素並非真實存在DOM於結構中，因此使用Jquery或JS的選擇器，無法直接操作偽元素

設定animation-dely為負的時間，當一開始網頁載入時，可以避免有停頓的感覺，配合keyframs來使用

label為input checkbox的文字標籤

.one.two{ }，.one .two{ }，或.one, .two{ }，三者的不同處

Ref: CSS中的多重選擇器

第一個的 one 和 two 中間沒有包含空格，這個的意思表示，某個區塊必須同時具有 one 和 two 的 class 時，才能被 CSS 所選擇到到。

第二個的 one 和 two 中間包含空格，意思是指，我必須要是在 one 裡面的 two，才會被選擇到。

第三個的 one 和 two 中間包含逗號，意思是指 class 中有 one 或 two，都會被編輯器所選擇到。