CSS研究ノート（最初の知人）

1.定義

CSSは、Cascading Style Sheet（Cascading Style Sheet）であり、Cascading Style Sheet、または略してスタイルシートとも呼ばれます。

2.機能

（1）HTMLドキュメントの要素スタイルの定義に使用されます。コンテンツとパフォーマンスの分離を実現します。

（2）コードの再利用性と保守性を向上させます。ファイル拡張子は.cssです。

3.cssとHTMLの関係

（1）HTMLはWebページの構造を構築するために使用されます
（2）CSSはHTML要素のスタイルを構築するために使用されます
（3）HTMLはページのコンテンツであり、CSSはページのパフォーマンスです

结构层 HTML
表示层 CSS
行为层 JS

4.CSSをインポートする方法

（1）インラインメソッド
は、スタイル属性を使用してCSSコードを開始タグに直接追加します

 <p style="color:gold;" >金色字体</p>

（2）内部スタイル
は、CSSコードをヘッドのスタイルタグに直接追加します

 <style>
     p{
    
    color:red;}
 </style>

（3）外部スタイルシート

<link rel="stylesheet" href=""/> 

（4）リードイン

<style>
     @import url(style.css);
</style>

优先级：行内样式>内部样式>外部样式>导入样式

5.CSSスタイルシートの機能

• 継承
• カスケード
• 優先度

6、CSS基本セレクター

• ユニバーサルセレクター、グローバルセレクター（*）
  • 任意の要素に一致できます
  • 多くの場合、
    優先度が最も低いいくつかのデフォルトスタイルを設定するために使用されます
• エレメントセレクター
  • HTMLドキュメントの要素
    p、b、div、a、img、bodyなど
• クラスセレクター
  • 例：.body {color：red;}
    クラス名を数字で始めることはできません
    。ページ内のクラス名は繰り返すことができます。
• IDセレクター
  • #box {color：skyblue;}
    idの名前を繰り返すことはできません。ID属性は一意です
• マージセレクター
  • 構文：セレクター1、セレクター2、... {}
    は、一般的なスタイルを抽出し、繰り返しコードを減らすことができます

7、CSS基本スタイル

• font-styleテキストがイタリックの
  通常（通常のフォント）であるかどうかを設定します。デフォルト値は
  イタリックです。
  例：

p{
    
    font-style:italic;}     /*  倾斜 */

• font-familyは、特定のフォントを使用するようにテキストを定義します

p{
    
    font-family:microsoft YaHei;}

可以设置多个字体，排名越靠前优先级越高 默认值由浏览器决定

• font-weightは、テキストの太さを指定します

p{
    
     font-weight:normal;}   /*  默认值  */
p{
    
     font-weight:bold;}   /*  粗体  */

font-style 、 font-weight 、 font-size 、line-height 、 font-family

• テキスト属性
  • text-decorationテキストに装飾線があるかどうかを設定します。デフォルト値はnoneです。

p{
    
    text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
p{
    
    text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
p{
    
    text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

常用text-decoration:none;来去除a标签的下划线

• text-indentテキストのインデント
  • text indentプロパティは、テキストの最初の行のインデントを指定するために使用さ
    れ、ボックス内のテキストを非表示にすることもできます。たとえば
    、

p{
    
    text-indent:2em}    /*  首行缩进2个文字的大小  */
p{
    
    text-indent:-9999em;}    /*  用来隐藏文本   */

1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px， 那么，1em的默认大小是16px

• word-wrap指定したコンテナの境界を超えたときに現在の行を折り返すかどうかを設定します

  • コンテナ内の単語が長すぎると、コンテナ自体の幅を超えると長い単語がオーバーフローします。
  • word-wrap：break-word;長すぎて自動的に折り返すことができないテキストを設定できます。

• line-heightオブジェクトの行の高さを設定します（不允许使用负值）
  normalデフォルト、適切な行間隔の
  数値を設定します数値を設定します。この数値に現在のフォントサイズを掛けて、行間隔を設定します

8.ボックスモデル

ボックスモデルは主に、コンテンツ、パディング、境界線、マージンの4つの領域を定義します。

すべてのドキュメント要素（ラベル）は長方形のボックスを生成します。これが要素ボックス（要素ボックス）になり、ページレイアウトの概要でドキュメント要素の位置とサイズを記述します。したがって、各ボックスは、独自のサイズと場所に加えて、他のボックスのサイズと場所にも影響します。
ボックスモデルの機能：

• 各ボックスには、border、border、padding、contentの4つの属性があります。

• 各属性は、上、右、下、左の4つの部分で構成されています。属性の4つの部分は、同時に設定することも、個別に設定することもできます。
  

• border
  ：border-width || border-style || border-color
  注意：顺序不能错误。
  style属性が空の場合、境界線全体は表示されません。widthが書き込まれていない場合、デフォルトの3のような値があり、色が書かれていません、デフォルトになります。黒です。

  border-radius：左上隅、右上隅、右下隅、左下隅。

border-radius: 10px 40px;   /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
border-radius: 10px 40px  80px;  /* 左上角 10    右上角  左下角 40   右下角80 */
border-radius: 10px 40px  80px  100px; /* 左上角 10  右上角 40  右下角 80  左下角 100 */

扩展：
table {border-collapse：collapse; }
collapse 单词是合并的意思，通过该属性可以来设置一个细线表格

• マージン
  マージンは、要素の境界の周りの空白領域です。要素の外側に余分な空白領域が作成され、マージンは透明になります。

  单边设置：
  margin-top/right/bottom/left:value;
  value可取值为像素、%、auto、负值
  外边框简写：
  margin:value(四个方向相同);
  margin:value(上下) value(左右)；
  margin:value(上) value(左右) value(下);
  margin:value(上) value(右) value(下) value(左)
  

拡張1：ボックスは水平方向の中央に配置されます

ボックスを水平方向の中央に配置できます。次の2つの条件を満たす必要があります。

• ブロックレベルの要素である必要があります。

• ボックスには幅（幅）が必要です

• 次に、左右の余白を自動に設定して、ブロックレベルの要素を水平方向の中央に配置できるようにします。

.header{
    
     width:960px; margin:0 auto;} 

拡張機能2：
要素のデフォルトの内側と外側のマージンをクリアするWebページの要素をより簡単に制御するために、Webページを作成するときに、次のコードを使用して要素のデフォルトの内側と外側のマージンをクリアできます。

* {
    
    
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

Tips：インライン要素には左右の余白のみがあり、上下の余白はありません。内側の余白は、ie6などの低バージョンのブラウザでも問題が発生します。インライン要素の上下の内側と外側のマージンを指定しないようにしています。

拡張3：マージンマージ

（1）隣接するブロック要素の垂直方向の外側マージンのマージ（外側マージンの垂直方向の崩壊）

隣接する2つのブロック要素が出会うときに、上部の要素のマージンが下部で下部の要素のマージンが上部の場合、それらの間の垂直方向の間隔はマージンの下部とマージンの上部ではなく、合計です。二。この現象は、隣接するブロック要素の垂直マージンのマージ（マージン崩壊とも呼ばれます）と呼ばれます。

解決策：それは避けてください。通常、margin-topまたはmargin-bottomは1つの要素に追加され、margin-topまたはmargin-bottomを2つの要素に同時に追加する必要はありません。

（2）ネストされたブロック要素の垂直マージンを組み合わせる

2つのネストされたブロック要素の場合、親要素に上部のパディングと境界線がない場合、親要素の上部のパディングは子要素の上部のパディングとマージされ、結合されたパディングは2つのうち大きい方になります。大きくすると、親要素の上部マージンが0の場合でも、マージが発生します。

解決策：
（1）親要素に1ピクセルの上部境界線または上部パディングを定義できます。
（2）オーバーフローを追加できます：親要素に対して非表示。

• パディング

  内容区域和边框之间的空间，会扩大元素边框所占用的区域
  

構文：padding：value;
片側設定：
padding-top / right / bottom / left：value;
値はピクセル、パーセンテージにすることができますが、負の
パディングの省略形ではありません：

   padding:value(四个方向相同);
   padding:value(上下) value(左右);
   padding:value(上) value(左右) value(下);
   padding:value(上) value(右) value(下) value(左);

• コンテンツ（コンテンツ）の幅と高さ（幅と高さ）

ボックスのサイズを制御するには、width属性widthとheight属性heightを使用します。

幅と高さの属性値は、親要素に対するさまざまな単位またはパーセンテージの値にすることができます。ピクセル値は、実際の作業で最も一般的に使用されます。
Firefox、IE6以降など、ほとんどのブラウザはW3C仕様を採用しています。CSS仕様に準拠したボックスモデルの全幅と高さの計算原理は次のとおりです。

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：
1. width属性widthとheight属性heightは、ブロックレベルの要素にのみ適用可能であり、インライン要素（imgタグと入力を除く）には無効です。
2.ボックスモデルの全高を計算するときは、上部ボックスと下部ボックスの垂直マージンの組み合わせも考慮する必要があります。
3.ボックスに指定された幅/高さがない場合、または親の幅/高さを継承する場合、パディングはボックスのサイズに影響しません。

（4）ボックスモデルのレイアウト安定性

安定性に応じて、推奨事項は次のとおりです。
最初に幅を使用し、次にパディングを使用し、次にマージンを使用します。

width > padding > margin

理由：
マージンにはマージンがマージされ、ie6でマージンが2倍になるというバグがあるため（煩わしい）、最後に使用しました。
パディングはボックスのサイズに影響し、加算および減算する必要があります（面倒です）。
幅に問題はありませんが、幅残り法と高さ残り法をよく使用します。

（5）ボックスシャドウ
ボックスシャドウ：水平シャドウ垂直シャドウブラー距離シャドウサイズシャドウカラー内側/外側シャドウ。

• 最初の2つの属性を記述する必要があります。残りは省略できます。
• 外側の影（アウトセット）がデフォルト値ですが、書き込むことはできません。内側のシャドウが必要な場合は、インセットを書き込むだけです。
• 内側と外側の影を同時に追加するなど、複数の影を追加できます

/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

9、背景の背景

1.background-color：ボックスの背景色を設定します。背景色はパディングまたはマージンで
塗りつぶすことができます。2.background-image：ボックスの背景画像を設定します。imgタグもボックスです。また、 imgボックスの背景画像を設定します。

• ボックスは背景画像とまったく同じサイズです。
• ボックスが背景画像よりも大きい場合：デフォルトでx軸とy軸に並べて表示されます
• ボックスが背景画像よりも小さい場合：背景画像の一部のみが表示されます。背景画像の左上隅はボックスの左上隅に揃えられます。左上隅はパディングを示しますが、境界線も背景画像で埋められます

3.バックグラウンドリピート：
リピートを並べて表示するかどうかを制御します-xのみタイルx軸リピート-yのみタイルy軸リピートxおよびy軸を並べて表示します繰り返しなし-繰り返しなしタイル

4.大きなまたは小さな背景画像をボックスに入れます。配置にbackground-positionを使用できます

10.要素

• ブロックレベルの要素
  div、p、hなど。

• 特徴：
  1。排他的な行
  2.デフォルトの幅は親要素と同じ幅
  です3.cssによって設定された幅と高さは有効です

• インライン要素
  は、a、em、strongなどにまたがります。

• 特徴：
  1。それ自体では行を占有しません
  2.幅はコンテンツによって決定され
  ます3.cssで幅を設定することは機能しません

• インラインブロック要素の
  imgタグなど。

• 特徴：
  1。それ自体で列を占有しません
  2.幅と高さを設定して効果的にすることができます

• 要素モード変換

  • 表示ブロック;
    把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙
  • display：inline;
    把某个元素的显示模式修改为行内元素
  • display：inline-block;
    把某个元素的显示模式修改为行内块模式

• 要素の表示と非表示

  • display：none;表示モードがなく、位置を表示したり占有したりすることはできません
  • 可視性：非表示;非表示、非表示、ただし位置を占める
  • 可視性：可視;可視（可視性のデフォルト値）