CSS の基本 {プロパティ: 値;}-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS の基本 {プロパティ: 値;}

高洛峰

Oct 08, 2016 pm 05:23 PM

1.CSS は Cascading Style Sheets の略称で、HTML 要素の表示形式を定義するために使用されます。
a. 外部スタイルシート:

b.シート:

c. インラインスタイルシート:
属性名は style です。例:

3. CSS のセレクター:
a: 要素セレクター;

b: クラスセレクター; .class name { 属性: 値 } ドットがあることに注意してください。

c: ID セレクター; #id name { 属性: 値 } # があることに注意してください。ID セレクターは 1 回のみ参照できますが、クラスセレクターは複数回参照できます。
D：擬似クラスセレクター。直接接続された 2 つのセレクターで構成され、その結果、それぞれの要素範囲の交差部分が選択されます。
最初のものはタグセレクター、2 つ目はカテゴリセレクターまたは ID セレクターである必要があります。これら 2 つのセレクターの間にスペースを入れることはできません。 ️

b: 結合セレクター:
c: 子孫セレクター: (継承された最も近い) 子孫セレクターの影響は、要素の「直接の子孫」に限定されず、その「すべてのレベルの子孫」にも影響します
5. スタイルシートのカスケードを理解します。
小さいレベルから大きいレベルまでの優先順位は次のとおりです。
外部スタイルシートusing ' s ' s
through ' using ' s ' through ‐ ‐ ‐ ‐‐‐‐ ; -family: "Heilong";
フォントの傾き効果を設定します font-style ：Italic；
using font-weight: 100 (範囲 100-900、フォントが大きくなるほど太くなります)

英語の文字、リーサルトランジションテキストを設定します-Transform: Capitalize; (単語の最初の文字のクラス)
コントロールテキストのフォントサイズを設定します: .. px /..%/ .. em
テキストなし/下線/ラインスルーの装飾効果を設定します(取り消し線)/上線(上の行);

4. 段落スタイルの設定段落の最初の行のインデントを設定します text-indent: ..em (..標準文字サイズ距離)/..px ；
‐ ' s ' s ‐ ‐ ‐ ‐ 単語間の距離を設定します ‐ ‐ ‐ 文字間隔 (文字): ..px; テキストの水平位置の制御 text-align : LEFT/ RIGHT (右揃え)/center (中央)/Justify :...;(表のセル内の要素にのみ機能します)

CSS の基本属性 - 画像スタイル
1. 画像の境界線を設定します: border-width: (color) ; border-style: (linear) ; 異なる境界線を異なるスタイルで設定できます。 : border-left-style、border-top-width .... 実線
2. 画像のスケーリング: 幅、高さ (パーセント、ピクセル)
3. テキストの折り返し: フローティング (フローティング)
配置画像とテキストの水平配置 text-align:

<br/>

ログイン後にコピー

垂直整列vertical-align:
4,.背景色と画像を設定します。background-color:background-image:url(address)background-repeat: を使用してタイリングを制御できます。repeat: 水平および垂直タイリング、デフォルト値。ノーリピート時：フラットではありません。 Xリピート-X：横方向に重ねます。 Yリピート-Y：縦方向に重ねます。
5. 背景画像の位置を設定します。background-position: (2 つの値を設定できます。例: 左上)
6. 背景画像の固定位置を設定します。background-attachment: fixed; 画像のスクロール: スクロール
list-style: none; 位置決め (position7 を参照)
1. 絶対位置決め: (相対位置決めに設定された要素フレームは、一定の距離だけオフセットされます。要素は、位置決め前の形状を保持しており、元の位置はそのままです。保持されています。）要素の位置は、最も近い位置にある要素に関連しています。間隔 use using using using through through through out through out through out through through off ‐ ‐ ‐ ‐‐ ‐‐ ‐‐‐ and � to

: 表のヘッダーを示します。 : 表の内容を示します。 : 表の末尾を示します (順序は異なる場合がありますが、通常はこの順序です)

2. マウスが通過したときの表のスタイルを設定します。その上に: a:hover
3. CSS とフォーム: a: テキストのようなボタンを作成します
透明 (透明) 背景を透明に設定します
border:0px; 例:
b: カラフルなドロップダウンメニューを選択しますオプション
c: 下線のみの入力ボックスを作成します border: 0px/none;
border-bottom: 1px (太さ) 破線 (線形) #000000 (色);
補足: 1. 表示: ブロック (行レベルの要素はブロックレベルの要素に置き換えられます) / インライン (ブロックレベルの要素が行レベルの要素に置き換えられます)
Device:: NTH-OF-TYPE (N) 親要素の nly 要素の n n 要素の各要素に一致するセレクター.
N には、数値、キーワード、または数式を指定できます。

CSS を使用してリンクとナビゲーションメニューを設定する (les9) 1. ハイパーリンクのスタイルを設定します: HTML で
a:訪問済み（訪問済み）。 a:link{ } a:active{ } (これらを設定できます) 背景: ;
カラー: ; ピクセル
3. 蛍光メニューを作成します: 順序なしリスト、
、a:hover を適用します (les9 を確認してください)。
4. マウス (カーソル) ポインターを制御します。 {cursor: } (プロパティの下の他の CSS 2.0 中国語マニュアルを確認してください)。
5. プロジェクトリスト形式を設定します: 順序付きリスト

と順序なしリスト

属性rotate(angle)

効果: マウスが上に移動すると、リストは設定した角度まで回転できます。 (鄭は時計回り、マイナスは反時計回り、180度であれば単語が反転しているのがわかります。回転ははっきりとは見えません

ですが、単語の変化はわかります

変換 (変換): 回転 (回転; 回転するサイクル; 回転する; 回転する) (-20deg) ; deg: 度 (度)

ボックスモデル (レ 10)

1. ボックスの概念: CSSでは、独立したボックスモデルは、コンテンツ(content)、ボーダー(border)、パディング(内側のマージン)、マージン(外側のマージン)の4つで部分的に構成されています。

ボックスが占める実際の幅または高さは、「コンテンツ + 内側のマージン + 境界線 + 外側のマージン」で構成されます。

2. 境界線、内側のマージン、および外側のマージンを設定します:

a 内側のマージン (パディング) パディング属性は、次のように 1、2、3、および 4 の属性値を設定できます。
属性値を1つ設定する場合、上下左右の4つのパディングがすべて値になることを意味します。

3 つの属性値を設定する場合、最初のビットのパディングの値、2 番目の値は左右のパディングの値、3 番目の値はその値になります。值 4 つの属性値を設定する場合は、時計回りに右、下、左の順にパディングします。

b Margin (マージン) Margin は要素間の距離を指します Margin と Padding も同様に設定されます。

3. ボックス間の関係:

と
はコンテナに相当し、段落、タイトル、表、画像、さらには章などのさまざまな HTML 要素を収容できます。

Span はインライン要素であるため、折り返されません。

4. 標準フローにおけるボックスの配置原則:インライン要素間の水平マージン: 2 つのインライン要素が隣接する場合、それらの間の距離は、最初の要素の右マージンに 2 つの要素の最初のマージン左を加えたものになります。。

ブロックレベル要素間の垂直方向のマージン: 2 つのブロックレベル要素が垂直方向に配置される場合、状況は異なります。 2 つのブロックレベル要素間の距離は、margin-bottom と margin-top の合計ではなく、2 つのうちの大きい方になります。

{背景の位置:background-position:center; 背景位置プロパティの値を指定するには、さまざまな方法があります。まず、
では、いくつかのキーワード (上、下、左、右、中央) を使用できます。通常、これらのキーワードは
のペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長さの値を使用することもでき、最後にパーセント値を使用することもできます。 )
CSSボックスのフローティングと配置
1. 標準フローでは、ブロックレベル要素は自動的に水平方向にストレッチされます。縦に並びません。
デフォルトは none です。float プロパティの値が left または right に設定されている場合、要素は親要素の左側または右側に移動します。Clear プロパティに加えて、は「LEFT」「Right」に設定できますが、「 Both」に設定することもでき、左右同時に受ける衝撃を同時に解除することができます。
元の位置から新しい位置に到達他のボックスに影響を与えることなく、指定された距離だけオフセットします。)

2. ボックスの位置 (静的) :
ボックスの位置 (相対) - 左、右、上、下の 4 つの属性は、位置属性が絶対、相対、または固定に設定されている場合にのみ有効です。 In-3.z-index: z-index 属性は、位置決め時に重なるブロックの上下の位置を調整するために使用され、Z-Index 値の大きい値の要素が小さい値よりも上に位置します。 (デフォルトの z-index 値は 0 です。Z-Index 値の 2 つのブロックが同じである場合、