全面理解css的設計與維護

2021-08-31 06:34:30 字數 1061 閱讀 8710

css語法立意讓網頁內容與視覺呈現分離,一方面使得頁面維護工作更容易,不會因內容或視覺效果改變影響到另一方,這樣的頁面設計,也對搜尋引擎更為友善,更容易搜尋到頁面內容。powered by 25175.net

css,cascading style sheets串接樣式表,網頁外觀的控制語法

world wide web最早是以檔案的概念組成,希望透過網頁與超連結,讓檔案與知識更容易連線援引。從html語法大量使用檔案概念的標籤(例如代表標題的,代表段落的),就不難看出www的這個特質。

然而www比起早期其它網路媒介更迷人的地方,在於它能直接在頁面嵌入並呈現,這個 改變讓www發展迅速,也讓頁面視覺裝飾大為盛行。但網頁先天的檔案性格,讓影象排版設計難以施展手腳,於是利用巢狀**與影象拼組而成的頁面開始盛行, 以求達到精準元素定位與更精美的視覺效果。這個潘多拉盒子一開,造成了許多失控的亂象,讓頁面原始碼難以閱讀與維護。

為了提高網頁在視覺上可以有更多元的表現,w3c在2023年推出css第一版,提供解決之道。不過由於css有賴於瀏覽器的支援,因此長久以來css的推展情況一直不佳,一直到ie6,firefox等主瀏覽器支援css,才漸漸改善。

css語法立意讓網頁內容與視覺呈現分離,一方面使得頁面維護工作更容易,不會因為內容或視覺效果改變影響到另一方,這樣的頁面設計,也對 搜尋引擎更為友善,更容易搜尋到頁面內容。其次,css也可以增加頁面在不同媒介的呈現效果。同一頁面,可依據用途不同,例如在螢幕顯示或列印,而自動切 換不同的css語法,讓呈現最佳化。也由於讀取頁面的媒介越來越多元(如手機,pda),css可以彈性調整呈現方式,都更加彰顯css在網頁上的優勢。

selector 選取器

要透過css為html的元素套用樣式效果,首先須向特定元素,像是標題、段落或超連結等,而這個指定的方法,就稱為選取器。

最基本的選取器,是指定html卷元素的名稱,另外還有id選取器、類別選取器、虛擬類別、子系、旁系等,不過這些css的選取方法,每種瀏覽器的支援不一,像ie6就不支援子系或旁系的選取器。

divist  濫用div標籤的設計人員

事實上,善用css串接與繼承的特性,就能創造出精準、豐富的視覺效果。但是並非僅靠css,濫用語法的情況就能改善。

全面系統CSS理解

居中 vertical align center 垂直元素都設定 垂直居中 margin left auto margin right auto 水平設定居中 給父元素設定 text align center背景 background radial gradient red,aaffff,blue ...

與equals 的全面理解

以前對於這兩個的理解都是這樣的 對於 如果是基本型別,則直接判斷值是否相等。如果是引用資料型別,則比較存放位址是否相等。對於equals 方法 比較存放位址是否相等。現在的理解 首先是資料儲存位置 棧 heap 記憶體中存放基本型別,引用,區域性變數 堆 stack 記憶體中存放new出來的物件 方...

CSS的濫用 變得難於理解,難於維護

css宣告式控制ui,形式上簡單 編寫簡單。一旦被濫用,就會出現相反的情形 產生冗餘,冗餘很難定位和清除,難於理解,動一處而牽扯全域性。css只是 的一種形式,仍然需要瀏覽器在執行期間先把它轉譯成邏輯 然後動態執行 渲染,繪製 css隨著 的巢狀關係和覆蓋關係的增加變得複雜起來。10行css你看的很...