スタイリングの紹介

過去数週間、私たちは必要なすべての情報を Web ページに掲載する方法について議論してきました。ただし、手順に従ってコーディングを進めていると、ページがあまり魅力的に見えないことにおそらく気づいたでしょう。実際にはかなり悪く見えるかもしれません…

これまでのところ、Web ページにはスタイルを追加していません。スタイルは、ページ上で HTML 要素をどのように表示するかをブラウザーに伝えるためのルールです。サイズ、フォント、色、位置、配置などを変更できます。でもどうやって？

最初のスタイルを追加する

それだけです！興味がある場合は、それをコピーしてドキュメントに貼り付け、ブラウザーで開いてください。あなたは何を見たの？文字が青になりました！いいですね！

それで、ここで何が起こっているのですか？テキスト コンテンツを段落要素で囲み、その段落要素に style 属性を与えました。冒頭の

の style= に注目してください。鬼ごっこ。属性の値で、色のスタイルを青の値「color: blue;」に割り当てました。

これは素晴らしいことですが、テキストをページの中央に配置したい場合はどうすればよいでしょうか?

変更する必要があるのは、style 属性の値だけです。パワフル！しかし、その value 属性では何が起こっているのでしょうか?この構文はこれまで見たことがありません。それがCSSです！でも、ちょっと待って、HTML を書いているのに、なぜここにあるのでしょうか?

そうです！しかし、HTML はスタイルを設定するために設計されていません。構造とセマンティクスを考慮して設計されています (これについては後の投稿で説明します)。ページの外観を変更したい場合は、スタイルシートを変更する必要があります。デフォルトでは、ブラウザは「ユーザー エージェント スタイルシート」と呼ばれるものを使用して HTML 内の情報を解釈する方法を決定します。これまでの文字サイズや色はそれをベースにしています！ CSS を style 属性に追加すると、定義したスタイルはユーザー エージェント スタイルシートをオーバーライドし、定義していないスタイルはすべてそのシートに戻ります。 CSS は Cascading Style Sheets の略であり、それが理由です!

これは素晴らしいですね。ページの外観を変更できるようになったので、可能性は無限です。しかし、さらにカスタマイズしたい場合を想像してください:

うわぁ…たった 2 行のテキストなのに、これは大量のコードですね…何が起こっているのかをすぐに理解するのはとても難しいです!これは、後でこの情報を編集するために戻って編集しようとすると、次のような場合よりもはるかに時間がかかるため、問題です:

この問題はどうすれば解決できますか?

CSSの紹介

HTML が乱雑にならないように、すべてのスタイルを .css ファイルに移動します。小規模なプロジェクトの場合、通常、これを style.css と呼びます。コードを整理するだけでなく、スタイルを新しいファイルに移動することは、関心の分離と呼ばれるプログラミングの概念も満たします。これは、コードを機能コンポーネントに分割する必要があることを意味します。コードはすべてを実行しようとするのではなく、1 つのことをうまく実行する小さな部分に分割する必要があります。

この例では、コンテンツを構造化してスタイルを設定するファイルが 1 つあるのではなく、構造化するファイルとスタイルを設定するファイルの 2 つのファイルがあります。懸念は解消されました！それで、これはどのように見えるでしょうか?

ああ、ずっと良くなりました！これで、HTML ファイルがこのようなスタイルで乱雑にならなくなりました。上に表示されているのは 2 つの CSS ルールセットです。ルールセットは、セレクターと、セレクターのスタイル設定方法に関するすべての情報を含む 2 つの中括弧で構成されます。この例では、h1 と p という 2 つのセレクターが表示されます。これは、ここにリストされているすべてのスタイルが任意の HTML

に適用されることを意味します。または

それぞれの要素!

これはあらゆる種類の要素に対して行うことができます。実際には、CSS セレクターを使用してオブジェクトを選択する方法はたくさんありますが、それについては別の週に取っておきます。ここでは、要素のタイプを入力すると、中かっこ内にスタイルを追加できることだけを知っておいてください!

いくつかのスタイルを定義しましたが、それらを適用するファイルをブラウザが認識できるようにするにはどうすればよいですか?

リンク要素

最初の ここで学習する要素は です。要素。使用例はいくつかありますが、ここでは style.css をindex.html にリンクするために使用します。言い換えれば、この要素はブラウザにページにどのスタイルシートを使用するかを指示します。実際には、次のようになります:

それで終わりです！ style.css は HTML ドキュメントにリンクされており、スタイルが適用されます。

このリンク要素を詳しく見てみましょう。まず、これは自己終了要素であるため、終了タグは必要なく、内部にコンテンツも取りません。この要素には、href と rel という 2 つの必須属性があります。 が必要なため、これらは必須です。要素は外部リソースを HTML ドキュメントにリンクします。したがって、ブラウザに、1) そのリソースがどこにあるのか、2) そのリソースが何に使用されるのかを伝える必要があります。 「ハイパーテキスト参照」の略である href がどこで使用されるかを決定し、rel または関係が使用を決定します。

href 属性を使用する場合、指定するパスは絶対パスまたは相対パスのいずれかであることに注意することが重要です。これは、ルート ディレクトリからファイル パスの場所を指定できることを意味します (例: /Users/username/Documents/project/style.css (絶対))。または、上記のように、作業中のファイルの場所を基準にして相対的に実行することもできます。ファイル名の前の ./ は、ブラウザが style.css の HTML ファイルと同じフォルダー (またはディレクトリ) を参照する必要があることを示します。ここに URL を追加することもできます。多くのコンテンツ配信ネットワークでは、 を使用して接続する、事前に作成されたスタイルシートを使用できます。要素も！

チャレンジ

さて、今日はたくさんのことを取り上げました。さあ、実践してみましょう。先週のチャレンジで作成した About Me ページを取得し、それを style.css という新しいファイルに作成します。 (必ず HTML ファイルと同じフォルダーに配置してください。)

次に、各要素のスタイルを作成します。自己紹介ページがより見栄えよくなるまで、割り当てることができるさまざまなスタイルを試してみてください。 (注: 要素と 要素をターゲットにすることもできます!)

適用できるスタイルの完全なリストについては、Mozilla Developer Network を確認してください。 Web 開発言語 (HTML、CSS、JS) の完全なドキュメントをホストしています。ここに彼らのサイトへのリンクがあります。サイドバーの「参照」の下にあるプロパティのリストを使用して、何が可能かを確認してください!

また来週お会いしましょう！

以上がコンテンツのスタイリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。