ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトに注目してください。