利用Css排版的幾個技巧

2021-06-16 00:28:47 字數 1559 閱讀 8567

一點自己的經驗總結,拋磚引玉,希望各位高手指教

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-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;(這是通用的寫法)

2. 使用margin,text-align如何控制段落排版

中文段落使用標籤,左右(相當於縮排)、段前段後的空白,都可以用margin。比如:

複製內容到剪貼簿

**:p

文字的對齊方式用text-align,比如:

複製內容到剪貼簿

**:p

對齊方式還有left、right和justify(兩端對齊)

**:

複製內容到剪貼簿

**:

p文字的對齊方式用text-align,比如:

p對齊方式還有left、right和justify(兩端對齊)

3.使用writing-mode豎排文字

writing-mode屬性有兩個值lr-tb和tb-rl,前者是預設的左-右、上-下,後者是上-下、右-左。

比如:

複製內容到剪貼簿

**:p

可以結合direction排版。

複製內容到剪貼簿

**:

writing-mode屬性有兩個值lr-tb和tb-rl,前者是預設的左-右、上-下,後者是上-下、右-左。

比如:p

可以結合direction排版。

關於排版的技巧

下面說乙個有關border的乙個屬性 transparent 透明的 placeholder 文字框顯示 游標在前面 普通的文字框顯示 游標在後面 排版的技巧 1.搞清楚結構層次 2.保證模組化 讓他們之間不能受到影響 排版時記住這兩個問題 1.元素的性質 2.標準流 因脫離標準文件流,父級撐不起高...

CSS網頁布局中文排版的9則技巧

css網頁布局中文排版有別於國外所介紹的英文排版,由於漢字的特殊性,所以有一些地方是需要大家注意的。今天webjx.com的這個文章或許對大家對排版的控制有所幫助。一 如何設定文字字型 顏色 大小 使用font font style設定斜體,比如font style italic font weig...

CSS 網頁布局中文排版的9則技巧

一 如何設定文字字型 顏色 大小 使用font font style設定斜體,比如font style italic font weight設定文字粗細,比如font weight bold font size設定文字大小,比如font size 12px 或者9pt,不同單位顯示問題參考css手冊...