HTML5 新屬性的講解

2022-08-09 12:39:19 字數 1448 閱讀 7736

1.選擇器:

標籤選擇器:

class選擇器:

id選擇器:

後代選擇器:div li  div下所有li

子代選擇器:div>li  div的所有子一代 li 元素

交集選擇器:div.class  這個元素式div且類名叫class

並級選擇器:.class,.ad  選擇兩個元素乙個類叫class 乙個類叫ad

萬用字元選擇器:

偽類選擇器:

結構選擇器:div:nth-of-type(2)  選擇第二個div

屬性選擇器:div[name='zhang']  選擇div標籤 name屬性 屬性值為zhang的

兄弟選擇器:div~p  只選div後面的兄弟p

相鄰選擇器:div+p  div相鄰的p元素

2.文字屬性

text-align  文字對齊

text-decoration  文字修飾

text-indent  文字縮排

text-shadow  文字陰影

text-overflow  文字溢位 怎麼顯示內容;

text-shadow的屬性值;

第乙個:x軸偏移距離  可以為負 向左偏;

第二個:y軸偏移距離  可以為負 向上偏;

第三個:r 陰影範圍;

第四個:陰影顏色;

案例:text-shadow:10px 10px 5px #000;

text-overflow:屬性值;

clip  修剪文字;

ellipsis  文字溢位以省略號的形式出現;

text-overflow:ellipsis  超出以省略號的形式表現出來  但這個屬性必須配合 overflow:hidden white-space:nowrap  一起使用 三個都不能少;

text-justify:文字對齊:一般是兩端對齊

text-wrap:規定文字的換行規則:(僅作為了解,所有的主流瀏覽器都不支援);

word-wrap:break-word;

word-break:break-word;  單詞是否拆分,拆分單詞;

瀏覽器對英文單詞,如果單詞之間沒有空格,瀏覽器就會預設這是乙個單詞,即使超出了,預設不換行,加了這個屬性中的任何乙個,一旦單詞超了,即使乙個單詞也要換行;

box-shadow  給元素周邊新增陰影;

與text-shadow的用法相同;

漸變:瀏覽器的區別;

移動端安卓內建chrome瀏覽器,不需要考慮相容性,但是在pc上考慮 css3的新增屬性 ie,火狐等不相容,因為各個瀏覽器核心不一樣,針對這些核心,css3給元素屬性前面加上相對應的字首;

比如:ie  -ms-text-shadow;

chrome  -webkit-text-shadow;

firefox  -moz-text-shadow;

opera  -o-text-shadow;

HTML5新增屬性詳細講解

新增的input type屬性值 1.email,使用方法 輸入郵箱格式 2.tel,使用方法 輸入手機號碼格式 3.urll,使用方法 輸入url格式 4.numberl,使用方法 輸入數字格式 5.search,使用方法 搜尋框 體現語義化 6。range,使用方法 自由拖動滑塊 7.time,...

HTML5的新的表單屬性

新的form屬性 l autocomplete l novalidate 新的input屬性 l autocomplete l autofocus l form l form overrides formaction,formenctype,formmethod,formnovalidate,for...

HTML5 的新的表單屬性

1 新的 form 屬性 autocomplete autocomplete 屬性 autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。注釋 autocomplete 適用於 2 新的 input 屬性 2.1 autofocus 屬性規定在頁面載入時,域自動地獲得...