標籤彙整:css

【CSS】z-index

條件

  1. 內元素絕對定位(所有)
  2. 外元素相對定位
  3. 目標元素指定index

※z-index的數值代表優先度。
數字大,表示優先顯示的強度越強(排在前面)
數字小,表示優先顯示的強度越低(隱藏在後面)←反向操作:設負數讓元素被蓋住

範例

沒有設index的情況下,HTML下面的元素會蓋掉上面的元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 

綠色方塊的HTML在上面,藍色方塊的HTML在下面。
所以藍色方塊優先顯示,蓋掉綠色方塊

設定z-index,優先顯示目標元素

.box1
.box2
body
 position: relative //外元素相對定位

.box1,.box2
 width: 200px
 height: 200px
 border: 1px solid #eee
 
.box1
 background-color: #73c6a8
 position: absolute //內元素絕對定位
 z-index: 1
 
.box2
 background-color: #73c0c6
 position: absolute //內元素絕對定位

 margin-top: 50px
 margin-left: 50px

Display

.
.

 

 

 

 

 

 
設定index為1,優先顯示綠色方塊

【CSS】Width fix the list text

問題背景

<li>在不指定寬度的情況下,會自動填滿整行。
如果把border叫出來,就會很明顯。
例如:

  • 填滿整行的li
  • 填滿整行的li

可以佐以排版技巧來解決這個問題。

橫向排列:inblock

橫向排列只要指定display就可以解決問題

ul
 li 橫向排列不填滿
 li 橫向排列不填滿
 li 橫向排列不填滿
li
 border: 1px solid #000
 display: inline

Display

  • 橫向排列不填滿
  • 橫向排列不填滿
  • 橫向排列不填滿

縱向排列:float

使用float完成縱向排列

ul
 li 縱向排列不填滿
 li 縱向排列不填滿
 li 縱向排列不填滿
ul
 float: left

li
 border: 1px solid #000

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

 

注意:周邊元素必須指定clear

如果不指定clear的話,會變成這樣↓↓

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿

這段文字想要放在清單下方,但是跑到左邊來了QQ

 

 


解決法:周邊的元素指定clear。

ul 
 li 縱向排列不填滿 
 li 縱向排列不填滿 
 li 縱向排列不填滿 

p 這段文字想要放在清單下方,成功。
ul
 float: left
li
 border: 1px solid #000

p 
 clear: both 
 //該元素的左邊(left)、右邊(right)、兩邊(both)都不可以有任何東西,若有的話,該元素會自動往下移。

Display

  • 縱向排列不填滿
  • 縱向排列不填滿
  • 縱向排列不填滿
這段文字想要放在清單下方,成功

游標

説明

  1. 用 CSS 刻出游標樣式
  2. 抓取滑鼠位置
  3. 游標的位置隨著滑鼠移動而改變

範例

#cross
#cross
 position: absolute
 &:before,&:after
 content: ""
 display: block
 width: 60px
 height: 15px
 background-color: #fff
 position: absolute
 left: 50%
 top: 50%
 transform: translate(-50%,-50%) rotate(45deg)
 &:after
 transform: translate(-50%,-50%) rotate(-45deg)
window.addEventListener("mousemove", function(evt){
 
 var x=evt.pageX;
 var y=evt.pageY;
 
 cross.style.left=x+"px";
 cross.style.top=y+"px";
})

Display

CODEPEN

CSS first-child last-child

説明

【first-child】選擇在任何父元素下第一個出現的指定元素
【last-child】選擇在任何父元素下最後一個出現的指定元素

範例

first-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:first-child
 color: #68cccc

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面的第1個p,都會被選到然後變色

last-child

p 這是body下第1個p
p body之下第2個p
.parent
 p 這是parent下第1個p
 p parent下第2個p
p
 &:last-child
 color: #148282

.parent
 border: solid 1px #000

Display

這是body下第1個p

body之下第2個p

——以下開始parent div——

這是parent下第1個p

parent下第2個p

只要是任何父元素下面最後的p,都會被選到然後變色

CSS selector

説明

CSS Selector,用在撰寫CSS文件上的選擇器,
但是同樣也用於JavaScript的querySelector / querySelectorAll。

Greater than selector

CSS【>】選擇器:用來選擇直系子元素
※不是直接的子元素無法被選到

.parent
 p 這是parent下的直接子元素
 .mid
  p 這是parent下面的mid裡面的子元素(非parent直接子元素)
.parent > p
 color: #68cccc

Display

這是parent下的直接子元素

這是parent下面的mid裡面的子元素(非parent直接子元素)
————————————————–

第一行文字是 parent 下面直接的子元素,所以被 > 選到,改變顏色;
第二行字為 parent 下面間接的子元素,無法被 > 選到,維持原本顏色
※用空格選擇器則兩種情況都能被選到

Attribution Selector

指定的attr條件用[]包住

  1. 傳統選擇法:attr[]裡面的雙引號”要加反斜線抵銷(或是裡面的雙引號改使用單引號)
  2. ES6選擇法:整個querySelector用反引號`代替雙引號”包住,所以裡面的雙引號”不用加反斜線抵銷
.box(data-color="red") A
br
.box(data-color="white") B
.box
 width: 10px
 height: 10px
 border: 1px solid #000
 text-align: center
 padding: 100px
 
.red
 background-color: #f78e79
//傳統選擇法:裡面的雙引號"要加反斜線\抵銷
var redBox=document.querySelector(".box[data-color=\"red\"]");
//ES6選擇法:用反引號`代替雙引號"包住,所以裡面的雙引號"不用加反斜線\抵銷
var redBox=document.querySelector(`.box[data-color="red"]`);

redBox.classList.add("red");

Display

A

 

B

multiple selector

多重條件選擇器。

原理同CSS的多重條件選擇器,不留空白,直接在A條件後面加上B條件

.classA classA
.classB classB
.classA.classB classA and B
div(data-attrA="A") attrA
div(data-attaB="B") attrB
div(data-attrA="A",data-attrB="B") attrA and B
document.querySelector(".classA.classB");
//"<div class='classA classB'>classA and B</code></div>"

document.querySelector("div[data-attrA][data-attrB]")
//"<div data-attra='A' data-attrb='B'>attrA and B</div>"

not selector

指定不要選到包含某class / attr / element的元素

.apple apple A
.apple apple B
.apple apple C
.apple.banana apple D
const AllApple=document.querySelectorAll(".apple");
//▶︎(4) [div.apple, div.apple, div.apple, div.apple.banana]

const PureApple=document.querySelectorAll(".apple:not(.banana)");
//▶︎(3) [div.apple, div.apple, div.apple]
//全選所有.apple,然後去掉有包含.banana的,所以只有選到3個element

not selector:指定attr

指定某個attr不要被選到

input:not([type])

not selector:多重條件

指定多個條件為非選

input:not(.aa):not(.bb)

去背效果:mix-blend-mode

圖層混和模式 mix-blend-mode ,可以用來達成去背效果

他色底 + 黑内容:multiply

multiply 色彩增値

圖片色與背景色相乘,替換圖片的顏色

替換規則:

  • 他色*黑色=黑色
  • 他色*白色=他色

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: multiply

Display

▼原圖片

 

▼色彩增値後

 

所以圖片本來白色的地方變成他色(粉紅色),黑色則維持黑色

白色底 + 他色内容:screen

screen濾色

圖片色與背景色的補値相乘
替換規則

  • 他色*黑色=他色
  • 他色*白色=白色

※就是 multiply 的相反

範例

<div>
 <img src="https://goo.gl/lZvsBv" />
</div>
div
 background-color: #ff96a7
 width: 500px
 padding: 20px
img
 mix-blend-mode: screen

Display

▼原圖片

 

▼濾色後

圖片本來白色的地方維持白色,黑色則變成他色(粉紅色)

視差滾動

説明

文字隨著卷軸滾動,但背景圖片不動。
背景圖片利用 background-attachment: fixed 固定。

範例

.img
 h3 MO美女
body
 height: 2000px

.img
 width: 400px
 height: 300px
 background-image: url(https://goo.gl/HtiAOY)
 text-align: center
 background-attachment: fixed
 background-size: 50%
 h3
  color: white
  font-family: 微軟正黑體
  position: relative
  top: 150px

Display

MO美女

使用外部CSS與JS引入函式庫或框架

CSS 使用外部函示庫・框架

※link tag 寫在 head tag 裡面

外部CSS

<head>
 <link rel="stylesheet" href="這邊貼上CDN" />
</head>

外部JS

<head>
 <script src="這邊貼上CDN"></script>
</head>

本機開發:外部檔案

使用時機:

  • HTML, CSS, JS想要分別寫在3個不同的檔案。
  • 本機端開發
  • HTML, CSS, JS 3者在同一資料夾底下

外部CSS檔案

<head>
 <link rel="stylesheet" href="這邊貼上CSS檔名.css">
</head>

外部JS檔案

<head>
 <script src="這邊貼上JS檔名.js"></script>
</head>

Filter Control Panel

先備知識

範例

img(src='https://goo.gl/ESHnPA')
.text
 h2 Update CSS Variables with 
 span.h1 JS
 .controls
 //min最小值,max最大值
 //value初始值
 //data-sizing單位
 //step刻度單位 (default為1)
 label(for='spacing') Spacing
 input#spacing(type='range', name='spacing', min='10', max='200', value='10', data-sizing='px')
 .value 10px
 br
 
 label(for='blur') Blur
 input#blur(type='range', name='blur', min='0', max='25', value='1.5', step="0.01", data-sizing='px')
 .value 1.5px
 br
 
 label(for='brightness') Brightness
 input#brightness(type='range', name='brightness', min='0', max='1', step="0.01", value='1')
 .value 1
 br
 
 label(for='contrast') Contrast
 input#contrast(type='range', name='contrast', min='0', max='200', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='grayscale') Grayscale
 input#grayscale(type='range', name='grayscale', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='opacity') Opacity
 input#opacity(type='range', name='opacity', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='saturate') Saturate
 input#saturate(type='range', name='saturate', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='sepia') Sepia
 input#sepia(type='range', name='sepia', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='base') Base Color
 input#base(type='color', name='base', value='#ffc600')
 .value #ffc600
:root {
 --base: #ffc600;
 --spacing: 10px;
 --blur: 1.5px;
 --brightness: 1;
 --contrast: 100%;
 --grayscale: 0%;
 --opacity: 100%;
 --saturate: 100%;
 --sepia: 0%
}

* {
 font-family: Lato;
 box-sizing: border-box;
}

html, body {
 margin: 0;
 padding: 0;
 font-size: 0;
}

img {
 width: 100vw;
 height: 100vh;
 position: relative;
 padding: var(--spacing);
 background: var(--base);
 filter: blur(var(--blur)) brightness(var(--brightness)) contrast(var(--contrast)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia));
}

.text {
 position: absolute;
 top: 0;
 left: 30px;
 font-size: 20px;
 color: #24260f;
}

.h1 {
 color: var(--base);
}

label {
 width: 100px;
 display: inline-block;
 margin-top: 20px;
}


.value{
 display: inline;
}
const inputs=document.querySelectorAll(".controls input");
const
values=document.querySelectorAll(".value");

function handleUpdate(){
 const suffix =this.dataset.sizing || ""; 
 //等於這個↓
 const suffix2 =this.getAttribute("data-sizing") || "";
 //dataset is a object, contains all the data info 
 //call data-sizing or nothing
 
 //select css root and change the root css
 document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix);
 
 /****************
 **參數值顯示功能**
 ****************/
 for(i=0;i<9;i++){
 values[i].textContent=inputs[i].value+(inputs[i].dataset.sizing|| "");
 
}
}

inputs.forEach(input => input.addEventListener("change", handleUpdate)) //when all the input value changed, execute handleUpdate function
inputs.forEach(input => input.addEventListener("mousemove", handleUpdate)) //continuously change the value

Display

CODEPEN