cssレイアウトの一般的なスタイルプロパティ

cssの役割はHTMLページを美化し、ページレイアウトを制御することであることを知っています.次に、スタイルプロパティをよく使用することを学びましょう.

1.レイアウトの共通スタイル属性

widthは、width:100 pxなどの要素(ラベル)の幅を設定します.

height要素(ラベル)の高さを設定します.たとえば、height:200 px;

background設定要素背景色または背景画像、例えばbackground:gold;要素の背景色を設定し、background:url(images/logo.png);要素の背景画像を設定します.

borderは、border:1 px solid blackなどの要素の周囲の枠線を設定します.要素の周囲の枠線を1ピクセル幅の黒い実線

に設定します.

以上は4つの辺に分割する書き方で、それぞれ4つの辺を設ける:

border-topは、border-top:10 px solid redなどのトップエッジの枠線を設定します.

border-left左の枠線を設定します.例えば、border-left:10 px solid blue;

border-right右側の枠線を設定します.例えば、border-right:10 px solid green;

border-bottomベースフレームを設定します.例えば、border-bottom:10 px solid pink;

paddingは、要素に含まれる内容と要素の枠線の距離を設定し、padding:20 pxなどの内側余白とも呼ばれる.paddingは4つのエッジを同時に設定するもので、borderのように4つのエッジをそれぞれ設定することもできます:padding-top、padding-left、padding-right、padding-bottom.

marginは要素と外部の距離を設定し、margin:20 pxのような外部距離とも呼ばれる.marginは4つのエッジを同時に設定するもので、borderのようにmargin-top、margin-left、margin-right、margin-bottomの4つのエッジをそれぞれ設定するように分割することもできます.

floatは要素のフローティングを設定し、フローティングはブロック要素を1行に並べることができ、フローティングは左フローティングに分けられる:float:left;右フローティング:float:right;

2.テキスト共通スタイル属性

colorテキストの色を設定します.たとえば、color:red;

font-size文字のサイズを設定します.font-size:12 pxなどです.

font-family設定文字のフォント、例えばfont-family:“マイクロソフトの黒”;中文字の互換性を避けるために、font-family:『Microsoft Yahei』と書くのが一般的です.

font-weight設定文字が太くなるかどうか、例えばfont-weight:bold;太字font-weight:normal設定太字

を設定

line-height文字の行の高さを設定します.例えば、line-height:24 px;文字の高さに文字の上下を加えるピッチが24 pxであることを示す、つまり1行あたりの占有高さが24 px

である.

text-decorationテキストの下線を設定します.たとえば、text-decoration:none;下線を引く

text-align text-align text-align:center設定文字水平中央

のように文字水平揃えを設定する.

text-indentテキストの最初の行のインデントを設定します.例えば、text-indent:24 px;テキストの最初の行のインデント24 px

を設定します.

3.レイアウト共通スタイル属性サンプルコード

<style>

    .box1{
        width: 200px; 
        height: 200px; 
        background:yellow; 
        border: 1px solid black;
    }

    .box2{
        /*         */
        /*      */
        width: 100px;
        /*      */
        height: 100px;
        /*       */
        background: red;
        /*        */
        /* border: 10px solid black; */
        border-top: 10px solid black;
        border-left: 10px solid black;
        border-right: 10px solid black;
        border-bottom: 10px solid black;
        /*      ，         ，            */
        /* padding: 10px;   */
        padding-left: 10px;
        padding-top: 10px;
        /*      ，                 */
        margin: 10px;
        /* margin-top: 10px;
        margin-left: 10px; */
        float: left;
    }

    .box3{
        width: 48px; 
        height: 48px; 
        background:pink; 
        border: 1px solid black;
        float: left;
    }

style>

<div class="box1">
    <div class="box2">
        padding                  
    div>
    <div class="box3">
    div>
div>

4.テキスト共通スタイル属性の例

<style>
    p{
       /*                16px */
       font-size:20px;
       /*      */
       font-family: "Microsoft YaHei"; 
       /*        */
       font-weight: bold;
       /*        */
       color: red;
       /*        */
       text-decoration: underline;
       /*       */
       line-height: 100px;
       /*       */
       background: green;
       /*        */
       /* text-align: center; */
       text-indent: 40px;
    }

    a{
        /*       */
        text-decoration: none;
    }
style>

<a href="#">    a>
<p>
      ，  !
p>

5.まとめ

異なるスタイル属性を設定すると、異なるウェブページの表示効果

が現れる.

スタイル属性の表現形式は、属性名:属性値;