[CSS] 03

2856 ワード
CSS テキストリンク

テキスト表示


フォントスタイル

  • フォント指定用font-family属性
    Webドキュメントで使用するフォントはfont-familyプロパティとして指定します.フォントがないように、2番目と3番目のフォントを指定することもできます.この場合、フォントをカンマで区切ることができます.
    bodyタグスタイルで一度定義すると、ドキュメント全体に適用されます.
    • body { font-family: "맑은 고딕", 돋움, 굴림 }
    +テキストのフォントを指定するときに、2つ以上の文字を二重引用符で囲みます.たとえば、はっきりしたゴシック式です.
  • 文字サイズ指定用font-size属性
    文字数の単位はpx(画素)やpt(点数)などに指定したり、パーセンテージを使用したりすることができます.
    • font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
  • 斜体で表されるfont-style属性
    傾斜を表す字.
    • font-style: italic
  • 文字の太さを指定するfont-weight属性
    あらかじめ作成した予約語や数字の定規値を使って太さを指定できます.
    100〜900の間で、400はnormalに等しく、700はboldに等しい.
    • font-weight: normal

    Webフォントの使用

  • ページフォント
    Webフォントを使用するには、Webドキュメントを作成するときに、フォント情報を同時に保存する必要があります.すなわち、既存のウェブフォントを使用する場合、ウェブドキュメントをサーバにアップロードする際に、ウェブフォントファイルを同時にアップロードする必要がある.
    ユーザーがWebフォントを使用するWebサイトに接続すると、Webドキュメントをダウンロードすると同時に、Webフォントもユーザーシステムにダウンロードされます.最終的には、ユーザシステムにないフォントであっても、ウェブページの作成者の意図通りにテキストを表示することができる.

  • Webフォントのアップロードと使用
    コンピュータはTrueType(TrueType)、ファイル拡張子*を使用します.ttfです.ただしTrueTypeフォントはファイルサイズが大きすぎてWebでの使用には向いていないため、EOT、WOFF、WOFF 2などのフォントを使用します.

  • Googleフォントの使用
  • Googleフォントサイトに登録
  • 適用するフォントを選択して[+this styleを選択]
  • [@import]属性のコードをそれぞれstyleタグの後の要素にコピーして貼り付ける

    • 2種類のフォントを適用した画面.

    テキストに関連するスタイル


  • フォント色のcolor属性を指定する
    Webドキュメントでは、テキストの文字色を変更するときにcolor属性を使用します.
    colorのプロパティ値は、16進数またはrgb、hsl、または色名で使用できます.
    visualstudioを使用すると、配色システムを使用でき、色の指定が容易になります.

  • テキストの配置プロパティ
    start:現在のテキスト行の開始位置に従って段落をソートします.
    end:現在のテキスト行の終了位置に従って段落をソートします.
    左:段落を左揃えにします.
    right:段落を右に揃えます.
    センター:段落を中央に揃えます.
    正当な理由:段落を両側に揃えます.
    match-parent:親要素に従って段落をソートします.
    • p {
text-align: center;
}
  • 行間を制御するline-height属性
    行間距離は自由に調整できます.
    • p { font-size: 12px; line-height: 24px; }
    永続転送(CASCADE)、孤立オブジェクト
    gitlabマルチスレッドバックアップスクリプト