CSSミート
それらのものの1、CSS
「のCSS（カスケーディング・スタイルシート）、翻訳カスケードスタイルシート」私の理解では、次のとおりです。スタイルオーバーレイテーブルのすべての種類。
ストリーキングにはCSSが存在しない場合は、「皇帝の新しい服」を着ているWebページ！自明のCSSの重要性！
HTML、スタイル定義の表示モードの説明を提供するために、CSS、HTML要素、TAなどの服は、正確にピクセルレベルのページ要素を制御することができます。
CSSの歴史は、最初のいくつかの方法で導入し、違いを理解、言っても過言ではありません。
2、外部スタイル
外部スタイルは、単一の拡張の確立を指し.cssヘッドタグに内蔵されたリンク方式を使用して、スタイルシート、あなたはまた、インポートモードを使用して導入することができます。
// link 引入
<link rel="stylesheet" type="text/css" href="css/style.css" />
// @import 引入
<style type="text/css">
@import url("css/style.css");
</style>外部スタイルの導入のメリット、スタイルシートでは、複数のページで再利用することができ、リンクの壁を使用して、インポート初心者の注意を導入する方法をお勧めします割れました。
3、インラインスタイル
主に通じインラインスタイル、<style> 标签ページ内のスタイルを編集します：
<style>
.title {
color: red
}
</style>現在のページでのみ有効なスタイルを書き込む方法は、他のページには、使用することはできない<style>ラベルが頭の中で提案を置くためにどこにでも配置することができます。
4、インラインスタイル
インラインスタイルは、直接p要素を持つ例えば、直接それを定義するHTMLページ内の要素であります：
<p style="color: red"></p>場合にのみ発効インラインスタイルのタグは、実際には、より少ないか、ページを記述する時間がない使用することをお勧めします。
最高の引用のスタイルは、の導入リンクする最初の方法を使用することです別のHTMLページのコードとCSSスタイルだけでなく、再利用性のCSSスタイルを改善するためのように、簡単なメンテナンスやプロジェクトの管理を。
他の2つの方法は、以下を使用または全く、ページの複雑さを軽減してみてください。
5、CSSセレクタ
スタイルのHTMLページのほとんどの要素はCSSセレクタによって制御されます。
多くまたは多対コントロール、分離することはできませんCSSセレクタにページ上のHTML要素の一つ一つを達成するためにCSSを使用します。
これらについてのCSSセレクタ：
- ユニバーサルセレクタ
- タグセレクタ
- クラスセレクタ（クラスセレクタ）
- IDセレクタ
- 子孫セレクタ
- 子孫セレクタ
- コンビネーションセレクタ
- 隣接兄弟セレクタ
- 疑似クラスセレクタ
- メディアクエリ（仮称も考えられます）
一部が再設定され、いくつかの共通セレクタに、追加するために歓迎のメッセージを逃すことがあります。
5.1ユニバーサルセレクタ
*すべてのラベルに適用され、スタイルに追いつくために直接の背後にある、ユニバーサルセレクタの始まりを使用し、それが一般的な定義を表します。
頭、手、脚：すべての通常の定義のように。
例：
* {
font-size: 18px;
color: red
}すべてのラベルのフォントサイズは18pxであることを、この手段は、色は赤です。
5.2タグセレクタ
タグセレクタは、スタイルに追いつくために、直接ラベルの後ろに、同じラベル要素のすべてを選択します。
制服を着用する学生を必要とするように、さまざまな工場の労働者は、作業服を対応しています。
例：
p {
font-size: 16px;
color: blue
}ここでは、すべてのpタグのフォントサイズが表す色は青で、16pxにあります。
5.3クラスセレクタ（クラスセレクタ）
クラス名で特定のタグを選択することができるクラスセレクタで書かれたスタイル定義、すなわち多く、である。初めに、クラス名、書き込みパターン、クラスと対応するタグ=「」の参照を維持します。
クラスの幹部のクラスを割り当てると同じように、彼らに財産の同じ種類を与えます。
例：
// css 样式
.title{
background-color: red
}
// html 页面
<div class="title">语文课代表</div>
<div class="title">数学课代表</div>ここでは色が二つのクラスで表すことができた背景には、赤、多くの設定を1に設定されています。
5.4 IDセレクタ
IDセレクタ、その後、IDを維持するために戻って、＃で始まるスタイルを書きます。ユニークなIDである参照名「」に対応するID =タグで使用。
学校に、例えば、属性は、学校が唯一のプリンシパルを持って、プリンシパルを定義します。
例：
// css 样式
#title{
background-color: black
}
// html 页面
<div id="title">校长</div>CSSセレクタは、まだ要素が選択されたアプリケーションのスタイル（とクラス選択をマークされ、IDセレクタはユニークですが、いくつかの要素が同じ名前IDに命名されている場合は、ここで背景色は、黒の社長として定義されています）デバイスのように。
一見すると、IDセレクタの一意性が存在していないようです。しかし、JavaScriptでは、同じ最初の名前のid要素を持って選択します。だから、良い習慣を開発する、同じIDが同じページに二度目に表示されません。
CSSの説明は、私たちが注文属性を書いて注意を払う必要がありますので、プロパティは上記と同じ属性の割り当ては、下記に上書きされますため、トップダウンの素子であるため、注意してください。
5.5子孫セレクタ
子孫を選択することも、親要素の前に、子孫の特定の要素を選択するためのセレクタを含む公知の背面にサブエレメント、空間の中央から分離されます。
これは、それを理解することは比較的容易類推する必要があり、私は中国人です、私の子孫の全ては、中国の人々の血を維持します。
例：
// css 样式
.china p {
background-color: yellow
}
// html 页面
<div class="china">
<p>儿子</p>
<p>女儿</p>
</div>ここの息子と娘の背景色が黄色になります。
子孫セレクタ要素を二に限定されるものではなく、また、多層子孫関係に適用することが、最大の入れ子を分離する層は、256複数の空間を超えません。
5.6子孫セレクタ
子孫セレクタが異なると、選択の第一世代の子孫のみが子孫>選択を選択することにより、セレクタにより選択されたTA、子孫空間を意味します。
例えば、私はちょうど彼らの子供私の赤いドレスを与え、そのような人の孫、ひ孫などの他の子孫は、送信されません。
例：
// css 样式
div > strong {
color:red
}
// html 页面
<div>
<strong>儿子</strong>
<span>
<strong>孙子</strong>
</span>
</div>子供のフォントの色は赤で、孫はデフォルトの色です。
5.7組合せセレクタ
異なる複数の要素は同様の動作を行う場合には、同じスタイル・コードは、セレクタの組み合わせである、要素間のカンマで区切られた、共通に使用することができます。
人々の異なるアイデンティティを送信するように、私たちは賞と呼ばれる、すべてのそれらを一緒に置くことができる「柔術チーテンユース部門賞が触れました」。
例：
// css 样式
div, p, span, h1 {
color: red
}
// html 页面
<div>小明</div>
<p>小红</p>
<span>小刚</span>
<h1>小利</h1>ここで暁には、赤、剛と小さな利益の色が赤で、セレクタの組み合わせを使用することの最大の利点は次のとおり簡略化CSSコードは、符号化効率が向上します。
5.8＆隣接兄弟セレクタユニバーサルセレクタ兄弟
兄弟または隣接セレクタ良好な理解、MDN提示がされている：第最初の要素の後の要素と、2つの要素は、同じ親要素に属する場合、直ちに、2つの選択の間に介在します子要素は、第二の要素が選択されます。
皇帝は王子が、それが現在の子供への最後の参照であるとき、次の息子が生まれていることを言ったように氏の娘が、ない場合は、次の息子は、王子です。
例：
// css 样式
div + p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>真ん中は次女で区切られているためここでは、デフォルトの色です、次男はとき王子そうではありません。
隣接兄弟セレクタは二つの重要なポイントにまとめました：
- 直後に別の要素の最初の
- どちらも同じ親要素を持っています
一般的な兄弟隣接兄弟セレクタが似ていますが、第1の共通兄弟要素が〜の背面に接続されていることを除いて、確かに同じではありません。
皇帝の長男は、すべての人の息子はチャンピオンであると述べた後、それを基準として、長男である、例えば、皇帝の息子を取るために続けて、王の息子は、すべての後、娘の場合は、スキップ。
例：
// css 样式
div ~ p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>ここにあなたの推測のような神の外観の馬になるのですか？
5.9擬似クラスセレクタ
擬似クラスセレクタスタイル要素は、一般に、いくつかの特定の状態に記述するために使用される、最も一般的なものは、当然のことながら、他の要素があってもよいしている要素（ハイパーリンク）を使用することであるが、比較的小さいです。
それのようなHelenians、ない、顔をしかめたときに幸せに笑う、怒るだろうと、彼らは物事を壊すかもしれない幸せな、異なる状態の主な定義。
例：
// 没有被访问过a标签的样式
a:link {
color: black
}
// 访问过后a标签的样式
a:visited {
color: yellow
}
// 鼠标悬浮时a标签的样式
a:hover {
color: red
}
// 鼠标摁住的时候a标签的样式
a:active {
color: blue
}擬似クラスセレクタは、私はそれは、セレクタの最も興味深いことを知っていることを試みるべきだと思います。
5.10メディアお問い合わせ先
メディア問い合わせは、TAでGuannameduo I最初引っ張らないで、セレクタとみなされるべきです。
TAは異なるレンダリングで異なるページのデバイスを達成するために、異なる条件で異なるスタイルを使用することができます。
父は、人の子は親の世話をする夫のために妻を保護するとき、子供たちの教育のために、異なるものの異なるシナリオの下で行うには男のように。
例：
@media screen and (max-width: 300px) {
body {
background-color: red
}
}ページ幅が300ピクセルで、その後、赤、シンプルに背景色を変更し、簡単にそれを理解するために未満であれば、ここでスタイルを示しています。
6、最終
CSSは、ここで簡単なリカバリディスクで、すべてのインスタンスにはスクリーンショットは、まだあなたは正しい方法でノック、試してみて、効果を確認するために所有することを願って、ショーはありません。
書き込みが間違っているとあなたには、いくつかの場所を持っている場合は、また、学習されたシェアを、私を修正してください。
