這篇文章送給初踏入前端的小白們
也送給想創立網頁的朋友們…
承上篇…
上篇談過網頁骨幹 HTML ，這次不囉唆就來聊聊化妝大師 CSS
什麼是 CSS？
- CSS 為 Cascading Style Sheets 的簡稱，中文譯為「階層式樣式表」
- 為妝點 HTML 用，不可單3獨使用
- 工作為外觀上微調（字體、顏色、位置、對齊等等）
既然是妝點冷冰冰 HTML，CSS 可以加在 HTML 的哪裡？
- 行內 (inline) ：[較少用] 不需使用花括號 （優：方便快速；缺：當規範過多時易讀性差）
Ex: <div style=”border: 1px solid #000;”>文字</div>
- 內部 (internal) ：（優：樣式統一；缺：不方便找尋 HTML）
Ex:
<style>
div {
border: 1px solid #000;
}
</style>- 外部 (external) ：可拆分成多檔案管理（優：多彈性，可進行多視窗開發；缺：檔案多，需開發經驗）
Ex:
<link rel="stylesheet" type="text/css" href=”./iris_style.css">
__________________
“iris_style.css”
div {
css code;
}
CSS 格式：
指定的標籤{
被指定的標籤屬性
}
例子
CSS 中：
p {
color: yellow;
font-weight: bold;
text-align: right;
}HTML 中
<body> <p>I am Iris.</p> </body>
CSS 基本文字樣式：
1. 顏色
- 一般預設： {color: white;}
- Hex 編碼： {color: #fff;}
- RGB： {color: rgb(255, 255, 255)} 註：光學 255不能再高
2. 對齊方式
text-align: left 左/ right 右/ center 置中/ justify 左右填滿
3. 加入底線
text-decoration: underline 底線/ overline 線在上/ line-through 線穿過字
4. 大小寫
text-transform: uppercase 全大寫/ lowercase 全小寫/ capitalize 字首大寫
5. 間距
text-indent: 32px
text-spacing: 3px
text-height: 20px
6. 陰影
text-shadow: {3px 4px 5px black;}註：第一個數值代表陰影在x軸正向位置 第二個數值代表陰影在y軸負向位置 第三個數值代表陰影與原本文字距離 第四個數值代表陰影顏色
CSS 基本背景樣式：
1. 顏色
background-color: red;
2. 圖片
background-image: url(“在此附上連結”)
CSS 基本物件樣式：
1. 寬＆高
{
width: 300vw;
height: 100vh;
}
2. 陰影
同文字陰影表示方式
CSS 排版 3 元素：參考
邊框 border 、外邊margin、內邊padding
CSS 選擇器 (selector)：
- CSS 的選擇器分為三大類：全域、class 和 id
- 全域的調整會對所有元素產生作用
- class 會依據該 class 標籤的做設定
Ex:
HTML:
<p class=”iris”>Iris is here.</p>
CSS:
.iris {
text-color: red;
}- id 會針對單一一個指定 id 元素設定
Ex:
HTML:
<p id=”here”>Iris is here.</p>
CSS:
#here {
text-color: green;
}
使用 CSS 小常識：
- 網頁大小：1920 * 1080 px ( pixel：像素)
- 瀏覽器的預設字體為 16 px
- rgba(255,255,255, 0.4) 中的「a」 為 Alpha 「透明度」
- 常見單位介紹：px % vw/vh em
- 其他 CSS 概念：block、grid、flex…
CSS 還有太多技術、太多大小觀念和細節需要注意和留心，才能完全呈現出與自己心中同樣完美的網頁樣貌。如果把網頁比做一幅畫，沒有 HTML 就像沒有了畫布，沒有 CSS 就如同失去了顏料。當畫打好稿，上了色後，其餘最重要的就是生命力和靈動感；同樣地，網頁倘若沒有 Javascript 的幫助，就好像沒有了靈魂，無法獲得迴響。因此，我們才會有我們俗稱的前端三兄弟：HTML、CSS、Javascript 的說法出現。如果決意踏入前端，或是有興趣加深加廣的人，不妨可以參考我的「JS 心得日記」＆ 「免費 HTML&CSS 英文資源」或是 「最新HTML&CSS 線上課程（全中）」
歡迎加入由我創立的程式小白臉書粉絲小群：https://www.facebook.com/groups/936052100195289/?epa=SEARCH_BOX
此為專為網頁/Python/ Javascript 初學者創建的討論平台，定時會貼出有用學習資訊，上面也有許多初學者能一起切磋交流，真心想踏入前端＆快快成長的話，我們張開兩手歡迎你！
