css 選取器 {}

--- tags: css, 選取器, --- [TOC] # css 選取器 {} ``` p{ } ``` ▲ 一般選取器 ``` .a{ } ``` ▲ class 選取器 ``` #a{ } ``` ▲ id 選取器 ``` nav p{ } ``` ▲ 後代(全選)，選取器 ``` nav>p{ } ``` ▲ 只選(子層)，選取器 <hr> # css 文字樣式相當於 html 文件標籤與 html{ }寫法相等 ``` :root{ font-size: 16px; } ``` **字型** 先以微軟正黑體為顯示，若找不到則依序向下找 ``` body{ font-family: '微軟正黑體',Arial, Helvetica, sans-serif; } ``` **文字樣式:** ``` .font{ /* 設定字體大小，px em、rem */ font-size: 20px; /* 設定斜體 */ font-style: italic; /* 設定粗體 */ font-weight: bold; /* 設定文字都大寫，但句子第一個字較大 */ font-variant: small-caps; } .text{ /* 對濟有 left/center/right */ text-align: left; /* 畫線 none、underline、overline、line-thoutht */ text-decoration: underline; /* 句頭縮排 */ text-indent: 32px; /* 文字陰影依序 1水平(正向右) 2垂直(正上負下) 3模糊系數(越大越糊) 4顏色(rgb a=透明度) */ text-shadow: 10px 10px 5px rgba(0, 255, 0, 0.5); /* 文字間距 */ letter-spacing:3px; /* 文字行距 */ line-height: 25px; } ``` **連結樣_設定(速記 LoVe HAte):** ``` /* 順序不能顛倒!!! /* 一般狀態 */ a:link{ color:red; text-decoration: none; letter-spacing: 20px; } /* 拜訪過後的狀態 */ a:visited{ color:coral; } /* 滑鼠移入時的狀態 */ a:hover{ color:blue; text-decoration: underline; background-color: yellow; } /* 滑鼠點擊時的狀態 */ a:active{ color: blueviolet; font-size: 12px; } ``` <hr> **px、rem、em 差異:** ``` <h1>rem em 差異</h1>   <div style="font-size: 1rem;"> rem預設字體大小 <div style="font-size: 2rem;"> rem預設字體乘2 <div style="font-size: 3rem;">rem預設字體乘3</div> </div> </div> <hr> <h1>em示範</h1>  <div style="font-size: 1em;"> em預設字體大小 <div style="font-size: 2em;"> em上一層乘2  <div style="font-size: 3em;">em上一層乘3</div> </div> </div> ``` --- # Background 屬性 (背景圖片) **加入"背景圖"** ``` background-image: url("https://"); ``` **釘住圖片(滾動在同一個圖面上)** ``` background-attachment: fixed; ``` **濾鏡效果，背景模糊 (數值)** ``` backdrop-filter: blur(10px); ``` **圖片重複<mark>橫排</mark>(x)** ``` background-repeat: repeat-x; ``` **圖片重複<mark>直排</mark>(y)** ``` background-repeat: repeat-y; ``` **圖片<mark>不重複</mark>** ``` background-repeat: no-repeat; ``` **位置調整 (3種方式)**<mark>background-position</mark> ``` background-position: 50% 50%; background-position: right bottom; background-position: 550px 200px; ``` **填滿背景** <mark>cover</mark> 可縮放填滿父容器，如果背景圖跟父容器尺吋比例不同，將失去部分 <mark>contain</mark> 縮放背景圖片，一邊碰到父層容器，就會停止縮放 ``` background-size: cover; background-size: contain; ``` **多背景圖** * 第一張圖在最上面 * 透過","調整不同圖片屬性 ``` background-image: url("https://picsum.photos/600/200/?random=1"), url("https://picsum.photos/600/200/?random=2"), url("https://picsum.photos/600/300/?random=1"); background-repeat: no-repeat; background-position: left top, left 100px, left bottom; ``` **漸層屬性** <mark>linear-gradient</mark> * 方向/角度設定(第一位置設定)<mark>可不設定</mark> * 漸層色設定(第二、第三...)<mark>至少2色以上</mark> ``` background:linear-gradient(red,yellow,white); background:linear-gradient(45deg, red, yellow, white); background:linear-gradient(to right bottom, red, yellow, white, blue); ``` **放射漸層** <mark>radial-gradient</mark> ``` background-image: radial-gradient(white, yellow, red, blue) ``` --- # table 屬性 **框線**<mark>預設</mark> ``` border: 1px solid black; ``` **合拼框線**<mark>田</mark> * 將 td 與 tr 之間框線合拼 ``` border-collapse: collapse; ``` **表格 <mark>置中</mark>** 在有設定width(寬度)的情況下，<mark>margin:auto;</mark>可置中 ``` width: 75%; margin: auto; ``` **設定陰影(2type)** * 將格子顯示陰影 :(內光暈<mark>inset</mark>) 位置位置模糊度顏色; ``` box-shadow: 0 0 10px rgba(0, 0, 0, .5); box-shadow: inset 0 0 5px rgba(0, 0, 0, .5) ``` **hover效果(滑過)** ``` td:hover{ background: yellow; color:red; } ``` **自動選取<mark>tr:nth-child()</mark>** * tr:nth-child(odd)選取奇數橫排 * tr:nth-child(even)選取偶數橫排 ``` tr:nth-child(odd){ background: #ccc; } ``` **自動選取(自定規則)<mark>tr:nth-child(3n+1)</mark>** * (3n+1)→從第二排開始，每第三排被選取 ``` tr:nth-child(3n+1){ background: #ccc; } ```