自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS中font-size屬性值四大種類

開發(fā) 前端
我們用px作為文字大小的單位,已經(jīng)出現(xiàn)很多問題,最主要是體現(xiàn)在用戶不能靈活的控制文字的大小,這里向大家描述一下CSS中font-size屬性值四大種類。

本文和大家重點(diǎn)學(xué)習(xí)一下CSS中font-size屬性值四大種類,我們用px作為文字大小的單位,已經(jīng)出現(xiàn)很多問題,現(xiàn)在IE瀏覽器是主流,但我們不能通過瀏覽器設(shè)置文字大小,因?yàn)槲覀冇胮x作為文字大小的單位。

CSS中font-size屬性值四大種類

我們逐漸意識(shí)到,我們用px作為文字大小的單位,已經(jīng)出現(xiàn)很多問題。最主要是體現(xiàn)在用戶不能靈活的控制文字的大小,現(xiàn)在IE瀏覽器是主流,但我們不能通過瀏覽器設(shè)置文字大小,因?yàn)槲覀冇胮x作為文字大小的單位。

  對(duì)于大多數(shù)用戶來說或許這并無不妥,但對(duì)于年齡稍大及眼力不佳的訪客來說,他們不能按他們的意愿,通過瀏覽器來改變文字的大小。我們以“用戶至上”為原則,我們應(yīng)該采取一種策略,不要求通過px為單位獲得100%的精確性,我們需要獲得更大的瀏覽器的可伸縮性與易用性,靈活的滿足訪客的需要。關(guān)于這類話題我們?cè)谝院?1cto.com的教程中,與大家再進(jìn)行深入的探討。我們今天對(duì)font-size屬性的值進(jìn)行一些分析,看從中我們能得到一些什么啟示。

一、長度單位

  長度單位分為兩種,一種是相對(duì)長度,另一種是絕對(duì)長度。
  以下為三種相對(duì)長度單位:
  ◆em相對(duì)于父對(duì)象的大小
  ◆ex相對(duì)于特定字體中的字母x的高度
  ◆px相對(duì)于特定設(shè)備的分辨率,這是最最常用的單位,也是我們一直堅(jiān)守的單位。從技術(shù)角度來說,px像素其實(shí)是一種相對(duì)大小的度量單位,它于特定設(shè)備的顯示或打印的分辨率有關(guān)。例如,一個(gè)像素在被顯示在計(jì)算機(jī)屏幕上與被打印在紙張上的大小是不同的。

  以下為五種font-size屬性值絕對(duì)長度單位:

  絕對(duì)長度單位在打印時(shí)或在屏幕顯示設(shè)備的物理尺寸已知時(shí)才比較有用。
  ◆in英寸
  ◆cm厘米
  ◆mm毫米
  ◆pt點(diǎn)
  ◆pc12點(diǎn)活字

二、相對(duì)大小的關(guān)鍵字

  font-size屬性值相對(duì)大小的關(guān)鍵字只有兩個(gè)值:
  ◆larger
  ◆smaller
  這兩個(gè)值的設(shè)定與父對(duì)象的設(shè)定值有關(guān)。我們可以像理解老式的<small><big>那樣來理解它們。它們是設(shè)定文字大小的最基本的方式,并會(huì)受到上層對(duì)象的文字大小定義的影響。

三、絕對(duì)大小的關(guān)鍵字

  這類關(guān)鍵字共有7個(gè),他們的實(shí)際大小根據(jù)不同的瀏覽器及設(shè)備來決定。

  ◆xx-small
  ◆x-small
  ◆small
  ◆medium
  ◆large
  ◆x-large
  ◆xx-large

  W3C建立建議瀏覽器開發(fā)公司,將每個(gè)關(guān)鍵字之間的比例設(shè)定為1.5。并推薦讓這個(gè)比例保持恒定,媽medium是small的1.5倍。同樣large是medium的1.5倍。

四、百分比

  font-size屬性值中使用百分比設(shè)置大小,將在容器對(duì)象文字大小的基礎(chǔ)上進(jìn)行改變。如果我們?cè)O(shè)置body的文字大小為10。我們?cè)O(shè)置p的文字大小為150%,則p的文字大小就為15。不管10是什么樣的單位,百分比作為一種比例進(jìn)行縮放調(diào)整。

  我們可以從更深層次去思考,我們將在51cto.com以后的文章中進(jìn)行發(fā)布,面對(duì)這些定義文字大小屬性值的單位,我們?nèi)绾螢橛脩籼峁┮粋€(gè)靈活的瀏覽環(huán)境,并允許他們按他們的意愿來控制文字的大小以更方便于瀏覽。
 

【編輯推薦】

  1. 詳解CSS布局技巧十則
  2. CSS布局中float和position屬性使用技巧
  3. CSS中實(shí)現(xiàn)DIV容器垂直居中方法揭秘
  4. CSS Sprites對(duì)CSS布局的意義及優(yōu)缺點(diǎn)
  5. CSS布局中display:inline-block屬性用法詳解

 

 

責(zé)任編輯:佚名 來源: 52css.com
相關(guān)推薦

2010-08-30 15:06:04

CSSfont-size

2010-09-03 13:02:04

CSSposition

2010-09-10 10:10:36

CSS屬性

2010-09-02 15:12:28

CSS屬性值選擇器

2011-03-21 09:01:49

CSS框架

2010-08-17 10:31:10

DIV布局屬性

2010-08-25 13:40:31

CSSfont-weight

2010-08-17 09:20:28

DIV布局

2010-09-10 09:22:50

DIV布局

2015-07-17 09:50:16

Carthage優(yōu)劣比較

2010-09-02 10:12:34

CSS導(dǎo)航

2010-09-14 17:33:55

DIV+CSS布局

2010-08-25 13:25:22

CSSfont-family

2010-09-15 13:50:04

CSSposition屬性

2010-08-20 15:43:00

Div CSSSEO

2010-08-16 14:12:44

DIV+CSS

2010-09-02 09:44:07

DIV+CSSSEO

2010-09-14 13:32:33

CSS編碼準(zhǔn)則

2010-09-02 10:43:24

CSS文件

2010-09-14 13:42:22

CSSdisplay屬性
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)