CSS使用心得

2022-03-02 01:29:43 字數 2133 閱讀 5640

數月來學習web標準,並遵循標準設計和製作web頁面。一直想寫點什麼,整理一下自己的心得體會。寫這篇文章,主要是針對中文排版設計,英文排版因為很少做,所以不涉及。 先介紹如何設定字型、顏色、大小、段落空白等比較簡單的應用,後面再介紹下比如首字下沉、首行縮排。最後講一些常用的web頁面中文排版,比如中文字的截斷、固定寬度詞內折行(word-wrap和word-break)等等。因為只是寫一些應用方面的心得,如果需要完整的css屬性介紹,請參考css手冊。

1、如何設定文字字型、顏色、大小 —— 使用font font-style設定斜體,比如font-style: italic; font-weight設定文字粗細,比如font-weight: bold; font-size設定文字大小,比如font-size: 12px;(或者9pt,不同單位顯示問題參考css手冊) line-height設定行距,比如line-height: 150%; color設定文字顏色(注意不是font-color),比如color: red; font-family設定字型,比如font-family : "lucida grande", verdana, lucida, arial, helvetica, 宋體,sans-serif;(這是通用的寫法) 以上都可以寫在一行font屬性裡(除了color屬性需要單獨寫): font: italic bold 12px/150% "lucida grande", verdana, lucida, arial, helvetica, 宋體,sans-serif;

2、如何控制段落排版 —— 使用margin,text-align 中文段落使用 標籤,左右(相當於縮排)、段前段後的空白,都可以用margin。比如: p 文字的對齊方式用text-align,比如: p 對齊方式還有left、right和justify(兩端對齊) ps.談起margin,我習慣於在寫css的時候為所有的標籤定義margin: 0; 因為時而出現由於預設的margin值導致頁面排版問題,而自己找不到原因(特別注意的是ul/ol/p/dt/dd等標籤)

3、豎排文字 —— 使用writing-mode writing-mode屬性有兩個值lr-tb和tb-rl,前者是預設的左-右、上-下,後者是上-下、右-左。 比如: p 可以結合direction排版。

4、專案符號的問題 —— 使用list-style 在css裡專案符號有disc(實心圓點)、circle(空心圓圈)、square(實心方塊)、decimal(阿拉伯數字)、lower-roman(小寫羅馬數字)、upper-roman(大寫羅馬數字)、lower-alpha(小寫英文本母)、upper-alpha(大寫英文本母)、none(無)。比如設定乙個列表(ul或ol)的專案符號為方塊,如: li 另外list-style還有一些值,比如可以採用一些小作為專案符號,在list-style下直接寫url(「位址」)就可以了。注意如果乙個專案列表的左外補丁(margin-left)設為零的時候,list-style-position: outside(預設是outside)的專案符號不會顯示。可惜的是上述的專案符號似乎並不能設定大小,圓點和方塊始終是那麼點。並且不能設定垂直方向上的對齊。

5、首字下沉 —— 使用:first-letter 偽物件:first-letter配合font-size、float可以製作首字下沉效果。 比如: p:first-letter

6、首行縮排 —— 使用text-indent text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。可以這麼寫: p 如果font-size是12px的話,那麼text-indent: 2em則縮排24px。

7、關於漢字注音 —— 使用ruby標籤和ruby-align屬性 比如說注音zhu yin,可以利用ruby-align設定對齊方式。這是在css手冊裡面看到的,具體可以自行查閱ruby-align項。

8、固定寬度漢字截斷 —— 使用text-overflow 用後台語言可以對從資料庫裡的字段內容做截斷處理,比如說截12個漢字(之後用省略號)。但是有時還需要html標籤的過濾等,而用css來控制則沒有這個問題。比如對列表應用以下樣式: li 不過只能處理文字在一行上的截斷,不能處理多行。

9、固定寬度漢字(詞)折行 —— 使用word-break 舉個例子,比如說要在乙個固定寬度容器裡面顯示很多地名(假設以空格分隔),為了避免地名中間斷開(即乙個字在上面而另乙個字折斷到下一行去了)。則可以使用word-break。 值得注意的是裡面的空格不能以 代替(最少要有乙個軟空格)。

frameset 使用心得

欲明白本篇 html徹底剖析 之標記分類,請看 標記一覽 也請先明白圍堵標記與空標記的分別,請看 html概念 框架概念 謂框架便是網頁畫面分成幾個框窗,同時取得多個 url。只需要 即可,面所有框架標記需要放在乙個總起的 html 檔,這個檔案只記錄了該框架如何分割 不會顯示任何資料,所以不必放入...

Access使用心得

今天臨時用access做資料庫,長期用sql server開發習慣了,總結一下現在為止用到的比較大的差異,以後有新的再補了 1 返回字串長度 len s lenb s 前者返回字元數,後者返回位元組數,並且access中text型別字元統一為2位元組,與sql2000不同。2 join的使用 acc...

vmware使用心得

成功在winxp環境中安裝了vista business版本,反之,亦然。可以建立工作組網路連線了,虛擬機器也可以訪問網際網路了。安裝說明 在安裝嚮導中,無論使用哪種網路連線形式,都不影響正確安裝。安裝後,可以編輯本地機和虛擬機器之間的網路連線形式。需要注意三個細節問題 1 網絡卡要設定為 電源啟動...