HTML 要素
1. ブロックレベルの要素
ブロック レベルの要素: 1 行を占めます。高さと幅を設定できます。設定しない場合、親要素のデフォルトの幅は 100% です。
一般的なブロック レベルの要素は、<p></p>、<form></form>、<h1~h6></h1~h6>、<ul>、<ol>、<div></div>、等
2.インライン要素
インライン要素: 1 行を占めることはできず、幅と高さを設定することはできず、独自のコンテンツ サイズによってのみ要素のサイズをサポートできます。
一般的なインライン要素 <font>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> など。
3.ブロックレベル要素のインライン化
インラインの高速レベル要素: 単独で行を占有することはできず、独自の高さと幅を設定できます
一般的なインライン ブロック レベル要素: <input><img> など。
3. エレメント間の相互変換
inline はブロックレベル要素をインライン要素に変換できます; inline-block はブロックレベル要素とインライン要素をインラインブロックレベル要素に変換できます; block はインライン要素とインラインブロックレベル要素をブロックレベル要素に変換できます
変換方法:
タグ名\.class\#id値{
表示：インライン\インライン\ブロック;
}
cssの3大特徴
a. カスケード行
これは、競合を処理するブラウザーの機能です。属性が 2 つのセレクターを介して同じ要素に設定されている場合、この時点で一方の属性がもう一方の属性をオーバーレイします [つまり、スタイル オーバーライドと呼ばれることがよくあります]。
b. 継承
役割: 子要素は親要素のスタイルを継承できます。特殊性:
-
すべての属性を継承できるわけではなく、color/font-/text-/line- で始まる属性のみを継承できます。
-
CSS 継承では、息子だけでなくすべての子孫が継承できます。
-
a タグの色と下線の設定は継承できず、a タグ自体で設定する必要があります。
-
h タグのフォント サイズは変更できず、h タグ自体を変更する必要があります。
c.CSSの優先度
1.優先順位とは
優先順位とは、複数のセレクターが同じタグを選択し、同じタグに同じ属性を設定した場合、その属性が最初に実行されることを意味します
2. 優先度の判断方法
a.同じタイプのセレクターを使用すると、後でそれを作成した人は誰でもそれをリッスンします。近接の原則
b.異なるタイプのセレクターが使用されている場合、それらはセレクターの優先度に従ってスタックされます。
!重要>インライン スタイル [半分適用外]>id>クラス>タグ>*>継承>ブラウザの既定の属性
3.重要！
a. !important は、指定された属性の優先度のみを上げることができ、他の属性の優先度は上がりません。
b. !important は、属性値の後のセミコロンの前に記述する必要があり、属性値の間にスペースが追加されます。
c. !important の前の感嘆符は省略できません。
4. 優先重みの計算
重量計算規則
(1) style="" などのインライン スタイル。重みは 1、0、0、0 です。
(2) #content などの ID セレクター。重みは 0、1、0、0 です。
(3) .content E: link E[attr] などのクラス、疑似クラス、および属性セレクター。重みは 0、0、1、0 です。
(4) div p::before などの要素セレクターおよび疑似要素セレクターの重みは、0、0、0、1 です。
(5)ワイルドカード、サブセレクター、隣接セレクターなど * 、>、+ など、重みは 0、0、0、0 です。
(6)継承されたスタイルには重みがありません。!important の重みが最も高い
4. 背景のプロパティ
- 背景色
- 背景画像
- バックグラウンドリピート
- 背景添付ファイル
- 背景位置
背景色の方法を設定する
背景色：
- 有効な色の名前 - 例: "red"
- 16 進値 - 例: "#ff0000"
- RGB 値 - 例: "rgb(255,0,0)"
背景色の透明度を変更できるものも使用できます
div {
background-color: green;
opacity: 0.3;
}背景色: 色;
背景色：透明；
5.背景画像
1. background-image: url (画像パス);
複数の背景画像を追加するには、複数の URL () を記述する必要があり、各 URL () はコンマで区切られます
2. 背景画像のタイリング (background-repeat)
background-repeat: repeat [デフォルトのタイリング] \repeat-x [x 軸に沿ったタイリング] \repeat-y [y 軸に沿ったタイリング]\no-repeat [タイリングなし]
6. 背景画像の位置
background-position: ここに 2 つの値を入力してみてください; スペースで区切ってください
a. 位置を入力するときに英単語 center left right top bottom がデフォルトで中央に配置されます。
b. パーセンテージ: 最初の値は左からのパーセンテージを表し、2 番目の値は上からのパーセンテージを表します。#値を入力すると、距離は 50% 上
c. ピクセル値: b パーセンテージと同様に、ピクセル インデックスに置き換えることができます。#値を入力すると、距離は 50% 上
7、背景の添付ファイル (background-attachment)
背景添付：固定；
このとき、スライドページの背景画像は常に画面上の固定位置にある
八、絵の大きさ（背景・大きさ）
a. ピクセル値またはパーセンテージ
b.cover は背景全体をタイル張りし、オーバーフロー部分は非表示にします
c.contain は、背景画像の最大パーセンテージの比率に従って表示されます
ナイン、背景スタイルの略語
background: 背景色背景アドレス背景タイル背景スクロール背景位置;
10. 複数の背景画像
a. blcakground-image: url(), url(); いくつかの背景画像はいくつかの url() を書き込みます
b. 背景の位置を合理的に配置する
11、背景グラデーション
線形グラデーション: 背景: 線形グラデーション (方向へ) は括弧の内容を書き込めません。上から下へのデフォルトのグラデーションです。
Radial Gradient: background: Radial-gradient (circl) は省略することもできます. デフォルトでは、グラデーションは中心から周囲に変化します.
ボックスモデル
ボーダー精細
境界線のスタイル: 属性;
関連プロパティ:
- 点線 - 点線の境界線を定義します
- dashed - 破線の境界線を定義します
- solid - 実線の境界線を定義します
- double - 二重境界線を定義します
- 溝 - 3D 溝の境界を定義します。効果は border-color 値に依存します
- ridge - 3D リッジの境界を定義します。効果は border-color 値に依存します
- inset - 3D インセット ボーダーを定義します。効果は border-color 値に依存します
- outset - 3D アウトセット境界を定義します。効果は border-color 値に依存します
- none - 境界線を定義しません
- hidden - 非表示の境界線を定義します
-
<!DOCTYPE html> <html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <h1>border-style 属性</h1> <p>此属性规定要显示的边框类型：</p> <p class="dotted">点状边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双线边框。</p> <p class="groove">凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">3D inset 边框。</p> <p class="outset">3D outset 边框。</p> <p class="none">无边框。</p> <p class="hidden">隐藏边框。</p> <p class="mix">混合边框。</p> </body> </html> 