CSS+DIV的基本總結(一、基本概念)

來源:互聯網
上載者:User
CSS是什嗎?

       CSS是一個名稱,是一個功能,用於對HTML檔案功能的補充及擴充。其作用就是對HTML檔案中各種排版進行設定,達到對網頁中字型、顏色、背景、圖片等的控制,使網頁能夠完全依照設計者的想法來顯示。

為什麼要有CSS?

       CSS可以控制網頁的顯示,HTML標籤中的屬性也可以控制其顯示,為什麼還要有CSS呢?其中一個原因如下描述,以前幾乎一個人就可以完成一個網站的設定,非常的簡單,現在不是了,一個網站需要很多的人一起工作才可以完成,如果每個人都按照自己的喜好製作網頁,那麼開發出來的網頁的風格就會不一樣,那麼這些網頁很難放在同一個網站中了,CSS可以方便地設定所有網頁的風格,然後交友不同部門、不同地方的人製作網頁。

       CSS就是HTML中標籤屬性獨立出來的東西,當然CSS也有自己特有的東西。將HTML語言中內容顯示的部分獨立的形成一個整體(CSS),然後,我們編寫網頁的時候,使用HTML語言設定網頁內容的結構,使用CSS語言設定網頁內容的顯示,從而達到使網頁編程的靈活性和複用性增強目的。注意,HTML語言仍具有網頁內容顯示的功能,但是,我們在具體做網頁的時候,通常只用它對網頁內容結構控制的功能。

怎麼使用CSS?

       CSS不同於JavaScript,CSS不能單獨的存在,必須依靠HTML中的“標籤”而存在,“標籤”即CSS中的選取器,CSS樣式表的基本文法結構為:選取器{屬性一:值一;屬性二:值二;……};選取器可以為HTML標籤名稱,也可以是標籤的屬性id值,或class值

       HTML使用CSS有四種方式:行內樣式、內嵌式、匯入式和串連式。行內樣式和內嵌式的CSS代碼都存放在HTML文檔裡,匯入式和串連式的CSS代碼存放在單獨的檔案中。

<html>   <head>      <title>頁面標題</title>      <!--內嵌式-->      <style type="text/css">      <!--          @import url(2.css); /*匯入式*/          /*HTML標籤名作為選取器*/  p{     color:#FF00FF;  }          /*HTML的class屬性值作為選取器*/  .first{  background-color:#00FF00; /*設定背景顏色*/          }  /*HTML的id屬性值作為選取器*/  #second{           background-color:#0000FF; /*設定背景顏色*/  }      -->      </style>      <!--連結式-->      <link href="1.css" type="text/css" rel="stylesheet">    </head>   <body>      <p style="color:#FF0000; font-size:20px; text-decoration:underline;">行內式</p>      <h1 class="first">標題一</h1>      <h2 id="second">標題二</h2>   </body></html>  

      注意:“串連式”會在裝載頁面主體部分之前裝載CSS檔案,這樣網頁顯示內容的時候就會顯示其相應的樣式了;“匯入式”會在整個頁面裝載完成後再裝載CSS檔案,這樣網頁先顯示內容,後再規定其相應的樣式。

為什麼是CSS+DIV?

       DIV是HTML中的塊標記,就是把一些HTML標籤作為一個塊。CSS可以通過DIV標籤,使被操作的對象的顆粒度可以靈活的改變。span標籤是行內標籤,div可以通過設定達到span的效果,但是,span很難達到div的一些效果。

盒子模型

       HTML中的所有元素,不論其元素是區塊層級元素,還是行集元素,在CSS看來都是一個盒子,這個就是盒子模型。這裡需要說的是,我們最好把這個“盒子”理解成沒有高度的盒子,這樣有利於我們理解下面層的概念,當然,你也可以把這個“盒子”理解成有高度的盒子,這樣的話,我們需要將下面“層”理解成有一定高度的層。具體的盒子模型如下



區塊層級元素和行集元素

       區塊層級元素在標準文檔流中是單獨的佔一行的,而行集元素在標準文檔流中佔得是行的一部分。但是當他們完全脫離標準文檔流的時候,他們就不再具有該特性。區塊層級元素和行集元素之間是可以相互改變的,通過display屬性,當屬性值為block時,就可以轉換為區塊層級元素,當屬性屬性值為inline時,就可以轉換為行集(內聯)元素。

層的概念

       HTML文檔內容的布局和顯示不僅僅在一個平面上,而是可以在多個平面上進行布局和顯示,各個平面(層)之間的布局有的並沒有完全的斷離關係,有的就完全脫離了關係,當然,其顯示效果我們可以通過z-index屬性進行設定,最後我們從最外的那個層面看到的重疊效果就是最終顯示的效果。

文檔流       文檔流就是文檔裡的內容連續的讀入到程式進程中,然後,經過處理,再連續從程式進程中讀出,輸出到顯示器上,當然,在其讀入和讀出時都是有一定的順序的,不是亂來的,這裡需要注意,之所以用“流”字,主要是因為資料在讀入和讀出的傳送過程中,和水的流動非常相似,所以,用了這麼一個“流”字,改字描述資料的傳送過程非常形象,但是該字卻沒有強調其讀入讀出的順序性。

       在這裡我們不需要太多的關心文檔的輸入資料流,應該多瞭解些文檔的輸出資料流,因為程式進程輸出各個層的先後順序的不同,就會導致最終我們看到層的重疊效果的不同。

       根據文檔流對層的一些控制的不同,我們可以把文檔流分為常規流、絕對位置流和浮動流。現在我們可以把這個流當成層的意思。

       常規流:最原始的那一層,最初該層包含所有的元素,其它層的元素都是從這個層裡面弄走的,當然,弄走人家的東西,你得給人家一個說法;絕對位置流:該層弄走原始層元素時,給人家說,我弄走的東西就完全是我的了,以後你這關於它的任何東西都不能存在;浮動流:該層還算厚道,不像絕對位置流那樣,說弄走人家東西,就連個毛也不給人家留,浮動流在弄走人家東西的時候,會告訴常規層,你們可以給它留個墓地或者把它原來的家留著,要是留墓地(夠它住就行)的話,墓地的位置由我來定,“好處”就是它的真身會在墓地的上方,要是留它原來的家的話,它的真身可以任意的漂流,具體你們留墓地還是流家,會告訴你們的。

       注意:行集元素作為盒子被使用的時候,其本質還是在常規流上,但該元素的上方會形成一個突起,這樣我們從上方看的時候會出現一些覆蓋的現象;塊集元素作為盒子被使用的時候,它作用於整體,不會出現什麼突起,什麼覆蓋的現象發生。絕對位置流和浮動流,是在重新置放元素位置(float和position屬性設定)的時候出現的。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.