分類彙整:CSS

【CSS】Color Name

REF: W3Schools

Color Name HEX Display
White #FFFFFF
Ivory #FFFFF0
LightYellow #FFFFE0
Yellow #FFFF00
Snow #FFFAFA
FloralWhite #FFFAF0
LemonChiffon #FFFACD
Cornsilk #FFF8DC
SeaShell #FFF5EE
LavenderBlush #FFF0F5
PapayaWhip #FFEFD5
BlanchedAlmond #FFEBCD
MistyRose #FFE4E1
Bisque #FFE4C4
Moccasin #FFE4B5
NavajoWhite #FFDEAD
PeachPuff #FFDAB9
Gold #FFD700
Pink #FFC0CB
LightPink #FFB6C1
Orange #FFA500
LightSalmon #FFA07A
DarkOrange #FF8C00
Coral #FF7F50
HotPink #FF69B4
Tomato #FF6347
OrangeRed #FF4500
DeepPink #FF1493
Fuchsia #FF00FF
Magenta #FF00FF
Red #FF0000
OldLace #FDF5E6
LightGoldenRodYellow #FAFAD2
Linen #FAF0E6
AntiqueWhite #FAEBD7
Salmon #FA8072
GhostWhite #F8F8FF
MintCream #F5FFFA
WhiteSmoke #F5F5F5
Beige #F5F5DC
Wheat #F5DEB3
SandyBrown #F4A460
Azure #F0FFFF
HoneyDew #F0FFF0
AliceBlue #F0F8FF
Khaki #F0E68C
LightCoral #F08080
PaleGoldenRod #EEE8AA
Violet #EE82EE
DarkSalmon #E9967A
Lavender #E6E6FA
LightCyan #E0FFFF
BurlyWood #DEB887
Plum #DDA0DD
Gainsboro #DCDCDC
Crimson #DC143C
PaleVioletRed #DB7093
GoldenRod #DAA520
Orchid #DA70D6
Thistle #D8BFD8
LightGray #D3D3D3
LightGrey #D3D3D3
Tan #D2B48C
Chocolate #D2691E
Peru #CD853F
IndianRed #CD5C5C
MediumVioletRed #C71585
Silver #C0C0C0
DarkKhaki #BDB76B
RosyBrown #BC8F8F
MediumOrchid #BA55D3
DarkGoldenRod #B8860B
FireBrick #B22222
PowderBlue #B0E0E6
LightSteelBlue #B0C4DE
PaleTurquoise #AFEEEE
GreenYellow #ADFF2F
LightBlue #ADD8E6
DarkGray #A9A9A9
DarkGrey #A9A9A9
Brown #A52A2A
Sienna #A0522D
YellowGreen #9ACD32
DarkOrchid #9932CC
PaleGreen #98FB98
DarkViolet #9400D3
MediumPurple #9370DB
LightGreen #90EE90
DarkSeaGreen #8FBC8F
SaddleBrown #8B4513
DarkMagenta #8B008B
DarkRed #8B0000
BlueViolet #8A2BE2
LightSkyBlue #87CEFA
SkyBlue #87CEEB
Gray #808080
Grey #808080
Olive #808000
Purple #800080
Maroon #800000
Aquamarine #7FFFD4
Chartreuse #7FFF00
LawnGreen #7CFC00
MediumSlateBlue #7B68EE
LightSlateGray #778899
LightSlateGrey #778899
SlateGray #708090
SlateGrey #708090
OliveDrab #6B8E23
SlateBlue #6A5ACD
DimGray #696969
DimGrey #696969
MediumAquaMarine #66CDAA
RebeccaPurple #663399
CornflowerBlue #6495ED
CadetBlue #5F9EA0
DarkOliveGreen #556B2F
Indigo #4B0082
MediumTurquoise #48D1CC
DarkSlateBlue #483D8B
SteelBlue #4682B4
RoyalBlue #4169E1
Turquoise #40E0D0
MediumSeaGreen #3CB371
LimeGreen #32CD32
DarkSlateGray #2F4F4F
DarkSlateGrey #2F4F4F
SeaGreen #2E8B57
ForestGreen #228B22
LightSeaGreen #20B2AA
DodgerBlue #1E90FF
MidnightBlue #191970
Aqua #00FFFF
Cyan #00FFFF
SpringGreen #00FF7F
Lime #00FF00
MediumSpringGreen #00FA9A
DarkTurquoise #00CED1
DeepSkyBlue #00BFFF
DarkCyan #008B8B
Teal #008080
Green #008000
DarkGreen #006400
Blue #0000FF
MediumBlue #0000CD
DarkBlue #00008B
Navy #000080
Black #000000

【CSS】outline

説明

outline位在border外面

.box
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

Display

.

FireFox的outline bug

如果裡面的東西超出box的話,outline也會被撐開
※其他瀏覽器不會有這個問題

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 outline: 1px solid red

.inner
 background-color: moccasin
 height: 300px
 width: 100px 

Display

解決方法

改用box-shadow做出outline的效果

.box
 .inner
.box
 width: 300px
 height: 200px
 background-color: mistyrose
 border: 2px solid hotpink
 // outline: 1px solid red
 box-shadow: 0 0 0 1px red
 
.inner
 background-color: moccasin
 height: 300px
 width: 100px

Display

.

【CSS】漸層色塊

漸層原理説明

撰寫漸層時,要指定多組參數。每一組參數要有〖顏色〗與〖%數〗

.box
.box
 width: 500px
 height: 200px
 //left: 指定〖從左〗開始漸層 
 background: linear-gradient(left, DarkGreen 20%, MediumSeaGreen 70%)

▼示意圖

  • 第1組參數:〖起始色〗深綠色、〖%數〗20%
    0%~20% →深綠色純色區
  • 第2組參數:〖終色〗淺綠色、〖%數〗70%
    20%~70%→漸層區域
    70%~100%→淺綠色純色區

色塊

漸層區的定義是「第1個%」與「第2個%」之間的區塊,
所以如果「第2個%」指定跟「第1個%」一樣的數字,就無法產生漸層區,會形成色塊。

線性漸層色塊

.lg-box
.lg-box
 width: 300px
 height: 100px
 border: 1px solid #000
 background: linear-gradient(Left, Teal 50%, transparent 50%)

Display

圓形漸層色塊

圓形漸層如果參數指定的剛剛好一樣,會有顏色轉換處會有鋸齒產生,所以需要預留數%的漸層空間

.rd-box
.rd-box
 width: 200px
 height: 200px
 border-radius: 100%
 border: 1px solid #000
 background: radial-gradient(Teal 49.5%, transparent 50%)//預留0.5%的漸層空間

Display

【CSS】radio style

説明

自由撰寫radio input的樣式,但是保有 checked 的功能

【架構】

  • <label>裡面要有 2 個東西:<input type=”radio”>、<div class=”radio-widget”>
    ※這樣點到label裡面任何一處,<input type=”radio”>都會被觸發
  • radio-widget是假的radio,在〔.radio-widget〕做出勾選前的樣式
  • 在〔input[type=”radio”]:checked+.radio-widget〕撰寫勾選後的樣式

參考:input label 應用漸層色塊
衍生:checkbox style

範例

label.radio-label
 input(type="radio" name="rd" id="rd1" value="1" checked)
 .radio-widget
 | option 1

label.radio-label
 input(type="radio" name="rd" id="rd2" value="2" checked)
 .radio-widget
 | option 2

label.radio-label
 input(type="radio" name="rd" id="rd3" value="3" checked)
 .radio-widget
 | option 3
.radio-label
 margin: 0px 5px

 //原本的radio設不顯示
 input[type="radio"]
  display: none
 
 //這邊寫選取後的效果
 input[type="radio"]:checked+.radio-widget
  border-color: #50BBB6
  background: radial-gradient(#50BBB6 44%, transparent 50%)
  
.radio-widget
 width: 20px
 height: 20px
 border: 1px solid #eee
 border-radius: 100%
 position: relative
 margin-right: 5px
 background: radial-gradient(#eee 20%, #fff 25%)
 

.radio-widget, input
 display: inline-block
 vertical-align: top

【CSS】checkbox style

説明

自由撰寫checkbox的樣式,但是保有 checked 的功能

【架構】

  • <label>裡面要有 2 個東西:<input type=”checkbox”>、<div class=”checkbox-widget”>
    ※這樣點到label裡面任何一處,<input type=”checkbox”>都會被觸發
  • checkbox-widget是假的checkbox,在〔.checkbox-widget〕做出勾選前的樣式
  • 在〔input[type=”checkbox”]:checked+.checkbox-widget〕撰寫勾選後的樣式

參考:input label 應用
衍生:radio style

範例

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 1

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 2

label.checkbox-label
 input(type="checkbox" value="1")
 .checkbox-widget
 | checkbox 3
.checkbox-label
 .checkbox-widget, input
  display: inline-block
  vertical-align: top
 
 
 //在這裡刻出自訂樣式的checkbox
 .checkbox-widget 
  width: 20px
  height: 20px
  margin-right: 5px
  background-color: #fff
  border: 1px solid #eee
  border-radius: 4px
  text-align: center
  &:after
   content: "✔︎"
   color: #fff
 
 //原本的checkbox設不顯示
 input[type="checkbox"]
  display: none

 //選取後的樣式
 input[type="checkbox"]:checked+.checkbox-widget          
  background-color: #50BBB6 
  border-color: #50BBB6

【CSS】smooth

説明

滑順滾動的屬性,讓網頁內引導<href=”#id”>的動作可以滑順地跳下來

瀏覽器支援度→Can I Use …

範例

方法一:指定CSS

a(href="#title")
 button click me

//這邊填充很多個br
h1#title title
*
 scroll-behavior: smooth

Display

方法二:指定JavaScript

button(onclick="scrollIt()") click me
function scrollIt(){
 
 window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth"
 });

 
}

Display

【CSS】border-collapse 表格消除空隙

情況

table 預設的 style 方格與方格之間會有空隙
(在table, td, th都有設定border的情況下會很明顯)

解決:border-collapse

table
 tr
  th Items
  th Price
 tr
  td Apple
  td $10
 tr
  td Orange
  td $15
table, td, th 
 border: 1px solid black
 
table
 border-collapse: collapse

Display

沒有加border-collapse的情況

Items Price
Apple $10
Orange $15

有使用border-collapse的情況

Items Price
Apple $10
Orange $15

【CSS】height transition

説明

CSS展開動畫:點選收起來的選單→觸發動作開啓選單

開啓狀態下的選單區塊,高度寫inherit的話,無法完成動態效果,所以要用max-height的方式完成

.outer 收合的選單 (hover me)
 .inner
  p 選單内部
  p 選單内部
  p 選單内部
.outer
  background-color: #E7F2F1
  display: inline-block
  padding: 10px
  &:hover
   .inner
   max-height: 150px
   //不用精準設定到元素高度,元素只會展開到他自己的高度。數字可以抓大一點,數字越大展開的速率越快。
 
.inner
 background-color: #439E96
 padding: 0px 10px
 margin: 5px
 max-height: 0
 overflow: hidden
 transition-duration: 0.5s

Display

收合的選單 (hover me)

選單内部

選單内部

選單内部

【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,優先顯示綠色方塊