cssでテキストを変更する

CSS (Cascading Style Sheet) は Web デザインに使用される言語で、文字の属性を変更してページを美しくするなど、多くの機能が含まれています。この記事では、いくつかの一般的な CSS テキスト プロパティと、それらを Web ページに実装する方法を紹介します。

1. フォント属性

フォント属性を使用して、テキストのフォント、サイズ、色、スタイル、間隔を制御できます。特定の属性は次のとおりです:

1. font-family: フォント名またはフォント ファミリ名のリストを設定するために使用されます。複数の場合はカンマで区切られます。ブラウザは次の順序でフォントを検索します。リスト。
2. font-size: フォントのサイズを設定するために使用されます。ピクセル (px)、パーセンテージ (%)、EM、rem、およびその他の単位で指定できます。
3. font-weight: フォントの太さを設定するために使用されます。数値、キーワード、bold、bolder などを使用して指定できます。
4. font-style: フォントを太字にするか斜体にするかを設定するために使用されます。キーワード italic および oblique を使用して指定できます。
5. line-height: 行間隔の設定に使用され、ピクセルやパーセンテージなどの単位を使用できます。
6. text-align: 左、中央、右、両端揃えなど、テキストの水平方向の配置を設定するために使用されます。

2. テキスト属性

テキスト属性は、テキストの装飾、インデント、行の折り返しなどを制御するために使用できます。特定の属性は次のとおりです。

1. text-decoration: テキストの下線、取り消し線、およびテキスト装飾行を設定するために使用されます。キーワード「下線」「上線」「スルー線」「なし」を使用して指定できます。
2. text-indent: テキストのインデントを設定するために使用され、ピクセルやパーセンテージなどの単位を使用できます。
3. text-transform: 大文字、小文字、大文字など、テキストの大文字と小文字の変換方法を設定するために使用されます。
4. 空白: 通常、ナラップ、プレラップなどのテキスト処理方法を設定するために使用されます。

3. カラー属性

カラー属性は、テキストと背景の色を制御するために使用されます。色は、CSS の色名または 16 進数値を使用して指定できます。その中で:

1. color 属性はテキストの色を設定するために使用されます。
2. background-color プロパティは、背景の色を設定するために使用されます。

4. セレクター

フォント、テキスト、色の属性に加えて、セレクターも CSS の重要な要素です。セレクターは、変更する必要がある HTML 要素を指定するために使用されます。例:

1. タグ セレクター: 特定の種類の HTML 要素を選択するために使用されます。たとえば、p はすべての段落要素を変更します。
2. クラス セレクター: 同じクラス名を持つ HTML 要素を選択するために使用されます。たとえば、.h1 は h1 クラスを使用してすべての要素を変更します。
3. ID セレクター: 同じ識別子を持つ HTML 要素を選択するために使用されます。たとえば、#header は、ID が「header」であるページ上の要素を選択します。
4. ワイルドカード セレクター: すべての HTML 要素を選択するために使用されます。たとえば、* は Web ページ内のすべての要素を選択します。

5. チュートリアルの例

ここでは、CSS を使用してテキスト属性と色の属性を変更する方法を示します。単純な Web ページを作成し、その一部の要素のテキストと色のプロパティを変更します。

1. まず、HTML ドキュメントに次のコードを追加します:

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

<title>CSS改变文字</title>
<link rel="stylesheet" type="text/css" href="styles.css">

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

<h1 class="title">这是标题</h1>
<p class="text">这是一段正文，包含有一些链接：<a href="#">链接1</a>和<a href="#">链接2</a></p>
<ul class="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

2. 同じフォルダー スタイル シート ファイルstyles.cssを作成し、次のスタイルを追加します:

.title {

font-family: Arial, sans-serif;
font-size: 36px;
font-weight: bold;
text-align: center;
color: navy;

}

.text {

font-family: "Times New Roman", Times, serif;
font-size: 18px;
line-height: 1.5em;
text-indent: 25px;
color: #333;

}

.list {

font-family: Verdana, sans-serif;
font-size: 16px;
text-transform: uppercase;
color: maroon;

}

3. ブラウザを開いて HTML ファイルをプレビューすると、テキストと色の属性が変更されていることがわかります。

CSS を通じてテキストと色の属性を変更すると、ページをより美しく、パーソナライズされたものにすることができます。フォント スタイル、テキストの書式設定、色のプロパティなど、CSS はさまざまな選択肢と柔軟性を提供します。 Web ページの作成を開始するときは、サイトを目立たせるためにさまざまなセレクターと属性を使用してみてください。

以上がcssでテキストを変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。