Webフロントエンドの記事:CSS形式のレイアウトに使用

まず、フォント属性は
フォント属性を設定します。

body{font-family:"Microsoft Yahei"}

body{font-family:"Microsoft Yahei","宋体","黑体"}
#备选字体可以有无数个,那么浏览器在去解析这个代码的时候,是从左往右解析的,如果没有微软雅黑,再去找宋体,最后黑体。
  • フォントサイズ:

最も一般的に使用されるピクセル単位:PX、EM、REM、ここでは最初のユニット、PXをご紹介します。
PX:画素は、これらの小さな正方形の小正方形の画像によって定義される明確な位置を有しており、カラー値は小箱の色及び方法のうち決定に提示される画像の位置が割り当てられます。
無料情報やコースを受け取るにはクリック

  • 文字の色:

:色表現CSSの3つの方法があり
、英語の単語の表記:赤/緑/青の
RGB表記
16進表記は、

  • フォントスタイルのフォントスタイル

サイトは、私たちが対応するフォントスタイルを設定するには、フォントスタイルのプロパティを使用することができ、一般的なフォントとフォントイタリックフォントに分かれています。

通常通常、イタリックイタリック、斜めイタリック

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-style:italic;
        }
    </style>
</head>
<body>
    <p>你好</p>

</body>
</html>
  • フォントの重さ

フォントの太さ
ここに画像を挿入説明

  • テキスト属性:

テキストの装飾
ここに画像を挿入説明

  • テキストインデント

我々は通常、物品、2つの空白の最初の手紙を書きます。だから、私たちが使用する必要がある
テキストのインデントを、そのプロパティ値はピクセル(px、EM、レム)ユニットです。

  • 行間隔

  • 行の高さ:数値PX / EM

  • 縦線単語の間隔/文字間隔

文字間隔:値PX;
単語間隔:PX値。

  • テキストの配置

テキスト整列

ここに画像を挿入説明

レムで二、PX

  • PXは、スクリーン、すなわち、画面解像度ピクセル(PC /携帯電話)画面について計算され、画素(1ピクセル)は(コンピュータ/携帯電話)上の点で、固定サイズの単位であり、単位画素の名前であります最小カット。無料情報やコースを受け取るにはクリック

  • 現在のオブジェクトが人為的にテキストのフォントサイズに設定されていない場合、ブラウザのデフォルトのフォントサイズが、それは比較的である;それは、テキストの現在のフォントサイズに対する物体であります

  • ルートに対してのみREM、すなわちHTML要素。HTMLドキュメントのフォントサイズのラベル限り、フォントサイズを設定するAdaptive一般的なレイアウトのための参照標準として。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html{
            font-size:20px
        }
        .box{
            font-size:12px;
            width:20rem;
            height:20rem;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

ここに画像を挿入説明

おすすめ

転載: blog.csdn.net/ITmiaomiao666/article/details/91896394