基本的な使用CSS -04

1. CSSセレクタ化合物

CSSセレクタは、基本的な、複雑なセレクタセレクタに分かれているが、基本的なセレクタは、当社の実際の開発、迅速かつ効率的な選択タブを満たすことができません。

• 目的は、より正確に、より細かい選択要素タグを標的とすることです。
• 化合物は、2つの以上の基地セレクタ、異なる方法の組み合わせから選択されます

1.1子孫セレクタ

• コンセプト：

  また、付属のセレクタとして知られています

• 役割：

  要素の要素またはグループを選択するための世代を

• 文法

  父级 子级{属性:属性值;属性:属性值;}
  

• 例えば：

  .class h3{color:red;font-size:16px;}
  

1.2サブ要素セレクタ

• 役割：

  サブ要素セレクタは（孫、ひ孫などが含まれていない、プロの息子）のサブ要素の要素を選択します。

• 構文：
  

• 例えば：

  .class>h3{color:red;font-size:14px;}
  

1.3交差点セレクタ

• 条件

  交差点セレクタは、2つのセレクタで構成されて、ラベルが満たされなければならない見つける：ラベルの両方の特性を、ラベルは、2つの特徴を持っています。

• 構文：

  

• 第1のセレクタは、ラベルである、第二のクラスが選択され、両者の間の選択されずにスペースようh3.specialとして、。

1.4セレクタを設定し、

• アプリケーション：

  • いくつかのセレクタの同じスタイルが定義されている場合、彼らが使用することができますし、セットの選択は、あなたがコードより簡潔にすることができます。
  • 簡単に言えば、同じスタイルを定義するために使用されます

• セレクタ（CSSセレクタパケット）設定は、個々によって選択され,、一般的に一緒に接続して使用、集合文。

• 構文：

  

• 任意（タグセレクタ、選択したクラスIDクラスセレクタ、などを含む）の選択の形態、及びセレクタの一部として設定することができます。

• 連合は、一般的に、カンマで区切られた集団の文を、使用されている、すべてのセレクタは、後でスタイルを実行され、コンマを意味するものとして理解することができますを選択します。

• 例えば：

  比如  .one, p , #test {color: #F00;}  
  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
  通常用于集体声明。  
  

1.5リンク擬似クラスセレクタ

• 疑似クラスセレクタ：

  • クラスセレクタは点であり、そのような.demoとして{}
  • リンク{}のような疑似結腸型、

• 役割：

いくつかのセレクタに特殊効果を追加するために使用します。このようなリンクの擬似クラス、構造のような擬似クラスなど、多くの擬似クラスセレクタ、。

• リンク擬似クラスセレクタ

  • ：リンク/ *未訪問のリンク* /
  • ：訪問/ *訪問したリンク* /
  • ：ホバー/ * *リンクの上にマウスを移動/
  • ：アクティブ/ * *リンクを選択/

• ご注意ください

  • 書き込み時には、注文lvhaの上記の順序を逆にしないようにしてください。そうすることでエラーが発生することがあります。
  • ニーモニック
    • L O V E HA TEは憎しみと愛
    • LVのバッグは非常にあるHA O
  • ように使用され、リンクが擬似クラスと呼ばれているため、セレクタAの交差点：リンクA：ホバー（リンク：擬似クラス）
  • リンクブラウザはデフォルトのスタイルを持っているので、一般的にのみ、指定されたスタイルをリンクするために必要とされます。
  • 例えば：

  a {   /* a是标签选择器  所有的链接 */
  			font-weight: 700;
  			font-size: 16px;
  			color: gray;
  }
  a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
  			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
  }
  

1.6複合セレクタの概要

セレクタ	効果	機能	使い方	シンボルを分離して、使用されています
子孫セレクタ	要素の子孫を選択するために使用	すべての将来の世代を選択	もっと	記号は、スペース .nav A
子孫セレクタ	直近の1要素を選択	唯一のプロの息子を選択	レス	シンボル> .nav> pとします
交差点セレクタ	2つのラベルの交点の部分を選択します	だけでなく、	レス	いいえサイン p.oneありません
そして、セットセレクタ	同じスタイルセレクターのいくつかを選択します	これは、集団のステートメントのために使用することができます	もっと	記号はコンマ、.header .nav
リンク擬似クラスセレクタ	リンクに状態を変更		もっと	覚えておくことが重要と{}：の実際の開発のホバー言葉遣い

2.ラベル表示モード（表示）

2.1ラベルの表示モードとは何ですか

• 表示モードラベルとは何ですか？

  ラベルは、このようなdivの独自あたりのラインとして、どのような方法で表示され、たとえば、あなたが複数の行スパンを置くことができます

• 役割：

  Webページのタグより良い私たちのウェブページを満たすために、ラベルの種類を使用する別の場所で非常に多くあります。

• タイプラベル（分類）

  HTMLタグとラベルは、一般的に行ラベルの両方のタイプはまた、イントラブロック要素と列要素と呼ばれるブロックに分割されています。

2.2レベル要素（ブロックレベル）

• 例：

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

• ブロックレベル要素の特性

（1）比較的高い利き、独自の個別の行

（2）高さ、幅、パディングとマージンを制御することができます。

（3）デフォルトでは、コンテナ（親幅）100％の幅であります

（4）容器を放出することができるボックス、またはブロックレベル要素です。

• 注意：
  • pはブロックレベル要素内に置くことができないので、テキストだけでは、特にdivのPを入れないで、段落の中に一緒にグループ化することができます
  • 同様に、これらはタグH1、H2、H3、H4、H5、H6、DTがあり、彼らは他のブロックレベル要素を置くことができないクラスのブロックレベルのタグを、書いています。

2.3 行内元素(inline-level)

• 例：

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

• インライン要素の特長：

（1）一列要素に隣接する行に、複数の行を表示することができます。

（2）高さ、幅直接無効です。

（3）デフォルトの幅は、自身のある幅のコンテンツ。

（4）線要素は、テキストまたは他のインライン要素を受信することができます。

• 注意：

  • リンクを取り戻すことができないリンク。
  • ブロックレベル要素を置くことができますが、最も安全なモードにブロックレベルに変換される特殊なケース。

2.4インラインブロック要素（インラインブロック）

• 例：

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

• ブロック要素内の行の特徴：

  （1）ライン上の内部要素の隣接する行（ブロック内の行）が、ブランクとの間に隙間があります。ラインの複数表示されることがあり
  （2）独自のデフォルトの幅であるコンテンツの幅。
  （3）高さ、行の高さは、外側と内側の余白を制御することができるから。

  ​

2.5は三つのモデルとの違いをまとめたもの

要素モード	要素の配置	スタイルを設定します	デフォルトの幅	含みます
ブロックレベル要素	ラインだけでブロック要素を置きます	幅高さを提供することができます	容器の100％	これは、任意のコンテナレベルのタグを含んでいてもよいです
行内元素	ラインは、要素内に複数の行を置くことができます	直接幅高さを提供していません	コンテンツ自体の幅	または他の行のテキスト要素を受信します
インラインブロック要素	排出ブロック要素内の行ラインの複数	幅と高さを提供することができます	コンテンツ自体の幅

2.6表示ラベル表示モードに遷移

• スイッチブロック：ディスプレイ：インライン。
• 行内转块：display:block;
• 表示：ブロック、ブロック要素内の行線は、に変換インラインブロック。

3.高行（行の高さ）

3.1行の高さの測定

行の高さの測定方法：

3.2単一行のテキストを垂直方向に中央揃え

ハイライン：垂直方向に1行のテキストボックスの中央に配置することを可能にします。

テキストの一行を垂直方向に中央揃えすることができますので、テキストボックスの高さで高いライン、

高次のコンテンツの高さに+ =直線距離+

テキストを垂直方向に中央揃えているように見えるように次への距離は、常に同じです。

三の関係行の高さと高さ

• テキストの行は、垂直高高度を中心とする場合
• テキストの高さに行の高さはでバイアスされる場合
• 行の高さは、テキストの高さは、上のバイアスされるよりも小さい場合

4. CSSの背景（バックグラウンド）

4.1背景色（色）

• 構文：

  background-color:颜色值;   默认的值是 transparent  透明的
  

4.2背景画像（画像）

• 構文：

  background-image : none | url (url) 
  

  パラメータ	効果
  なし	背景なし（デフォルト）
  URL	絶対的または相対的アドレス指定された背景画像を使用します

• 例えば、画像のアドレスの後ろの背景には、URLを引用符で囲むことはできません。：

  background-image : url(images/demo.png);
  

4.3背景タイル（リピート）

• 構文：

  background-repeat : repeat | no-repeat | repeat-x | repeat-y 
  

  パラメータ	効果
  繰り返す	縦と横（デフォルト）で背景画像タイル
  ノー・リピート	背景画像がタイル張りされていません
  繰り返し-X	横方向の背景画像タイル
  繰り返し-Y	背景画像タイル垂直

4.4背景位置（ポジション）

• 構文：

  background-position : length || length
  
  background-position : position || position 
  

  パラメータ	値
  長さ	パーセンテージ|浮動小数点数による長さの値、及びユニット識別子
  ポジション	トップ|センター|下|左|中央|右名詞

• 注意：

  • あなたは、背景画像のプロパティを指定する必要があります。
  • 位置は、xとy座標の背後にあります。名詞が使用されるか、または正確なユニットとすることができます。
  • あなたは、2つの値の前後には何の関係もありません順序は、両方の値が、そのような一貫性の左上と左上の効果として、2つの値の名を冠している指定した場合
  • あなたが唯一の用語の向きを指定した場合、別のデフォルト値が中心。
  • 位置が正確な座標の背後にある場合、最初の値がXである必要があり、Yは第二の値であります
  • 唯一の値は、その値がなければならない場合、別のデフォルト垂直センタリングx座標
  • 二つの値が指定され、組み合わせて使用​​される装置名の正確な配向されている場合、最初のものは、x座標の値である、第2の値はy座標であります

4.5背景アタッチメント

• 背景添付の背景には、ローリングまたは静止しています

• 構文：

  background-attachment : scroll | fixed 
  

  パラメータ	効果
  スクロール	対象コンテンツと背景画像がスクロールされます
  修繕	固定背景画像

4.6背景速記

• 背景：オーダープロパティの正式な値を書き込み、何の義務標準はありません。読みやすくするために、次の推奨事項を記述します。

• 背景：背景画像アドレス背景タイル背景背景スクロール位置の背景色。

• 構文：

  background: transparent url(image.jpg) repeat-y  scroll center top ;
  

4.7背景透明（CSS3）

• 構文：

  background: rgba(0, 0, 0, 0.3);
  

• 色を設定するためのRGB（255,255,0）

• RGBA（255,255,0,0.5）色の透明度は、機能セットを実装することができます

• 最後のパラメータは、0から1までのアルファ透明度範囲の間であります

• 0〜0.3は、書き込みの背景をオフに省略することができる：RGBA（0、0、0、0.3）。

• 注：ボックスの内容は影響を受けないの内側に背景は、半透明、半透明の背景のボックスを指し、

• CSS3ので、とても少ないIE9以上のバージョンがサポートされていません。

4.8背景概要

プロパティ	効果	値
背景色	背景色	所定の色値/ヘキサン/ RGBコード
背景画像	背景画像	URL（画像のパス）
背景リピート	かどうかのタイル	リピート/ノー・リピート/リピート-X /リピート-Y
背景位置	背景位置	長さ/位置値ユニットは、最初のX Yに従ってなければならない場合、xおよびy座標は、正確な文言は覚えています
背景アタッチメント	固定またはスクロール背景	スクロール/固定
背景速記	より簡単に	住所背景背景色の背景画像タイル張りの背景背景スクロール位置、彼らが注文していません
透明な背景	半透明のボックスをしてみましょう	背景：RGBA（0,0,0,0.3）; 4つの値が従わなければなりません

5. CSS 3つの特徴

5.1 CSSプロパティ積層

• コンセプト：

  いわゆるスタックは、複数のCSSスタイルの重ね合わせを指します。

  プロパティは、同じ2つのセレクタにより、同一の要素に設定されている場合、競合を取り扱うことができるブラウザは、その後時間がフロントオフラミネートの属性プロパティの後になります

• 原則：

  • スタイル紛争は、以下の原理は、近接の原則。そのスタイルの実装に近いからそのスタイル構造。
  • スタイルは積み重ねられない、競合しません

5.2 CSSの継承

• コンセプト：

  サブラベルは、テキストの色やフォントサイズなど、いくつかのスタイルの親タグを継承します。

  私は親要素に適用し、継承プロパティを設定します。理解することは簡単な本である：彼の足音で。

• 注意：

  • 継承の適切な使用は、コードを簡略化するCSSスタイルの複雑さを軽減することができます。例えば、多くのサブクラスの子供たちはスタイルが必要とされている、あなたは親に罰金を指定することができます。
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

5.3 CSS优先级（重点）

• 概念：

  定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

  • 选择器相同，则执行层叠性
  • 选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important 重要的	∞ 无穷大

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
• 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
• div {
  color: pink!important;
  }

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

• div ul li ------> 0,0,0,3

• .nav ul li ------> 0,0,1,2

• a:hover -----—> 0,0,1,1

• .nav a ------> 0,0,1,1

• 注意：

  数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是很容易绕晕。其实，当修改样式时，一定要看该标签有没有被选中。

1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重就是0，因为继承的权重为0.

6. CSS注释

CSS注释规则：

/*  需要注释的内容  */  进行注释的，即在需要注释的内容前使用 "/*" 标记开始注释，在内容的结尾使用 "*/"结束。

例如：

p {
 /* 所有的字体是14像素大小*/
  font-size: 14px;                 
}