馬米思個人紀錄站

div:selection{
color:black;
background-color:yellow;
}
div:first_letter{
font-size:36px
}
div:first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h24m


div:first-child::first_letter{
font-size:36px
}
div:first-child::first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h25m

Talking about pseudo class & pseudo elements :: detail
https://youtu.be/Vafp5xr_bxk?t=1h29m26s

Talking about text sizing, useing by rem & em,
tell you what's different between this two s
https://youtu.be/Vafp5xr_bxk?t=1h33m

Module Overview 
https://youtu.be/Vafp5xr_bxk?t=1h48m

範例一
https://youtu.be/Vafp5xr_bxk?t=1h57m30s
body{
width:500px;/*若未寫 則是取決與視窗大小*/
}
#header{
width:100%;/*此處的寬度取決於body*/
height:70px;
background-color:#000;
z-index:10;
position:fixed;/*keep top of the page*/
}
#header li{
display:inline;/*僅用來next to each other*/
}

CSS Box Model
https://youtu.be/Vafp5xr_bxk?t=2h4m14s

下面這個屬性可以讓我們快速了解在扣除margin&padding後，
仍然剩下多少空間。
https://youtu.be/Vafp5xr_bxk?t=2h11m45s
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Elements interacting
The float property
*doesn't apply to absolutely positioned elements
position:absoulted; <<< it's meaning this.
https://youtu.be/Vafp5xr_bxk?t=2h14m38s

overflow:auto; /*可以自動包覆超出的元件*/
text-align:center;/*不下在header li 而下在header 意指以父元素控制置中*/
vertical-align:top;/*必須下在需齊頭的元素上 這邊下載box 即是#modules-block的li的概念*/
margin-top:10px;/*此範例中一樣下在父元素*/

Example Queries
https://youtu.be/Vafp5xr_bxk?t=2h39m26s

CSS Importing
https://youtu.be/Vafp5xr_bxk?t=2h42m15s
 

範例中有提到以下使用方式
#header li:not(:first-child){
display:none; /*除了第一個標籤，其餘的全隱藏*/
}

範例中，將內文分成兩欄式呈現
artical{
width:75vm;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}

Transformations: Translate/ Scale/rotate/Skew with CSS
https://youtu.be/Vafp5xr_bxk?t=3h18m50s

範例
#resize-me{
height:100px;
width:100px;
background-color:blue;
transform:translate(400px, 400px) scale(2, 2);
}

範例 淡出淡入
https://youtu.be/Vafp5xr_bxk?t=3h32m50s
nav a{
text-decoration:none;
font-weight:bold;

transition-property:background-color;
transition-duration:5000ms;
transition-delay:10ms;
transition-timing-function:ease-out;
}
nav a:hover{
text-decoration:underline;
background-color:yellow;

transition-property:background-color;
transition-duration:5000ms;
transition-delay:10ms;
transition-timing-function:ease-in;
}