2014年12月20日土曜日

スタイルシートのルール

スタイルシートで指定する場合、いくつかのパターンがあります。たとえば、

<input  type="text" id="form">

このようなタグがあった場合、id名の前にシャープをつけて、

#form{
    width:40px;
}

このように指定しますが、HTMLファイル内の<input type="text">のすべてに同じ装飾を施したい場合は、

input[type="text"]{
    padding:5px;
}

このようにタグとタイプを指定することでもデザインを当てることができます。pタグやbodyタグの一括の設定の場合も

body{
    font-family:メイリオ;
}
p{
    /** 文字間隔 **/
    letter-spacing: 1em;
}

idですが、たとえば同じHTMLファイル内の他のところでも#formのデザインを当てたくても、idは1つのファイルに1回のみしか使用出来ません。文字の色を赤にしたいといったスタイルを用意する場合は、

<input type="text" class="red">

.red{
    color:red;
}

このようにタグにclassで要素を追加し、スタイルシートでは、.クラス名で要素を追加することで.redは同じファイル内で何度も使用することが出来る様になります。

0 件のコメント:

コメントを投稿