四、[前端] CSS
CSS 主要是來管外觀的部份
範例
p {
margin: 10px;
font-size: 16px;
color: #ccc;
}
選擇器 {
屬性: 值;
}
CSS 選擇器(selector)
再舉例
/*所有 p 標籤的背景都會變藍色*/
p {
baceground-color: blue;
}
/* id 為 target 元素的文字大小變成 32px */
#target {
font-size: 32px;
}
/* class 為 container 元素的外距會自動調整,產生置中效果 */
.container {
margin: 0 auto; // 置中
}
如果直接選不夠的話,需要設立條件縮小範圍
/* 從 header 底下找 li,不管幾層都可以,子孫有就行 */
#header li {
backgournd-color: #ccc;
}
/* 只有 nav 的下一層的 ul,只有底下一層的孩子 */
#nav > ul {
padding: 4px 12px;
}
/* li.active 代表既是 li 又有 .active 的元素
~ 用來連接目標與後面同一層的元素,只要是在 li.active 之後的 li,都會套用設定 */
li.active ~ li {
font-weight: bold;
}
/* 只有目標後面的正後面的元素才會套用設定,就是 li.active 正後面的 liv 才會套用設定 */
li.active + li {
color: green;
}
常見的 CSS selector
基本
p
基本標籤 tag#target
id.container
class name
篩選條件
div.container
所有帶有 .container 的 div#header li
#header 底下所有的 li 子孫#header > ul
#header 下一層的 ul 兒子.active ~ li
.active 後的同一層的所有 li.active + li
.active 後的第一個 li
常見的 CSS 屬性
知道了選擇器,可以找到目標後,接下來學習怎麼改外觀。首先要了解 box model
box model 由外而內包含
margin,外距,自己與其他元素的距離
border,邊框,自己的邊框
padding,內距,留白,content 到 border 的距離
width / height,內容自己的長與寬
.block {
/* 外距和內距,有上下左右屬性 */
margin-right: 10px;
margin-bottom: 10px;
padding: 20px;
/* 邊框 */
border-width: 2px; /* 寬度 */
border-style: solid; /* 長相 */
border-color: black; /* 顏色 */
border: 2px solid black; /* 簡寫 */
}
接下來談 position,位置。它不是直接調整座標 (x,y) 位置,而是用來設定元素位置的根據點的屬性。例如
static。自然的文章流動,由上而下由左至右,是預設值。它不能調整位置
relative。可以調整位置的 static。一樣有自然文章流動,但可以調整位置
absolute。設定特別。會有起始點,根據最早有設定 position 的祖先當作基準點
fixed。起始點就是網頁整個可見的範圍
接下來談 float,就是文繞圖的概念。
float
值有 left, right
clear
值有 left, right, both
float 常被用在排版上面。float: left 的主要內容可以設定 width: 80%,float: right 的側邊欄可以設定 width: 20%,這樣排版就會正常。
只是使用完 float 後,要清除 float,不然網頁下方的 footer 會往上跑。這屬性叫 clear。clear: both
範例
<!-- html -->
<div id="content">
<div id="article">
Lorem
</div>
<div id="sidebar">
Lorem
</div>
<div class="clearfix"></div>
</div>
<div id="footer">
footer is here
<p>
Lorem
</p>
</div>
#content {
position: relative; /* 文字自然流動,但能調整大小與位置 */
float: left; /* 文字靠左流動 */
width: 80%; /* 內容寬度佔父親寬度的 80% */
}
#sidebar {
position: relative;
float: right;
width: 20%
}
.clearfix {
clear: both;
}
小結
box model
position
float / clear
常見的 CSS 設定補充
比較大的架構
display
block, inline, none, flex
System
CSS properties
Playground
Practice
Can I use?
position
static, relative, absolute, fixed
搭配 top / right / bottom/ top 調整位置
float & clear
float: left, right
clear: left, right, both
比較小的細節
box-model
很多屬性的總稱
margin, border, padding, width / height
block 元素才有 box model;inline 元素就沒有
background
background-color, background-image, background
text
text-align
line-height
font
font-size, font-weight, color 文字顏色, font-family
Others
overflow 當內容超出容器,怎麼顯示
list-style-type li 點的樣式
text-decoration 底線 underline、刪除線 line-through
...
System
在自己設定 display: flex 後,自己變成 flex container,子元素變成 flex item
flex lines 基準線會被 flex item Follow
Main axis and Cross axis 水平軸線與垂直軸線
Main start / Main end, Cross start / Cross end
這個系統可以調整的東西:方向、對齊方式、寬度設定
CSS properties
Flex container
Flex container About axis
flex-direction
定義 main axis 的走向
預設值
flex-direction: row
由左置右設定值
row, row-reverse, column, column-reverse
justify-content
flex items 如何對齊 main axis
預設值
justify-content: flex-start
設定值
flex-start, flex-end, center, space-between, space-around
align-items
flex items 如何對齊 cross axis
預設值
align-items: flex-start
設定值
`flex-start, flex-end, center, stretch(延展開來), baseline(看 flex item 裡文字的底線)
Flex container About wrap 包覆的方式
flex-wrap
flex item 超過 container 的話,該怎麼做
預設值
flex-wrap: nowrap
雖然不會超出去,但 item 也不會換行,就在同一行硬塞設定值
nowrap, wrap, wrap-reverse
align-content
在 wrap 之後,會多很多行 flex lines
flex lines 如何對齊在 cross axis
有多行,就會有多條 flex lines
預設值
align-content: flex-start
設定值
flex-start, flex-end...
好多 ==
Flex items
Flex
容易跟 display: flex 搞混
預設值
flex: 0 1 auto
flex:
flex-grow flex-shrink flex-basis;
flex-grow
flex container 還有多的空間時,要不要自動成長,閒置空間要怎麼分
flex-shrink
當 flex-items overflow 時,item 要不要縮
預設值
flex-shrink: 1
,會縮
Flex-basis
類似寬度的設定
預設值
flex-basis: auto
,可用 px 設定寬度
Order
在 RWD 操作方便,可以控制呈現順序
假設畫面上有 .sidebar.A .content .sidebar.B 區塊
在手機上想先呈現 .content,再呈現 .sidebar.A .sidebar.B
.main { display: flex; /* 把自己變成 flex container */ flex-wrap: wrap; /* flex item 寬度超過 container 的話,就硬塞 */ } .content { order: 1; } .sidebar.A { order: 2; } .sidebar.B { order: 3; } @media screen and (min-width: 600px) { .sidebar { flex: 0 0 200px; } .content { flex: 1; order: 2; } .sidebar.A { order: 1; } .sidebar.B { order: 3; } }
Margin
在 flex 裡更 powerful,上下的 margin 可以 auto,可以實現垂直置中
align-self
單獨一個 flex item 對齊 cross axis
如果有機車設計師要單獨一個 item 位置不一樣,就用這個
.product:nth-child(3) { align-self: flex-end; }
Practice
Grid
像 bootstrape 把 column 12 等分
* { box-sizing: border-box; /* 不知道什麼用途 */ } .container { width: 800px; margin 0 auto; } .product-list{ display: flex; /* 只用這個排版就好了,好棒棒 XD */ /* flex-wrap: wrap; 想換行的話 */ width: 800px; } .product { /* flex: 0 1 auto; */ margin-bottom: 30px; padding: 0 15px; } .product img { width: 100px; height: auto; }
發現好用的示意圖工具,placehold.it
Sticky footer
剛做網站,內容很少,footer 沒被擠下去,就跑上來了
#main { display: flex; fles-direction: column; /* 排版由上至下,#header, #content, #footer */ height: 100vh; } #header { background-color: #ccc; line-height: 2; } #content { flex: 1; /* 跟 #content 要自動 flex grow,把多的空間拿來使用 */ } #footer { padding: 30px; background-color: #333; text-align: center; color: white; }
More
webflow
Can I use?
2012 年後規範穩定
[練習] 版面置中
試作的 Codepen
html
<div class="container">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit repudiandae beatae, optio enim non distinctio perspiciatis a modi fugiat saepe!
</p>
<img src="http://placehold.it/400x300" alt="px示意圖">
</div>
css
.container1 {
width: 60%;
margin: 0 auto; /*版面置中*/
padding: 20px;
background-color: pink;
text-align: center; /*把文字置中*/
color: white;
}
[練習] 3 欄式架構
試作的 Codepen
emmet 展開功能
html
<h1>3 欄式架構</h1>
<div class="container2">
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="work">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos exercitationem accusantium aliquid officiis debitis quos velit dolorem error sint!
</div>
<div class="clearfix"></div>
</div>
<p>記得要 clearfix 避免版面壞掉</p>
css
.container2 {
position: relative; /*讓 float 有依據*/
width: 660px;
margin: 0 auto; /*置中*/
}
.work {
float: left; /*讓內容浮動*/
background-color: pink;
margin: 5px;
padding: 5px;
width: 200px;
height: 220px; /*如果內容不一樣高,可能會塌陷*/
}
.clearfix {
clear: both;
}
控制寬度的魔法:box-sizing
試作的 Codepen
width 只會計算 content 的寬度,padding, content 要另外加總;於是就有了 box-sizing 魔法
box-sizing 有兩個值
content box (default)
border box
html
<h1>用box-sizing控制寬度</h1>
<div class="container3">
<div class="work1">
<div>
width 很單純 <br>
只設定內容的 width 而已
其他另算
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="work1">
<div>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta quas totam modi numquam quam nihil cupiditate molestiae voluptates iusto ipsam.
</div>
</div>
<div class="clearfix"></div>
<p>要記得 clearfix</p>
</div>
css
.clearfix {
clear: both;
}
.container3 {
width: 600px;
margin: 0 auto;
position: relative;
}
.work1 {
box-sizing: border-box;
padding: 0 5px;
width: 33.3%;
height: 220px;
float: left;
}
.work1 > div {
background-color: pink;
}
Last updated
Was this helpful?