學習html5的第六天課堂筆記
回顧總結
1.字型規則
1)color
2)cursor
3)font-family
1. 常規字型
2. 常用字型
3. 字型棧
4. webfont
5. 字型圖示(第一個框架)
font-awesome
iconfont
@font-face {
font-family:
src:
}
4)font-style
normal/italic/oblique
5) font-weight
normal/bold/bolder/lighter/100~900
6) font-size
16px , 12px / 14px
7) line-height 行高 14px
8)font 速寫形式
必須寫的兩個屬性:font-size,font-family
順序:
font-style
font-weight
font-size
line-height
font-family
9)text-indent 縮排
p {
text-indent : 2em; //首行縮排2個字元
}
10) text-align 文字排列方式:
left/center/right
11) text-decoration 文字修飾:
text-decoration-line
underline/overline/linethrough
text-decoration-style
solid / dotted /dashed /double
text-decoration-color
12)text-shdow 文字陰影:
h v blur color;
text-shadow:2px 2px 5px black;
2.列表規則
list-style:circle inside;/none;
list-style-image:url();
list-style-type:circle /…
list-style-position:inside / outside
3.盒子規則
1)盒子模型
box-sizing
content-box(內容盒子/傳統盒子)
width = 內容的寬度
實際佔有width = width + padding + border
border-box(邊框盒子)
width = 實際佔有的width(width + padding + border)
2)盒子樣式
margin:(外邊距)
margin-top
margin-right
margin-bottom
margin-left
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 15px;
margin: 5px 10px 15px 20px;
padding:(內邊距)
padding-top
padding-right
padding-bottom
padding-left
border:(邊框)
border-top
border-top-style
border-top-width
border-top-color
border-right
border-right-style
border-right-width
border-right-color
border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
border-left
border-left-style
border-left-width
border-left-color
background:(背景)
background-image
url(path)
background-position: 背景圖片的位置
關鍵字/20px 20px
backgroupd-origin:背景圖片的起點
border-box/content-box
background-repeat:背景圖片的重複方式
repeat-x/repeat-y/no-repeat
background-size:背景圖片的填充方式
cover/ contain
background速寫:
1) color
2) clip color
3) image position repeat
4) image position
5) image repeat
background: url(“./images/bg.jpg”) 0 0 no-repeat;
background-color: #0e3b98;
backgrond-clip:設定背景的覆蓋範圍
border-box——–背景位於邊框以內
padding-box——-背景位於內邊距以內
content-box——-背景位於內容區
background-attachment (設定背景影象的固定點)
速記寫法取值:
[][][][
css
語法
規則
選擇器 {
樣式規則
}
css註釋: /* mmm */
html註釋:<!-- mmm -->
css在html中的應用:
1 style=""
2 <style></style>
3 style.css
<link rel="stylesheet" href="">
選擇器
規則
1. 字型模組
2. 列表模組
3. 盒子模組
4. 表格模組
5. 動畫模組
6. 媒體查詢模組
佈局
1、2、3、4、5、