HTML & CSS (3)

このラベルにCSSを直接適用します。 けいじょう <ラベル名style=「適用するCSSコード」></ラベル名>

ドキュメントのヘッダーラベルにstyleラベルを使用してCSSを適用します。 けいじょう <style> CSSコード </style>

ドキュメントの外にあります。cssファイルを使用してCSSを適用します。この方法を推奨します。 けいじょう <link href="cssファイルパス"type="text/css"rel="スタイルシート">

HTMLドキュメント内のすべての要素を選択するためのセレクタです。 けいじょう <style> *{ cssコード } </style>

特定のタグを選択できます。 けいじょう <style> ラベル名{ cssコード } </style>

HTMLタグにアイデンティティを指定し、アイデンティティを指定するタグの選択者を選択します。 「#」(#)を使用して、個人情報を選択します。 けいじょう <style> #ユーザ名{ cssコード } </style>

HTMLタグにクラスを指定し、指定したクラスにタグを選択する選択プログラム。 点(.)選択ギャップを使用します。 1つのアイデンティティしかありませんが、クラスは複数のタグに同じ名前を付けることができます。 けいじょう <style> クラス名{ cssコード } </style>

HTMLタグ属性の選択プログラムを使用します。 けいじょう <style> /*タグ属性の使用方法** ラベル名[プロパティ]{ cssコード } /*タグ属性の使用方法** ラベル名[属性=属性値]{ cssコード } </style>

CSS属性をaラベルに適用するために使用します。 けいじょう <style> /*その他の可用性** a:link::after { cssコード } </style>

指定した選択者以外の要素を選択できます。 けいじょう <style> ラベル名:not(要素){ cssコード } </style>

テキストの属性を使用してCSSを適用します。 種類 :first-letterセレクタ:最初の文字を選択します。 :first-lineセレクタ:最初の行を選択します。 けいじょう <style> p:first-letter{ cssコード } p:first-line{ cssコード } </style>

特定のhtmlタグが下にあるすべてのタグ要素を選択できます。 けいじょう <style> ラベル名1ラベル署名2{ cssコード } </style>

特定のHTMLタグの真下にあるタグ要素を選択できます。 けいじょう <style> ラベル名1>ラベル名2{ cssコード } </style>

HTMLタグ階層を考慮して、同じ位置にあるタグ要素を選択します。 けいじょう <style> /*~同じ位置にある全てのタグを選択*/ ラベル名1~ラベル名2{ cssコード } /*~同じ位置の最初のタグを選択*/ ラベル名1+ラベル名2{ cssコード } </style>

Webサイトを使用するユーザーの反応に応じてHTMLタグ要素を選択します。 けいじょう <style> /*タグの上にマウスを置くときに選択します。*/ ラベル名:hover{ cssコード } </style>

HTMLタグ要素の状態に応じて選択します。 けいじょう <style> /*フォーカス状態。*/ ラベル名:focus{ cssコード } /*タグのcheckedステータスを入力します。*/ ラベル名:checked{ cssコード } </style>

px 属性の絶対サイズを設定します。16 pxこのデフォルト値。 em 属性の相対的なサイズを設定します。1.0 emはデフォルト値、2.0 emは2倍、0.5 emは0.5倍です。複数のデバイス環境があるため、emをよく使用します。 pt 属性の絶対サイズを設定します。 % 属性の相対的なサイズを設定します。

display HTML要素を画面のスタイル属性に印刷および削除します。 ツールバーの none:ブラウザ画面からHTML要素を削除します。 block:HTML要素をblockタイプとして出力します。 inline:HTML要素をinlineタイプとして出力します。 inline-block:デフォルトではinlineプロパティと同じで、幅と高さを持つことができます。

visibilty その機能はdisplay宋属性と類似しており,タグの可視性を決定する. ツールバーの visible:HTML要素を出力します。 hidden:HTML要素は出力されません。 折りたたみ:オーバーラップを指定します。 継承:親要素の値を継承します。

HTML要素の透明度を調整できます。 透明度を0.0から1.0に調整します。

タグ要素の水平と垂直のサイズを設定できます。

margein タグ要素のハウジングの余白を設定できます。 使用方法 ラベル名{ /*top/right/bottom/leftを選択します。*/ エッジ-上/右/下/左:ピクセル; /*marginのみ使用時*/ マージン:ピクセル;/*上下左右のピクセルの余白を指定します。*/ マージン:1ピクセル2;/*上下画素1の余白は左右画素2の余白である。*/ マージン:1ピクセル2ピクセル3;/*上1ピクセル、上2ピクセル、下3ピクセル。*/ マージン:1画素2画素3画素4; /*右画素2は上画素1、左画素3は下画素4に等しい。*/ }

padding タグ要素の内部余白を設定できます。 使用方法 ラベル名{ /*top/right/bottom/leftを選択します。*/ padding-top/right/bottom/left:ピクセル; /*marginのみ使用時*/ padding:ピクセル;/*上下左右のピクセルの余白を指定します。*/ padding:1ピクセル2;/*上下画素1の余白は左右画素2の余白である。*/ padding:1ピクセル2ピクセル3;/*上1ピクセル、上2ピクセル、下3ピクセル。*/ padding:1画素2画素3画素4; /*右画素2は上画素1、左画素3は下画素4に等しい。*/ }

box-sizing border-boxプロパティ値とcontent-boxプロパティ値を使用して、タイトルの位置をタグ要素の内部または外部に配置できます。 使用方法 ラベル名{ box-sizing: border-box; /*border-boxは*/ box-sizing: content-box; /*content-boxは*/ }

border タグの枠線を設定できます。 使用方法 ラベル名{ border-width:ピクセル; /*枠線の厚さを設定します。*/ border-style:枠線スタイル; /*枠線スタイルを設定します。実線破線点*/ border-color:色; /*枠線の色を設定します。*/ border-radius:1画素2画素3画素4 /*左上からエッジを丸くします。(時計回り)*/ border:枠線の厚さ枠線スタイル枠線の色; /*一度に設定できます。*/ }

background image タグ要素の背景画像を指定できます。 使用方法 ラベル名{ background-image:url(「画像パス」) /*画像をインポート*/ background-size: 100% /*画像サイズの調整*/ background-repeat:no-repeat /*画像を繰り返し入れるかどうかを決定し、x-repeatは1行のみ、y-repeatは1列のみ*/ background-attachment:fixed /*背景画像をスクロールするかどうかを決定 スクロール:選択した要素とともに移動します。スクロールしても背景画像はスクロールされません。 fixed:動かない。 local:選択した要素とともに移動します。スクロールすると、背景画像もスクロールされます。*/ }

font-size フォントサイズを設定します。 使用方法 ラベル名{ font-size:サイズ; } font-family フォントを設定します。フォントがない場合は、ブラウザのデフォルトフォントを使用します。 使用方法 ラベル名{ font-family:フォント; }

font-style フォントのエスケープを設定できます。 使用方法 ラベル名{ font-style: ltalic; } font-weight フォントの太字を設定できます。 使用方法 ラベル名{ font-weight: bolder; } line-height 行間を設定できます。 使用方法 ラベル名{ line-height:ピクセル; }

text-align フォントの位置合わせを設定できます。 使用方法 ラベル名{ text-align: right/left/center; } text-decoration フォントの表示を設定できます。 使用方法 ラベル名{ /*noneは、通常、aタグのテキスト下線を除去するために使用されます。 下線はテキストに下線を付けるために使用されます。*/ text-decoration: none/underline; }

タグ要素の位置を設定します。top、bottom、left、rightプロパティを使用して座標を指定します。 position属性の属性値 static:他のタグとの関係で自動的に配置され、勝手に設定できません。 absolute:正座標を使用して位置を設定します。 相対:デフォルトの位置に対して設定します。 fixed:ブラウザに対する絶対座標設定。下にスクロールするか、上にスクロールすると、位置が固定されます。 使用方法 ラベル名{ position: static/absolute/relative/fixed; top:ピクセル; 左:ピクセル; 下:ピクセル; 右:ピクセル; }

配置順序のプロパティを決定して、どのオブジェクトを前後に配置するかを決定します。 z-index属性の属性値 Auto:z-indexがデフォルト値として指定されていないことに等しい number(数字):数字が低いほど後ろに並ぶ;数字が高いほど前に並ぶ。

コンテンツがタグ要素のサイズより大きい場合に設定できます。 オーバーフロー属性の属性値 hidden:コンテンツがタグ要素より大きい場合、画面にオーバーフローしたコンテンツは表示されません。 スクロール:コンテンツがタグ要素より大きい場合、タグ要素にスクロールを作成します。

主にレイアウトを設定するために使用されるHTML要素の場所のプロパティを設定します。 floatプロパティは、宣言タグの下にあるタグにも影響します。したがってclearプロパティを使用してfloatの影響を除去することができます。

text-shadow タグ要素にシャドウを作成します。

2つ以上の色で使用するプロパティを示します。

transition-duration 数秒で変形するように設定します。 transition-delay 数秒後に再生するように設定します。 transition-property 変換を適用するプロパティを設定します。 transition-timing-function 変換に関連する関数の設定 in:変形速度が速い。 out:変形速度が遅くなります。

animation-duration アニメーションの期間を設定します。 animation-delay 数秒後にアニメーションを設定します。 animation-name アニメーションの名前を設定します。 animation-timing-funnction アニメーションに関連する関数を設定します。