Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/) # 第 6 節： CSS: The Very Basics ###### tags: `CSS` `Udemy` `The Web Developer Bootcamp 2021` 2021.04.16（Fri.）~04.19（Mon.） ## ● 上課筆記 ## 1. CSS Rules ```css= selector{ property: value; } ``` 假如說要讓所有h1元素變成紫色： ```css= h1{ color: purple; } ``` 假如說要讓所有img元素的寬高為100、200： ```css= img{ width: 100px; height: 200px; } ``` 假如說要讓第偶數個text input變成紅色的外框： ```css= input[type = "text"]:nth-of-type(2n){ border: 2px solid red; } ``` ## 2. 把CSS另外用成一個.css的檔案 另外用成一個.css的檔案後，記得要用一個link放到.html中，css的樣式才會生效。 **link：** 放在html中的`<head>`裡面 ```htmlmixed= <head> <title>Froms Demo</title> <link rel="stylesheet" href="my_style.css"> </head> ``` ## 3. Color Picker > 網站：[Picker](https://htmlcolorcodes.com/color-picker/) **Hex Color** 數字以二進位來表示。 ![](https://i.imgur.com/A3jhR7u.jpg) ## 4. CSS Text Properties （A）**text-align：** text-align的CSS屬性定義行內內容（例如文字）如何相對它的塊父元素對齊。 text-align 並不控制塊元素自己的對齊，只控制它的行內內容的對齊。 他是水平對齊！讓文字在 div 範圍內水平置中。 ```css= //行內內容居中 text-align: center; //行內內容向右側邊對齊 text-align: right; //行內內容向左側邊對齊 text-align: left; ``` （B）**font-weight：** font-weight CSS 屬性指定了字體的粗細程度。 一些字體只提供 normal 和 bold 兩種值。 ```css= //正常字體，與400等值 font-weight: normal; //粗字體，與700等值 font-weight: bold; //更粗字體，比從父元素繼承來的值更粗 font-weight: bolder; //更細字體，比從父元素繼承來的值更細 font-weight: lighter; //也可以用數字表示，數字由小到大為細到粗 font-weight: <數字1~1000> ``` （C）**text-decoration：** text-decoration 這個CSS 屬性是用於設置文本的修飾線外觀的（下劃線、上劃線、貫穿線/刪除線或閃爍）。 它是text-decoration-line, text-decoration-color, text-decoration-style , 和新出現的text-decoration-thickness 屬性的縮寫。 ```css= text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit; ``` * 設定值為以下： **[text-decoration-line](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-line)** 文本修飾的位置, 如下劃線underline，刪除線line-through **[text-decoration-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-color)** 文本修飾的顏色 **[text-decoration-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-style)** 文本修飾的樣式, 如波浪線wavy實線solid虛線dashed **[text-decoration-thickness](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-thickness)** 文本修飾線的粗細 （D）**line-height：** line-height CSS 屬性用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。 對於非替代的 inline 元素，它用於計算行盒（line box）的高度。 > 參考網址：[深入 CSS 之 line-height 應用](https://muki.tw/tech/css-line-height/) > 參考網址：[css行高line-height的一些深入理解及应用](https://www.zhangxinxu.com/wordpress/2009/11/css%e8%a1%8c%e9%ab%98line-height%e7%9a%84%e4%b8%80%e4%ba%9b%e6%b7%b1%e5%85%a5%e7%90%86%e8%a7%a3%e5%8f%8a%e5%ba%94%e7%94%a8/) > ```css= line-height: <Property Values> ``` * Property Values： 可以是normal（預設）、任何數字、長度（例如單位為px, pt, cm等等）、%、繼承inherit等。 （E）**letter-spacing：** letter-spacing 屬性用於設置文本字與字間的距離表現。 ```css= letter-spacing: <Property Values> ``` * Property Values： 可以是normal（預設，沒有任何距離）、任何長度（負數也可以）、繼承inherit等。 （F）**font-size：** font-size CSS 屬性指定字體的大小。 因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。 （不過常用px） （G）**font-family：** 就是字體！ font-family 允許通過給定一個有先後順序的，由字體名或者字體族名組成的列表來為選定的元素設置字體。 > 可用資源：[google fonts](https://fonts.google.com/) > 可用資源：[CSS fonts](https://www.cssfontstack.com/) > 可用資源：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family) > > 前兩個網站中的字體不一定每個電腦都有，所以可以用MDN中通用的即可。 > 或者說可以給多個，當使用者使用時，會自動從排序第一個的字體開始使用，如果無法使用，將會套用下一個字體。