10621
數位整合傳播 Week02 學習日誌
任課老師： 王曉璿
學 生： 林子涵
學 號：ADT106110
一、課程摘要
1. HTML5 CSS 基本介紹與應用
2. Webduino_Smart開發版基本設定與啟動
二、課程網路資源
1. https://www.w3schools.com/css/default.asp CSS 線上學習網站
2. 10621 數位整合傳播 week02 課程介紹.htm
3. Webduino_Smart開發版基本設定與啟動教學.htm
三、課程重要指令語法摘要
Id擺放位置
<p id=”123”>國立臺中教育大學</p>
影響id用# id僅呼叫一個
Ex：#myid 當呼叫myid時字體會改成large
影響class用. Class可呼叫多個
Ex：.center
xxx.css之檔案格式
#(.)xxx{
效果
}
注意不要用到html的東西
★製作步驟(希望以後的自己不要忘記方法而寫，雖然不確定對不嗚嗚)
1.先做好想要呈現的樣子
2.複製效果的部分貼到記事本修飾成對應格式存檔
3.存檔時將*.txt文字檔案改成全部檔案，檔名為xxx.css
4.在<head>與</head>之間設定連結
<head>
<link rel="stylesheet"
type="text/css" href="xxx.css"
/>
</head>
5.隱藏原本的效果(使用<!--效果-->隱藏)
6.儲存檔案，檔名index.html(我的有出現視窗問css的問題然後就成功了ya
7.測試是否成功
摘要CSS的語法和架構(前4個為我有用到的)
CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。
宣告 CSS 樣式的語法：
選擇器 {
屬性：設定值；
}
選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器
CSS 架構規則有 2主要部份: 選擇子(Selector) 及其對應一組的宣告
|
background-image |
背景圖樣(創一個資料夾放它比較好整理 |
|
font-family |
字體 |
|
font-size |
字型大小 |
|
color |
字型顏色(疑惑為什麼不是font-color |
|
background-color |
背景顏色 |
|
align-items |
物品對齊方式 |
|
text-align |
文字對齊方式 |
|
font-weight |
字寬 |
|
/*注解內容*/ |
注解 |
說明CSS display 的意義
1. CSS display 屬性(display: 顯示參數;)
讓網頁設計師可以自由設定網頁元素的顯示類型，CSS允許網頁設計師自由修改HTML 元素預設的這些顯示類型，透過的就是 CSS display 屬性。
* css不能獨立生存，css 的檔案充其量只是一堆語言
CSS display 屬性允許的顯示參數非常多，最常用到的是 none、block 與 inline 這三項
none 是將元素調整為＂不顯示＂的效果
block 是顯示為區塊元素
inline 則是顯示為內行元素
其它還包含比較少用到的 list-item(列表)、table (塊級表格)與 flex 等。
2. display:block與display:inline
display:block(區塊元素) → 區塊。元素會以區塊方式呈現，可以透過 float 或 position 屬性強制將元素顯示為行。
display:inline(內行元素) → 所有文字或圖片均不換行，也就是全部都會是同一行的意思
兩者的差別在於顯示所占用的空間與型態
block 的特性是可以設定高度（height）、寬度（width）、上方與下方距離。Ex： div、p、ul、li。
|
<div> |
讓其內容從新的一行開始顯示 |
|
<p> |
段落 |
|
<ul> |
標籤用來定義一個無排序的項目清單列表 |
|
<li> |
顯示個別項目的標籤，可用來顯示文字清單或超連結清單 一組 <ul></ul> 標籤中，原則上可以有無數組
<li><li> 標籤，用來標示不同的項目內容 <li></li> 標籤原則上預設為垂直排列，若要呈現水平排列的效果，就要使用 CSS |
inline 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度。
Ex： span、a、input、img、em。
|
<span> 文字 </span> |
不會打亂段落原本的版面配置 |
|
<a> |
元素用作超連結之用 |
|
< input> |
輸入框 |
|
<img> |
圖片 |
|
< em> |
強調 |
資料來源：
http://www.webtech.tw/info.php?tid=37
http://www.wibibi.com/info.php?tid=CSS_display_%E5%B1%AC%E6%80%A7
https://www.1keydata.com/css-tutorial/tw/
http://css-teach.7happy.com.tw/bas_syntax.php
四、學習心得
啊啊啊啊啊~~我覺得好難！要理解這些真的要花好多時間喔嗚嗚，我為了完成作業用了3~4個小時？？嗚嗚嗚嗚，至少完成了QQ，只是還是覺得用好久喔喔喔，大家都交了說。
原本還慶幸之後的時間是弄開發版，有時間可以問學伴關於CSS的是跟弄懂它，結果我忘了我自己的開發版名稱跟密碼= = ，給自己無限白眼，我就這樣度過了那有機會可以弄懂CSS的寶貴時光了了，想揍過去的自己一拳啊……。
在禮拜六能夠完成其實都多虧了某些人的學習日誌及原始碼，靠著讀學習日誌及對照原始碼總算是給他完成了，在這裡感謝蕭智元的原始碼還有其他我有參考小地方的同學~有你們我才終於完成嗚嗚
★☆如果用word會有打字卻把後面的字刪掉的問題按insert鍵就可以解決囉~