[CSS] 06. Text Style

2365 ワード
テキストリンク

06-1. Text Style


今回学習したスタイルはテキストスタイルです.テキストに関するさまざまなスタイルを学びましょう.runボタンをクリックして結果画面を表示してください.

06-1-1. text-align


テキストの配置には、左揃え、中央揃え、右揃えがあります.属性名はtext-align、値はleft、center、rightです.style.cssで特定のクラス名を使用して各ソートスタイルを作成しました.
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
すべての要素のデフォルトのソートは左揃えです.
  • ですので、テキストの整列がない「ログインしましょう」は、左クラス名を指定した11行目のソートと同じです.
    • クラスは
  • に右寄せされましたが、右寄せされていません.
  • はinline要素であるため、テキスト「spanの右揃え」と同じ領域を占めるため、整列できません.
    • 図では、黄色は要素が占める領域です.この領域でソートします.

    06-1-2. indent


    text-indentを使用してcssをインデントすることもできます.
    .js-description {
  text-indent: 50px;
}
    htmlコードにどれだけのスペースとエンティティを追加しても、実際の結果画面は適用されません.現在のインデックス.16行目の
    タグの文の前に10個のスペース(htmlで作成したものなど)を追加しましたが、画面には適用されません.text-indentを適用する「js-description」を追加し、runをクリックします.
    <blockquote class="js-description">
    JavaScriptの前にインデントされました.

    参考にする。


    blockquoteは、参照文を挿入する際に使用されるタグです.
    ブラウザはデフォルトのスタイルを自動的に適用し、blockquoteラベルに2つの余白を追加しました.

    参考にする。


    文の間にスペースを追加したい場合はどうすればいいですか?「JavaScript(英語:JavaScript)」は、次に10個のスペースを追加する場合、1個のスペースしか適用されません.このとき空間を表す 入れておけばいい
    <p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>
    JSでポップアップされた半透明層
    5. Snake with a Queue