html5學習筆記day05
1. css選擇器
1) 基本選擇器
2) 層次選擇器
3) 屬性選擇器
.first[name]
4) 偽類選擇器
:hover
:first-child
:last-child
:nth-child
:nth-last-child
5) 偽元素選擇器
::before
::after
::first-letter
::first-line
2. css層疊
1) 優先順序
1. important
div{
background-color:lightblue !important;
}
2. 選擇器權重（特性值）
1000 規則應用在了 style 屬性中
100 id選擇器
10 類選擇器，偽類選擇器，屬性選擇器
1 元素選擇器，偽元素選擇器
div{
background-color:lightblue ;
}
div.one{
background-color:orange ;
}
#first{
background-color:pink ;
}
<div class="one top" id="first">
hello world
</div>
3. 順序
div.one{
background-color:orange ;
}
div.top{
background-color:pink ;
}
2) 繼承
規則的繼承，可以被繼承的規則有
font-*
text-*
list-*
color
...
不可以被繼承
background-*
border-*
margin-*
padding-*
...
body {
font-size:14px;
}
.first {
font-size: unset;
}
<body>
<div class="first">hello world</div>
</body>
inherit
initial
unset
3) 單位
顏色
1. 關鍵字 black
2. 十六進位制 #000000
3. rgb() rgb(0,0,0)
4. rgba() rgba(0,0,0,0.4)
長度
1. 絕對單位
px 100px
cm
mm
in
2. 相對單位
1) em
相對於當前元素的字型大小值
html{
font-size:14px;
}
<div style="font-size:18px; margin:1em"></div>
1em = 18px
2) rem
相對於html元素的字型大小值
html{
font-size:14px;
}
<div style="font-size:18px; margin:1rem"></div>
1rem = 14px
3. 字型規則
css語法-> 選擇器 -> 規則
-> 字型規則
-> 列表規則
-> 盒子規則
-> animate
1) color
2) font-family
通用字型(英文)
serif
sans-serif
monospace
cursive
fantasy
常用字型（中文）
Microsoft YaHei
微軟雅黑
宋體
應用規則
html {
font-size:14px;
font-family:"Microsoft YaHei","宋體","serif"
}
webfont
1. 下載字型
ttf (TTF)
woff
svg
eot
2. 在css定義字型
@font-face {
font-family:'myfont',
src:url('../fonts/myfont.ttf'),url('../fonts/myfont.woff')
}
3. 在自定義css中使用字型
html {
font-family:'myfont' , serif;
}
字型圖示圖
iconfont 阿里巴巴
font-awesome
css
font-awesome.css
@font-face{
}
.fa {
font-family:FontAwesome
}
.fa-user::before {
content:'\f000'
}
font
font-awesome.ttf
font-awesome.svg
<i class="fa fa-user">\f000</i>
3) font-style
4) font-weight
bold
5) line-height
行高
6) font
速寫形式
font: [font-style] [font-weight] font-size [line-height] font-family
必須填寫的屬性
font-size
font-family
字型大小和行高同時出現，語法
14px/2
font-size 14px
line-height 2em
font: 14px "微軟雅黑","宋體";
7) text-indent
8) text-align
9) text-transform
10)text-decoration
text-decoration:
text-decoration-style 樣式(solid,dashed,dotted,double)
text-decoration-color 顏色
text-decoration-line 位置
11)text-shadow
text-shadow: h v blue color;
12) cursor
pointer
13) outline 外邊框
4. 列表樣式
list-style-image 列表圖示
list-style-position 列表圖示位置
list-style-type 列表圖示型別
速寫形式 list-style none
5. 盒子樣式
1) 盒子模型
所有的塊元素都可以理解為盒子模型
div p
盒子特性
margin 外邊距盒子距離其他盒子的空間
border 盒子邊框
padding 盒子邊框距離內容的空間
content 盒子內容，用於存放子元素或者內容的地方
1. 傳統盒子（內容盒子）
box-sizing:content-box;
width = content
<div class="box1"> hello </div>
width = 內容
100 100px
.box1 {
width:100px;
height:100px;
margin:10px;
padding:10px;
border:10px solid #ccc;
}
內容區 ： width
佔有面積: width + padding + border
2. 邊框盒子
box-sizing:border-box;
width = border以內
<div class="box1"> hello </div>
width = border + padding + 內容
100 20 20 60px
.box1 {
width:100px;
height:100px;
margin:10px;
padding:10px;
border:10px solid #ccc;
}
盒子所在空間=
盒子內容空間=
2) 邊框
border
border-top 上邊框
border-top-style
border-top-width
border-top-color
border-right 右邊框
border-bottom 下邊框
border-left 左邊框
border : 1px solid #ccc;
3) 盒子居中
margin: 0 auto;
4) 外邊距
margin
margin-top
margin-right
margin-bottom
margin-left
margin : 1px;
上右下左都為1px
margin : 5px 10px;
上下5px,左右10px;
margin : 1px 5px 10px;
上1px,左右5px,下10px
margin : 1px 5px 10px 20px;
上1px,右5px,下10px,左20px
5) 內邊距
padding
padding-top
padding-right
padding-bottom
padding-left
padding : 1px;
上右下左都為1px
padding : 5px 10px;
上下5px,左右10px;
padding : 1px 5px 10px;
上1px,左右5px,下10px
padding : 1px 5px 10px 20px;
上1px,右5px,下10px,左20px
6) 背景
background
background-color
背景色，從邊框開始覆蓋
background-image :url(path)
圖片預設從內容區開始覆蓋，但是可以通過bg-origin修改
background-origin
border-box 從邊框覆蓋
content-box 從內容覆蓋
background-repeat
圖片重複方式
repeat x,y重複
repeat-x x重複
repeat-y y重複
no-repeat 不重複
background-position
圖片的起始位置
關鍵字 center
座標 20px 20px
background-size
cover 覆蓋，覆蓋最大的邊
contain 包含，覆蓋最小的邊