css3_html/css_WEB-ITnose の予備調査

属性セレクター:
1. 完全に一致する属性セレクター。 完全に一致する文字列です。
[id=article]{
color:red;
}
2. 一致するセレクターが含まれます。指定された文字列が含まれます。
構文は: [attribute*=value]attribute は属性名を指し、value は「*=」記号を含む属性値を指します。
[id*=article]{
color:red;
}
3. 最初の文字マッチングセレクター。最初の文字が一致する限り。
構文は: [attribute^=value]attribute は属性名を指し、value は「^=」記号を含む属性値を指します。
[id^=article]{
color:red;
}
4. 末尾文字マッチングセレクター。 文字列の末尾を一致させるだけです。
構文は: [attribute$=value]attributeは属性名を指し、valueは「$=」記号を含む属性値を指します。
[id$=article]{
color:red;
}

擬似クラスセレクター:
1.擬似クラス要素セレクターの前に、その主な機能は要素を選択する前にコンテンツを挿入することです。
構文：要素タグ：before{
コンテンツを挿入します。签文法: 要素タグ: after {
content: "挿入されたコンテンツ"
}
p.after {
content: "テキスト"
}
3.Firs-child は、指定された要素リスト内の最初の要素スタイルを指定します。
li:first-child{
color:red;
}
4.last-childは要素リストの最初の要素のスタイルを指定します。
li:last-child{
color:red;
}
5.nth-child、nth-last-childでは要素のスタイル、または最後から数えた要素のスタイルを指定できます。
//2番目のli要素を指定
li:nth-child(2){}
//最後から2番目のli要素を指定
li:nth-last-child{}
li :nth-child(even){}
li:nth-child((even){}




1.box-shadow は要素に影の効果を与えます。
構文: box-shadow:|| color;
長さは、シャドウブラーのオフセット値です。値は負の値になる場合があります。 fox*/
-moz-box-shadow:3px 4px 2px #000；

2.text-shadow テキストコンテンツの影効果やぼかし効果を設定します。
構文: box-shadow と同じ。

Background

1.background-sizeは背景画像のサイズを設定するために使用されます。
構文：background-size:10px 5px;
-webkit-background-size:10px 5px;
2.background-clipは背景のクリッピング領域を決定するために使用されます。
3.backrground-originは、background-position属性の基準座標の開始位置を指定するために使用されます。
ボーダーはボーダーの左上隅から始まり、コンテンツはコンテンツエリアの左上隅から始まり、パディングはパディングエリアから始まります。
4.background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#000));

角丸ボーダー
border-radius:
border-radius:10px 5px;
-webkit-border-radius:10px 5px;
or
-半径:10ピクセル 5ピクセル10px 5px;
-moz-border-radius:10px 5px 10px 5px;
-webkit-border-radius:10px 5px 10px 5px;
ビューポート仮想ウィンドウ

パラメータ:
幅は仮想ウィンドウの画面幅を指定します。
Heightは仮想ウィンドウの画面の高さを指定します。
Initial-scaleは初期ズーム率を指定します
maximum-scaleはユーザーがズームインできる最大スケールを指定します
minimum-scaleはユーザーがズームインできる最小スケールを指定します
user-scalableは手動スケーリングが有効かどうかを指定します許可された。

これは画面幅が600のときに呼び出されます。 ~900 パラメータ。
縦向きモードの場合

横向きモードの場合

@media のみ画面 and (min-width:213px) {}
モバイルブラウザのみ自動的に無視されます,
サポートされていないブラウザ このスタイルは自動的に無視されます。

地理位置情報 地理位置情報。 navigator.geolocation.getCurrentPosition(function(pos){
console.log("現在の地理的位置の緯度"+pos.coords.latitude);
console.log("現在の地理的位置の緯度"+pos.coords.経度);
console.log("現在の緯度の精度"+pos.coords.accuracy);
})