CSS基礎(chǔ)

CSS：層疊樣式表 。增強了頁面的顯示效果，而且HTML和CSS的分離，就是頁面內(nèi)容和樣式的分離，這樣可以降低耦合性，增加代碼的可維護性。

CSS和HTML的三種結(jié)合方式（耦合度從高到低）：
1.在每個html標簽中都有一個屬性style，可以在這里把html和css結(jié)合在一起。

#這種方式耦合度極高，樣式和內(nèi)容完全沒有分離，一般不使用
<div style="background-color:red">

2.html中有一個<style>標簽，可以寫在head里面。

#這種方法實現(xiàn)了單個文件和css的解耦，但還是不夠
#試想這樣一個情況
#大量頁面需要同時修改樣式，就得挨個打開html文件修改
<style>
   div {
        color: red;
   }
</style>

3.使用可以寫在head里的<link>標簽，直接引入外部的css文件

#這種使用方式下，html和css完全解耦
<link rel="stylesheet" type="text/css" href="..." />

選擇器

基本選擇器

1.標簽選擇器：使用標簽名作為選擇器。

div{
 color: red;
}

2.class選擇器：使用html中的標簽都帶有的屬性class去標記要選擇的內(nèi)容。

/*
可以用標簽.class這樣的前綴指定某一標簽的某一class
直接.class則指定所有class為這個的標簽
*/
.class_content{
  color: red;
}

3.id選擇器：使用html中的標簽都帶有的屬性id去標記要選擇的內(nèi)容。

/*
可以用標簽#id這樣的去指定某一標簽的某一id
也可以直接#id指定所有id為這個的標簽
*/
#id_content{
  color: red;
}

4.優(yōu)先級：id選擇器 > class選擇器 > 標簽選擇器

擴展選擇器

看文檔

盒子模型

什么是盒子模型？在寫第一個作業(yè)的時候，只使用html做一個頁面，一個很大的問題就是如何對頁面進行布局排版。此時我考慮到的是使用表格來對頁面進行布局，將頁面分成很多塊。
而盒子模型就是利用div+css來進行布局。在布局前，先將數(shù)據(jù)封裝到一塊一塊的區(qū)域內(nèi)，這個區(qū)域就被稱為盒子。然后接下來的布局就很簡單了，只要控制盒子的大小形式和把盒子拖到合適的位置即可。