分類彙整:CSS

【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>

CSS background-position

針對background-image的圖片位置做定位

預設値

.pic
.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: 0 0
 //等同於
 //background-position: left top
 //從水平軸0%處(最左方)開始定位,從垂直軸0%處開始定位

Display

.

background-position關鍵字

第一個値:水平方向

  • left
  • right
  • center
  • 或是指定%數(從左方往右多少%)
 第二個値:垂直方向
  • top
  • bottom
  • center
  • 或是指定%數(從上方往下多少%)

範例:圖片水平垂直置中定位

.pic
 width: 300px
 height: 200px
 background-image: url("https://scontent-tpe1-1.xx.fbcdn.net/v/t1.0-9/993735_563618560401443_1458385305_n.jpg?oh=1612ee39554e7a805abe7f7d70ccbad7&oe=58EFDD0A")
 background-position: center center
 //也可以寫成
 //background-position: 50% 50%

Display

.