CSS筆記
===
###### tags: `web` `frontend`
## 加入方式
- Inline Style
```html=
<h1 style="text-align: center; color: red">Test</h1>
```
- Internal Style Sheet
```html=
head中
<style>
#demo{
...
}
</style>
```
- External style sheet
```html=
<link rel="stylesheet" type="text/css" href="style.css">
```
**優先權Inline Style ＞ Internal Style ＞ External Style**
- 若是要套上自己寫的css要注意順序
```html=
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
```
## 選擇器
```css=
selector{
屬性: 設定值;
}
```
若要選擇一個class則須加上``.``
```css=
.class{
屬性: 設定值;
}
```
若要選擇一個id則須加上``#``
```css=
#id{
屬性: 設定值;
}
```
## 常見屬性
```css=
color: red; /*字體顏色*/
width: 200px; /*寬度 可用px、%*/
height: 50%; /*高度*/
min-width: 150px; /*指定最小寬度*/
max-height: 200px; /*指定最大高度*/
font-size: 16px; /*字體大小*/
font-weight: bold; /*粗體*/
font-family: 新細明體,"Times New Roman"; /*字型*/
line-height: 1.5; /*行距 1.5、2em、220%*/
text-decoration: underline; /*底線*/
/*line-through:中線 none:沒線條*/
text-align: center; /*文字居中*/
border: 1px solid black; /*邊框*/
border-style: solid;
/*solid:實線 dotted:虛線 dashed:寬虛線 double:雙條線 groove:雙條線外粗 ridge:雙條內粗*/
cursor: pointer; /*游標移到按鈕或輸入欄會變點擊的手勢*/
list-style-type: none; /*清單預設圖案清除*/
```
## 擬態選擇器
```css=
/*滑鼠移動到上面時改變顏色*/
.test:hover{
color: pink;
}
/*滑鼠點擊時改變顏色*/
.test:active{
color: pink;
}
/*游標在input輸入欄位中 改變邊框顏色*/
.test:focus{
border-color: pink;
}
```
## CSS Reset
瀏覽器會套用一些預設的CSS樣式，如果需要清除掉
```css=
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
```
## 區塊元素 行內元素
**block** 會自己佔據一整列，所以會自動換行 ex: div、h1、p。
**inline** 則可以在別的元素後面，寬高由內容大小決定 ex: span、a。
**inline-block** 有block的特性可以設定寬高，但是又像inline不會自動換行。
ex: ul li 由block改inline
```css=
ul,li{
display: inline;
}
```
## 後代選擇器
可以指定某個class中的某個元素套用CSS
```css=
/*class中的div中的p元素顏色改為藍色*/
.class div p{
color: blue;
}
```
```css=
/*class中的所有p元素顏色改為藍色*/
.class p{
color: blue;
}
```
```css=
/*class中的所有第一層p元素顏色改為藍色*/
.class>p{
color: blue;
}
```
```css=
/*同時擁有hihi和test的class的元素才會吃到屬性*/
.hihi.test{
color: blue;
}
```
### 小坑
屬性要套到哪個元素時須注意路徑是否正確
像是``div``包``ul``時，想用``flex``做並排menu
要注意``flex``是要設定在``ul``中而不是``div``中
而``ul``中包的連結``a``若要設定去底線、字體顏色
要把屬性設定在``a``中，而不是``li``中
背景顏色則要放在``li``中
## Box Model
- content: 內容
- border: 邊框
- padding: 內容到邊框之間的留白
- margin: 此元素和其他元素的距離
**計算width、height也會把padding、border計算進去
margin則不記入**
用法
```css=
content{
border: 5px solid red;
}
content{
/*上下左右各5px*/
padding: 5px;
/*順序為上右下左各1px 1px 3px 5px*/
padding: 1px 2px 3px 5px;
/*順序為上下各5px 右左各8px*/
padding: 5px 8px;
}
content{
/*用法和padding一樣*/
margin: 1px 2px 3px 5px;
}
```
### 區塊左右置中
```css=
content{
margin: 0 auto;
}
```
## Box-Sizing
如果在設計Box時不想再另外計算padding、border的值
可以用 Box-Sizing (CSS3語法)
```css=
/*test的寬度固定100px 其他會自動調整*/
test{
box-sizing: border-box;
width: 100px;
padding: 5px;
border: 1px solid black;
}
```
```css=
/*沒有指定border-box時 預設*/
box-sizing: content-box;
```
## 兼容性
較舊瀏覽器版本可能不支援較新語法
可以加上前綴詞
```css=
test{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-
}
```
## Float
在排版時若是想用浮動的方式(想讓元素並排) 可以用float
使用上要注意父元素大小，若超過會換到下一行
```css=
test{
float: right;
float: left;
}
```
用完之後接在後面的元素記得``clear``
```css=
clearfix{
clear: both;
}
```
## Position
Float常用於需要讓元素並排的狀況
若是需要讓元素重疊時則可使用相對定位、絕對定位
### static
``static``是預設值。任何套用 position: static 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。
### relative
在一個設定為相對定位(position: relative)的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到其他元素所在的位置。
```css=
.relative{
position: relative;
top: -20px;
left: 20px;
}
```
### fixed
若是想讓區塊就算頁面滑動也固定位置的話，可以使用``fixed``。
固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。
```css=
/*固定在右下角*/
.box{
width: 150px;
height: 150px;
right: 0;
bottom: 0;
position: fixed;
}
```
### absolute
``absolute`` 與 ``fixed`` 的行為很像，不一樣的地方在於 absolute 元素的定位是在他所處上層容器的相對位置。
如果這個套用 position: absolute 的元素，其上層容器並沒有「可以被定位」的元素的話(position: relative)，那麼這個元素的定位就是相對於該網頁所有內容（也就是 body 元素）最左上角的絕對位置，看起來就是這張網頁的絕對位置一樣，所以當你的畫面在捲動時，該元素還是會隨著頁面捲動。
```css=
/* 如果沒有設定relative，就算container是box的父元素，
* box在沒有找到relative的情況下，會去定位在瀏覽器視窗(body)上
*/
.container{
position: relative;
}
/*box在container中的右下角*/
.box{
position: absolute;
right: 0;
bottom: 0;
}
```
### z-index
在絕對定位之下元素可以重疊，所以會有順序(圖層)覆蓋問題
可以用``z-index``解決
```css=
/*z-index後的數字越大會在越上面，使用時1~30為佳*/
.box1{
position: absolute;
z-index: 20;
}
.box2{
position: absolute;
z-index: 10;
}
.box3{
position: absolute;
z-index: 3;
}
```
## 背景圖片
若想插入背景圖片可用
```css=
.box{
/* ../ 表回到上一層目錄*/
width: xxx;
height: xxx;
background-image: url(../img/bg.png);
background-size: xxx; // Ex: 500px、100%
}
```
### 背景大小
```background-size: auto | length | percentage | cover | contain```
1. auto 為預設值，表示原圖尺寸。
2. length、percentage 指定圖片大小或比例 Ex: 500px、100%。
3. cover 為背景圖小於所在的內容，而背景圖又不適合使用repeat，此時就可以採用 cover 的方式，使背景圖放大至內容的大小；
又或者圖片大於所在內容，選擇把圖片縮小至所在內容，再以定位方式來讓圖片固定在中間(實用)。
4. contain 與cover正好相反，主要用於背景圖大於所在內容，但卻需要將背景圖完整呈現，此時就可採用contain的方式，使背景圖縮小至內容的大小。
```css=
.box{
background-image: url(../img/bg.png);
background-size: xxx;
}
```
### repeat
如果背景圖片色系幾乎一樣可以截小部分讓他在範圍內重複出現就好，還可節省空間，預設為開啟
```css=
.box{
background-image: url(../img/bg.png);
/*預設為開啟 沿x軸重複*/
background-repeat: repeat-x;
/*可設定為關閉*/
background-repeat: no-repeat;
}
```
### 背景顏色
在同一區塊中，若是想在背景圖片覆蓋的地區外有顏色，可以使用
```css=
.box{
background-color: pink;
}
```
這會在背景圖片覆蓋的範圍外顯示，也就是把其他空白的地方填滿而不會蓋過背景圖片，像是只沿著x軸延伸的背景圖片，文字過多時會超出背景圖片到空白的地方。
但只用``background``來設定背景顏色則會依照代碼順序來覆蓋對方
```css=
.box{
background-image: url(../img/bg.png);
background: pink;
}
```
### 背景透明
```css=
// 以白色背景為例，讓它透明化
background-color: rgba(255, 255, 255, 0.70);
```
### 背景圖片位置
如果想更改圖片位置時
```css=
.box{
/*右下角*/
background-position: right bottom;
/*百分比寫法*/
background-position: 100% 100%;
/*也可以用px來推移*/
background-position: xpx ypx;
/*也可以用說明文字*/
// 左右 上下
background-position: center center;
}
```
### 表單 select 移除箭頭
```css=
// 移除箭頭樣式
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
// 改變右邊箭頭樣式
background-image: url("../img/icons_down.png");
background-repeat: no-repeat;
background-position: right center;
```
### 圖片固定或滑動
```css=
.box{
background-attachment: fixed、scroll;
}
```
### 縮寫
以上分開語法都可以縮寫成一行
```css=
.box{
background: url(../img/bg.png) pink repeat-x right bottom;
}
```
### 背景顏色漸層
```css=
/* 由上到下 從黑到黃漸層 */
background: linear-gradient(black,yellow);
/* 由右到左 從黑到黃漸層 要注意瀏覽器支援度 可能要加上前綴詞 */
background: -webkit-linear-gradient(to left,black,yellow);
/* to right、to left top ... */
```
整個頁面背景顏色想要漸層時，常遇到下面問題
1. 內容高度不夠，所以自動 repeat 導致顏色分成好幾塊。
2. 就算設定 html 高度 100%(瀏覽器高度)，當內容超過 100% 時，也會因為 repeat 多出一塊。
解決方法有三個
1. html background 加入 ``fixed`` 來固定背景，讓他再向下延伸時背景宛如固定在後方一樣。
```css=
html{
background: linear-gradient(#E4D18F, #D85A66) fixed;
}
```
2. body 最小高度為 100% 瀏覽器高度即可(效果最好)。
```css=
body{
background: linear-gradient(#E4D18F, #D85A66) fixed;
min-height: 100vh;
}
```
3. 用一個 div 來包覆整個內文，並設背景顏色在此 div 中，然後 div 的高度設100%，但此時高度還是因為內文而決定，所以也把 html, body 都設成100%
```css=
html, body{
height: 100%;
}
#container{
height: 100%;
background: linear-gradient(#E4D18F, #D85A66);
}
```
## 文字隱藏技巧
在header h1中，網頁標題(logo)想以圖片方式呈現，但是h1又想輸入文字好讓爬蟲程式抓到時
Ex:
```html=
<header>
<h1><a href="#">IM logo</a></h1>
</header>
```
```css=
header h1 a{
background-image: url(../img/logo.png);
width: xxx;
height: xxx;
/*<a>是行內元素 要改為block*/
display: block;
}
```
想讓圖片上面的文字IM logo在頁面上隱藏，可以使用下面技巧
```css=
header h1 a{
background-image: url(../img/logo.png);
width: xxx;
height: xxx;
display: block;
/*首行縮排 這會讓IM跑到h1外 若要縮排兩個字則是 2em*/
text-indent: 101%;
/*文字不換行 讓IM logo都跑到h1外*/
white-space: nowrap;
/*讓超出去的文字隱藏*/
overflow: hidden;
}
```
## 文字空白
## 文字間距
```css=
letter-spacing: xpx;
```
## 圖示與文字並排
網頁中聯絡方式的地方可能是一個facebook的圖示加上文字[粉絲團]
但是圖片下方會有留白，無法做到圖文並排(垂直置中)
1. 可以使用``float``
```html=
/*文字要用sapn包起來*/
<li class="facebook">
<a href="#">
<img src="img/Facebook-icon.png" alt="fb">
<span>粉絲團</span>
</a>
</li>
```
```css=
li img{
float: left;
}
li span{
float: left;
}
```
2. 讓文字與圖片垂直方向對齊``vertical-align``
## 表格常用屬性
1. 建立表格時，想要框線可以合在一起
```css=
table{
/*邊框合併為單一邊框*/
border-collapse: collapse;
/*預設值*/
border-collapse: separate;
}
```
2. 表格中每一格(td)的距離可以調整
```css=
table{
border-spacing: xpx;
}
```
## CSS技巧
### 圓弧
```css=
.box{
/*四角*/
border-radius: 0%;
/*50%變圓形*/
border-radius: 50%;
/*左上角 右上角 右下角 左下角*/
border-radius: 5px 0 5px 0;
/*左上*/
border-top-left-radius: 5px;
/*右下*/
border-bottom-right-radius: 5px;
}
```
### 單行文字垂直置中
```css=
.box{
/* 行距和高度一樣會置中 */
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
}
```
### 禁止反白文字
```css=
.title{
user-select: none;
}
```
### cursor 滑鼠
```css=
// 滑鼠覆蓋會有點擊的手勢
cursor: pointer;
// 滑鼠消失
cursor: none;
```
### 陰影
```css=
.box{
/* x軸偏移 y軸偏移 柔化程度 陰影顏色 內陰影(不加為外陰影) */
box-shadow: 5px 5px 15px gray inset;
/* 若有多種陰影可以用逗號分開 */
box-shadow: 5px 5px 15px gray,1px 1px 8px blue inset;
}
```
### 圖片不透明度
```css=
#myImg{
/* 預設是1，往下到0 */
opacity: 0.5;
}
```
## 雙層選單
## CSS權重
``HTML標籤``: 1分
``class``: 10分
``id``: 100分
``inline style``: 1000分
``!important``: Max
```css=
/*important用法*/
.box{
color: pink !important;
}
```
權重計算是累加的
```css=
.class p{
/*11分*/
}
#id .class .test p{
/*100+10+10+1=121分*/
}
```
若是權重相同則看順序先後
## RWD
要先在 head 中加上
```htmlmixed=
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
此步驟補充說明:
大多數移動瀏覽器，會當網頁為電腦版而會把版面撐到980像素。但是，這就讓網頁的版面都縮小， 使用者還要去做放大而不能直接閱讀。而這個 meta 標籤是為了防止這樣的情形發生 ，讓網頁顯示的寬度就直接是裝置的寬度， 不會把網頁硬塞。這段只要加在 HTML 的 <head> 裡頭即可。
- width=device-width
目前寬度 等於 設備寬度 適應各家裝置的大小，這樣寫CSS時就能放心的把版面寬度設為100%
- initial-scale=1.0
預設螢幕寬度 100% (最小0.25，最大5)
- maximum-scale=1.0
不讓使用者縮放，設一個scaling上限(最小0.25，最大5)
- user-scalable=no
禁止user-scaling
### 加入CSS3 Media Queries
方法一: 寫在style.css檔案中
```css=
@media screen and (max-width: 480px){
.class{
color: #000;
}
}
```
方法二:在 head 中插入外部連結
```htmlmixed=
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/small.css" />
```
### 指定寬度吃到樣式
寬度大於900px
```css=
@media screen and (min-width: 900px){
.class{
color: #333;
}
}
```
寬度小於600px
```css=
@media screen and (max-width: 600px){
.class{
color: #333;
}
}
```
寬度介於600px~900px
```css=
@media screen and (min-width:600px) and (max-width: 900px){
.class{
color: #999;
}
}
```
## parallax scrolling 視差滾動
>
>### parallax 說明：
>- 使用容器元素並將背景圖像添加到具有特定高度的容器中。
>- 然後使用background-attachment: fixed創建實際的視差效果。
>- 其他背景屬性用於完美地對圖像進行居中和縮放
>- 出處：
> - https://www.w3schools.com/howto/howto_css_parallax.asp
#### 固定背景，作出滑鼠向下滾動換背景，像是下列範例
- https://codepen.io/stefanjudis/pen/nrzHI
```htmlmixed=
<div class="parallax"></div>
<div class="text">文章</div>
```
```css=
.parallax{
background-image: url("圖像");
min-height: 500px;
/* 沒內文時可以看到的最小高度 */
background-attachment: fixed; /* 固定圖像 */
background-position: center center; /* 圖像置中 */
background-size: cover;
}
```
當文章的背景非透明時
向下滾動就會看到背景不動
文章向上蓋掉背景
背景2個以上時
因為設定差別只在圖像不同
所以也可以簡化 CSS 把圖像和固定屬性分開
```htmlmixed=
<div class="parallax img-1"></div>
<div class="text">文章</div>
<div class="parallax img-2"></div>
<div class="text">文章</div>
<div class="parallax img-3"></div>
<div class="text">文章</div>
```
```css=
.parallax{
min-height: 500px;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.img-1{
background-image: url("圖像");
}
.img-2{
background-image: url("圖像");
}
.img-3{
background-image: url("圖像");
}
```
>
> Reference: https://ithelp.ithome.com.tw/articles/10192878
>
## GRID
> Reference: https://www.wfublog.com/2017/08/complex-form-custom-grid-system.html
> Reference: https://alligator.io/css/align-justify/
<style>
.ui-infobar { display: none; }
</style>
Sign in with Wallet
Connect another wallet