CSS の例



CSS インスタンス sCSS 背景


ページの背景色を設定します

さまざまな要素の背景色を設定します

背景画像を水平方向に繰り返す方法

背景画像

固定背景画像 (この画像はページの残りの部分と一緒にスクロールしません)

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

高度な背景の例

説明背景プロパティの説明

CSSテキスト

さまざまな要素のテキストの色を設定

テキストの配置


リンクの下線を削除

テキストを装飾する

テキスト内の制御文字

テキストをインデントする

文字間のスペースを指定する

行間のスペースを指定する

要素のテキストの方向を設定する

単語間のスペースを増やす

テキストの折り返しを無効にする以内に要素

テキスト内の画像の垂直方向の配置

Textプロパティの説明


CSSフォント

テキストのフォントを設定

フォントサイズを設定

フォントサイズをpxで設定

セットを使用するフォントサイズ

パーセンテージとemsを使用してフォントサイズを設定

フォントスタイルを設定

フォント変換を設定

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

フォント属性の説明

CSSリンク


訪問済み/未訪問のリンクに異なる色を追加


リンクにテキスト装飾を使用

リンクされた背景の色を指定

ハイパーリンク さらに追加スタイル

高度な - リンクボックスの作成

リンクプロパティの説明

CSSリスト


リスト内のすべての異なるリスト項目タグ


画像をリストとして設定するアイテムマーカー

クロスブラウザソリューションを使用して画像をリストアイテムマーカーとして設定

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

css デフォルトのスタイルでリストアイテムを削除

リスト属性の説明


CSSテーブル

テーブルのth,td要素を指定し、黒枠を追加

border-collapseを使用

幅と高さを指定テーブル

コンテンツの水平方向の配置を設定します (テキスト配置)

コンテンツの垂直方向の配置を設定します (垂直配置)

TH 要素と TD 要素のパディングを指定します

テーブルの境界線の色を指定します

tableテーブルタイトルの位置のセット要素の合計幅は250ピクセルになります


ボックスモデルの説明

CSSボーダー


4つのボーダーの幅を設定します

上ボーダーの幅を設定します

下の境界線の幅を設定します

左の境界線の幅を設定します

右の境界線の幅を設定します

4つの境界線のスタイルを設定します

上の境界線のスタイルを設定します

下の境界線のスタイル

左の境界線のスタイルを設定します

右の境界線のスタイルを設定します

4 つの境界線の色を設定します

上の境界線の色を設定します

の色を設定します下の境界線
左の境界線の色を設定します

右の境界線の色を設定します

1 つの宣言ですべての境界線のプロパティ


両側に異なる境界線を設定

すべての上の境界線のプロパティを 1 つで設定宣言

1 つの宣言ですべての下枠プロパティ

1 つの宣言ですべての左枠プロパティ

1 つの宣言ですべての右枠プロパティ


枠プロパティの説明


CSS アウトライン

線を描く要素の周囲(アウトライン)

アウトラインのスタイルを設定する

アウトラインの色を設定する

アウトラインの幅を設定する


アウトラインのプロパティの説明

CSSマージン

マージンを指定する要素のマージン省略プロパティ

センチメートルを使用してテキストの上マージンに設定する値

パーセンテージ値を使用してテキストの下端を設定する

センチメートル値を使用してテキストの左マージンを設定します


Marginプロパティの説明

CSSパディング

要素の左パディングを設定する

要素の右パディングを設定する

要素の上側パディングを設定する

要素の下側パディングを設定する

すべてのパディングプロパティ


CSSのグループ化とネスト

グループセレクターネストされたセレクター

グループ化とネストの説明


CSS寸法

ピクセル値を使用して画像の高さを設定します パーセンテージを使用して画像の高さを設定します

ピクセル値を使用して要素の幅を設定します

パーセンテージを使用して要素の幅を設定します

要素の最大の高さを設定します

ピクセル値を使用します 要素の最大幅を設定します

パーセンテージを使用して要素の最大幅を設定します

要素の最小の高さを設定します

ピクセル値を使用して設定します要素の最小幅

要素の最小幅を設定するにはパーセンテージを使用します

サイズ属性の説明


CSS表示

要素を非表示にする方法(visibility:hidden)方法要素を表示しない(display:none)

要素のインライン要素を表示する方法

要素のブロックを表示する方法要素

Hがテーブルのcollapse属性を使用する方法

Display 属性の説明


CSS の位​​置

ブラウザウィンドウに対する要素の相対的な位置 要素の相対的な位置

要素の絶対的な位置

要素の重なり

要素の形状の設定

スクロール バーを使用して要素内のオーバーフロー コンテンツを表示する方法

ブラウザーの自動オーバーフロー処理を設定する方法

ピクセル値を使用して画像の上部を設定する

ピクセル値を使用して画像の下部を設定する

ピクセル値を使用して画像の左側を設定

ピクセル値を使用して画像の右側を設定

カーソルを変更

配置プロパティの説明


CSS float

float 属性を使用するだけです 枠線と余白を段落の左側にフローティングします

タイトルと画像を右側にフローティングします

段落の最初の文字を左側にフロートさせます

float を使用します属性を使用して画像ギャラリーを作成します

フロートをオンにする - 属性をクリアします

水平メニューを作成します

テーブルのないWebページを作成します

Floatプロパティの説明

CSSの要素の整列

マージンの中央調整を使用

左右の位置揃え

クロスブラウザソリューションを使用して、左右の位置揃えを設定

左右揃え、float

クロスブラウザ ソリューションを使用し、左右の位置揃え、浮動小数点数を設定します


Alignment 属性の説明

CSS で生成されたコンテンツ

content 属性を使用して各リンクの後ろに括弧内に URL を挿入します

章の数とサブセクションは、「セクション 1」、「1.1」、「1.2」などです。

quotes 属性で引用符を指定します

CSS 疑似クラス

異なる色のハイパーリンクを追加します

ハイパーリンクに他のスタイルを追加します

使用方法: フォーカス

:first-child - 最初の p 要素と一致します

:first-child - 最初の p 要素の I 要素と一致します

:first-child - 最初の p 要素と一致します

のすべての I 要素は次を使用します: lang


疑似クラスの説明

CSS疑似要素

テキストの先頭文字を特殊文字に設定

テキストの1行目を設定特殊用

最初の1文字目を設定特別なテキスト行

使用法: 要素の前にコンテンツを挿入

使用方法: 要素の後にコンテンツを挿入


疑似要素の説明

CSS ナビゲーション バー

縦書きの完全なスタイルナビゲーションバー

水平ナビゲーションバーの完全なスタイル


ナビゲーションバーの説明

CSS画像ギャラリー

画像ギャラリー


画像ギャラリーの説明

CSS画像の不透明度

透明な画像の作成 - マウスオーバー効果

テキスト用の透明なボックスを使用した背景画像の作成


画像の不透明度について説明

CSS画像の合成

画像の合成

画像の合成 - ナビゲーションリスト

ホバー効果と画像ステッチ


画像ステッチ解説

CSS属性セレクター

title属性を持つ要素を選択

title=特定の値を持つ要素を選択

title=特定の値を持つ要素を選択(属性と値を区切るには(~)を使用します) )

タイトル = 特定の値を持つ要素を選択します (属性と値を区切るには (|) を使用します)

属性セレクターの説明

CSS 属性セレクター

  • CSS 読み込み進行状況バー

  • CSS ページネーションスタイル

  • CSSプログレスバー

  • CSSプロンプト情報の例

  • CSSテキストオーバーレイ画像ホバー効果

  • CSSテキストオーバーレイ画像ホバー効果 - 上から下

  • CSSテキストオーバーレイ画像ホバー効果– 下から上へ

  • CSS テキスト オーバーレイ画像のホバー効果 – 右から左へ

  • CSS テキスト オーバーレイ画像のホバー効果 – 左から右へ

  • CSS テキスト オーバーレイ画像のホバー効果 – 透明にフェード

  • CSS垂直ボタングループ

  • CSSボタングループ

  • CSS読み込み(読み込み)アニメーション効果

  • CSS読み込み(読み込み)アニメーション効果2

  • CSS読み込み(読み込み)アニメーション効果3

  • CSS読み込み(読み込み)アニメーション効果4

  • CSS動的検索ボックス

  • CSSユーザー情報カード

  • CSSカードスタイル

  • CSS 前ページ、次ページスタイル

  • CSSさまざまなプロンプト情報ボックス

  • CSS 3 つの価格表スタイル

  • CSS 切り替えスタイル

  • DIV を水平方向に中央揃えにする CSS

  • 上下左右の 4 つの CSS 方向矢印

  • CSSフィードバック情報フォーム

  • CSS フォント - 素晴らしいアイコン メニュー バー

  • CSS トップ ナビゲーション スタイルの例

  • CSS 付箋スタイル効果

  • CSS 水平スクロール メニュー

  • CSS 垂直メニュー

  • CSS垂直スクロールメニュー

  • CSS固定メニューバー

  • CSSレスポンシブログインフォーム

  • CSS固定下部メニューバー

  • CSSドロップダウンメニュー

  • CSSドロップダウン配置

  • CSS ナビゲーション バー ドロップダウン メニュー

  • 検索ボックス付き CSS ナビゲーション バー

  • 検索付き CSS ナビゲーション バー - 送信ボタン付き

  • 検索付き CSS ナビゲーション バー - メンション検索アイコン付き

  • CSS 固定左ナビゲーション バー

  • CSS 固定左ナビゲーション バー – 高さ適応

  • HTML/CSS/JS お問い合わせフォーム テンプレート (百度地図付き)

  • CSS Design One Website