天天看點

看css禅意花園記的筆記

UTF-8是一種Unicode,Unicode是一種流行的國際編碼方案。

好處是,不同字元集的多種語言可以共存于同一張頁面中

使用者界面 設計基本法則:

  • 了解将浏覽頁面的使用者
  • 在頁面和站點中給使用者足夠的導向
  • 使用被熟知的符号 
  • 保證與功能 相關的特性在頁面中足夠顯眼
  • 保證設計元素的一到處性
  • 了解頁面中的關鍵元素
  • 清楚表達 頁面的内容
  • 與布局相關的可用性問題
  • 重要資訊放在顯眼的位置
  • 在title中給出頁面的簡單介紹
  • 保證導航連結一緻表現。確定頁面中包含回到站點首頁的連結
  • 提供搜尋功能 
  • 用縮進和偏移

position:fixed。其div将永遠保留在同一個位置,且頁面中的其他 元素定位 在于其下方

z-index設定固定元素的前後位置關系。高的覆寫低的

logo放在頁面左上角,浏覽者一般首先看這個地方。右上部分重要,底部不是那麼重要

應用浮動,清除浮動.<div class="clear"></div>

web頁面中常用 圖像格式 gif,jpeg,png

無損壓縮将保留原圖像的所有細節,有損壓縮會對細節有所取舍,

以換來更小的檔案

色深color depth

指某種圖像 格式包含的顔色的多少。8位的色深有256種顔色

gif 8位 支援一位的透明 度,即某個像素要麼完全透明,要麼完全 不透明

jpeg 24位色深 不支援透明

png 24或8位 24位的檔案很大,但完全無損。支援透明。可實作 256級的透明度

gif和jpeg常用 。前用于帶有大塊相同顔色 區域的圖像

jpeg用于照片等色彩,細節豐富的圖像

優化jpeg 高品質意味更大的檔案

font-weight:normal 正常(400)bold粗(700)weight值

(300)比正常精細顯得纖細。範圍是最細的100到最粗的900

bolder更粗

lighter比繼承值更細

inherit使本段文字的字型 粗細和父元素一緻

text-decoration:overline上劃線,linethrough删除線,blink時陷時現效果

line-height控制兩行文字間的距離

line-height:0.8/0.8em/80%

letter-spacing字元間距 标題,小段文字

background-attachment:fixed/scroll 背景圖像 會不會跟随圖像而動

padding内邊距

絕對定位:一個絕對定位元素會參照 它的定位容器元素來定位。如果沒有定位容器元素

則會以html根元素為參照

字型網站

http://www.identifont.com/find?font=arial

css crib sheet

若是不确信的話,就去驗證

w3c提供的XHTML CSS驗證工具

http://validator.w3.org

http://jigsaw.w3.org/css-validator

建立并測試css,首先在最進階,最先進的浏覽器中進行

(firefox,safari,opera中測試,再在IE中調整)

若用浮動實作布局,確定正确的清除了浮動

為元素應用内邊距或邊框來避免外邊距重疊

避免IE6的 無樣式内容瞬間 現象

不要依靠min-width,min-height屬性。IE不支援

嘗試減少百分比值

浏覽器的計算中的舍入誤差有時會讓50%+50%=100.1%