Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS Cascading Style Sheets (樣式 (尺寸 (line-height 行高, 可設定幾倍行高, width,…
CSS
Cascading Style Sheets
Selector
What
定位HTML中的元素
分類
Tag
class
ID
屬性
僞元素（虛擬元素）
僞類別（虛擬類別）
動態僞類別
結構僞類別
迴圈僞類別
表單僞類別
nth-child()
前處理器
框架
LESS
2009年出現
使用CSS的語法
容易上手
程式設計功能不夠強大
Stylus
2010年產
SASS
2007年誕生
依賴於ruby環境
是什麼?
為CSS增加一些程式設計的特性，並將CSS檔案作為目標生成檔案
無需考慮瀏覽器的相容性問題
讓CSS的編寫更加簡潔、適應性更強、可讀性更佳
排版
Grid
Flex
Box Model
margin
參數規則
margin: auto; /
左右自動填滿
/
margin: 10px; /
上下左右
/
margin: 10px 5px; /
上下 左右
/
margin: 10px 5px 20px; /
上 左右 下
/
margin: 10px 5px 20px 1px; /
上 右 下 左
/
border
border-image
padding
參數規則
padding: 10px; /
上下左右
/
padding: 10px 5px; /
上下 左右
/
padding: 10px 5px 20px; /
上 左右 下
/
padding: 10px 5px 20px 1px; /
上 右 下 左
/
box-sizing
width 指定給誰
值域
content-box 內容寬度就是 width (傳統模式)
border-box: 邊框到邊框的距離就是 width, 可避免計算
float 浮動層
動畫
transition
property
none: 沒有屬性套用 transition 效果
all: 所有屬性套用 transition 效果
width: 寬度從原始直到設定值的過度效果
duration
過渡時間
預設 0
delay
預設 0
timing-function
linear
erase
erase-in
erase-out
語法: 支援逗號多個分組
transition: 屬性 轉換時間 延遲執行時間 速度
animation
name
keyframe
指定的動畫名稱
duration
預設 0 表示無動畫
delay
預設 0
timing-function
ease: 緩慢開始, 緩慢節數
ease-in: 先慢後快
ease-out: 先快後慢
ease-in-out
linear: 平滑效果
direction 播放方向
normal: 正常播放
reverse: 反向播放
initial: 設定為預設值
inherit: 從父親繼承這個屬性值
alternate
alternate-reverse
fill-mode 填充模式
none:
forward: 播放後保持在最後畫面
backward: 播放前保持在第一個畫面
both:
play-state 播放狀態
pause: 暫停
playing: 播放
概念
keyframes
定義腳本
描述從 0% ~ 100% 關鍵鏡頭的樣式
animation
執行腳本的元素
語法
animation: keyframes名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態;
transform
none: 不轉換
matrix: 2d轉換
matrix3d: 3d轉換
translate
translate3d
translateX/translateY/translateZ
scale
scale3d
scaleX/scaleY/scaleZ
rotate
rotateX/rotateY/rotateZ
rotate3d
skew
skewX/skewY
perspective
transform-origin
transform-style
樣式
shadow
h-shadow 水平陰影
v-shadow 垂直陰影
blue 模糊距離
spread:陰影大小
color: 陰影顏色
inset
background
bg-color
bg-image
bg-position
bg-size
bg-repeat
bg-origin
bg-clip
bg-attachment
文字
color 文字顏色
font-size 字級
text-decoration: 底線
text-indent 文字首行縮排
尺寸
line-height 行高, 可設定幾倍行高
width
height
單位: px, em
常用螢幕尺寸: 960. 1000, 1440px
背景
background-color
background-image
透明度
opacity
濾鏡
Linear Gradient
Radial Gradient
漸層
CSS 书写模式 Level 3（CSS Writing Modes Level 3）业已成为官方的 Web 标准
标准化了对各种国际书写模式的 CSS 支持
水平的从左到右的文本（如英语和印地语）、水平的从右到左的文本（如希伯来语和阿拉伯语）还包括垂直文本（如日语或蒙古语）
在垂直设置的亚洲文本中显示英语或希伯来语
writing-mode属性指定了块的流动方向。 direction指定了盒的内联基准方向
命名規範
BEM
SUIT
版本
CSS2.1
CSS3
框架
Bootstrap
HTML 標籤分類
inline
靠內容撐開，無法設定寬高
可設定
display: block
切換成 block
block
不管多寬都會獨立一行
標籤
<h1> <div> <p>
block 區塊可設定寬高
可以利用 float 特性讓 block 排成一列
可利用
display:inline
將 block 變成 inline
inline-block
可設定
display:inline-block
切換成這個特性
可設定 width,height 亦可與其他元素排在同一列
小技巧:
有 block 表既可設定 width height
有 inline 表示可排在同一列
CSS Reset
每個瀏覽器都有一個內建樣式檔
提供標籤預設樣式
不同瀏覽器的樣式會有差異
解決瀏覽器樣式檔差異, 將所有元素都設定為一樣, 可重新定義元素樣式
CSS Normalize
只針對瀏覽器差異進行處理
normalize.css
定位
position=fixed|static|relative|absolute
fixed 固定位置
依據視窗定位
永遠固定視窗可見範圍
沒有指定 left, top 會以文件位置作為初始化
應用: 蓋板廣告, 選單, 導覽
relative 相對定位(偏移顯示)
依據資料中的位置進行偏移, 原來的位置和寬高沒有影響
absolute 絕對定位
往父親找, 如果 position=fixed|relative|absolute就會依據父親定位, 如果沒有則再往上層找, 如果都沒有照到就是視窗
第一次渲染就決定位置
z-index
初始值 0
大的蓋小的
數值一樣, 撰寫順序後面蓋前面
RWD
@media
MDN
膜體類型
screen
printer
all
speech
條件
min-width: 大於等於最小高度就符合
max-width: 小於等於最大寬度就符合
