###### tags: `六角筆記王` `前端筆記` `CSS` # 基礎CSS教學重點 | html | CSS | | -------- | -------- | | 結構 | 樣式 | ## 包含所有標籤及偽元素 如果要針對所有元素`*`及偽元素`*:before`,`*:after`設計css ```css /*可以用,隔開標籤*/ *,*:before,*:after{ box-sizing: border-box; } ``` <br> ## HTML標籤選擇器 直接指定html標籤當選擇器 ```css /*h1就是選擇器*/ h1{ color:blue; font-size:13px; } 選擇器{屬性:設定值;} ``` <br> ## 擬態選擇器 :hover 最常用在a標籤，為了增加使用者體驗 基本語法(滑鼠移到a標籤上方時) ```css a:hover{ color: red; } ``` 滑鼠按下a標籤時有反應 ```css a:active{ color: red; } ``` 不想要有下底線 ```css a:hover{ text-drection: none; } ``` <br> ## 類別選擇器 class . 同個標籤想要做不同的樣式，想要客製化樣式 基本語法 ```html <p class="style1">段落一</p> <p class="style2">段落二</p> ``` ```css .style1{ color:red; } .style2{ color:blue; } ``` ## 後代選擇器 有父子層的概念，可以提升效率 ```html <div class="style1"> <a href="#">red</a> <a href="#">red</a> <p class="conntent">段落</p> </div> ``` ```css /*類別包標籤*/ .style1 a{ color: red; } /*類別包類別*/ .style .content{ font-size: 20px; } ``` ## 使用 CSS 優化文字排版 ### 調整字型 font-family ```css font-family: 字型; ``` ### 字型大小 font-size ```css font-size: 16px;/*預設*/ ``` ### 字型粗細 font-weight ```css font-weight:normal;/*預設字體厚度*/ font-weight:bold;/*常用的粗體字*/ font-weight:lighter;/*比粗體更粗一點*/ font-weight:500;/*100~900 數字越大越厚，數字小於 500 似乎效果不明顯*/ ``` ### 行距 line-height - 他會根據你的自行大小決定行高 例如字型大小18 行距1.5 所以行高27， - 文字內容會垂直置中 - 最常用是1.5倍 ![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F31ee6a41-4a34-48b4-b2fe-933a7d3a2041%2F_2021-06-23_1.07.05.png?table=block&id=d249993a-b7c6-4206-8a2f-0e4cdf893121&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=1150&userId=&cache=v2) ```css line-height: X倍; ``` ### 文字如何對齊 text-align ```css text-align: left;/*預設*/ ``` ### 首行縮排(空白) text-indent 通常華人文章會首行縮兩個字，假如字型大小16px ```css text-indent: 32px;/*縮兩個字*/ ``` ### 文字的線 text-decoration 1.下底線 ```css text-decoration: underline; ``` 2.刪除線(中線) ```css text-decoration: line-through; ``` ### 字和字的距離 letter-spacing ```css letter-spacing: 距離; ``` ## 線條 (極重要!!!) ```css border: 1px solid blue; /*線條粗細 線條樣式 顏色*/ ``` ### 線條樣式(實心線、虛線、圓點虛線) 1.實心線 ```css border: solid; ``` 2.虛線 ```css border: dashed; ``` 3.圓點虛線 ```css border: dotted; ``` ### 單一線條 ```css border-left: /*左邊*/; border-right: /*右邊*/; border-top: /*上邊*/; border-bottom: /*下邊*/; ``` 快打法 ```css border: 1px 1px 1px 1px ; /*上右下左*/ ``` ## 文字換行word-wrap 可以指定換行的方式，並可以強制文字不換行。 ### 文字強迫換行，英文字會被切一半 ```css word-break: break-all; ``` ### 依單字換行 ```css word-wrap:break-word; ``` ### 死都不換行 ```css white-space:nowrap; ``` ## 滑鼠形狀大全 可以增加使用者體驗 ```css cursor: auto cursor: crosshair cursor: default cursor: e-resize cursor: help cursor: move cursor: n-resize cursor: ne-resize cursor: nw-resize cursor: pointer cursor: progress cursor: s-resize cursor: text cursor: w-resize cursor: wait cursor: inherit ```