DIV+CSS布局的知識點(diǎn)有哪些

這篇文章主要介紹了DIV+CSS布局的知識點(diǎn)有哪些的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇DIV+CSS布局的知識點(diǎn)有哪些文章都會有所收獲，下面我們一起來看看吧。

div+css網(wǎng)頁標(biāo)準(zhǔn)布局

DIV全稱 division意為“區(qū)塊、分割”,DIV標(biāo)簽是一個(gè)無意義的容器標(biāo)簽，用于將頁面劃分出不同的區(qū)域。通過DIV將復(fù)雜的頁面進(jìn)行細(xì)分塊，可以將問題細(xì)分一個(gè)一個(gè)解決，所以通過DIV將頁面分塊是一個(gè)關(guān)鍵的工作，也是決定最終效果與質(zhì)量的前提。

css

CSS (Cascading Style Sheet)，中文翻譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。

div承載的是內(nèi)容，而css承載的是樣式

干貨：我把前端高級工程師DIV+CSS課件給借來了

div+css缺點(diǎn)

1.使用相對復(fù)雜

相對html中的table布局來說，divcss布局相對要復(fù)雜些，需要掌握的知識更多些

2.CSS設(shè)計(jì)的網(wǎng)站瀏覽器兼容性問題比較突出

各個(gè)瀏覽器對CSS的支持略有不同，但這些細(xì)小的不同也會使網(wǎng)站在各個(gè)瀏覽器中有較大的顯示差異，甚至是面目全非

為什么要使用div+css

1.div+css是web標(biāo)準(zhǔn)，順應(yīng)潮流

2.彌補(bǔ)html標(biāo)簽的功能缺陷。

3.加快頁面加載的速度，降低流量費(fèi)用。

4.對搜索引擎更加友好，更有利于收錄和抓取您的頁面。

5.使頁面的內(nèi)容和表現(xiàn)分離，便于維護(hù)和管理，節(jié)省大量的人力和成本。

使用css控制頁面樣式的方式

行內(nèi)樣式

<div style="屬性1:值1;屬性2:值2;"></div>

嵌入樣式

<style type="text/css">

選擇器{屬性1:值1;屬性2:值2;}

</style>

外部樣式

<link rel="stylesheet" type="text/css" href="url">

導(dǎo)入樣式

@import url(外部樣式表位置)；

優(yōu)先級別:

行內(nèi)樣式表>其他的樣式表

其他的樣式表，優(yōu)先級一樣，按照導(dǎo)入的順序來確定他們是否起作用。

css選擇器

當(dāng)我們定義一條樣式規(guī)則時(shí)候，這條樣式規(guī)則會作用于網(wǎng)頁當(dāng)中的某些元素，而我們的規(guī)定的這些元素的規(guī)則就叫做選擇器

.id選擇器

.類選擇器

.標(biāo)簽選擇器

.交叉選擇器

.群組選擇器

.后代選擇器 (包含選擇器 )-父級和子級用空格隔開

.通用選擇器：*｛｝

css選擇器

偽類選擇器

同一個(gè)html元素在不同狀態(tài)下的不同樣式

a:visited {color: #00FF00} /*已訪問的鏈接 */

a:hover {color: #FF00FF} /*鼠標(biāo)移動到鏈接上*/

css的繼承性和疊加性

繼承性

后代元素會繼承前輩元素的一些文字屬性和樣式

疊加性

同一個(gè)元素，被多個(gè)樣式規(guī)則指定。

因?yàn)閏ss的繼承性和疊加性，就有了css優(yōu)先級的概念

選擇器的優(yōu)先級

干貨：我把前端高級工程師DIV+CSS課件給借來了

css注釋

注釋

任何語言都有注釋，當(dāng)然CSS也不例外

CSS的注釋為/*注釋內(nèi)容*/

塊元素和行內(nèi)元素

我們已經(jīng)學(xué)習(xí)了很多的HTML標(biāo)簽，不同的標(biāo)簽有不同的特性，比如從文檔流的角度區(qū)分，那么標(biāo)簽元素分為塊標(biāo)簽與行標(biāo)簽

塊標(biāo)簽即標(biāo)簽元素是一個(gè)塊，即有寬、高屬性，同時(shí)塊標(biāo)簽會獨(dú)占一行，比如說H1～H6、P、li等標(biāo)簽都是塊標(biāo)簽，當(dāng)然也包括我們即將學(xué)習(xí)的DIV標(biāo)簽

行標(biāo)簽正好與塊標(biāo)簽意義相反，行標(biāo)簽不具有寬、高特性，mrgin屬性的值，只有左右沒有上下。也不會占一行，所以我們可以利用行標(biāo)簽對文字進(jìn)行區(qū)塊指定不同的CSS樣式達(dá)到不同的效果，行標(biāo)簽也很多，如em、span標(biāo)簽等

關(guān)于“DIV+CSS布局的知識點(diǎn)有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“DIV+CSS布局的知識點(diǎn)有哪些”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。