前端 CSS

1. 內容回顧
1. 課前面試題
列表的內置方法：sort()，能夠經過key指定排序的依據
2. 昨日內容(鞠營營)
1. HTML
1. HTML結構
2. 標籤
1. 塊兒級標籤
h1~h6
p
div
hr
ol>li
ul>li
table>tr
2. 內聯標籤/行內標籤
a
span
input
img
b、i、u、s
3. 標籤的嵌套規則
1. 標籤之間能夠嵌套（塊兒級標籤能夠包內聯標籤）
2. p標籤不能包p標籤和div標籤
4. 獲取用戶輸入的那些標籤
1. form標籤不是from 埋下伏筆
1. action --> 控制往哪裏提交數據
2. method --> get/post,HTTP請求的兩種方法
3. enctype --> 當form表單中有文件類型的數據須要上傳時
multipart/form-data
2. input
1. type類型有不少
1. text
- placeholder設置提示語
2. password
3. date
4. email
- 經過value屬性設置輸入框的默認值！


5. checkbox
6. radio
- 經過value屬性設置value
- 經過checked屬性設置默認選中

7. submit --> 提交
8. button --> 普通按鈕，多用js代碼去綁定事件
9. reset --> 將當前form表單中的輸入內容重置

10. file
2. name屬性
指定form表單提交數據時的key，用戶填寫的是value

3. select
- multiple=multiple --> 簡寫 multiple
- 內部包含option
- 設置value屬性
- 經過selected屬性設置默認選中
- 分組的select
optgroup
4. textarea
- cols=列數
- rows=行數
- name屬性
5. label
多用於和輸入框搭配使用
兩種綁定方式
1. label包起來
2. 經過for=id值

2. 今日內容
https://www.cnblogs.com/liwenzhou/p/7999532.html

1. CSS語法
選擇器 {屬性1:值1;屬性2:值2;}
2. CSS導入方式
1. 直接將樣式寫在標籤內部的style屬性
2. 在head標籤中寫style標籤
3. 將樣式寫在單獨的css文件中，經過link標籤的href屬性導入（項目中多用這種）
3. CSS選擇器 ***** jQuery選擇器相似
1. 基本選擇器
2. 組合選擇器
3. 屬性選擇器
4. 分組和嵌套
5. 僞類和僞元素
4. CSS選擇器的優先級 *****
1. 選擇器相同
下面的優先級越高，覆蓋
2. 選擇器不一樣
不一樣的選擇器的優先級不同
內聯(1000)>ID選擇器(100)>類選擇器(10)>元素選擇器(1)>繼承的(0)

2. CSS屬性
1. 高和寬
只有塊兒級標籤才能設置寬和高
2. 字體屬性
1. 用什麼字體
2. 字體大小
3. 字體粗細
4. 字體顏色
5. 文字裝飾效果
6. 文字對齊
7. 文字縮進

永遠不要高估本身！
只要思想不滑坡，方法總比問題多！
聽人勸，吃飽飯！

 

1. 內容回顧
1. 今日面試題
2. CSS
1. CSS語法
選擇器 {屬性1：值1;...;}
2. CSS導入方式
1. 行內樣式-->把css樣式寫到標籤的style屬性裏
2. style標籤中定義
3. 寫在單獨的css文件中，經過link標籤導入
3. CSS選擇器
1. 基本選擇器
1. ID選擇器 --> HTML標籤都有惟一的ID
2. 類選擇器 --> HTML標籤能夠設置class屬性
3. 標籤選擇器 --> 大範圍使用
4. 通用選擇器 *
2. 組合選擇器
1. div p 後代選擇器
2. div>p 兒子選擇器
3. div+p 毗鄰選擇器
4. div~p 弟弟選擇器
3. 分組和嵌套（全班都沒想起來的）
div, p {}
div.c1 {}
4. 屬性選擇器
1. div[s14] 找到有s14這個屬性的div標籤
2. input[type='email'] 找到type是email的input標籤
5. 僞類選擇器
1. :hover --> 鼠標移動到標籤上時應用的樣式
2. :focus --> input標籤獲取焦點時應用的樣式
6. 僞元素選擇器
p:before { --> 在P標籤內部的最前面追加一個內容
content: "*";
color: red;
}
p:after { --> 在P標籤內部的最後面追加一個內容

}
清除浮動：
.clearfix:after{
content: "";
clear: both;
display: block;
}
4. CSS選擇器的優先級
1. 樣式名同樣的話
相似 變量覆蓋 最後加載的那個樣式生效
2. 樣式名不同
根據 權重計算
內聯樣式(1000)>ID選擇器(100)>類選擇器(10)>元素選擇器(1)>繼承(0)
3. 不講道理的
!important
5. CSS屬性
1. 文字屬性相關
1. font-family: "字體1", "字體2",
2. font-size 字體大小
3. font-weight 字體粗細
4. color 字體顏色
1. 英文的顏色名 red
2. 16進制顏色代碼 #FF0000
3. RGB rgb(255, 0, 0)
4. rgba(255, 0, 0, 0.4)
2. 寬和高
1. width 寬
2. height 高
只有塊兒級標籤設置寬和高才有效
3. 背景
background

background-color: red
background-image: url(...)
4. 文本樣式
1. 水平居中
text-align: center
2. 單行文本的垂直居中
line-height=父標籤的高度
3. 文本裝飾線
text-decoration: none/under-line/over-line/line-through
5. CSS盒子模型
內容-->padding-->border-->margin
6. 浮動
float: left/right
浮動的反作用
7. 定位
1. 相對定位 --> 相對本身原來在的位置作定位
2. 絕對定位 --> 相對本身已經定位過的祖先標籤
3. 固定定位 --> 相對於屏幕作定位
8. 溢出
overflow: hidden/scroll/auto
9. 邊框
border: 1px solid red;
border-radius: 50%
10. display
1. block
2. inline
3. inline-block
4. none