Webページの背景を変更する方法。 Webページの背景とテキストの色を設定する方法

助けを借りて CSSの色と背景 Webページのほぼ要素を指定し、背景画像を自由に制御できます。水平方向と垂直方向に繰り返します。 その上、 cSSツール ポジショニングを使用して任意のポイント画面に背景画像を配置できます。 私たちはまだこれまでに行きません、順番に行きましょう。

カラープロパティ

このプロパティは、項目の色を設定します。むしろ、要素内のテキストの色を設定します。 値は可能な形式の1つによって与えられます。

  • カラー名(緑、黒、赤...);
  • サンザカラーコード(008000,000000、FF0000 ...);
  • rGBの10進カラーコード(色:RGB(40,175,250))。

Colorプロパティは継承され、任意の要素に指定されていない値で、その値はその先祖から継承されます。 しかし、それが指定されていない祖先の場合、ブラウザスタイルテーブルはデフォルト値を使用して適用されます。 この場合の要素の色は最も可能性が高いです。

すでに述べたように、色をほぼすべての要素に設定することができ、それは(H1 ... H6)、(強い、em)、さらに全体(P)、さらにテーブルの境界でさえありますが、これが後で。

テキストカラータスクの例を見てください cSSヘルプ:

h1(カラー:ブルー)

この例では、Webページの最初のレベルの見出しがすべて青になります。

強い(色:赤)

この場合、ページのテキスト内のすべてのものがタグで強調表示されます。 強い。、それは赤い色になります。

あなたはこのように書くことができます:

h1、P、強い(色:緑)

その後、最初のレベル、すべての段落、およびタグによって強調表示されているすべての見出しは緑色になります。

異なる色のヘッドラインを強調表示する必要がある場合は、クラスセレクタが使用されます。 属性はHTMLでクラスを定義するために使用されます クラスどんなアイテムにも適用できます。 html - コードで書く必要があります。

class \u003d "blue"\u003e このクラスのヘッダーの色は青になります

スタイルCSSの表で、この場合は、セレクタがh1要素になるルールを書き込み、その時点で書きます( . ) クラス名:

h1.BLUE(カラー:ブルー)

HTML文書では、識別子セレクタも使用され、それらは属性によって決まります。 iD.。 識別子は、クラスよりも重要か優先順位の特徴です。 また、要素のHTMLコードでクラスと識別子も指定されている場合は、識別子スタイルが適用されます。 ラティス記号の識別子を表します( # )。 HTML識別子コードで使用するには、次の手順を実行する必要があります。

id \u003d "blue"\u003e この識別子のタイトルの色は青になります

スタイルシートで:

h1#青(色:青)

背景色

このプロパティを使用すると、ページの背景色を、任意のHTML要素に対して、全体の段落、リンク、一般に設定できます。 これを行うために、プロパティ値は色または値を示します トランスペアレント(トランスペアレント)。 背景ページのコードが書き込まれています。

ボディ(背景色:アクア)

この場合、ページの背景はターコイズされ、ヘッダーの背景になります。

h1(背景色:黄色)

黄色の最初のレベルのヘッダーの背景があります。

CSSの色と背景

背景 - リピートプロパティ

このプロパティは、水平方向および垂直方向に繰り返されるかどうかを判断するように設定されている場合に適用されます。 有効な値:

  • 繰り返す。 - 画像は縦横に繰り返されます。
  • repeat-x。 - 画像は水平方向にのみ繰り返されます。
  • 繰り返しy。 - 画像は垂直方向だけ繰り返されます。
  • 無繰り返し。 - 画像は繰り返されません。

コードは次のように書かれています。

p(
背景 - イメージ:URL( 画像を持つ画像ファイル) ;
背景 - 繰り返し:repeat-X.
}

この段落のテキストは、水平になる背景画像の上にあります。

背景 - 添付資産

このプロパティは、テキストをスクロールしているページの背景画像を表示する必要があります。 スクロールまたは固定されている( 修繕).

体 (
背景 - イメージ:URL( 画像を持つ画像ファイル) ;
背景 - 繰り返し:repeat-x;
背景 - 添付ファイル:固定
}

この場合、背景画像は無動なままになります。

背景 - 位置特性

このプロパティは、イメージの相対的なものを見つけるために使用されます。 値は、長さ(cm、px)、キーワードの長さでパーセンテージ(%)として指定されます。

  • 垂直方向:
    • 上。 - 画像の上部はページまたはブロックの上端に位置合わせされています。
    • センター
    • bottom - 画像の下部はページまたはブロックの下端に揃えられます。
  • 水平に:
    • 左。 - 画像の左端は、ページまたはブロックの左端に位置合わせされます。
    • センター - 画像の中心はページまたはブロックの中央に平準化されています。
    • 正しい - 画像の右端はページまたはブロックの右端に平坦化されています。

例のコードをパーセント、長さ単位、およびキーワードに書きます。

体 (
背景 - イメージ:URL( 画像を持つ画像ファイル) ;
背景 - 位置:0%0%
}

体 (
背景 - イメージ:URL( 画像を持つ画像ファイル) ;
背景 - 位置:10px 25cm
}

体 (
背景 - イメージ:URL( 画像を持つ画像ファイル) ;
背景位置:トップセンター
}

背景色やページの写真または別のアイテムの写真を設定するだけで十分です。 主なことは、カラーコードや背景画像を持っていると同様に、どこでどのように行うことができるかを知ることです。 この記事からは、あなたがたくさんの新しいことを学ぶことができますが、初心者のためにそれを創造しました。 したがって、すべてができるだけ短く、同時に詳細になります。 主なことは、全体的なプレゼンテーションと既製の例だけでなく、HTMLで背景を作る方法も理解することです。

HTMLの背景を設定する中間DOCTYPEを使用する

そして私はその事実から始めます HTML5。 尋ねる機会はありません。 この機能はCSSで耐えることを決定しました。 したがって、以下で使用する予定の場合、有効な(正しい)コードを取得する場合は、ドキュメントの遷移タイプに留まる必要があります。 これを行うには、Webページは次の行から始める必要があります。

遷移// en "http://www.w3.org/tr/html4/loose.dtd"\u003e

あなたがそれを考え出したならば、背景の作成方法を理解しようとしましょう。 そしてここで最初のことが注意されるべきです - これは間の違いです 背景色 そして 背景の写真。 最初は行きます 背景色これはすべての利用可能なページスペースまたはその要素をあふれています。 その上に繰り返されます 背景の写真。 視覚的には、これは次のように表すことができます。

HTML文書とその要素の背景

あなたが知る必要がある2番目のことは 文書の体 そして 文書の要素. 文書の体 Webページのすべてのコンテンツを含む、ボディタグのWebページのHTMLコードに表示されます。 明らかに、文書の文書の背景は透明にすることはできません。 文書の本体の背景が指定されていない場合は、ブラウザの設定で指定されたデフォルト値が使用されます。

ページ要素 ボディタグの中にあります。 文書のすべての要素にHTMLを使用して色や背景画像を設定できることは注目に値します。 たとえば、背景画像はテーブルに対してのみ指定できます。 デフォルトでは、通常は透明な背景があります。

背景色を作成するための属性bgcolor

尋ねるために 背景色 文書またはその要素はbgcolor属性によって使用されます。



この場合は、ページの背景色を全体として設定します。 しかし、テーブルの背景色を設定する方法の例。





背景を持つテキスト

テーブル内の背景色をTRタグの行に対しておよびTDタグ内のそれらのセルについても指定できることは注目に値する。

カラーコードを見つける方法?

HTMLの色が特別に設定されていることがすでに注目しています コード例えば:#EC008C。 カラーが必要なコードを見つけるには、グラフィックスエディタの1つを使用できます。 たとえば、Photoshopでは、使用できます。 スポイトツール。絵の中の点から色を得るための(ピペット)。 その後、ツールバーの結果の結果と開いているウィンドウにある色をクリックする必要があります。 カラーピッカー。"(色を選択)カラーコードをコピーします。

このコードは最初に格子記号(#)なしであるという事実に注意を引いて、この符号を手動で追加する必要があります。

数値を使用することもできます オンラインサービス、例えば:

作業の原則はさらに簡単です - 希望の色をクリックしてコードを取得します。

背景画像を作成するための属性の背景

背景色の場合との場合と同様に 背景の写真たとえば、特別な属性、すなわち背景を使用する必要があります。



この場合、ページの背景画像を全体として尋ねます。 写真のサイズの制限により、例えば繰り返されることが注目に値する。

ご覧のとおり、繰り返しの場合、写真間の遷移は顕著です。 したがって、この瞬間が考慮される特別な写真がよく使用されます。

しかし、テーブルの背景画像をテーブルタグに設定する方法の例です。





背景を持つテキスト

背景画像は、テーブル全体および/またはその別のセルとしてのみ設定できることは注目に値する。 文字列の場合は機能しません。

背景画像への絶対パスと相対パス

注目を集める価値がある アドレスの背景画像。 この場合、画像への相対パスが使用される、すなわち アドレスは、Webページファイルへの画像ファイルの場所に表示されます。 このオプションは特に成功していません。 写真への絶対パスを使用するのが最善です。 その完全なURL、例えば:



この場合、あなたは同時に問題を抱えていません。 それについてもっと読むことができます。

要約しましょう

HTMLコードの妥当性に対しては、Transitional Doctypeを使用する必要があるため、属性BGColorとBackgroundを使用することが道徳的に古くなっています。 背景色をHTMLで設定するには、グラフィックエディタで、または特別なオンラインサービスを使用することができる特別なコードを使用します。 背景画像は割り当てられた領域の尾部に複製され、背景色の上にあります。 背景画像を指定するには、完全なURLを使用することをお勧めします。 私はこれについてすべてを持っています。 注意してくれてありがとう。 がんばろう!

22:37 メッセージを編集します

皆さん、みんなに学び、新しいものを学ぶことができます! あなたは今までに注意を払ったことがありますか 外観 クライアルがページの背景を発行することを怠惰になったことを発揮するときは? そして私は回った。 それは虐殺されます。 間に通常の分離がないことによる 異なる種 彼女が混合され、そのようなWebリソースをさらに見るという願望を単に消えるだけです。

そのようなトラブルは、トピックの記事を書くことに決めなかった:「HTMLでページの背景を作る方法」。 出版物を読んだ後、あなたはあなたがバックグラウンドデザインを設定できるツール、バックグラウンドを修正または変更する方法をどのように設定するか、そしてそれほど多くのものを魅力的にするのに役立ちます。 今始めましょう!

背景のWebページを設定するための基本的なツール

背景画像を設定するには、Web言語開発者が属性の背景を提供しています。 CSSとIN CSSの両方で利用可能です。

マークアップ言語では、これはボディタグの属性、およびスタイルテーブルの属性です。同時にリアプランの特性を最大5に設定できるようにするユニバーサルプロパティです。 背景は、背景を色、カラー画像、さらにはアニメーションとしてタスクするために使用することができるかなり柔軟な要素である。

そのため、HTMLユニットを介して背景画像をインストールするには このコードを書くのに十分な値段: ... そして、「ファイルアドレス」という単語の代わりに、写真へのパスを挿入します。

しかし、通知! カラーパレットから指定されたモノコンキャンバスを見たいバックグラウンドの形式で、これはbgcolor属性を使用して行われます。

例えば、 ...私たちは私たちのサイトのために黒の背景に尋ねました。

CSSとHTMLの色は、英語の単語(赤)、またはその後の符号#6文字からなる特別なコード(たとえば、#ffdab9)によって設定されています。

専門に2番目のオプションを入力するとき ソフトウェア製品 開発者向けに、パレットは自動的にあなたの前に表示されます。 これらのWeb言語の学習を始めたばかりの場合は、カラーコードをインターネット上にスパッチできます。

カスケードスタイルテーブルのプロパティとしての背景

それは設定されています 別のファイル から cSSスタイル、または要素内で

最初のテキスト

2番目のテキスト

背景 - 添付ファイル。

サイトを設定する際には、機能に加えて、デザインは非常に重要です。 これが、サイトが作成されている会社や人物のスタイルやデザインに尋ねるものです。 この記事の指示に従って、背景色とそのイメージは労力ではありません。

メモ帳やその他のHTMLファイルを開きます テキストエディタあなたが慣れているか。 たとえば、最低限のテキストでサイトのプリミティブページを撮影してください。 ブラウザを使用してファイルを開くことができます。


から始めるには、あなたの背景の色を変えてください。 遅いインターネット 接続はすぐにサイトの背景画像を見ることはありません。 絵がロードされるまで、いつでも、それらはあなたのサイトの色しか見ることができません。
タグを入力してください。 パラメータbgcolor \u003d "*****"、*****はカラー暗号です。 オプション "for Web"またはサイトhttps://colorscheme.ru/color-namesを選択して、任意のグラフィックエディタでHTMLの色を学ぶことができます。


円のパレットに色を選択し、正方形内にその強度を割り当てるのに十分です。 右側にはHTML用の2つのコードが表示されます。 それらをコピーしてノートブックにそれらを挿入します。


色をフィーチャーしてコードに挿入するには、ブラウザから受信したWebページを表示してください。


今、あなたは背景画像の挿入に進むことができます。 より便利なため、希望の写真をコードフォルダに置きます。 ラテン文字の名前を聞いてください。


それをクリックしてファイルの場所を見つけましょう。 右クリック マウスを選択し、文字列を選択し、コンピュータにインストールされているブラウザをクリックします。


ブラウザ検索バーからアドレスをコピーします。


タグの中に今 文字列を入力してください。
  • style \u003d "background-image:url( 'ファイル:/// c:/ users / pow_file.jpg')"


ファイルを保存してください。


Webページを確認してください。 背景があなたのテキストの下に置き換えられていることがわかります。


より大きな画面解像度を持つユーザーは、あなたのイメージは下右に複製されます。 写真がモノラルではない場合は、よく見えません。 このパラメータを修正するには、特別なコマンドがあります。

  • 背景 - 繰り返し: "value"。 値のオプションは、次のとおりです。 「繰り返しy」 - 垂直方向のみを繰り返します。 「繰り返し」 - 画像はその場で凍結され、繰り返されません。 "Space" - ページ全体が画像の最大コピー数で埋められます。 「round」 - 同じオプションですが、画像の端にはきれいにスケールされます。
  • 背景 - 添付ファイル:「値」。 Wordタグ "Scroll"の代わりに置き換えると、イメージはサイトとスクロールされます。 「固定」 - 背景をスクロールするときは変わりません。
  • 背景サイズ:値value2。 ここでは、値はピクセル単位の量をとる必要があります。 例:100px 200px。 ピクセルに加えて、値はパーセントで受け入れられます。 これはイメージ充填パラメータです。 数字に加えて、「contains」 - 画像を長辺に沿って画像で塗りつぶし、「表紙」 - 画像を幅に記入します。

ページの背景をHTMLに記入する基本を知ることは、最初のサイトを作成する準備ができています。

私が書いたテキストの色を変更する方法について。 私はそれが常に便利ではないと言いたいです。 ここでは、例えば、全体のテキストの色を変更したい HTMLページ。 たとえば、黒いテキストの色が赤に変わります。 これを行うには、タグのTEG属性があります 。 タグをフックしたいです このタグには、テキストの色だけでなく、すべてのHTMLページの背景も変更するのに役立つ属性があります。 そして今や例と共に。
これが今検討する属性です。

テキスト。 - この属性はドキュメント全体のテキストの色を設定します。
b b - この属性はHTMLページの背景色を示します。
バックグラウンド。 - この属性を使用すると、ページページの背景を埋めることができます。

text属性はタグに規定されています 。 色はデジタルコードに設定されています。

または通常の色名:

結果:

またはこのように:

テキスト属性を使用してテキスト色を変更します テキストページ、テーブル、写真、音楽、ビデオ。

結果:

bgcolor属性を持つタグにも配置されています HTMLページの色を設定できます。

色はデジタルコードに設定されています。

または通常の色名:

テキストページ、テーブル、写真、音楽、ビデオ。

結果:

またはこのように:

ページタイトル テキストページ、テーブル、写真、音楽、ビデオ。

結果:

背景属性もタグに入れられています 。 この属性を使用すると、絵の背景を作ることができます。 画像フォーマットJPGまたはGIFを取る。 絵の許可は12×12ピクセル以上で撮影することができる。

背景画像がHTMLファイルと一緒に投稿された場\u200b\u200b合は、次のようになります。

背景画像がImagesフォルダに投稿された場\u200b\u200b合は、次のようになります。

これが例です。

ページタイトル テキストページ、テーブル、写真、音楽、ビデオ。

結果:

またはこのように:

ページタイトル テキストページ、テーブル、写真、音楽、ビデオ。

それで全部です。
これで、背景色を変更または設定する方法がわかりました。 レッスンを保護し、値を変更して実験を行います。
。 がんばろう !!!

トピックを続ける:
インターネット

Windowsブートディスクを作成する最も一般的な方法の1つは、この記事で説明されている方法です。 そしてより正確に創造の中で、それは遠い世界で私たちを助けるでしょう...