ホームページ ウェブフロントエンド CSSチュートリアル Web デザイン CSS スタイル コードの完全なコレクション、ぜひ集めてください。

Web デザイン CSS スタイル コードの完全なコレクション、ぜひ集めてください。

Jul 09, 2021 pm 05:13 PM
css php

不要なコードを大幅に削減し、HTML CSS で簡単に Web ページをレイアウトできます。友達、あなたのコレクションに保存してください~

Web デザイン CSS スタイル コードの完全なコレクション、ぜひ集めてください。

# 1. テキスト設定

1,

font-size: フォント サイズパラメータ

2,

font-style: フォント形式

3、

font-weight: フォントの太さ

4、色属性


color: パラメータ

Web セキュリティの色の使用に注意してください

2. ハイパーリンクの設定

text-decoration: 参数
ログイン後にコピー

メイン目的は、ブラウザがテキスト リンクを表示するときに下線を変更することです。

パラメータ値の範囲:

  • underline: テキストに下線を付けます

  • 上線:テキストに下線を付けます

  • line-through: テキストに取り消し線を引きます

  • blink: テキストの点滅を使用します

  • none: 上記の効果を表示しません

3. 背景

1. 背景色


background-color: 参数
ログイン後にコピー

2. 背景画像

background-image: url(URL)
ログイン後にコピー

  • URL は背景です ストレージ パス画像の「なし」は「なし」を意味します。

3. 背景画像の繰り返し

background-repeat: 参数
ログイン後にコピー

パラメータ値の範囲:

  • no-repeat: タイル状の背景を繰り返しません。画像

  • repeat-x: 画像タイルを水平方向のみに作成します

  • repeat-y: 画像タイルを垂直方向のみに作成します方向 Paving

背景画像の繰り返し属性を指定しない場合、ブラウザはデフォルトで背景画像を水平方向と垂直方向の両方に並べて表示します。

4. 背景画像の固定

背景画像の固定は、Web ページのスクロールに合わせて背景画像もスクロールするかどうかを制御します。背景画像固定属性を設定しない場合、ブラウザのデフォルトの背景画像は Web ページのスクロールに合わせてスクロールします。派手すぎる背景画像がスクロール時に閲覧者の注意をそらさないようにするために、通常は固定

background-attachment: 参数
ログイン後にコピー

に設定されます。 パラメータ値の範囲:

  • fixed: Web ページのスクロールWeb ページがスクロールされると、背景画像はブラウザ ウィンドウに対して固定されたままになります。

  • scroll: Web ページがスクロールされると、背景画像もブラウザ ウィンドウに対して一緒にスクロールします

##4. ブロック
1. 単語の間隔

word-spacing: 间隔距离
ログイン後にコピー

2. 文字の間隔

letter-spacing: 字母间距
ログイン後にコピー
3. テキストの配置

text-align: 参数
ログイン後にコピー

パラメータ値:

    left: 左配置
  • # right:右揃え
  • ##center:中央揃え
  • ##justify:相対的な左右の揃え

  • # #4. 垂直方向の配置
  • ##vertical-align: パラメータ
##top: 上面の配置

## bottom: 下揃え

  • #text-top: 相対的なテキストの上揃え

  • #text-bottom: 相対的なテキストの下揃え
  • ##baseline: ベースラインの配置

  • #middle: 中央揃え

  • #sub: 添字形式で表示
  • super: 上付き文字
  • 5 の形式で表示します。テキストのインデント
  • text-indent: 缩进距离
    ログイン後にコピー

    12px は、テキストの距離

    に相当します。
  • 6. スペース
  • white-space: 参数
    ログイン後にコピー

  • 通常通常
  • 事前予約済み
  • nowrap no line Break

7. 表示スタイル

display: 参数
ログイン後にコピー

パラメータ値の範囲:
  • block: ブロックレベル要素、オブジェクトの前後両方 改行
  • inline: オブジェクトの前後に改行なし
list- item: オブジェクトの前後で改行し、Bullets を増やします。

#none: 表示しません

  • ##5。箱###### ######

    • height 高度

    • width 宽度

    • padding 内边距

    • margin 外边距

    • float(浮动):可以让块级元素在一行中排列,例如横向菜单。

    • clear 清除浮动

    六、边框

    1、样式

    border-style 参数
    ログイン後にコピー

    边框样式的参数:

    • none:无边框

    • dotted:边框为点线

    • dashed:边框为长短线

    • solid:边框为实线

    • double:边框为双线

    2、宽度

    border-width:参数
    ログイン後にコピー

    3、颜色

    border-color:参数
    ログイン後にコピー

    七、列表

    list-style-type:列表样式
    ログイン後にコピー

    不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示。

    控制用户界面的样式

    八、鼠标

    cursor:鼠标形状参数
    ログイン後にコピー

    CSS鼠标形状参数表:

    鼠标形状:CSS代码

    style="cursor:hand"      手形
    style="cursor:crosshair"   十字形
    style="cursor:text"      文本形
    style="cursor:wait"      沙漏形
    style="cursor:move"     十字箭头形:
    style="cursor:help"      问号形
    style="cursor:e-resize"    右箭头形
    style="cursor:n-resize"    上箭头形
    style="cursor:nw-resize"   左上箭头形
    style="cursor:w-resize"    左箭头形
    style="cursor:s-resize"    下箭头形 
    style="cursor:se-resize"   右下箭头形 
    style="cursor:sw-resize"   左下箭头形
    ログイン後にコピー

    总结:

    用常用HTML+CSS的代码做一个漂亮简单的个人网页,小伙伴来试试。

    推荐学习:CSS视频教程

    以上がWeb デザイン CSS スタイル コードの完全なコレクション、ぜひ集めてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

どのようにしてクラスが拡張されたり、PHPでメソッドがオーバーライドされたりするのを防ぐことができますか? (最終キーワード) どのようにしてクラスが拡張されたり、PHPでメソッドがオーバーライドされたりするのを防ぐことができますか? (最終キーワード) Apr 08, 2025 am 12:03 AM

PHPでは、最終的なキーワードを使用して、クラスが継承されないようにし、メソッドが上書きされます。 1)クラスを決勝としてマークする場合、クラスを継承することはできません。 2)メソッドを最終的にマークする場合、メソッドはサブクラスによって書き換えられません。最終的なキーワードを使用すると、コードの安定性とセキュリティが保証されます。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

See all articles