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