表單標籤內容補充、CSS

阿新 • • 發佈：2022-12-01

表單標籤內容補充、CSS

表單標籤內容補充、CSS

表單標籤的補充說明

基於form表單傳送資料
1.用於獲取使用者資料的標籤至少應該含有name屬性，name屬性相當於字典的鍵；
  使用者輸入的資料會儲存到標籤的value屬性中，value屬性相當於字典的值

2.如果不需要使用者填寫資料，只需要選擇，那就需要我們自己填寫value
	<input type="radio"name="gender" value="male">
    # 這樣使用者可直接點選已有選項選擇，不用自己輸入資料
    "沒有name屬性的標籤，form表單會直接忽略，不會發送"

3.針對input標籤理論上應該配一個label標籤繫結，但是也可以不寫
	<label for="d1">username: <input type="text" id="'d1"></label>
    # label標籤簡單理解為可以繫結表單元素，label本身與某個表單繫結，當用戶點選了label標籤則會觸發表單，也就相當於點選了表單
程式碼演示：
	給需要繫結的表單設定一個id，然後給label設定一個for，他們的值相匹配就可以實現繫結
	<label for="d1">username:</label> 
        <input type="text" id="d1">
	"label只針對於表單繫結，其他元素沒有效果"
    
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層疊樣式表

CSS層疊樣式表主要用來調節HTML標籤的各種樣式

# 區分標籤的兩大重要屬性
	class屬性：分門別類，主要用於批量查詢；
	id屬性：精確查詢，主要用於點對點

# CSS語法結構
選擇器{
    樣式名1：樣式值1；
    樣式名2：樣式值2
}

# CSS註釋語法
	/*註釋內容*/
    
# 引入CSS的多種方式
	head內style標籤內部編寫
	head內link標籤引入（標準方式）
	標籤內部通過style屬性直接編寫（不推薦）

CSS選擇器

# CSS基本選擇器
	1.標籤選擇器——按照標籤名查詢標籤
    	div {
            	color：red；
        	} div下的所有值都會起作用
	2.類選擇器——按照標籤的class值查詢標籤
    	.c1 {
            	color: green;
        	} 對類的對應值起作用
	3.id選擇器——根據標籤的id值精準查詢標籤
    	#d1{
			color:yellow;
		} 只針對某一個值
	
	4.通用選擇器——直接選擇頁面所有的標籤
		* {
            color:blue;
			} 對所有選擇器都會起作用

# CSS組合選擇器
針對標籤的上下層級以及巢狀有另外的說法：
	父標籤、後代標籤、子標籤、弟弟標籤、哥哥標籤、祖先標籤
1.後代選擇器（空格連線）
	div span {
        color：red
	}
呈現效果：div內所有的span標籤都會變成紅色

2.兒子選擇器（大於號連線）
	div>span {
        color：yellow;
		}
呈現效果：div裡的span標籤都會變黃色，但div裡含有的標籤裡的span標籤就不會起作用了

3.毗鄰選擇器（加號連線）
	div+span {
        color：yellow;
		}
呈現效果：div下面的span標籤變黃色

4.弟弟選擇器（小波浪號連線）
	div~span {
        color：yellow;
		}
呈現效果：div上下相鄰的span標籤變黃色

# 分組與巢狀
# 多個選擇器合併查詢
	div，p,span{
        color:yellow;
		}
	呈現結果：div、p、span標籤都變成黃色

	#d1,.c1,span{
    	color:green;
	}
	呈現結果：id為d1的、類為c1的、標籤為span的都變成綠色

	div.c1 {
        color:red;
	}
	呈現結果：div裡的類為c1的都變成紅色
	
	div#d1{
        color:red;
    }
	呈現結果：div裡id為d1的都變成紅色

    .c1 p.c2{
        color:white;
    }
	呈現結果：c1類裡的p標籤類名為c2的標籤變成白色


#屬性選擇器
	/*[username] {*/	按照屬性名查詢
    /*    color: red;*/
    /*}*/

    /*[username='jason'] {*/  按照屬性名等於屬性值
    /*    color: yellow;*/
    /*}*/

    div[username='jason'] {  
        color: darkcyan;
    }


#偽類選擇器
"""a標籤補充說明 針對沒有點選過的網址 預設是藍色 點選過的則為紫色"""
a:hover {
    color: orange;
}
input:focus {  input獲取焦點(被點選)之後採用的樣式
    background-color: red;	
}

#偽元素選擇器
/*p:first-letter {*/
/*    font-size: 48px;*/
/*    color: red;*/
/*}*/
p:before {		css新增文字無法正常選中
    content: '嘿嘿嘿';
    color: blue;
}
p:after {		css新增文字無法正常選中
    content: '呵呵呵';
    color: red;
}

選擇器優先順序

選擇器相同，匯入方式不同

就近原則

選擇器不同，匯入方式相同

內聯樣式 > 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;
        }
	當多個屬性名有相同的字首 那麼可以簡寫一次性完成