CSS基礎-1
技術標籤：css
CSS基礎-1
表單驗證（附上節）
placeholder
在新增該屬性的文字框中顯示提示文字；
<input type="text" placeholder="請輸入使用者名稱">
只能在文字框中顯示，例如text,password,textarea,email和url等型別，在submit,radio,checkbox等型別中無法顯示；
required
將新增該屬性的Input標籤設定為必填項，若點選提交時有未填寫的必填項標籤，則會顯示填寫提醒且提交失敗；
<input type="text" required="required">
標準格式為required=“required”，只寫required也可以；
pattern
將pattern屬性賦值正則表示式字串，提交時，若文字框中的文字不符合正則表示式要求，則提交失敗；
<input type="text" pattern="1[3578]\d{9}">
文字框只讀設定，不可修改，提交時會提交資料；
可用寫法：
readonly=“readonly”
readonly=“true”
readonly
disabled
標籤禁用，可見但是不可提交；
可用寫法：
disabled=“disabled”
disabled=“true”
disabled
hidden
標籤隱藏，不可見但是可提交；
可用寫法：
hidden=“hidden”
hidden=“hidden”
hidden
CSS定義及格式
定義
級聯樣式表，Cascading Style Sheet。
格式
格式一：在標籤中新增style屬性，將樣式宣告賦值給style；
格式三：將樣式寫在外部的CSS檔案中，再將樣式檔案匯入；
<!--格式一-->
<span style="color:yellow;line-height:20px;">123</span>
<!--格式二-->
<style type="text/css">
span{
color:yellow;
line-height:20px;
}
</style>
<span>123</span>
<!--格式三-->
<!--外部CSS檔案寫法-->
span{
color:yellow;
line-height:20px;
}
<!--匯入方式一-->
<head>
<link href="pathname（檔案路徑）" rel="" type="text/css" />
</head>
<!--匯入方式二（不推薦）-->
<head>
<style type="text/css">
<[email protected] url("style.css")-->
</style>
</head>
優先順序
按照就近原則；
當多種樣式同時對一個標籤生效，且各方式標註的樣式有衝突時，遵循就近原則，當有行內樣式標註時，永遠優先應用行內標註的樣式，其次在內部樣式和外部樣式中選擇靠近標籤的應用；
選擇器格式
標籤選擇器
格式：標籤名{宣告}
span{
color:yellow;
line-height:20px;
}
選中頁面中全部的指定元素，並將宣告的樣式應用到這樣元素上；
類選擇器
格式：.類名{宣告}
.cla1{
color:yellow;
line-height:20px;
}
<span class="cla1">123</span>
將宣告的樣式應用到全部屬於該類的元素上；一個類可以有多個元素；
ID選擇器
格式：#ID{宣告}
#na1{
color:yellow;
line-height:20px;
}
<span id="nal1">123</span>
將宣告的樣式應用到對應該ID的元素上；一個ID只可以對應一個元素；
優先順序
ID選擇器>類選擇器>標籤選擇器
當多個選擇器同時對一個標籤生效，且各個選擇器宣告的樣式衝突時，標籤會優先應用ID選擇器的樣式，其次類選擇器，最後標籤選擇器。