XHTML1.0はHTML4.0を改良したものです
CSS スタイルの優先順位
!重要>インライン スタイル>内部/外部スタイル>ブラウザ定義済みスタイル
内部外部スタイル: #id>クラス セレクター>要素セレクター
線のスタイルは次のように使用する必要があります内部スタイルはできるだけ少なくしてください。たとえば、そのスタイルを使用するページが 1 つだけの場合は、外部スタイルを作成する必要はありません。ただし、あまり多くは使用しないでください。ページが表示されると、スタイルが最初に表示されますが、コンテンツが長時間表示されないことがあります。同時に、外部ファイルが多すぎないように注意してください。そうしないと、送信されるリクエストが多すぎます。外部ファイルを 1 つの大きなファイルに含めることはできますが、小さなファイルを多すぎないでください。
CSS3 を使用する場合は、互換性の問題、特に IE を考慮する必要があります。 internal internal/internal/extern css：
sselector{/*このスタイルの役割*
頻繁に To:
ユニバーサルセレクター: *{…} ページ内のすべての要素を選択します
要素セレクター: 要素名 {…} div{…} などの指定された要素を選択します
ID セレクター: #ID 値 {…} を持つ要素を持つもののみを選択します#p{…}などの指定されたIDカテゴリーセレクター: .class名{…} .mark{…}などの指定されたクラスを持つすべての要素を選択します
並置/フィルタリングセレクター: selector 1 selector 2 { …} p.mark{…} や .product.mark{…} など、2 つのセレクターで同時に選択できます
親子セレクター: セレクター 1 セレクター 2 {…} はセレクター 1 で選択できます選択した要素の下にある子要素、 div span{…} .product .mark{…}などセレクター2で選択できる要素
直接子要素セレクター selector 1>selector 2{…} セレクターを選択 直接子要素div>span{…} などのセレクター 2 で選択できる in 1 IE6 は
}
div span{/* div*/} の下にあるすべての span サブ要素を意味します*/}
div .mark{/* div*/} の親子選択の下にあるクラスの .mark を意味します
CSS のサイズ
相対サイズ:
%: div (width:50%;) などの親要素のパーセンテージ
px: ピクセル、div (width など) の画面上の点を指します: 500px;)
em: 倍率、div(height:3em;) などの標準フォント サイズの倍率を示します
絶対サイズ: 画面上で使用される Web ページのサイズに絶対サイズが使用されることはほとんどありません
cm: センチメートル
mm: ミリメートル
in: インチ
pt: ポンド (72 ポンド = 1 インチ)
CSS での色
(1) 赤、緑、銀などの英語の文字表現
RGB 表記
(2) 3 -桁の整数 rgb(xxx,xxx,xxx) スパン{color;rgb(255,0,0);} など
(3) 3 桁のパーセント rgb(xx%,xx%,xx%) スパンなど{color:rgb(30 %,50%,0%);}
(4) 6桁の16進数 #XXXXXX スパン{color;#FF0000;}など
(5) 3桁の16進数 #XXX例:span{ color:#FF0;}
表色系: 原色は、他の色と一定の割合で混合された色です。加法混色方式はそれ自体が発光するわけではありませんが、色を加えるほど明るくなり、最終的には白になります。減法混色方式は自らが発光し、色を加えるほど色が濃くなり、最終的には黒になります。
255,0,0 レッド
0,255,0 グリーン
0,0,255 ブルー
0,0,0 ブラック
255,255,255 ホワイト
10,10,10 ダークグレー
2 0,200 ライトグレー
0,255,255シアン、赤の補色
255,0,255 マゼンタ、緑の補色
255,255,0 イエロー、青の補色
230,180,10 アースイエロー
200,,230,190
調和のとれた色:
180 240 50
240 180 50
180 50 240
240 50 180
50 240 180
50 180 240
共通の CSS プロパティ (強調)
属性名 | 意味 | 可能な値 | バージョン/互換性 | |
width |
指定する要素の幅を指定 ブロック要素 /IMG/TABLE | % px | 1 | |
height |
要素の高さは /IMG/TABLE のみ指定可能 | % px em
| 1
| |
| 要素の幅の最小値を定義します
|
| 2
| |
| 要素の最大幅を定義します
| 2 | ||
| 要素の最小の高さを定義します
|
| 2
| |
| の最大の高さを定義します要素
|
| 2
| |
| オーバーフローしたコンテンツへの対処方法
| 非表示 非表示
可視 可視 スクロール スクロール 自動
| 2
| |
| Width
「右上」「左下」の順で4つの値を指定可能
|
|
| |
| スタイル
「右上、左下」の順に指定可能
| なし 実線 二点鎖線 溝 尾根 インセット アウトセット
|
| |
| color
あなた「上、右、下、左」の順で4つの値を指定できます
| 透明度を示すために使用できます Color
|
| |
| スタイルのコレクション: はページスペースを占有します
| 幅スタイルカラー
| CSS2
| |
| outline
要素スペースを占有しません
| カラースタイル幅
|
| |
| 境界線の半径、丸い境界線を描画します
| は4/3/2/aの値、パーセントにすることができます
| CSS3/IE9+
| |
|
| ボーダーシャドウ、ページスペースを占有しません
| hrquired
vrquired value: オプション、ぼかし半径 Value: オプション、拡張半径 色必須 inset: オプション、内部投影
| CSS3/IE9+
| |
|
|
|
| |
|
|
|
| |
|
|
|
|
| |
| 写真を使用して境界線を作成します | source:url(xx .png）width：border width/nine-squareグリッド幅 | repeat：rtrech/repeat/ruped/roundcss3/safari互換性の問題に注意を払ってください。
|
| |
|
| パディング - 右
|
|
| |
|
| パディングトップ
|
|
| |
|
| パディングボトム
|
|
| |
|
| パディング
| 右上、左下
| 10px;
10px 30px; | 10px 30px 50px;|
|
|
余白左/右/上/下
|
| |
|
| マージン
| 右上 左下
|
| |
|
| background-color
| 要素の背景色を設定します: コンテンツ + パディング + ボーダー、ただしスペースなし|||
|
| 背景画像
| 背景画像
| url(xx.png)
| |
background-repeat |
|
リピートタイル no-repeat タイルなし repeat-x 水平タイル repeat-垂直タイル |
| |
background-position |
背景画像の位置 (使用する必要があるすべてのアイコンが 1 つの画像上にある場合、必要な部分を表示するには背景座標インターセプトメソッドを使用する必要があります) |
右下 右下 表示 中央 中央 中央 表示 80px 70px |
| |
background-attachment | 背景スクロール方法 |
スクロール: コンテンツ を固定して背景がスクロールします: 背景は固定です (背景画像は常に留まり、スクロールバーとともに移動しません) |
| |
background |
| color 背景色 url() 背景画像位置 繰り返しかどうかアタッチメントを繰り返す スクロールモードの位置 (前順と後順の両方) | CSS1 | |
background-image | 背景画像が使用できる場所であれば、どこでも背景としてグラデーションを使用できます |
Linear-gradient 線形グラデーション radial-gradient 放射状グラデーション repeat-linear-gradient 繰り返し線形グラデーション repeat-radial-gradient 繰り返し放射状グラデーション |
|
「-」マイナス記号スタイルCSS では、JS で "BorderWidth" キャメル ケース スタイルを使用します
キー ポイント: CSS ボックス モデル --- キー ポイント
ブロック要素が占める合計スペース:
X 軸: margin-left (左側の 2 つのブロック) 間の空白領域はスペースとも呼ばれます) + border-left (左の境界線、オレンジ色の領域) + padding-left (左のパディング、灰色の領域) + width (要素の幅) + padding-right (右パディング) + border-left(右境界線)+margin-right(右間隔)
Y 軸: margin-top(上部間隔)+border-top(上部境界線)+padding-top(上部パディング)+高さ(要素の高さ)+padding-bottom(下のパディング)+border-bottom(下の境界線)+margin-bottom(下の間隔)
2つの隣接する要素に指定された間隔がある場合、その間隔はマージされ、マージされた値は2 にはなりません。間隔の合計は、指定された 2 つの間隔の最大値になります。ただし、float は間隔のマージに影響を与えます。
Outline と box-shadow はページスペースを占有しないため、ボックスモデルの計算には含まれません。
親要素内でブロックを水平方向に中央に配置したい場合は、外側の間隔を設定する必要があります。 margin:0px auto; ブラウザは左右の間隔を自動的に計算し、均等に配置します。
ブラウザのデフォルト値によって引き起こされる互換性の問題を防ぐために、ページをレイアウトするときに *{margin:0;padding:0} を追加できます
linear-gradient(angle,color-point1,color-point2, ….)
angle: 最初のパラメータとして、上へ (0 度に対応)、右へ (90 度に対応)、下へ (など) 角度値またはキーワードでグラデーションの方向を指定します。 180度に対応)、左へ(270度に対応)
color-point: 色の開始点、中間点、または終了点を示します。値は、赤 0%、緑 50 など、色と位置の組み合わせです。 %
ブロック要素:
なし フローティング: 縦方向に配置され、隣接する要素のマージンがマージされ、パディングは独立します。
フローティング後: パディングは独立しています: 垂直/水平マージンは独立しています。
インライン要素: 横方向に配置されます。1 行で足りない場合は、自動的に次の行に配置されます。
margin: 水平方向には独立しており、マージされず、垂直方向には無効です。 (Span ではマージン属性、つまり間隔を指定できません。)
padding: 水平方向には独立していますが、垂直方向には有効ですが、ページスペースを占有しません (つまり、上部行と下部行のパディングは重複する可能性があります)。
|
| マージン X | マージン Y |
パディング |
スペースを占有 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| スペースを占有 | 占有スペース |
|
ブロックフローティング | スペースを占有していますが、結合していません | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| スペースを占有しています |
スペースを取る | ...
display:inline-block を追加すると、インライン要素の余白の上下のサイズを効果的に変更できます。 要素の配置
CSS 複合セレクター 複合セレクターを使用すると、ページ内の ID とクラスの頻度を減らすことができます。jQuery を使用すると、下位のすべての複合セレクターと互換性を持たせることができます。
} Selector 2:after{ … content: plain text/image/counter; } content 属性は、:before/:after セレクターとともに使用する必要があります。
コンテンツの複数列表示に関連するCSSスタイル column-count: 垂直方向の列数 column-gap: コンテンツの列と列の間隔 column-style: コレクション属性の幅スタイルの色 ブラウザの互換性に注意してください: IE11 は上記の属性を直接使用します FF は -moz-prefix を追加します Chrome/Safari/Opera は -webkit-prefixを追加します
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
