CSSの使い方

CSS (Cascading Style Sheets) は、Web ページにスタイル、レイアウト、デザインを追加できる言語です。 CSS は、フォント、色、間隔、背景、アニメーションなど、Web ページにさまざまな外観や機能を追加できる非常に人気のあるプログラミング言語です。この記事では、Web 開発中に CSS をよりよく習得できるように、CSS の使用法について詳しく説明します。

1. CSS の導入方法

CSS を学習する前に、まず HTML ファイルに CSS を導入する方法を理解する必要があります。 CSS スタイル シートは 3 つの異なる方法で導入できます:

1. インライン スタイル シート

インライン スタイル シートは、タグ内の style 属性を使用して定義されます。たとえば、HTML ファイルでは次のように記述できます:

93dfe5a74cfae0d72312ce80a39081e1これはインライン スタイル シートを含む段落です。 94b3e26ee717c64999d7867364b1b4a3

2. 内部スタイル シート

HTML ファイルの c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用して内部スタイル シートを定義します。例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>内部样式表</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个内部样式表的标题</h1>
<p>这是一个带有内部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3. 外部スタイル シート

で 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用します。 HTML ファイル 外部スタイルシートへのリンク。例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>外部样式表</title>
<link rel="stylesheet" href="style.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是一个外部样式表的标题</h1>
<p>这是一个带有外部样式表的段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

注: 外部スタイル シートを使用する場合、リンクされたスタイル シート ファイルは HTML ファイルと同じディレクトリに存在する必要があります。ファイル拡張子 名前は .css である必要があります。

2. CSS 構文

CSS 構文は非常に単純で、主に次の部分で構成されます:

1. セレクター

セレクターは、指定するために使用されます。スタイルを適用する HTML 要素。たとえば、次のコードは、選択したタイトル要素のスタイルを指定します:

h1 {

color: red;
font-size: 32px;

}

2. 属性

属性は、適用するスタイル。スタイルのタイプ。たとえば、次の属性はタイトル要素の色とフォント サイズを指定します:

color: red;
font-size: 32px;

3.Value

value 属性の特定の値を指定します。たとえば、次のコードは、タイトル要素に 32 ピクセルのフォント サイズを指定します。

font-size: 32px;

注: CSS プロパティはこれらに限定されず、多数あります。使用されるその他のプロパティ その他の CSS スタイル コントロール。

3. 一般的な CSS スタイル プロパティ

以下はいくつかの一般的な CSS スタイル プロパティで、スタイルを適用するときに使用できます:

1. 背景色 (背景色)

background-color 属性は、要素の背景色を指定するために使用されます。例:

background-color: red;

2. フォントの色 (color)

color 属性は、要素のフォントの色を指定するために使用されます。例:

color:white;

3. テキスト配置 (text-align)

text-align 属性は、要素内のテキストの配置を指定するために使用されます。 。例:

text-align: center;

4. フォント サイズ (font-size)

font-size 属性は、要素のフォントのサイズを指定するために使用されます。 。例:

font-size: 20px;

5. Border

border 属性を追加することで、要素に境界線を追加できます。例:

ボーダー: 1px ソリッド ブラック;

注: ボーダー属性の値には、ボーダーの幅、ボーダーのスタイル、およびボーダーの色が含まれます。

6. 幅 (width)

width 属性は要素の幅を指定するために使用されます。例:

width: 50%;

7. Height (高さ)

height 属性は、要素の高さを指定するために使用されます。例:

height: 100px;

8. パディング (パディング)

padding 属性は、要素のパディングを指定するために使用されます。例:

padding: 10px;

9. Margin (マージン)

margin 属性は、要素のマージンを指定するために使用されます。例:

margin: 10px;

4. CSS セレクター

上記の基本的なスタイル属性に加えて、スタイルを調整するのに役立つさまざまなセレクター タイプがあります。スタイル。最も一般的なセレクターの一部を以下に示します:

1. クラス セレクター (クラス セレクター)

クラス セレクターは、同じクラス名を持つ要素を選択するために使用されます。例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>类选择器</title>
<style>
    .selected {
        background-color: red;
        color: white;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<p class="selected">这个段落被选中了。</p>
<p>这个段落没有被选中。</p>
<p class="selected">这个段落也被选中了。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2. タグ セレクター (タグ セレクター)

タグ セレクターは、同じタグを持つすべての要素を選択するために使用されます。タグ名 。例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>标签选择器</title>
<style>
    p {
        color: red;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3.id セレクター (id セレクター)

id ​​セレクターは、指定された要素を持つ一意の要素を選択するために使用されます。 ID。例:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>id 选择器</title>
<style>
    #header {
        color: red;
        font-size: 24px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1 id="header">这是顶部标题</h1>
<p>这是一个段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

4. CSS の継承

CSS 样式是可以从父元素继承到子元素的。例如，如果在 body 元素上应用了一个背景颜色，那么所有的子元素（如段落、标题等）都将继承该背景颜色。例如：

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>继承性</title>
<style>
    body {
        background-color: grey;
        color: white;
        font-size: 20px;
    }
    h1 {
        color: red;
        font-size: 32px;
    }
</style>

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1>这是标题1</h1>
<p>这是一个段落。</p>
<h2>这是标题2</h2>
<p>这是另一个段落。</p>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

五、CSS的优先级

当多个样式应用到同一元素上时，CSS 样式有许多不同的规则来决定哪些样式结合在一起。以下是一些有关优先级的规则：

1.行内样式表的优先级最高

如果在元素上应用行内样式表，则行内样式表的样式将优先于内部或外部样式表。

2.选择器特殊性

如果选择器特殊性相同，则会根据选择器的出现位置决定优先级。例如，内部样式表的样式比外部样式表的样式更优先。

3.样式继承

当两个或多个样式同时应用于一个元素，且它们都是通过继承方式获得的，则优先选取本身的样式。

4.重载样式

如果两个样式在元素上应用，但具有相同的选择器和特殊性，则最后应用的样式将优先于其他样式。

六、总结

在本文中，我们已经深入了解了 CSS 的使用方法，包括引入样式表、基本 CSS 语法、常见样式属性、选择器、继承性和优先级。这些基本的 CSS 知识应该对您在网页开发中的样式和布局决策有所帮助。随着您的使用和实践，您会发现更多的 CSS 功能和方法，以及如何利用它们来创造出更好的网页设计。

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