Div和Css的基礎知識有哪些

本篇內容介紹了“Div和Css的基礎知識有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Html的不足：

維護困難：傳統的頁面中代碼樣式都是寫在一起，不利于后期的維護

網頁過“胖”：代碼樣式都寫在一個頁面中，太過于臃腫

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

Css的優勢：

表現與內容分離

增強了網頁的表現力

網站顯示風格趨于統一

Css編輯方法：

將css規則寫在HTML文件中

將css規則寫在獨立的文件中

CSS層疊樣式表

Css(Cascading Style Sheet)層疊樣式表，樣式就是格式。層疊就是指當HTML文件引用多個Css樣式時，一般遵循“最近優選原則”。

Css是一個由包含一個或多個規則的文本文件。

說了那么多Css的定義那么Css一個構造到底是什么呢？

Web前端開發技術之Div+Css基礎

樣式的定義

樣式時定義在head/head標簽內的，聲明style/style標簽加個type=“text/css”將可以在標簽內寫css樣式了，但是這種方式是用在此文檔中的。

Web前端開發技術之Div+Css基礎

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

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

CSS選擇符類型

標記選擇符：對HTML的標記進行重定義，該樣式立即生效。

類選擇符：以點號“.”開頭，并可以任意命名，如.div1、.files等，該樣式應用后生效，有些標記的樣式相同時，可以定義成選擇符組。

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

Web前端開發技術之Div+Css基礎

ID選擇符與類選擇符的區別

類選擇符可以給任意多的標記定義樣式，但是ID選擇符在當前頁面中只能夠使用一次，因為ID是唯一標識的。

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

CSS選擇符的聲明

集體聲明：Css選擇符的集體聲明是對一系列元素進行定義的一個聲明。

例如：

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

全局聲明：全局聲明是對整個頁面的樣式進行聲明。

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

內聯樣式

內聯樣式就是將css代碼直接寫在現有的HTML標簽中。

基本語法：標記 style=樣式屬性: 屬性值; 樣式屬性: 屬性值;…

語法說明：

標記：HTML標記，如body、table、p等；

標記的style定義只能影響標記本身；

style的多個屬性之間用分號分割；

標記本身定義的style優先于其他所有樣式定義。

注意：內聯樣式只影響單個元素（標記）。

Web前端開發技術之Div+Css基礎

CSS繼承與層疊

樣式表的繼承規則是子標記會繼承父標記的樣式

CSS規定樣式的優先級(從高到低)如下：

內聯樣式﹥ id樣式﹥類樣式﹥ 標記樣式

DIV創建

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

定義：

可定義文檔中的分區或節

標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

用法：

div 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是div固有的唯一格式表現?？梢酝ㄟ^ div 的 class 或 id 應用額外的樣式。

可以對同一個 div 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。

Web前端開發技術之Div+Css基礎

DIV嵌套

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

Web前端開發技術之Div+Css基礎

Web前端開發技術之Div+Css基礎

Web前端開發技術之Div+Css基礎

DIV與Span標記

span標記(行內元素)

基本語法：

<span id="" class="行內內容"></span>

Div與span標記使用區別

div和span共同的特點是默認都沒有對標記內的對象進行任何格式化渲染，主要用于應用CSS樣式，對頁面進行分割、布局。

差異：

div是塊級元素，其前后均有換行符；而span是行內元素，沒有固定的格式表現;

Div標記可以包含span標記,反之則不然；

但是塊元素和行元素不是絕對的，通過定義CSS的display屬性可以相互轉化。

“Div和Css的基礎知識有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！