第 5 章テキスト CSS-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

第 5 章テキスト CSS

黄舟

Dec 19, 2016 pm 04:08 PM

この章のCSSの主な機能

この章では、テキスト関連のCSSコマンドを紹介します。通常、Web サイトのほとんどのコンテンツはテキストです。これらのテキスト関連の CSS 命令を使用すると、Web ページのコンテンツを美しくレイアウトできます。この章は 2 つの部分で説明されます。最初の部分では、さまざまなスタイルのテキストフォントを制御するために使用されるフォント固有の CSS コマンドについて説明します。2 番目の部分では、テキストを制御するために使用されるテキストベースの CSS コマンドについて説明します。テキストの段落の外観と配置。

フォントプロパティのコマンドCSSS

font-family テキストフォントのサポートを設定します: IE3、IE4 適用可能: すべての要素可能な値: フォント名のデフォルト値: ブラウザに依存します継承:一般的な例があります: SPAN { family-name : "standard Kai style" } 同軸の例: font-style フォントスタイルを設定しますサポート: IE3、IE4、 NC4 適用可能: すべての要素可能な値: Normal Normal font italic italic oblique italic デフォルト値: Normal 継承: はい一般的な例: SPAN { font-style : italic } 同軸の例: font-weight フォントの太さを設定しますサポート: IE3、IE4、NC4 適用可能: すべての要素可能な値: Normal 通常のフォント太字太字親要素に比べて太字がわずかに太くなります親要素に比べて明るくなります親要素がわずかに細くなります 100、200 、300、400、500、600、700、800、900。数字は小さいものから大きいものまで、細いストロークから太いストロークを表します。normal=400、bold=700 デフォルト値:normal 継承:Yes 一般的な例: SPAN { font-weight :bolder } 同軸の例: font-size テキストサイズのサポートの設定: IE3、IE4、NC4 適用可能: すべての要素可能な値: 絶対サイズ、使用可能パラメータは小から大まで xx-small、x-small、small、medium、large、x-large、xx-large の 2 つのパラメータが使用可能です。小さいものは親要素のフォントサイズに基づいています長さの単位。第 1 章の基本単位の関連説明を参照してください。親要素のフォントサイズに基づくパーセント。デフォルト値: 中継承。 : 一般的な例があります: SPAN { font-size : 12pt } Axis の例と同じ: font-variant テキスト変換サポートの設定: IE3、IE4、NC4 適用: すべて要素可能な値:normal、normal fonts small-caps 小文字のテキストを大文字に変換します。デフォルト値:normal 継承:はい通常の例: SPAN { font-variant : small-caps } 同軸の例: font フォントプロパティの包括的な設定サポート : IE3、IE4、NC4 適用可能: すべての要素可能な値: フォントスタイルを設定テキスト変換を設定フォントを設定Weight テキストサイズと列の高さを設定します (テキスト列の高さの設定に関するセクションを参照してください) テキストのフォントを設定しますデフォルト: なし継承: はい一般的な例: SPAN { font : 太字の小さい文字 12pt/120% Arial }同軸の例: < SPAN style="font : 太字の小さい文字 12pt/120% Arial">

line-height 列の高さのサポートを設定します: IE3、IE4、NC4 適用可能: すべての要素可能な値: Normal 通常の列の高さ、適切な高さはブラウザに応じてフォントに応じて変化します要素のフォントサイズを乗算します。数値は列の高さです長さを設定するには、第 1 章の基本単位の関連手順を参照してください。要素のフォントサイズに対する割合です。デフォルト値: 通常継承:はい一般的な例: DIV { line-height : 120% } 同軸の例:

text-align テキストペアのサポートの設定: IE3、IE4、NC4 適用可能: ブロック要素可能な値: center center right right left 左右揃えデフォルト値: ブラウザに依存します継承: はい一般的な例: DIV { text-align : center } 同軸の例:

vertical- align 垂直ペアのサポートを設定します: IE4 適用可能: 同軸要素可能な値: 同じ列内の最も高い要素の場合は top 同じ列の最も低い要素の場合は topbottom 同じ列の最も低い要素の場合はbottom ベースラインは一番下のラインの場合subscript super 要素を配置します。上付き文字 text-top をテキストの上部に配置します。 text-bottom をテキストの下部に配置します。要素自体の列の高さを参照し、親要素の最下行を次のように使用します。デフォルト値: ベースラインの継承: 一般的な例があります: SPAN {vertical -align : sub }同軸の例: text-decoration テキスト装飾サポートの設定: IE3、IE4、NC4 適用可能: すべての要素可能な値: なし通常の文字、下線テキストと下行の上線テキストと上行のスルーテキストと取り消し線の点滅テキストの点滅の設定デフォルト値: なし継承: はい一般的な例: SPAN { text-装飾: ブリンク } 同軸の例: text-transform テキスト変換サポートの設定: IE3、IE4、NC4 適用可能: すべての要素可能な値: なし通常の単語の大文字は、大文字と小文字の 1 文字を変換します。英単語を大文字に変換しますすべてのテキストを大文字に変換します小文字に変換しますすべてのテキストを小文字に変換しますデフォルト: なし継承: はい一般的な例: SPAN { text-transform : uppercase } 同軸の例: ギャップの長さを増やすには、デフォルト値を指定します。値: 通常継承: はい一般的な例: SPAN { Letter-spacing : 0.5pt }同軸の例: text-indent テキストのインデントを設定しますサポート: IE3、IE4、NC4 適用可能: ブロック要素可能な値: 長さの単位。第 1 章の基本単位に関する説明を参照してください。親要素の幅に基づくパーセンテージ値。デフォルト値: 0 継承: はい。 : DIV { text-indent : 3pt } Axis の例と同じ:

上記は第 5 章のテキストベースの CSS の内容です。 PHP 中国語 Web サイト (www.php.cn) に注意してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7321

Java チュートリアル

1625

CakePHP チュートリアル

1349

Laravel チュートリアル

1261

PHP チュートリアル

1209

Related knowledge

WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします