由於是版面教學例子,在版面的細節上沒有花更多時間精細修飾,不過我覺得模板的版面不錯,懂CSS的可以下載進行更細緻的美工將會是一個很不錯的網頁,初步學習的可以下載來修改修改屬性參數從而更形象掌握屬性的特性,以達到更深掌握CSS的目的。
CSS是不是真的很難學?其實
由於是版面教學例子,在版面的細節上沒有花更多時間精細修飾,不過我覺得模板的版面不錯,懂CSS的可以下載進行更細緻的美工將會是一個很不錯的網頁,初步學習的可以下載來修改修改屬性參數以便更形象掌握屬性的特性,以達到更深掌握CSS的目的。
CSS是不是真的很難學?其實不難,只是缺少了掌握的經驗,拿著一本書硬肯,有沒有收穫?有!但可能成效不大,作為過來人我覺得被動學習想要記住的東西是很難的,學習它我的經驗是可以先掌握精要(重要屬性開始),待掌握精要自然而然這些屬性遠遠不夠滿足自己的需求引起自己求知的慾望,自動延伸其他相關的屬性從而自然掌握和加深對CSS的認識。這是我認為的一種方法(可惜我學的時候要是有人這麼告訴我會走少很多彎路)。第一次寫經驗和大家共享,語言組織上或許有些欠缺,還請網友包含,但相信在以後更多的經驗中,會寫的更好。以下是我總結的一些經驗和我認為必要講的一些概念解釋。有經驗分享歡迎發表評論共同探討。
在現時的網頁技術中,CSS+p已經成為一種主流的網站標準,我們可以稱他為(web標準)。 CSS是英文Cascading Style Sheets(層疊樣式表單)的縮寫,它是一種用來表現 HTML 或 XML 等文件式樣的電腦語言。
在了解和學習CSS之前,首先我們要了解這種電腦語言對我們存在著那些優勢和方便,理解這個我個人覺得很基礎但也很必要,有助於明確CSS+p學習目的。腳本之家綜合網站技術與設計人員的體會,並從網頁應用的角度,將CSS+p網站設計的優勢和問題歸納如下:
首先,CSS的極大優勢表現在簡潔的程式碼,對於一個大型網站來說,可以節省大量頻寬(真正意義在於,增加了有效關鍵字佔網頁總代碼的比重)使用web標準製作的網站具有搜尋引擎友好有一定優勢;從程序與網頁的美工方面,兩者可以相互獨立再結合從而減輕工作量避免重負開發。
其次是CSS+p製作的網站使得網站改版相對簡單,很多問題只需要改變CSS而不需要改動程序,從而降低了網站改版的成本,節省很多的時間。在和開發室的同事都有合作過類似的專案案例,相信同事對這一點或多或少能感覺到實質的方便感受。
最後一點是在剛開始接觸的時候感覺很不好控制,反而覺得table更好控制方位,並且有可能會有抵觸使用p編寫寫網頁佈局的情緒。其實這個是一個適應過程,我們可以透過大量的實際操作和練習並用心領會要點。之後就能感覺得出它確實是千變萬化,一個頁面不同的佈局有可能有不同實現佈局的寫法,但無論如何寫法都好,代碼都是朝一個原則走的:就是:定義的名稱盡可能的通用性,也就是用最少的程式碼定義更多的盒模具我稱它為(一名多用);命名要規範性、組合性,方便其他設計師見名解用。另外一個是關於使用ID還是使用Class,對於這個有很多人可能會很模糊。其實是相對的,不過現在我寫的習慣主要是用class比較多,我覺得這個比較方便適合自己的寫習慣。
以下是PHP中文網整理認為需要先認識和掌握基本常用的屬性:
CSS必須了解和掌握的重要屬性:
# margin : auto | length 由浮點數和單位識別碼組成的長度值| 百分數。百分數是基於父對象的高度。對於內聯物件來說,左右外延邊距可以是負數值。
padding : length 由浮點數數字和單位識別碼組成的長度值 | 或百分數。百分數是基於父對象的寬度。
float : none | left |right 這個是浮動,在定義佈局中必定用到的屬性,在使用它的時候要注意產生的走位和瀏覽器兼容性問題,要在很多的實踐操作中多了解這個屬性。有這個屬性就要了解以下這個配套使用的屬性「清除」
clear : none | left |right | both; none 允許兩邊都可以有浮動物件both不允許有浮動物件;left不允許左邊有浮動對象right不允許右邊有浮動對象。
background:url(images/aardvark.gif) left top no-repeat | repeat-x | repeat-y 定義背景圖片來美化版面也是我們很常用到的屬性。
overflow : visible | auto | hidden | scroll 這個作用在佈局中我通常利用他來防止、解決瀏覽器相容出現問題
border:1px solid #CCCCC 這個是定義邊框大小,線條,顏色的屬性。
list-style-image list-style-position list-stle-type 這個清單屬性通常使用在有序列表和無序列表當中,列表在定義網頁標題索引文字連接中經常使用,這是驗證CSS定義優越於表格的典型代表。
以上是腳本之家認為在學習CSS中必須要熟記和理解的CSS屬性,充分理解了它門的特性能夠大大提高我們應用佈局的自由度。所以學習這個並不是很難,掌握以上樣式你會發覺,以前不了解的時候做起頁面來感覺力不從心,掌握後很自然根據自己的邏輯思維完全可以去實現自己想要的佈局和版面,並且CSS抵觸情緒會緩解很多。
談到這,我要提出一個很常見的問題。我認為WEB標準並不是禁止table全部使用p,包括我自己剛開始的時候也有這樣的錯誤想法,「標準」我的理解是規範設計師養成一個良好的編寫習慣,達到一種主流的統一。有的情況下表格的在網頁的功能實現上還是會有優越於p的時候,並且無節制p使用過多耗費ie解析增加cpu負擔。這也是我們值得注意的問題。
掌握以上常用的屬性的同時,下面透過參考網絡博客由設計銘編寫的一個CSS三列佈局模板,主要圍繞如何掌握CSS精要,學習網頁佈局教程實例模板,網友可以下載該模板依文章內容細心琢磨,從而領會掌握技術。此範本經過本站編排涵蓋上面列出重要的CSS屬性。
由於是佈局教程例子,在版面的細節上沒有花更多時間精細修飾,不過我覺得模板的版面不錯,懂CSS的可以下載進行更細緻的美工將會是一個很不錯的網頁,初步學習的可以下載來修改修改屬性參數從而更形象掌握屬性的特性,以達到更深掌握CSS的目的。
以上是網頁版面教學:CSS網頁版面屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!