1. 程式人生 > >學習html5的第六天課堂筆記

學習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、