DIV+CSS詳解

來源:互聯網
上載者:User

p+CSS詳解

✪p+CSS"這種叫法其實是一種不準確的叫法

  在做筆記的最前面必須先給大家糾正一個錯誤,就是"p+CSS"這種叫法其實是一種不準確的叫法,是國人給這種布局標準頁面的方法起的名字,是對技術理解不夠透徹導致的,而標準的叫法是什麼呢?呵呵,沒錯,標準叫法是xHTML+CSS!

  單純從代碼上辨別過去的頁面配置方法和現在流行的頁面配置方法,認為過去布局頁面用的是Table,稱之為"Table+CSS",而現在布局頁面呢,用p,所以叫"p+CSS"。聽起來也挺合理,豈不知這種叫法誤導了絕大部分網頁開發人員,將網頁製作者引入兩大誤區:

【誤區一】網頁中用了Table,頁面就不標準,甚至覺得用Table丟人,Table成為了判定頁面是否標準的關鍵點。

【誤區二】認為網頁中的p標籤用的越多越好,甚至有人將頁面中所有的標籤都替換為p,p的多少,決定頁面標準的程度。

  為了能夠避免大家進入誤區,必須要瞭解"Table"和"p"這兩個網頁元素誕生的目的,首先Table誕生的目的是為了儲存資料,而p誕生的目的就是為了架設頁面結構,兩者有不同的工作職能,當需要儲存資料的時候用Table是最方便快捷的,比如W3Cfun.com的一個主題頁面"瀏覽器大全",地址是:http://www.php.cn/,這個時候肯定用Table 最合適了,而表格外面組成頁面結構的部分當然用 p 了,這是由他們兩個誕生的目的決定的,也是符合 W3C 標準的, 那麼這個頁面就是標準頁面。

  但是p+CSS這種已經深入人心,特別是對於我這種剛學習的菜鳥來說,p+CSS這種叫法更是貼切的多,反正後面我也會用p+CSS這種叫法來解釋,至於會不會誤導你們就仁者見仁智者見智了,哈哈!我還想評論呢:我猜html5普及以後,會不會被叫做section+css?哈哈,你們說呢?

✪什麼是W3C標準?

  W3C標準不是一個標準,而是一系列標準的集合,包含三部分的標準:結構標準、表現標準和動作標準。

與結構標準對應的代表語言是xHTML,與表現標準對應的代表語言是CSS,與動作標準對應的代表語言是JavaScript。

  好了,關於web前端的那點常識講完了,下面開始做今天的筆記了,對了,由於放寒假了,這個這個,貌似沒什麼時間寫部落格了,哈哈,你們懂得。

★p+CSS的介紹

  在CSS布局方式中,p是這種布局方式的核心對象,我們的頁面排版不再依賴於表格. 僅從p的使用上說,做一個簡單的布局只需要兩樣東西:p與CSS.因此我們稱這種布局方式為 p + CSS 布局。

● p:版面配置容器標籤

p 是XHTML中指定的,專門用於布局設計的容器標籤。用於存放html 元素,文字,圖片,視頻的元素。內容樣式由CSS指定。

● CSS:層疊樣式表

CSS(Cascading Style Sheet,層疊樣式表)是一種格式化網頁的標準方式,是用於控制網頁樣式並允許樣式資訊與網頁內容分離的一種技術。

★p+CSS的優勢

1.符合 W3C標準,微軟等公司均為 W3C支援者。

2.能夠對網頁的布局、字型、顏色、背景等圖文效果實現更加精確的控制,調整更加方便,現在很多網站均使用p+CSS架構模式,更加印證p+CSS是大勢所趨

3.將格式和結構分離,有利于格式的重用及網頁的修改維護,在團隊開發中更容易分工合作而減少相互關聯性

4.CSS的極大優勢表現在簡介的代碼,製作體積更小,下載更快,節省大量頻寬,而且眾所周知,搜尋引擎喜歡簡潔的代碼。

5.利用CSS樣式表,可以將網站上的所有網頁都只指向同一個CSS檔案,可以實現許多網頁同時更新。

★應用CSS

基本文法結構 : 選擇符{屬性:屬性值;}

舉例: p{color:red;} /* CSS的注釋方式 */

引入方式:

【內嵌式】:在HTML文檔內部,將CSS代碼卸載<head>標記之間,並需要採用<style>標記進行聲明


<head>  <style>  p{color:red;}  </style></head>

【內聯式】:選擇你想控制的HTML標籤,給它添加style屬性,注意這種方式的引入CSS,是不需要寫選取器的


<h1 style="color:red;"></h1>

【連結式】:在實際網站建設中,連結式CSS用法是最常用效果最好的。

<1>建立一個以css為尾碼的檔案。在裡面寫入css。

<2>在需要用到該css的HTML內部的<head>標記中加入link標籤,href屬性指明外部CSS檔案的路徑


<head><link rel="stylesheet" type="text/css" href="css/index.css" /></head>

【匯入式】:與連結式的用法基本相同,區別在於文法和使用方法上略有不用。


<style><!--@import url(css/index.css);--></style>

相關文章

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.