2015年10月22日のCSS学習メモ_html/css_WEB-ITnose

XHTML1.0はHTML4.0を改良したものです

1. XMLの書き方を学び、構文がより厳密になりました。
2. ページのコンテンツとスタイルを分離し、html4 でのスタイルを示すタグと属性を放棄します。ページのスタイルを記述するには CSS を使用することをお勧めします。

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 は

1. 複数選択セレクター: セレクター 1、セレクター 2、...セレクター n{…} は任意の要素で選択できます h2 、#main、.mark{…} セレクターによって選択されました
2. 疑似クラス セレクター: : 疑似クラス名{…}
a:link{…} 未訪問のハイパーリンクをすべて選択します
a :visited{…} 選択訪問したすべてのハイパーリンク
Element:hover{…} マウスが要素上にあるとき IE6 は a:hover
6. のみをサポートします
Element:active{…} 要素がアクティブ化されたとき
input :foucs{…} 要素が取得されたとき入力フォーカスは、IE7 より前ではサポートされていません。
#p2{/*# は、本文内の段落をスタイルする場合は、id 値を割り当ててから、セレクターを使用します。 style*/

}

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 プロパティ (強調)

% px em1最短で要素の幅の最小値を定義します 2max-width 要素の最大幅を定義します 2min-height 要素の最小の高さを定義します 2max-height の最大の高さを定義します要素 2オーバーフローオーバーフローしたコンテンツへの対処方法非表示 非表示2ボーダー-width Widthborder-style スタイルなし 実線 二点鎖線 溝 尾根 インセット アウトセットborder-colorcolor 透明度を示すために使用できます Color border スタイルのコレクション: 幅スタイルカラーCSS2outlineoutlineカラースタイル幅border-radius境界線の半径、丸い境界線を描画しますは4/3/2/aの値、パーセントにすることができますCSS3/IE9+ボックスシャドウボーダーシャドウ、ページスペースを占有しませんhrquiredCSS3/IE9+border-image-sourceボーダー画像の幅border-image-repeatパディング - 右パディングトップパディングボトムパディング右上、左下10px;10px 30px 50px;10px 30px 50px 70px;マージン右上 左下background-color 要素の背景色を設定します: コンテンツ + パディング + ボーダー、ただしスペースなし背景画像背景画像url(xx.png)

属性名	意味	可能な値	バージョン/互換性
width	指定する要素の幅を指定 ブロック要素 /IMG/TABLE	% px	1
height	要素の高さは /IMG/TABLE のみ指定可能
		可視 可視 スクロール スクロール 自動
	「右上」「左下」の順で4つの値を指定可能
	「右上、左下」の順に指定可能
	あなた「上、右、下、左」の順で4つの値を指定できます
	はページスペースを占有します
	要素スペースを占有しません
		vrquired value: オプション、ぼかし半径 Value: オプション、拡張半径 色必須 inset: オプション、内部投影
写真を使用して境界線を作成します	source:url(xx .png）width：border width/nine-squareグリッド幅	repeat： rtrech/repeat/ruped/round css3/safari互換性の問題に注意を払ってください。
			10px 30px;
		余白左/右/上/下
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 を追加すると、インライン要素の余白の上下のサイズを効果的に変更できます。

要素の配置

1. フロー/静的配置: デフォルトのposition:static; 位置は指定できません
2. 浮動配置: float:left/right; 位置を厳密に指定できません
相対配置: left/を使用します。位置決めには、top /right/bottom を使用しますが、ページ領域を占有します; 位置決めの原点として「独自の静的アンカーポイント」を使用します
3. 絶対位置指定: 位置を占有しない left/top/right/bottom を使用します。ページスペース; 「最も近い位置にある祖先要素のパディング開始点」が位置決めの原点となり、ページコンテンツのスクロールに合わせてスクロールします。
4. 固定配置:position:fixed; 配置には左/上/右/下を使用します。これは、ページスペースを占有せず、配置の原点として「本文」を使用し、ページコンテンツのスクロールと一緒にスクロールしません。

CSS 複合セレクター

複合セレクターを使用すると、ページ内の ID とクラスの頻度を減らすことができます。jQuery を使用すると、下位のすべての複合セレクターと互換性を持たせることができます。

複雑なセレクター例意味バージョン/互換性選択1 選択2 div li{…}子世代セレクター1 1 を選択>2 を選択div>ul{…}直接子セレクター 2 1を選択+2を選択input+span(…)隣接する兄弟要素を選択(0/1を選択)2/ie6非対応Select 1~Select 2 div~span{…}ユニバーサル兄弟セレクター; セレクター 1 の兄弟要素のうちセレクター 2 に一致する要素。 (すぐに隣接していませんが、すぐに隣接しているか、同じ親要素の直後ではないすべてのセレクター 2) 3 [type=”text”][属性name~=属性値][class~=strong] [属性名*=属性値][class* =str][属性名^=属性値][クラス^=str][属性名$=属性値][class^ =str][属性名|= 属性値]:target:target{}div :target{}Target 疑似クラス セレクターは、現在のアンカーのターゲット要素を選択します IE8 はサポートされていませんspan:first-child{ }p:last-child{}p:only-child{} 親要素内の唯一の子要素として表示される要素と一致します :emptydiv:empty{display:none;} : not(1 を選択)div:not(.strong){}span:not([ class=content]) コンテンツ生成セレクター しかし、CSS3 の一部の「コンテンツ制作」セレクターは、スタイルをレンダリングするだけでなく、ページにコンテンツを追加することもできます。 …

			注: div の後のスパン兄弟は選択されますが、前のスパン兄弟は選択されません。 ... [属性名=属性値]
は、指定された属性と一致し、属性値は指定された値です	2
指定された属性と一致し、属性値には指定された完全な単語 (単語ではありません) が含まれます	3
指定された属性と一致し、属性値に指定された文字の組み合わせが含まれます (完全な単語である必要はありません)	3
指定された属性と一致し、属性値は指定された文字で始まります	3
は、指定された属性を持つものと一致し、属性値は指定された文字で終わる	3
は、Specify 属性を持つものと一致し、属性値は指定された完全な単語 (単語のみ、またはその後に小さなマイナス記号が続きます) で始まります	3
			:first-child
div :first-child{}	は、親要素内の最初の子要素と一致します（ラベルである必要があり、プレーンテキストは一致しません） count)		:last-child
div :last-child{}	は、最後の子要素として表示される要素と一致します親要素内		:onlt-child
子要素がなく、テキストコンテンツも持たない要素と一致します
	負のセレクター。thief 1 によって選択されていない要素と一致します。選択されたテキストの一部と一致します パート
説明: :xxx 疑似クラスセレクター ::xxx 疑似要素セレクター		XHTML を規定■ ページのコンテンツはタグによって処理されます。 CSSによって処理されます。	セレクター 1:before{

content:plain text/image/counter;

}

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

を追加します