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
div2. 選擇器權重（特性值）
1000 規則應用在了 style 屬性中
100 id選擇器
10 類選擇器，偽類選擇器，屬性選擇器
1 元素選擇器，偽元素選擇器
divdiv.one
#first
hello world
3. 順序
div.one
div.top
2) 繼承
規則的繼承，可以被繼承的規則有
font-*
text-*
list-*
color
...不可以被繼承
background-*
border-*
margin-*
padding-*
...body
.first
hello world
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
cmmm
in2. 相對單位
1) em
相對於當前元素的字型大小值
html
1em = 18px
2) rem
相對於html元素的字型大小值
html
html
字型圖示圖
iconfont 阿里巴巴
font-awesome
cssfont-awesome.css
@font-face
.fa
.fa-user::before
font
font-awesome.ttf
font-awesome.svg
\f000
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
hello
width = 內容
100 100px
.box1
內容區 ： width
占有面積: width + padding + border
2. 邊框盒子
box-sizing:border-box;
width = border以內
hello
width = border + padding + 內容
100 20 20 60px
.box1
盒子所在空間=
盒子內容空間=
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 包含，覆蓋最小的邊
C 學習筆記 day05
1 變數的儲存 1 記憶體是一塊空間，把其中的每個位元組做了編號，為了以後計算機能通過編號找到資料 2 編址方式 絕對編址 在整個程式中使用 相對編址 位元組相對於邏輯0偏移量，在程序中使用 4 儲存位址 指標 儲存變數的位址 指標的型別由將要儲存的位址的變數型別決定 int 只能儲存int變數的位...
Python學習筆記day05
高階函式 課後練習 不可變的資料型別一定可雜湊 hash 內建函式可以判斷某個型別是否可雜湊 s1 s2 s3 s4 print s1,s2,s3的交集 s1.intersection s2,s3 print s1,s2,s3的交集 s1 s2 s3 print s1,s2,s3的並集 s1.uni...
java學習筆記day05 陣列
陣列 是一種容器，可以同時存放多個資料值。陣列的特點 1.陣列是一種引用資料型別 2.陣列當中的多個資料，型別必須統一 3.陣列的長度在程式執行期間不可改變 陣列的初始化 在記憶體當中常見乙個陣列，並且象其中賦予一些預設值。兩種常見的初始化方式 1.動態初始化 指定長度 2.靜態初始化 指定內容 動...