劉任昌text editor文字編輯器CSS動畫animation

德明科大劉任昌程式設計

第一堂課要了解文字編輯器（text editor）、程式解譯器（interpreter）、程式編輯器（compiler）與程式整合開發環境（IDE, Integrated Development Environment）。

課程評分是「自己動手做的程度、品質、了解程度、自我發揮的創意。「動手做」絕對重要！有做，就及格，可以做得慢、可以補教、可以請同學或老師帶你一步一步地做。

CSS=Cascading Style Sheet

header標題 主要是依照w3shools的內容上課 參考Harvard University CS50教學內容 frame框架,寬度width

第一次上課影片

wikipedia介紹CSS

只需要關鍵指令width, height, src=source一定要放在括號內

這個區塊div=division, divide分開,向右移動50點(50 pixels to the right） 向下移動100點（100 pixels down from its current position.）

下午班級的完整程式碼

  <style> 
  .abc{
  margin: 50px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: scale(2,3);
}
  
H2{background-color:gray;
   color:yellow;
text-align: center;
}
h1{
  border: 20px solid darkgreen;
  height:60px;
  background-color: orange;
  color: white;
  animation: mymove 5s infinite;
  text-align: center;
  border-radius: 50px;
}/*註解給人看電腦跳過radius半徑,diameter直徑*/
@keyframes mymove {
  50% {transform: rotate(-10deg);}
}
</style>
<h1>德明科大劉任昌程式設計</h1>
<p style="font-size: 20px; text-height: 1.5;">第一堂課要了解文字編輯器（text editor）、程式解譯器（interpreter）、程式編輯器（compiler）與程式整合開發環境（IDE, Integrated Development Environment）。</p>
<p style="font-size: 20px; text-height: 1.5;">課程評分是「自己動手做的程度、品質、了解程度、自我發揮的創意。「動手做」絕對重要！有做，就及格，可以做得慢、可以補教、可以請同學或老師帶你一步一步地做。</p>
<h2>CSS=Cascading Style Sheet</h2>
header標題
主要是依照w3shools的內容上課
參考Harvard University CS50教學內容

frame框架,寬度width

<h2>第一次上課影片</h2>
<iframe width="560" height="315" 
src="https://www.youtube.com/embed/CfxLSpPDx38?si=B0MN90nZV06CnYCw"></iframe>

<h2>wikipedia介紹CSS</h2>
只需要關鍵指令width, height, src=source一定要放在括號內
<iframe width="100%" height="500" src="https://zh.wikipedia.org/zh-tw/CSS"></iframe>

<div class="abc">
這個區塊div=division, divide分開,向右移動50點(50 pixels to the right） 向下移動100點（100 pixels down from its current position.）
</div>