記事ディレクトリ
序文
この記事では、主に CSS でのテキストとテキスト スタイルと、いくつかの実践的なスキルについて説明します. 記事の最後にマインド マップがあります.
フォントサイズ
属性名:font-size
値: 数値 + ピクセル
知らせ：
- Google Chrome のデフォルトのフォント サイズは 16px です
- 単位を設定する必要があります。設定しないと無効になります
フォントの太さ
属性名: font-weight
次の 2 つの値があります。
- キーワード：ノーマル（普通） ボールド（太字）
- 数字 100~900: 400(通常) 700(太字)
加粗标签:<strong></strong>
粗体标签:<b></b>
HTML では strong タグと b タグにも太字の効果がありますが、CSS を使用してフォントの太字スタイルを設定することをお勧めします
フォント スタイル
ここでのフォント スタイルは、斜体であるかどうかを示します。
属性名:font-style
値: normal (通常) がデフォルト値です。イタリック体 (傾斜)
フォント
属性名:font-family
一般的な値: 特定のフォント 1、特定のフォント 2、特定のフォント 3、...、フォント ファミリ
- 一般的なフォント: Microsoft Yahei、Hei Ti、Song Ti、Kai Ti など
- フォント ファミリー: サンセリフ、セリフ、モノスペースなど。
知らせ：
- 複数の値があり、ブラウザが順番に検索しますが、パソコンにフォントがインストールされていない場合は、次のフォントが表示されます。
如果前面的字体都没有安装,就会显示最后字体系列的任意一个字体- フォントに複数の単語がある場合は、引用符を使用することをお勧めします
最后一项字体系列不需要使用引号包裹- ユーザーがウェブページを正しく閲覧できるように、コンピューターで一般的に使用されているフォントを使用するようにしてください。
フォント複合プロパティ
フォント複合属性は、以前のフォント スタイルの省略形の属性です。
属性名:font(符合属性)
値: font-style font-weight font-size font-family(顺序固定,用空格隔开)
値は最初の 2 つだけを省略できます。省略はデフォルト値と同等です。
テキストのインデント
属性名:text-indent
値: number+px または number+em
注: 1em は、現在のラベルの font-size に相当します。
一般的なテキストのインデントは、最初の行の 2 文字のインデントです。如果要进行首行缩进两个字符,建议使用em. 直接写text-indent: 2em 就可以了
数字＋pxの形を使わない理由は、
ブラウザのデフォルトのフォントサイズが16pxだからです数字＋pxの形を使いたい場合は、text-indent: 32pxと書く必要がありますが、これはそうではありませ
んフォントのサイズが変更されると、値は変更されたフォントのサイズに 2 + px を掛けたものになるため、推奨されます。
テキストの水平方向の配置
属性名:text-align
価値：
| 属性値 | 効果 |
|---|---|
| 左 | 左揃え |
| 右 | 右揃え |
| 中心 | 中央揃え |
文字飾り線
属性值:text-decoration
価値：
| 属性値 | 効果 |
|---|---|
| 下線 | 下線 |
| ラインスルー | 取り消し線 |
| 上線 | 下線 |
| なし | 飾り線なし |
効果：
よく使われるものを次に示します。
⭐可以使用text-decoration: none 来去除a标签的下划线
例えば：
行高
属性名:line-height
機能: 行の上下の間隔を制御します。
価値：
- 数字+ピクセル
- Multiple (現在の font-size の倍数)
行高由上间距,文字高度和下间距组成
- line-height: 1 は、テキストの上下の間隔をキャンセルできます
行の高さには共通の場所があります: テキストの行の高さがボックスの高さと同じである場合, テキストは中央に表示されます. ここでの効果は text-align: center の設定とは異なることに注意してください
.
行高もフォントで表記（属性に準ずる）
写法:font-style font-weight font-size/line-height font-family
font-size と line-height の間で使用されることに注意してください。/
色
色の設定はまだフロント エンドでよく使われるので、それについて知る必要があります.
属性名はたくさんあるので、1 つずつ挙げることはしません. 値について話しましょう.
価値：
| 色の表現 | 表現 | 属性値 |
|---|---|---|
| キーワード | 定義済みの色名 | など：赤、青、緑など |
| RGB | 赤、緑、青の三原色、それぞれの値は0～255 | RGB(0~255、0~255、0~255) |
| RGBA | 赤、緑、青の三原色、a表示透明度,a的取值为(0~1) |
rgba(0~255 , 0~255, 0~255, 0~1) |
| 16進数 | # 先頭の数値を 16 進数に変換 | #000000 #ff0000 などは #f00 #000 と略すこともできます |
ラベルを水平方向に中央揃え
标签水平居中: margin: 0 auto
効果は図に示すとおりです:
通常使用するページの主要部分は画面の中央にある必要があります. これは、ラベルを水平方向にセンタリングする方法を使用することによっても達成されます. ここで簡単に説明します. マージンは外側のマージンです
.後ほどボックスモデルで詳しくご紹介しますが、0 auto: 上下外边距为0,左右自适应相同值
⭐マインドマップ
ご覧いただきありがとうございます! この記事があなたのお役に立てば幸いです!
Web フロントエンド開発コラムは常に更新されていますので、購読を歓迎します!
「あなたを励まし、一緒に働きたい!」
