Day46前端開發基礎(03)
阿新 • • 發佈：2022-12-01
表單標籤的補充說明
基於form表單傳送資料 1.用於獲取使用者資料的標籤至少應該含有name屬性 name屬性相當於字典的鍵 使用者輸入的資料會被儲存的標籤的value屬性中 value屬性相當於字典的值 2.如果不需要使用者填寫資料 只需要選擇 那麼我們需要自己填寫value <input type="radio" name="gender" value="male"> ps:沒有name屬性的標籤 form表單會直接忽略 不會發送 3.針對input標籤理論上應該配一個label標籤繫結 但是也可以不寫 <label for="d1">username:<label for="d1">username: <input type="text" id="d1"> </label> <label for="d1">username:</label> <input type="text" id="d1"> 4.標籤的屬性如果和屬性值相等 那麼可以簡寫 <input type="file" multiple="multiple"> <input type="file" multiple> 5.針對選擇型別的標籤可以提前設定預設選項 <input type="radio" name="gender" checked="checked"> <input type="radio" name="gender" checked> <input type="checkbox" checked="checked"> <input type="checkbox" name="gender" checked> <option value="" selected="selected">222</option> <option value="" selected>222</option> 6.下拉框與檔案上傳可以複選 <input type="file" multiple> <select name="" id="" multiple>
CSS層疊樣式表
主要用來調節html標籤的各種樣式 """ 思考:頁面都是由HTML構成的 並且頁面上有很多相同的HTML標籤 但是相同的HTML標籤再不同的位置可能有不同的樣式 我們如果區分標籤 標籤的兩大重要屬性>>>:區分標籤 1.class屬性 分門別類 主要用於批量查詢 2.id屬性 精準查詢 主要用於點對點 學習CSS的流程 1.先學習如何查詢標籤 2.再學習如何調整樣式 """ 1.CSS語法結構 選擇器 { 樣式名1:樣式值1; 樣式名2:樣式值2 } 2.css註釋語法 /*註釋內容*/ 3.引入css的多種方式 1.head內style標籤內部編寫(學習的時候使用) 2.head內link標籤引入(標準的方式) 3.標籤內部通過style屬性直接編寫(不推薦)
CSS選擇器
1.CSS基本選擇器 1.標籤選擇器(直接按照標籤名查詢標籤) div { color: red; } 2.類選擇器(按照標籤的class值查詢標籤) .c1 { color: green; } 3.id選擇器(根據標籤的id字之就精準查詢標籤) #d1 { color: yellow; } 4.通用選擇器(直接選擇頁面所有的標籤) * { color:blue; } 2.css組合選擇器 """ 預知知識點 我們對標籤的巢狀有另外一套說辭 <p>ppp</p> <p>ppp</p> <div>div <div>divdiv <p>divdivp <span>divdivpspan</span> </p> </div> <p>divp</p> <span>divspan</span> </div> <p>ppp</p> <span>spanspan</span> 針對標籤的上下層級以及巢狀有另外的說法 父標籤 後代標籤 子標籤 弟弟標籤 哥哥標籤 祖先標籤 """ 1.後代選擇器(空格) div span { color: red; } 2.兒子選擇器(大於) div>span{ color:yellow; } 3.毗鄰選擇器(加號) div+span { color: yellow; } 4.弟弟選擇器(小波浪號) div~span { color: yellow; } 3.分組與巢狀 div,p,span { # 多個選擇器合併查詢 color: yellow; } #d1,.c1,span { color: green; } div.c1 { 查詢class含有c1的div color: red; } div#d1 { 查詢id是d1的div color: red; } .c1 p.c2 { 查詢含有c1樣式值裡面的含有c2樣式值的p標籤 color: antiquewhite; } 4.屬性選擇器 /*[username] {*/ 按照屬性名查詢 /* color: red;*/ /*}*/ /*[username='jason'] {*/ 按照屬性名等於屬性值 /* color: yellow;*/ /*}*/ div[username='jason'] { color: darkcyan; } 5.偽類選擇器 """a標籤補充說明 針對沒有點選過的網址 預設是藍色 點選過的則為紫色""" a:hover { color: orange; } input:focus { input獲取焦點(被點選)之後採用的樣式 background-color: red; } 6.為元素選擇器 /*p:first-letter {*/ /* font-size: 48px;*/ /* color: red;*/ /*}*/ p:before { css新增文字無法正常選中 content: '嘿嘿嘿'; color: blue; } p:after { css新增文字無法正常選中 content: '呵呵呵'; color: red; }
選擇器優先順序
1.選擇器相同 匯入方式不同
就近原則
2.選擇器不同 匯入方式不同
內聯樣式 > id選擇器 > 類選擇器 > 標籤選擇器
CSS樣式調節
字型樣式
font-size:14px 24px 28px 36px 字型程式碼
font-weight: lighter; 字型粗細
color:三種模式
/*color: red;*/
/*color: #3d3d3d;*/
color: rgb(186,11,98);
rgba()最後一個引數還可以控制透明度 0~1
text-align: center 文字居中
text-decoration: none; 主要用於a標籤取消下劃線
text-indent: 32px; 首行縮排
"""
取色器工具
1.pycharm
2.截圖功能
"""
背景屬性
div {
width: 800px;
height: 800px;
/*background-color: red;*/
/*background-image: url("https://img2.baidu.com/it/u=167083063,1652780278&fm=253&fmt=auto&app=138&f=JPEG?w=369&h=472");*/
/*background-image: url("666.png");*/
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*background-position: center center;*/
background: url("666.png") blue no-repeat center center;
}
當多個屬性名有相同的字首 那麼可以簡寫一次性完成