検索

ホームページ  >  記事  >  ウェブフロントエンド  >  最も簡潔な CSS 学習ノート

最も簡潔な CSS 学習ノート

小云云
小云云オリジナル
2017-12-12 13:59:464412ブラウズ

CSS は、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。 CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

1. 共通の属性

  1. name: 名前、繰り返し可能、または複数を持つことができます (CSS など)。 p class="one two">

    ;

  2. id: 一意の識別子。通常、JavaScript で使用されます。命名規則は他の言語の規則と同じです。 : title 、;

  3. 2. 子孫関係: 親-子関係 (関係を含む);

  4. 兄弟関係: 同父関係;

3.CSS-Cascading Style Sheet

  1. CSS 注釈: /

    注釈の内容は、プログラマが参照できるようにここに記述されます。を参照してください。ページには表示されません
    2. /;

    3. CSS 構文規則: すべての記号は英語入力モードで入力する必要があり、小文字で入力する必要があり、属性は中かっこで囲む必要があり、各属性ステートメントはセミコロンで終わる必要があります。属性値はピクセル単位 (px) である必要があります。 形式: 属性: 属性値;

4. CSS の導入方法: タグにスタイルを追加する方法: Content;
    注: コードの保守性は非常に低く、CSS コードと HTML 構造が分離されていません。影響は現在のタグのみです。

  1. インライン導入: Web ページのヘッダーに ; を追加します。 注: コードの保守性。 CSS コードと HTML 構造の分離は実装されていません。影響範囲は現在のページのみです。

  2. 外部リンクの導入: Web ページの外に xx.css ファイルを作成し、< を使用します。 Web ページのヘッダー内のリンク rel="stylesheet" type="text/css" href="xx.css"> ;
    3. 注: コードは非常に保守しやすく、CSS コードは HTML 構造から完全に分離されています。影響範囲は、Web サイト全体で CSS ファイルを導入するすべての Web ページです。

    5. CSS コア構文:

  1. 構造形式: セレクター {属性: 属性値; ;...}; 例: p{background:red;color:gray;size:20px;};

  2. Selector: ページ要素を選択するためのツール;

  3. 中括弧: 中括弧内にスタイルのコンテンツを記述します。

    6. セレクター

基本セレクター:

    2. ユニバーサルセレクター: スタイルシートの先頭に記述され、Web ページのデフォルトスタイルを初期化するために使用されます。形式: *{padding:0 ;margin:0;};

    3. ラベルセレクター: 指定されたラベルにスタイルを追加します;形式: p{color:green;};

    4. クラスセレクター: 指定されたクラスを選択します セレクタースタイル形式: .class name {background: ピンク;};
注: クラス名は class="one" のようにタグで定義されます。複数のブロックのコンテンツ スタイルが同じである場合は、同じスタイルを指定します。

id セレクター: 一意の識別子、繰り返し使用できません。形式: #id name{backgound-image:url(1.jpg);}

注: id 名はタグ id="one";id で定義されています。追加することはできません複数のブロックのコンテンツ スタイルが同じである場合、複数のブロックの ID 名は異なる必要があります;
;

  • ID とクラスの違い:

    前の点に注意してください - ID は一意に決定される DOM ノードである必要があります。記事全体で ID セレクターを使用する場合、2 つの DOM ノード スタイルがまったく同じであっても、ノード スタイルを後で保守したい場合は、両方の場所でコードを保守する必要があります。 ！ ！メンテナンスのコストが大幅に増加します。

  • 疑似クラス セレクター: シーケンシャル LoVe HAte 原則、スキップできますが、順序は変更できません。リンク ステータス (link)、訪問済みステータス (visited)、アクティビティ ステータスです。 (ホバー) とクリックステータス (アクティブ)

  • ポイント描画クラス: a:link{color: yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{ color:pin;} フォーカスを取得するときのスタイル a:focus{};

    注: a{} と a:link{} にテキスト属性、背景色、画像を追加すると、同じ効果が得られます。
  • リストクラス: li:link{color: yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};

    注: テキスト シリーズの属性は、属性、背景色、画像など

複合セレクター:

  • グループ セレクター (ユニオン セレクター、複数セレクター): 複数の要素に同じスタイルを追加するために使用されます。例: .one,#one,a,span{color:red;font-size:14px ;} はクラス 1 を意味します。 、#one、a タグ、span タグには共通の属性があります。

  • 子孫セレクター: サブクラス要素に属性を追加します。例: .one a{text-decoration:none;} はクラスを意味します。 one の子孫には下線が引かれません。

  • 子要素セレクター (指定されたセレクター): 指定された子要素に属性を追加します。例: #one>p{color:red;} を意味します。 id セレクター one の息子 p タグは属性を追加します。

  • 隣接する要素セレクター:

1. 2 つの隣接する兄弟セレクターは属性を追加しますが、次の兄弟にのみ属性を追加します。 +p{background:red;};

2.one~p{background:green} は、親クラスがある場合に限り、1 つのセレクターの後のすべての p タグ要素に属性を追加することを意味します。

  • 属性セレクター:

1. 属性を持つ要素に属性を追加します。 img[id]{background:red;}id を持つ要素に属性を追加します。

    指定された属性値を持つ要素に属性を追加します: img[src="b .jpg"]{background:red;}b.jpg;

    2. で要素に属性を追加します 指定した文字で始まる属性を追加します 要素に属性を追加します: img[src^="b"]{background:red ;} b で始まるすべての要素に属性を追加します。
4. セレクターには、指定された属性値で終わる要素があります: img[src $="b"]{background:red;}b で終わるすべての要素に属性を追加します。 5. セレクターには、指定された属性値を含む要素があります: img[src*="b"]{background:red; }b;



7を含むすべての要素に属性を追加します。要素の包含 (表示メソッドのカテゴリ)

ブロック要素: 植字に使用され、一般的な構造は次のとおりです: p、p、li、h1、dt;

    2. 要素は独自の行に表示されます (幅に関係なく)。幅と高さ;

  • ブロックレベルの要素をネストする場合、子要素が幅を設定しない場合、子要素の幅は親要素の幅になります。インライン要素: スタイルを追加するために使用されます。span、a、font、strong
    • 注: インライン要素に上下のマージンとパディングを指定しないでください。上下は無視されます (通常は使用されません)。 ;

  • 要素は 1 行に表示されます;

インラインブロック要素: image、input;

  • 要素は 1 行に表示されます;

    • は幅と高さを設定できます。

    • 変換関係: インラインにはブロック要素が含まれ、ブロック要素にはインライン要素が含まれます。

      表示: inline-block 要素をインライン ブロック要素に変換します

  • 表示: block 要素をブロック要素に変換します

    • 8.CSS プロパティ

    • フォント関連の属性:

  • font-size: フォントのサイズ、ピクセル数、ピクセル;

    • font-weight: フォントの太さ、太字 (700-900)、通常、100-900 を書くことができます

    • font-style: フォント斜体、斜体、標準;

    • font-family: フォント、Microsoft Yahei、太字;

    属性の連結: font: font-style font-weight font-size/line-height font-family;

    注: font 属性は font-size および font-family と組み合わせる必要があります (他の属性は省略できます)。

    1. Text:

    • color : color ;

    • text-indent: インデント [単位はem];

    • text-decoration: テキスト行[下線、上線、取り消し線、取り消し線なし];

    • word-spacing:単語間の距離;

    • letter-spacing: 文字キーの距離;

    text-align: 水平方向の配置 [デフォルトは左、中央、右];テキストが配置される行
  • [行の高さが要素の高さと等しい場合、テキストは垂直方向の中央に配置されます];

    • サイズ: 幅と高さはブロック要素のサイズです。インライン要素に設定したい場合は、

    • width: width;

      • の属性を変換する必要があります。 style-type は ul に追加できますが、li に追加する必要はありません

    • list-style-type:none;

      シンボル、四角、円、円盤を削除し、リストを記述せずに画像を追加できます。 -style-type:none;

    • list-style-image:url(1.jpg)
      • 写真

    • border:1px 赤一色;UL全体の境界線を設定します

    • list-style-position:outside;スタイル画像の位置:内側、外側

  • 背景:

    • 背景色background-color;

    • 背景画像background-image注: 背景画像を設定するときは必ず幅と高さを設定してください;

    • 背景タイルbackground-repeat:repeat (デフォルト値) | no-repeat (タイルなし) |repeat-x (水平タイリング)

    • 背景位置: 左下| を設定します。特定の値 特定の数値を設定する場合、順序は区別されません。最初の値は水平方向を表し、2 番目の値は垂直方向を表し、前面の背景画像の設定形式は

      • に変更されます。
    • 背景を固定するかどうかを設定しますbackground-attachment: スクロール（デフォルト値）固定（画像固定） 30px 40px;

    • line-height:

  • ボックスモデル: Web ページのレイアウトに使用され、幅を設定する必要があります

  • ボックスの境界線属性:

    • コンポーネント:

    • ボーダーの幅高さ: ボーダーの幅: 1px;
    1. ボーダーの色: ボーダーの色: 赤;

    2. ボーダーのスタイル: 実線/点線/なし;

      属性結合書き込み: ボーダー: 1px ベタ赤 注: 属性結合書き込みの場合、順序制限はありません。

    3. 別の書き込み方法:

    4. ボーダー。 :

    5. パディング内側マージン: コンテンツとボックス境界線の間の距離を設定します

    6. マージン外側マージン: ボックスとボックスの間の距離を設定します 

    7.      p{
          width:300px;
          height:200px;
         border-top:1px solid red;
         border-left:1px solid  red;
         border-right:1px solid  red;
         border-bottom:1px solid  red;
        }
      6. 单独设置属性法：
           border-top-color:red;
     border-top-style:solid;
     border-top-width:1px;
    8. ボックスサイズ:

    ボックス サイズの影響場所:
      継承されたボックスは親ボックスの幅の範囲内にあり、パディング値はボックスのサイズに影響しません

    • ボックス サイズの計算: 幅 = コンテンツの幅+ 左右の境界線 + 左右のパディング

      境界線はボックスのサイズに影響を与える可能性があります

      • 内側の余白はボックスのサイズに影響します

    1. 将来的には、ページボックスのレイアウトボックスに内側のマージンが設定されている場合、対応する値をコンテンツの幅または高さから減算する必要があります。

    2. マージン: ボックス間の距離を設定します。

  • 属性の共同書き込み:

    • 標準フローの下でボックスを中央に配置: margin: 0 px auto;

      配置されたボックスは中央に配置されます: 最初に親ボックスの半分を取得し、次にその半分に戻ります自分の幅

      • マージン: 10px gin:10px 20px 上下 10px 左右 20px

    1. マージン: 10px 20px 30px 上 10px 左右 20px 下 30px

    2. マージン: 10px 2 0px 30px 40px 右上、左下

    3.  one{
       width: 100px;
      height:100px;
      border: solid red  1px;
     position: absolute;
     left: 50%;
     margin-left: -50px;
      }

    5. 注:

    6. プロパティの準拠: apadding: 10px; 上、右、下、左の距離は 10px
      パディング: 10px 20px;下10px 20px


    • パディング: 10px 20px 30px; 最大10px 20px 下30px

      • パディング: 10px 20px 30px 40px; 上、右、下、左

      • ボックスを縦に2つ表示した場合、マージンは設定された最大値に従います (マージンはマージされます。最初のケース)、2 つのボックスを水平に表示すると、マージンが重なります
    1. マージンが崩れます (難しい問題) 解決手順:

    2. padding inner margin: コンテンツとボックスの境界線の間の距離を設定します。 Distance

    3. 親ボックスの境界線を設定します

    4. 親ボックスのoverflow:hidden;
      5. を設定します

    1. 清除边距：

      1. 方法1：*{padding：0；margin：0；}

      2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

    9.CSS的三大特性

    1. 继承性：

    • 可继承性：color，text-align，text-indent，font-size，font-weight，font-family

    • 不可继承：text-decoration，border，display，margin，float，padding

    • 继承性发生的前提是标签之间属于一种嵌套关系

    • 文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

    • 行高可以实现继承

    • 特殊性：

    1. 不能继承父元素中的文字颜色（层叠掉了）

    2.         标题标签不能继承父元素中的文字大小

  • 重叠性：层叠性是指样式的覆盖

    • 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

    • 层叠性发生的前提： 样式冲突

  • 优先级：

    • 权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

    • 把权重相加，值越大越有先

    • 权重一样，后面的样式起作用

    10.补充知识笔记

    1. 表单优化写法：用户名：

    2. 格式化列表图标：list-style: none

    3. 表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

    4. Bfc   “格式化上下文”

    5. overflow:

    • visible:默认值。内容不会被修剪，会呈现在元素框之外

    • hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

    • scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

    • auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

    11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

    12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

    • 用法： Float:left| right

    • 特点：要浮动都浮动

    1. 设置了浮动的元素不占原来的位置（脱标）

    2. 可以让块级元素在一行上显示

    3. 浮动可以行内元素转化为行内块元素

    4. 模式转换的过程中，能用display就用display

  • 清除浮动：

    1. 定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

    2. 注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

    3. 清除浮动方法：
       [x]注意：在要清除浮动的元素后面添加一个空块元素（

      ,标签），在添加的空元素中加clear:both | left |right 

         .clearfix{
            clrar:both;
      }
     <p class="content">
           <p class="left"></p>
           <p class="right"></p>
           <p class="clearfix"></p>
     </p>
      [x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**
         .content{
     width:500px；
     overflow:hidden;
     }
      [x]使用伪元素清除浮动
         .clearfix:after{
        content:"";
       display:block;
       clear:both;
       height:0;
       visibility:hidden;
     }
     .clearfix
     {
       zoom:1;
     }
     

     <p class="content  clearfix">
     <p class="left"></p>
     <p class="right"></p>
     </p>

    13.定位：方位：left、right、top、bottom

    • 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

    • 绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

    1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

    2. 当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

    3. 当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

    4. 位置を占有しないボックスの絶対位置を設定します(ラベル外)

    5. インライン要素の絶対位置を設定した後、要素はインラインブロック要素に変換されます

    6. 注:要素は絶対位置に設定されており、特定の方向名を通じて要素の位置を自由に設定できます

    • 相対位置: 要素の元の位置を基準として、以前の位置を占めます。 ;

    1. 要素を相対位置に設定すると、元の位置を占めます

    2. の位置は、自分の位置を基準にして位置を設定します。要素のモード変換は実行できません

    3. 子には親フェーズが必要です (子要素は絶対位置を設定し、親要素は相対位置を設定します)

      5. 固定位置: 全体の安定した位置を基準にします。固定位置は位置を占めません (ラベル外); インライン要素をインライン ブロック要素に変換します 位置: 修正されました

    • レベルの問題:

      • 位置が設定されている場合のみ、階層の問題が発生します

    1. 兄弟要素の間には、相対的、絶対的、その他の位置関係があります。誰の HTML ドキュメント構造が一番後ろにあり、誰が最外層 (上位レベル) にあるのかを示します。

    2. Z-index: レベルを設定します。値は数値です。位置設定がある限り、位置設定が使用されます

    3. 14. CSS Elf Rabbit: 透明なドキュメントを選択します

    ブラウザの座標系

    • 以下のドットは正しい方向で正です。ドットはポジティブです

    • CSSスプライトはWebページの背景画像を処理する方法です

    • スプライトマップの使用法

      • 使用するときは必ず開いてくださいfw スプライトチャートを開きます

    1. スプライトチャートを背景画像として使用する場合は、background-positionと併用することが多いです

    2. スプライトチャート内の要素の座標を測定するには、長方形セレクターを使用します

    3. またはショートカットキー文字: k

    4. を使用します。要素 (js で更新) )

    visibility:hidden 要素を非表示にする

    • 要素を非表示にし、その位置を占有しません

      • visibility: hidden;位置

      • 1 6. 画像 そしてテキストを中央に配置します

    • すべての inlne-block 要素にはデフォルトのvertical-align: ベースラインがあります

    • vertical-align: middle 垂直方向の配置は、よりよく一致します。 inline-block;

    • 17. 標準以外のフローを避ける

    Web ページのレイアウト中に標準フローを使用できる場合は、標準フローを使用します

    • 標準フローでは位置決めを解決できません

    • マージン左を使用する/マージン右の値が自動の場合、ボックスを外側の 2 辺に自動的にフラッシュできます

    18. ラベル包含仕様

    • p の下に任意のラベルを含めることができます。標準フロー

    • pラベルにはpタグ、titleタグ、listタグを含めることはできません

    • タイトルノートには他のタグを含めることができます

    • インライン要素には他のタグを含めないことが最善です

    19のまとめ。幅と高さの設定

    • フローティング後、要素は幅と高さを設定できます

    • 絶対配置後、要素は幅と高さを設定できます

    • 固定配置後、要素は幅と高さを設定できます

    • 20. CSS3 へのアップグレード

    CSS は強力で、コードは簡潔です

    • 最初の子要素: first-child

    • 最良の要素: last-child

    • n 番目の子要素: nth-child または (nth-child(2n))

    text-shadow: 水平、垂直、影

    • box-shaadow: box-shaadow: 水平、垂直、影

    • background: 背景

      関連推奨事項:

    1. CSS における属性値継承の知識の包括的なまとめ

    2. CSS段落プロパティの詳しい説明

      高度なCSSテクニック20個のまとめ

    以上が最も簡潔な CSS 学習ノートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS3の表示属性のフレックスレイアウト方法次の記事：CSS3の表示属性のフレックスレイアウト方法

    関連記事

    続きを見る