マークアップ言語 - テキストの CSS スタイルを指定する

マークアップ言語 - テキストの CSS スタイルを指定する
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。
上記:マークアップ言語 - CSS レイアウト。第 13 章 テキストのスタイル設定 CSS を使用したテキストのスタイル設定に 1 章を割くのはよい考えだと思いました。テキスト コンテンツは、標準に完全に準拠していないサイトであっても、おそらく CSS が最もよく使用される場所です。ページ上の繰り返しの <font> タグをなくすことは、デザイナーにとって非常に魅力的なことでした (そして今でもそうです)。また、CSS を使用してタイポグラフィを制御し、コンテンツとプレゼンテーションをさらに分離することの大きな利点は、簡単に理解できます。
これまでの多くの例から、CSS は多くの状況に対応できること、そしてテキスト スタイルを設定することが、最も基本的な Web ページにもデザイン要素を追加する最も簡単な方法であることがわかります。同時に、CSS を使用してテキストのスタイルを設定すると、ページに不要な画像が追加されないようにすることもできます。
この章では、CSS を使って、退屈で普通のテキストを別のレベル (新しい色、サイズ、フォント) に引き上げる方法を説明します。ハイパーテキストをかっこよく見せるにはどうすればよいでしょうか。
テキスト スタイルの指定は、CSS の高度な機能を完全にサポートしていない古いブラウザーでも、CSS が最も得意とする機能の 1 つです。過去には、デザイナーや開発者がテキストをデザインしてサイズや太字以外の効果を実現したいと考えていた可能性がありますが、その結果、今日の基準では耐え難く、使いにくい Web ページが生まれていたでしょう (テキストのほとんどが画像で表現されている Web ページを見たことがありますか? ただし、使用しているのはテキスト ブラウザーです...)。
画像を使用する代わりになるいくつかの方法を紹介し、上記の質問に答えるために、この章では、スタイルが設定されていないテキストから始めて、さまざまな CSS ルールを徐々に追加して、目を引くデザインにしていきます。
まず、処理しようとしているテキストをブラウザのデフォルト フォントで表示します。私の場合、デフォルト フォントは Times 16 ピクセルです。Mac OS X で Safari ブラウザを使用しているため、テキストはアンチエイリアス方式で描画されます。Windows XP を使用していて、ClearType が有効になっている場合も、同様の効果を確認できます。
Times (またはその変形である Times New Roman) は多くのブラウザのデフォルト フォントですが、ユーザーが自分の好みのフォントに簡単に変更できるため、このデフォルトに依存することはできません。
図 1301 は、この章で使用するスタイルなしのテキストを示しています。<h1> タグでマークされたシンプルなタイトルと、その後に続く 3 つの段落のホームデコレーションのヒントです。

図 13-1 ブラウザにタイトルとテキスト プリセットが表示されます 行の高さの変更 最もシンプルで効果的なテキスト スタイル効果の 1 つは、line-height プロパティです。テキストの各行の間に余分なスペースを追加すると、段落が読みやすくなり、見栄えが良くなるだけでなく、ページに素晴らしい効果をもたらすことができます。
このトリックを実現するには、次の CSS ルールを <body> タグに追加するだけです。たとえば、<p> の行の高さだけを変更したい場合など、このルールを他のタグに追加することもできます。

体 {
行の高さ: 1.5em;
}

このコードは、ページ上のテキストの行の高さがテキストの高さの 1.5 倍である必要があることを意味します。行の高さを指定するときは、フォント サイズによって変わるため、em 単位を使用することをお勧めします。
図 13-2 は、line-height を追加した後の効果を示しています。

図 13-2 プリセットのテキストと行の高さの効果はすでに素晴らしいです。小さな行の高さで何ができるかは驚くべきことです。
前のページ1 2 3 4 5 次のページ 続きを読む

<<:  MySQL複合クエリの詳細な説明

>>:  Reactにおけるコンポーネント通信の詳細な説明

推薦する

MySQL 8.0 の新機能の落とし穴と解決策についての簡単な説明 (要約)

1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます

目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...

Dockerコンテナにホストディレクトリへの書き込み権限がない場合の解決策

Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

LinuxでIPアドレスを手動で設定するための詳細な手順

目次1.まずネットワークカードの設定ディレクトリに入る2. ifcfg-ens33ネットワークカード...

Vueバインディングオブジェクトと配列変数を変更した後にレンダリングできない問題の解決策

プロジェクトシナリオ:ページ表示には <ul> タグがあります。リストデータを動的に表示...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

MySQLのデッドロックチェック処理の通常の方法

通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...

Centos6.5 で MySQL 5.7.19 をインストールして設定する方法

Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....

Vue プロジェクト コード分割ソリューション

目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...

Linux で ffmpeg をインストールするための詳細なチュートリアル

1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...

Dockerを使用してクローンリポジトリを使用してGitイメージを構築する

概要私は 1 年以上 Docker を使用しています。最近、サービスをすばやくオーケストレーションし...