Fe-6-1
- 三種引入CSS
- 內聯(inline style attribute)
<h1 style='background:red;'>內聯(inline style attribute)</h1>
- <head> 標簽內的 <style> 標簽
<style>
h1 {
background: blue !important;
}
</style>
- <link> 標簽中的外聯
<link rel="stylesheet" href="fe6.css">
樣式優先級(從高到低)
!important
內聯樣式
<style> 中的樣式
link 中的樣式
- 三種選擇器
- ID
- 類
- 元素
.green {
background: green;
/*color: white;*/
}
h1 {
background: yellow !important;
color: red;
}
#id-button-test {
background: lightblue;
}
選擇器優先級(從高到低)
!important
內聯樣式
id 選擇器
class 選擇器
元素選擇器
display 屬性
block
默認 block 的標簽有
div p ul ol li h1 h2 h3 h4 h5 h6inline
inline 只占 content 的尺寸inline-block
inline-block 是 inline 布局 block 模式
inline-block 對外表現為 inline，所以可以和別的 inline 放在一行
對內表現為 block，所以可以設置自身的寬高盒模型, inline 元素沒有盒模型
內容
padding 盒子里距離
border 盒子
margin 盒子外
Fe-6-2
- position 屬性用于元素定位
static
relative
absolute
fixed
非 static 元素可以用 top left bottom right 屬性來設置坐標
非 static 元素可以用 z-index 屬性來設置顯示層次
- relative 是相對定位 只改變自己的位置，對頁面沒用影響
- absolute 完全絕對定位, 忽略其他所有東西
往上浮動到 非 static 的元素
就是什么子絕父絕，子絕父相
這里給了class選擇器這個盒子相對定位，否則X會上浮到 非static的元素右上角
fixed 基于 window 的絕對定位, 不隨頁面滾動改變
一些浮動小廣告后寫的會蓋住先寫的內容
可以設置誰厚度z-index：100 顯示在上面，默認是0overflow屬性
visible 默認
auto 需要的時候加滾動條
hidden 隱藏多余元素
scroll 就算用不著也會強制加滾動條
- 如果設置overflow;hidden;溢出的部分就會隱藏
- auto是加滾動條
盒模型相關的 CSS
border
border-width
border-style
border-color
3 個屬性可以簡寫為一句
border: 3px red solid;
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
三種縮寫, 分別對應有 4 2 3 個值的時候的解釋, padding 同理
margin: top right bottom left
margin: (top/bottom) (right/left)
margin: top (right/left) bottom
- border-radius 是用來設置圓角度數的
px是半徑
它也擁有三種縮寫, 對應的含義如下
左上角為 top, 右下角為 bottom
background 相關屬性和縮寫
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景圖片隨滾動軸的移動方式 */
簡寫如下
background: #233 url(bg.png) no-repeat;
查詢屬性兼容網站
![]()
Caniuse
居中寫法
- 上下0，左右auto
block 元素居中
margin: 0 auto;
inline inline-block 元素居中
text-align: center;
- text-decoration:
underline
overline
line-through
blink(這個值已經廢棄了)
鏈接下劃線就是這個屬性的underline
margin 合并 特例
- 上下margin
outline
- 基本和border一樣，可是不改變盒子大小?？梢栽O置這個屬性看盒子大小。
