H 5 C 3新特性まとめ(一)
9624 ワード
一.H 5レイアウトラベルの追加
1.レイアウトのプロパティが追加されました
新しい属性:
以上のラベルはdivですが、divよりも意味化されています.H 5の中でウェブレイアウト構造を表すためのラベルはHTML 5の仕様が出てからではありません.それは互換性の問題があることを意味します.IE 8と以前のブラウザはサポートされていません.
2.上記の互換性結節スキーム:ブラウザがie 8以下であるか否かを判断し、プラグイン(html 5 shiv.jsというプラグイン)を導入すればよい.操作は以下の通りである.
二.H 5のカスタム属性
1.意味:ラベル自体が持たない属性を、ラベルに書くとカスタム属性と呼ぶ.2.h 5でカスタム属性を指定するには、data-属性名.3.JSはどのように値を取りますか?値を取る:カスタム属性であれば、JSで要素を通過することができる.Dataset[属性名]が取得されました.4.注意点:
三.Transitionプロパティ
四.classList属性JSにはclassListという特殊な操作クラスの属性が追加されています
五.box-sizingプロパティ
box-sizingは枠が内重合か外拡散かを設定、border-boxは内重合、content-boxは外拡散であり、これもデフォルト値である.
六.擬似クラスセレクタ
七.box-shadowボックスシャドウアトリビュート
八.text-shadowテキストシャドウプロパティ
九.backgroundプロパティの詳細
十.linear-gradientプロパティ
1.レイアウトのプロパティが追加されました
新しい属性:
header:
nav:
main：
section:
aside：
article：
footer：
以上のラベルはdivですが、divよりも意味化されています.H 5の中でウェブレイアウト構造を表すためのラベルはHTML 5の仕様が出てからではありません.それは互換性の問題があることを意味します.IE 8と以前のブラウザはサポートされていません.
2.上記の互換性結節スキーム:ブラウザがie 8以下であるか否かを判断し、プラグイン(html 5 shiv.jsというプラグイン)を導入すればよい.操作は以下の通りである.
<style>
header{
width: 100px;
height: 100px;
background-color: #f00;
}
style>
二.H 5のカスタム属性
1.意味:ラベル自体が持たない属性を、ラベルに書くとカスタム属性と呼ぶ.2.h 5でカスタム属性を指定するには、data-属性名.3.JSはどのように値を取りますか?値を取る:カスタム属性であれば、JSで要素を通過することができる.Dataset[属性名]が取得されました.4.注意点:
：
data- ，
data- -， -， - ， data-
： -
<body>
<div id="box" data-shengao="185cm" data-tizhong="45kg" data-user-login-name="andy">div>
body>
html>
<script>
// H5 ， .dataset
console.log(box.dataset);//
console.log(box.dataset.shengao);// 185cm
console.log(box.dataset['shengao']);// 185cm
console.log(box.dataset['userLoginName']);//andy
script>
三.Transitionプロパティ
transition: （ ） */
1： ， all， ， ，
2： ， s
3： （ ）
4： linear steps(n): n
transition hover ，
transition: all 2s .5s linear;
，
transition-property: ， all
transition-duration:
transition-delay:
transition-timing-function:
四.classList属性JSにはclassListという特殊な操作クラスの属性が追加されています
、 、
classList ， ，
className
add:
remove:
toggle： ： ，
contains： ， true， false
五.box-sizingプロパティ
box-sizingは枠が内重合か外拡散かを設定、border-boxは内重合、content-boxは外拡散であり、これもデフォルト値である.
六.擬似クラスセレクタ
:hover：
:link：
:active：
:visited：
a ， ， a ， hover
:xxx-child：
:first-child： ，
:last-child： ，
:nth-child：
nth-child ，
n：
n+m： m ：n+3 3
mn: m 3n 3
even：
odd：
七.box-shadowボックスシャドウアトリビュート
1：
2：
3： ，
4： , 0 ， ，
5：
6： ， inset ， inset ，
， ， ，
八.text-shadowテキストシャドウプロパティ
1：
2：
3：
4：
！ ，
九.backgroundプロパティの詳細
1： ，
2： ， repeat
no-repeat： ，
repeat-x：
repeat-y：
3：
， ，
：left,right,center
：top,bottom,center
， center
，
，
，
， ,
，
4： ， 3 ， /
， ， ，
：
cover： ，
contain： ，
，
5： ： ， ，
， ， ， ，
十.linear-gradientプロパティ
， ， background
1：
to right：
to top：
to bottom：
to left：
to right top：
to right bottom：
to left top：
to left bottom：
， ,0deg
，
2： ，
3： ，
， , , 2 ， n .