#id1{
    backgroud-color:
}
<div id="id1">1</div>

2.類選擇器

.c1{
    backgroud-color:
}
<div class="c1">1</div>

3.標簽選擇器

div{
    backgroud-color:
}
<div>1</div>

4.層級選擇器

div div{#div下的div
    backgroud-color:
}
<div>
    <div>1</div>
</div>
 

5.組合選擇器

.c1,.c2,.3{
    backgroud-color:
}
<div class=“c1”>1</div>
<div class=“c2”>2</div>
<div class=“c3”>3</div>

6.屬性選擇器

.c1[type="text]{
    backgroud-color:
}
<input type="text" />
<input type="password"/>

7.屬性
7.1邊框

border{
1px solid #ff6600  #dotted
}

7.2.背景

{
float:left;
float:right;
clear:both;#清除浮動
}

7.4.display

{
#塊級標簽和行內標簽切換
display:inline;#轉為行內
display:block;#轉為塊級
#行內標簽無法設置寬度和高度,margin,padding
display:inline-block; 
display:none;#標簽消失
}

7.5.padding margin

{
margin:外邊距
padding:內邊距
}

7.6.text-align

#文字對齊
{
text-align:center;
}

7.7 height,width,line-height

{
height:100px;
width:20%;
line-height:20px;
}

7.8.font

{
font-size:20px;
font-weight:700;
}

8.定義整體寬度

body{
    width:980px;
    margin:0 auto;
}

html基礎-CSS