HTML の CSS (属性) の予備調査

CSS (Cascading Style Sheets)

CSS は、HTML や XML などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して Web ページ要素を動的にフォーマットすることもできます。

CSS は、Web ページ内の要素の位置のレイアウトをピクセル精度で制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

CSS ディメンション属性(Dimension)

height 要素の高さを設定
width 要素の幅を設定
max-height 要素の最大高さを設定
max-width 要素の最大幅を設定
min-height 要素の最小の高さを設定します
min-width 要素の最小の幅を設定します

CSSの背景属性（Background）

background 1つのステートメントですべての背景属性を設定します
background-color 背景を設定します要素の色
background-image 要素の背景画像を設定します

background-position 背景画像の位置を設定します

top top

right right

left left

center middle

background-repeat を設定します背景画像の繰り返し方法

repeat すべて繰り返す

repeat-x 水平方向に繰り返します

repeat-y 垂直方向に繰り返します

no-repeat 繰り返しません
background-attachment ページのスクロールに合わせて背景画像もスクロールするかどうか

CSS 境界線プロパティ (境界線とアウトライン)

プロパティ

説明

border すべての境界線プロパティを設定します

border-bottom 下境界線を設定します

border-bottom-color 下境界線の色を設定します

border-botton-style 下枠のスタイルを設定します

border-botton-wi dth settings 枠の幅を設定します

border-color 4つの枠の色を設定します

border-left 左枠を設定します

border-left-color 左枠の色を設定します

border-left-style 左枠のスタイルを設定します

border-left -width 左枠の幅を設定します

border-right- 右枠を設定します

border-right-color 右枠の色を設定します

border-right-style 右枠のスタイルを設定します

border-right-width 右枠を設定します

border-style スタイルを設定します

solid スタイルは実線です

double 二重実線 (幅は 1px、効果は見えません)

dottde 点線 (IE6/7 では実線として表示されます)

dashed 破線(IE6/7では実線で表示されます)

border-top 上枠を設定します

border-top-color 上枠の色を設定します

border-top-style 上枠のスタイルを設定します

border -top-width 上の境界線の幅を設定します

border-width 4 つの境界線の幅を設定します

outline すべてのアウトラインのプロパティを設定します

outline-color 輪郭の色を設定します

outline-style のスタイルを設定します輪郭

outline-width 輪郭の幅を設定します

border-bottom-left-radius 境界線の左下隅の形状を定義します

border-bottom-right-radius 右下隅の形状を定義します境界線の形状

border-top-left-radius 境界線の左上隅の形状を定義します

border-top-right-radius 境界線の右上隅の形状を定義します

border-radius 短縮プロパティ、4 つの border-*-radius プロパティをすべて設定します

border-image 短縮形プロパティ、すべての border-image-* プロパティを設定します

border-image-outset 境界線を超える境界線画像領域の量を指定します

border-image- repeat 画像を繰り返すか、丸めるか、引き伸ばすか

border-image-slice 画像の境界線を指定

border-image-width の内側へのオフセットは画像の境界線の幅を指定

border-image-source は画像を指定境界線として使用されます

box-shadow ボックスに 1 つ以上の影を追加します

CSS フォント属性 (Font)

Attributes

説明

font すべてのフォント属性を設定します

font-family テキストのフォントファミリーを設定します

font-size テキストのフォントサイズを設定します

font-size-adjust 要素のアスペクト値を指定します

font-stretch 縮小または現在のフォントファミリーを拡大します

font-style テキストのフォントスタイルを設定します

font-variant 中国語と英語でテキストを開く方法を設定します

font-weight テキストの太さを設定します

text-align テキストの配置を設定します

center 左揃え 左揃え 右揃え 右揃え

letter-spacing テキストの間隔を設定します

text-decoration テキストの装飾線を設定します

none 主にタグの下線を削除するために使用します

下線

上線上線

ラインスルー取り消し線

注: 子要素が別の要素 (親要素) 内に配置され、親要素に text-decoration を設定すると、子の text-decoration が要素をクリアできません

解決策:
1. 絶対配置位置を使用します: ansolute
2. float を設定します

text-transform 大文字と小文字を設定します

すべての単語を大文字にします

小文字にしますすべての単語を小文字にします

大文字にします最初の文字

font-style テキストのスタイルを設定します

normal Normal

italic italic

oblique italic text

font-variant 中国語と英語のテキストの開き方を設定します

nomal Normal

small-caos 英語プログラミング大文字小さいフォントサイズで表示します

CSSテキスト属性(Text)

Property

Description

color テキストの色を設定します

direction テキストの方向/書き込み方向を指定します

Letter-spacing 文字間隔を設定します

line-height 行の高さを設定します

text -align テキストの水平方向の配置を指定します

vertical-align テキストの垂直方向の配置を指定します

text-decoration テキストに追加される装飾効果を指定しますテキスト

text-indent テキストの最初の行のインデントを指定します

tex-transform テキストを制御します

unicode-bidi の場合 テキストの方向を設定します

white-space 中の空白の処理方法を指定します要素

word-spacing 単語の間隔を設定します

CSS テーブル属性 (Table)

属性

説明

border 枠線を設定します

border-color 枠線の色を設定します

セル間隔表の枠の幅を設定します

cellpadding データと枠の間の距離を設定します

background-color 表の背景色を設定します

background-url 設定 表の背景画像

colspan セルを水平方向に結合します

rowspan セルを垂直方向に結合します

セルを結合する 4 つのステップ

1. どのセルからセルを結合するかを決定します
2. セルを垂直方向に結合するか水平方向に結合するかを決定します 結合 3. 結合する必要があるセルの数を決定します 4. 処理冗長セル

CSS リスト属性 (List)

Property

Description

list-style すべてを 1 つのステートメントで設定する リスト属性

list-style-image 画像をリストとして設定するitem mark

list-style-position リストの項目マークの配置位置を設定します

inside リストのスタイルをコンテンツに入れます

outside デフォルトでは、リストのスタイルはコンテンツにはなく、通常は psdding にあります

list- style-type リスト項目マークの種類を設定します

複合記述方法

list-style 1. 種類 2. 位置 3. 画像

デフォルトのスタイルをクリア

padding: 0px;

margin:0px;

list -style:none;

CSS margin プロパティ (Margin)

Property

Description

margin すべての margin プロパティを 1 つのステートメントで設定します

margin - top 要素の上マージンを設定します

margin-right 要素の右マージンを設定します

margin-bottom 要素の下マージンを設定します

margin-left 要素の左マージンを設定します

CSS パディングプロパティ (Padding)

Property

説明

padding すべてのパディングプロパティを 1 つのステートメントで設定します

padding-top 要素の上のパディングを設定します

padding-right 要素の右のパディングを設定します

padding-bottom 要素の下のパディングを設定します

padding-left 要素の左のパディングを設定します

CSS 配置属性 (Positioning)

property

Description

position 要素の配置タイプを指定します

bottom 配置された要素の下マージン境界とその要素を含む要素の下境界の間のオフセットを設定しますblock

right 設定 位置決めされた要素の右マージン境界と、その要素を含むブロックの右境界との間のオフセット

left 位置決めされた要素の左マージン境界と、その要素を含むブロックの左境界との間のオフセットを設定します

top位置決めされた要素とその要素を含むブロックの上マージン境界を設定します 境界間のオフセット

overflow コンテンツが要素ボックスからオーバーフローした場合の動作を指定します

cursor 表示されるカーソルのタイプを指定します

float ボックスをフローティングにするかどうかを指定します

display 要素が生成するボックスのタイプを指定します

vertical-align 要素の垂直方向の配置を設定します

visibility 要素が表示されるかどうかを指定します

z-index 要素の重なり順を設定します

CSS 疑似-classes

属性

説明

: active アクティブ化された要素にスタイルを追加します

: focus キーボード入力フォーカスで要素にスタイルを追加します

: hover マウスが上にあるときに要素にスタイルを追加します

: リンク 未訪問へ リンクにスタイルを追加

: 訪問済み 訪問済みリンクにスタイルを追加

: lang 指定された lang 属性を持つ要素にスタイルを追加

要素 (疑似要素) の CSS

属性

説明

: first-letter テキストの最初の文字に特別なスタイルを追加します

: first-line テキストの最初の行に特別なスタイルを追加します

: bofore 前にコンテンツを追加します要素

: after 要素の後 後でコンテンツを追加します

結論

単純さは複雑さに先立つのではなく、複雑さの後に来ます

HTML の CSS (プロパティ) に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。