php7.4 注意事項
阿新 • • 發佈：2022-05-31
今日內容
1.表單標籤
2.CSS層疊樣式表
3.CSS選擇器
4.CSS樣式調節
1.表單標籤
基於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: <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>
2.CSS層疊樣式表
主要用來調節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屬性直接編寫(不推薦)
3.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選擇器 > 類選擇器 > 標籤選擇器
4.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;
}
當多個屬性名有相同的字首,那麼可以簡寫一次性完成