Div和Css的基礎(chǔ)知識(shí)有哪些

本篇內(nèi)容介紹了“Div和Css的基礎(chǔ)知識(shí)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Html的不足：

維護(hù)困難：傳統(tǒng)的頁(yè)面中代碼樣式都是寫在一起，不利于后期的維護(hù)

網(wǎng)頁(yè)過“胖”：代碼樣式都寫在一個(gè)頁(yè)面中，太過于臃腫

定位困難：代碼和樣式編寫得太多，對(duì)于詳細(xì)的定位有一定的難度

Css的優(yōu)勢(shì)：

表現(xiàn)與內(nèi)容分離

增強(qiáng)了網(wǎng)頁(yè)的表現(xiàn)力

網(wǎng)站顯示風(fēng)格趨于統(tǒng)一

Css編輯方法：

將css規(guī)則寫在HTML文件中

將css規(guī)則寫在獨(dú)立的文件中

CSS層疊樣式表

Css(Cascading Style Sheet)層疊樣式表，樣式就是格式。層疊就是指當(dāng)HTML文件引用多個(gè)Css樣式時(shí)，一般遵循“最近優(yōu)選原則”。

Css是一個(gè)由包含一個(gè)或多個(gè)規(guī)則的文本文件。

說了那么多Css的定義那么Css一個(gè)構(gòu)造到底是什么呢？

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

樣式的定義

樣式時(shí)定義在head/head標(biāo)簽內(nèi)的，聲明style/style標(biāo)簽加個(gè)type=“text/css”將可以在標(biāo)簽內(nèi)寫css樣式了，但是這種方式是用在此文檔中的。

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

如果要引用外部的css文檔的話則需要這樣定義：

注意：css樣式文件名稱以有意義的英文字母命名。

CSS選擇符類型

標(biāo)記選擇符：對(duì)HTML的標(biāo)記進(jìn)行重定義，該樣式立即生效。

類選擇符：以點(diǎn)號(hào)“.”開頭，并可以任意命名，如.div1、.files等，該樣式應(yīng)用后生效，有些標(biāo)記的樣式相同時(shí)，可以定義成選擇符組。

ID選擇符:以“#”開始，并可以任意命名。

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

ID選擇符與類選擇符的區(qū)別

類選擇符可以給任意多的標(biāo)記定義樣式，但是ID選擇符在當(dāng)前頁(yè)面中只能夠使用一次，因?yàn)镮D是唯一標(biāo)識(shí)的。

ID選擇符樣式比類選擇符樣式優(yōu)先級(jí)高，但是ID選擇符的局限性很大，只能單獨(dú)定義其中一個(gè)元素的樣式(特殊情況下使用)。

CSS選擇符的聲明

集體聲明：Css選擇符的集體聲明是對(duì)一系列元素進(jìn)行定義的一個(gè)聲明。

例如：

h2,h3,h4,h5,h6,h7,p,h3.special,#one{color:red;font-family:黑體;}

全局聲明：全局聲明是對(duì)整個(gè)頁(yè)面的樣式進(jìn)行聲明。

例如：*{padding: 0 auto;font-size: 55px;color: aquamarine;}

內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式就是將css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中。

基本語(yǔ)法：標(biāo)記 style=樣式屬性: 屬性值; 樣式屬性: 屬性值;…

語(yǔ)法說明：

標(biāo)記：HTML標(biāo)記，如body、table、p等；

標(biāo)記的style定義只能影響標(biāo)記本身；

style的多個(gè)屬性之間用分號(hào)分割；

標(biāo)記本身定義的style優(yōu)先于其他所有樣式定義。

注意：內(nèi)聯(lián)樣式只影響單個(gè)元素（標(biāo)記）。

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

CSS繼承與層疊

樣式表的繼承規(guī)則是子標(biāo)記會(huì)繼承父標(biāo)記的樣式

CSS規(guī)定樣式的優(yōu)先級(jí)(從高到低)如下：

內(nèi)聯(lián)樣式﹥ id樣式﹥類樣式﹥ 標(biāo)記樣式

DIV創(chuàng)建

DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。

定義：

可定義文檔中的分區(qū)或節(jié)

標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。

用法：

div 是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行。實(shí)際上，換行是div固有的唯一格式表現(xiàn)?？梢酝ㄟ^ div 的 class 或 id 應(yīng)用額外的樣式。

可以對(duì)同一個(gè) div 元素應(yīng)用 class 或 id 屬性，但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

DIV嵌套

圖層包含其它圖層，稱為圖層的嵌套。圖層嵌套經(jīng)常需要與CSS樣式一起使用，達(dá)到更加精確控制頁(yè)面顯示效果。下面讓我們來看看圖層嵌套的一些使用：

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

Web前端開發(fā)技術(shù)之Div+Css基礎(chǔ)

DIV與Span標(biāo)記

span標(biāo)記(行內(nèi)元素)

基本語(yǔ)法：

<span id="" class="行內(nèi)內(nèi)容"></span>

Div與span標(biāo)記使用區(qū)別

div和span共同的特點(diǎn)是默認(rèn)都沒有對(duì)標(biāo)記內(nèi)的對(duì)象進(jìn)行任何格式化渲染，主要用于應(yīng)用CSS樣式，對(duì)頁(yè)面進(jìn)行分割、布局。

差異：

div是塊級(jí)元素，其前后均有換行符；而span是行內(nèi)元素，沒有固定的格式表現(xiàn);

Div標(biāo)記可以包含span標(biāo)記,反之則不然；

但是塊元素和行元素不是絕對(duì)的，通過定義CSS的display屬性可以相互轉(zhuǎn)化。

“Div和Css的基礎(chǔ)知識(shí)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！