CSSの使い方-フロントエンドQ&A-php.cn

CSSの使い方

PHPz

リリース： 2023-04-21 14:51:46

オリジナル

3325 人が閲覧しました

CSS は Web デザインの重要な部分であり、Web ページのスタイルとレイアウトを制御するために使用できます。 Web デザインでは、CSS を使用すると、Web ページをより美しく、整然とし、読みやすくすることができます。この記事ではCSSの基本的な使い方を紹介します。

1. CSS とは何ですか?

CSS の正式名称は Cascading Style Sheets (カスケードスタイルシート) といい、HTML や XML 文書の表示形式を変更するために使用されるマークアップ言語であり、Web デザインの技術です。 CSS スタイルシートの基本的な機能は、フォント、色、背景などのさまざまな属性をさまざまな Web ページ要素に適用して、さまざまな視覚効果を実現することです。

2. CSS の基本構文

CSS の基本構文は、セレクター、属性、値で構成されます。セレクターはスタイルを適用する HTML 要素を選択するために使用され、attribute は設定する属性を指定し、value は属性の特定の値です。

たとえば、HTML ドキュメント内の段落の色を赤に設定する場合は、次のコードを使用できます:

p { color: red; }

#コード内の ##p は、セレクターはすべての段落要素を選択することを意味し、color は属性 (色を設定することを意味します)、red は値 (色を赤に設定することを意味します) です。

3. CSS セレクター

CSS セレクターは、スタイルを設定する必要がある HTML 要素を選択するために使用されます。要素のタグ名、クラス、ID、その他の属性に基づいて選択できます。

1. タグセレクター

タグセレクターとは、HTML 要素のタグ名に基づいて要素を選択することを指します。たとえば、すべての段落要素を選択するには、次のコードを使用できます:

p { color: red; }

2. クラスセレクター

クラスセレクターとは、HTML 要素の class 属性に基づいて要素を選択することを指します。クラス名「intro」要素では次のコードを使用できます:

.intro { color: red; }

3.ID selector

ID セレクターは、ベースの選択を参照します。 HTML 要素の ID 属性について HTML 要素の ID 属性は一意であり、ページ内に同一の ID 属性が 2 つ存在することはできません。たとえば、ID が「intro」の要素を選択するには、次のコードを使用できます:

intro { color: red; }

4. CSS 属性と値

CSS の属性と値は、要素のスタイルを制御するために使用されます。CSS には、さまざまなスタイル効果を設定するために使用できる多くの属性と値が用意されています。

1. フォント属性

フォント属性は、テキストのフォント、サイズ、色、その他の属性を設定するために使用できます (例:

font-family: Arial,ベルダナ、サンセリフ; /

フォントタイプ /font-size: 16px; /
フォントサイズ /color: #333; /
フォントカラー/

2. 背景属性

背景属性は、要素の背景色、画像、位置などを設定するために使用できます (例:

)背景色: #f8f8f8; /

背景色 /background-image: url("bg.jpg"); /
背景画像 /background-repeat: no-repeat; /
背景は繰り返しません /background-position: center center; /
背景位置/

3. 境界線属性

border 属性は、要素の境界線スタイル、太さ、色などを設定するために使用できます (例:

border-style: Solid; /

Border style/) border-width: 1px; /
境界線の幅/border-color: #ccc; /
境界線の色/

4. サイズ属性

size 属性は、幅、高さ、最大幅、最大高さなどを設定するために使用できます (例:

width: 500px; /

要素幅 /) height: 300px; /
要素の高さ /max-width: 100%; /
要素の最大幅 /max-height: 100%; /
要素の最大高さ /

5. CSS 優先度

要素が複数のセレクターによって選択される場合、CSS 優先度によってどのスタイルが適用されるかが決まります。 CSS の優先順位は高いものから低いものまで、!重要、インラインスタイル、ID セレクター、クラスセレクター、タグセレクターです。優先順位が同じ場合、後のスタイルは前のスタイルをオーバーライドします。

たとえば、次のスタイルシートがあるとします:

p { color: blue; }

.intro { color: red; }

intro { color : green; }

そのような要素がある場合:

これは段落です< ;/p> ;

この場合、テキストの色は緑色になります。つまり、ID セレクターが最も優先され、クラスセレクターとラベルセレクターのスタイルがカバーされます。

6. CSS の継承

継承とは、要素が親要素のスタイル属性を継承できる機能を指し、この機能によりスタイルシートが大幅に削減され、ファイルサイズとサイズが削減されます。可読性の向上。例:

body { font-size: 14px; }

p { color: #333; }

このように、p 要素では、フォントサイズは 14px になります。 #333 のように、p 要素は body 要素のフォントサイズを継承します。

7. CSSの導入方法

CSSはインライン、内部、外部の3つの方法で導入できます。インラインスタイルは単一要素用ですが、外部スタイルと内部スタイルは HTML ページ全体のスタイルシートを定義するために使用されます。

1. インラインスタイル

インラインスタイルでは、HTML 要素の style 属性を直接使用してスタイルを定義できます。例:

これは段落です

2。内部スタイル

内部スタイルとは、 HTML ドキュメント、例:

<style>
    p { color: red; }
</style>

ログイン後にコピー

3.外部式

外部式是指将CSS样式表定义在一个单独的.css文件中，然后在HTML文档中引入，例如：

<link rel="stylesheet" type="text/css" href="style.css">

ログイン後にコピー

以上三种引入方式中，外部式是推荐使用的方式。这种方式可以使CSS样式表单独存放，方便维护和修改，也可以提高页面加载速度。

总结：

CSS是网页设计中的重要组成部分，它可以用来控制网页中的样式和布局。CSS的基本语法由选择器、属性和值组成，选择器用来选择要应用样式的HTML元素，属性指定要设置的属性，值是属性的具体数值。当同一个元素被多个选择器选中时，CSS的优先级决定它应用哪一个样式。CSS有三种引入方式：内联式、内部式和外部式，而外部式是推荐使用的方式。

以上がCSSの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。