1.當一個標簽的類名有兩個,不重要,只和樣式表中后面那個相關聯。
.spec2{
color:blue;
}
.spec1{
color:red;
}
<p class="spec1 cpec 2">我是什么顏色?</p>** 是紅色**
2.!important標記
正確語法:font-size:60px!important;
提升的是屬性 不是選擇器,無法提升繼承的權重, 不會影響就近原則。
! important做站的時候,不允許使用。因為會讓css寫的很亂。
選擇上了 比較權重,權重越大聽誰的,一樣重聽后面的;沒選擇上 就近 一樣近比較權重 權重一樣聽后面的。
3.盒子模型
(1)padding:
內邊距。可以填充背景顏色.
如分開寫屬性(小屬性)的話, 不寫padding-left那么就是沒有左內邊距。
如按空格隔開寫屬性(大屬性)的話,順序是 上右下左。
不能把小屬性,寫在大屬性前面。
如果只寫三個 例如 padding: 20px 30px 40px;
上、右、下、和右一樣
如果只寫兩個 例如padding:30px 40px;
等價于:
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
快捷鍵就是pdt、pdr、pdb、pdl然后按tab。
可以用 {margin:0; padding:0} 清除默認的padding body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
(2)border:
邊框有粗細 線型 顏色。
border屬性能夠被拆開,有兩大種拆開的方式:
1)按3要素:border-width、border-style、border-color
2)按方向:border-top、border-right、border-bottom、border-left
border可以沒有,border:none;
某一條邊沒有:border-left: none;
也可以調整左邊邊框的寬度為0:border-left-width: 0;
3.標準文檔流
1)空白折疊現象:
2)高矮不齊,底邊對齊
3)自動換行,一行寫不滿,換行寫。
4.塊級元素和行內元素
1)塊級元素
●霸占一行,不能與其他任何元素并列
●能接受寬、高
●如果不設置寬度,那么寬度將默認變為父親的100%。
2)行內元素
●與其他行內元素并排
●不能設置寬、高。默認的寬度,就是文字的寬度。
3)相互轉換
將塊級元素轉換成行內元素 在樣式表中加 display:inline;
將行內元素轉換成塊級元素 在樣式表中加 display:block;
5.浮動 性質
脫離標準文檔流的三種方法:浮動,相對定位,絕對定位、。
1)浮動的元素脫標
一旦一個元素浮動了,那么,能夠并排了,并且能夠設置寬高了。無論它原來是個div還是個span。
span{
float: left;
width: 200px; height: 200px;
background-color: orange;
}
2)浮動的元素互相貼靠 :左浮動貼左,右浮動貼右。
3)浮動的元素有“字圍”效果 :
浮動的元素會擋住盒子 不會擋住文字。
div浮動 p不浮動 p中文字會圍繞著div 不會被擋住。
浮動這個東西,我們在初期一定要遵循一個原則:
永遠不是一個東西單獨浮動,浮動都是一起浮動,要浮動,大家都浮動
作業:
<style type="text/css">
body{
text-align: center;
}
.a{
width: 970px;
height: 593px;
margin: 0 auto;
}
.red{
width: 277px;
height: 103px;
background-color: red;
float: left;
margin-right:14px;
}
.green{
float: left;
width: 679px;
height: 103px;
}
.green1{
float: right;
width: 137px;
height: 49px;
background-color:green;
margin-bottom:8px;
}
.green2{
width: 679px;
height: 46px;
float: right;
background-color:green;
}
.yellow{
float: left;
width: 310px;
height: 435px;
background-color:yellow;
margin-top:10px;
}
.else{
float: left;
width: 660px;
height: 390px;
margin-top:10px;
}
.else1{
float: left;
width: 460px;
height: 410px;
}
.else2{
float: left;
width: 200px;
height: 410px;
}
.else3{
float: left;
width: 660px;
height: 25px;
}
.blue1{
float: left;
width: 450px;
height: 240px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.blue2{
float: left;
width: 450px;
height: 110px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.blue3{
float: left;
width: 450px;
height: 30px;
background-color: blue;
margin-left:10px;
margin-bottom:10px;
}
.purple{
float: right;
width: 190px;
height: 400px;
background-color:purple;
}
.green3{
float: left;
width: 650px;
height: 25px;
background-color: green;
margin-left:10px;
}
.footer{
float: left;
width: 970px;
height: 35px;
background-color:#000088;
margin-top: 10px;
}
</style>
<title>css</title>
</head>
<body>
<div class="a">
<div class="header">
<div class="red"></div>
<div class="green">
<div class="green1"></div>
<div class="green2"></div>
</div>
</div>
<div class="body">
<div class="yellow"></div>
<div class="else">
<div class="else1">
<div class="blue1"></div>
<div class="blue2"></div>
<div class="blue3"></div>
</div>
<div class="else2">
<div class="purple"></div>
</div>
<div class="else3">
<div class="green3"></div>
</div>
</div>
</div>
<div class="footer"> </div>
</div>
</body>
</html>