css font-size樣式屬性

基本語法結(jié)構(gòu):

.divcss5{font-size:12px;}

設(shè)置了文字大小為12px像素

Font-size+字體大小數(shù)值+單位

單詞:font-size

語法:font-size : absolute-size | relative-size | length

取值:xx-small | x-small | small | medium | large | x-large | xx-large

xx-small:最小

x-small:較小

small:小

medium:正常(默認(rèn)值),根據(jù)字體進(jìn)行調(diào)整

large:大

x-large:較大

xx-large:最大

也可取具體長度單位值

二、font-size使用方法 ? -?TOP

font-size:12px; 設(shè)置對象具體字體大小為12px

font-size:xx-small; 設(shè)置文字大小為最小

font-size:small; 設(shè)置文字字體大小為小

font-size:x-large;設(shè)置對象字體大小為較大

font-size:larger;設(shè)置對象字體大小為大

font-size:smaller;相對于父容器中字體尺寸進(jìn)行相對減小

font-size:50%;相對于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整為50%大小

font-size:150%;相對于父容器中字體尺寸進(jìn)行相應(yīng)調(diào)整為150%大小

三、使用效果與截圖 ? -?TOP

對應(yīng)CSS+div代碼:

< !DOCTYPE?html > ?

< html >?

<head>?

<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>?

<title>font-size字體大小測試-DIVCSS5實驗</title>?

<style?type="text/css">?

body{?font-size:12px;?line-height:24px;}?

.exp1{font-size:12px;}?

.exp2{font-size:xx-small;}?

.exp3{font-size:small;}?

.exp4{font-size:x-large;}?

.exp5{font-size:larger;}?

.exp6{font-size:smaller;}?

.exp7{font-size:50%;}?

.exp8{font-size:150%;}?

</style>?

<!--?www.divcss5.com?-->?

</head>?

<body>?

<div?class="exp1">我被font-size值為12px大小</div>?

<div?class="exp2">我被font-size值為xx-small大小</div>?

<div?class="exp3">我被font-size值為small大小</div>?

<div?class="exp4">我被font-size值為x-large大小</div>?

<div?class="exp5">我被font-size值為larger大小</div>?

<div?class="exp6">我被font-size值為smaller大小</div>?

<div?class="exp7">我被font-size值為50%大小</div>?

<div?class="exp8">我被font-size值為150%大小</div>?

</body>?

</html>?

Font-size樣式設(shè)置與IE瀏覽對比效果圖:

FONT-SIZE樣式屬性演示圖

四、font size=5什么意思 ? -?TOP

有時我們看見或遇到如:

內(nèi)容

這個方法也是直接使用font標(biāo)簽加size設(shè)置對象字體大小。這里5代表設(shè)置對象字體大小為5號字。

大家可以使用此方法測試測試比如設(shè)置size="2"、size="3"、size="8"等等不同值觀察觀察區(qū)別并掌握。

五、CSS font-size常見運(yùn)用 ? -?TOP

5-1、直接標(biāo)簽內(nèi)使用font-size設(shè)置對象內(nèi)容字體大小

我被設(shè)置字體大小為14px

5-2、使用標(biāo)簽與CSS樣式分離設(shè)置對象內(nèi)容字體大?。ㄍ扑])

CSS代碼:.divcss5{ font-size:16px;}

對應(yīng)HTML DIV代碼:

我被CSS font-size樣式設(shè)置字體大小為16px

我們常常以此方法來設(shè)置對象字體大小。也就是所說的表現(xiàn)與CSS樣式分離。

六、font-size案例 ? -?TOP

1、文字大小案例CSS代碼

#divcss5{?font-size:14px;}?

.divcss5{?font-size:18px;}?

2、字體大小案例HTML代碼

<div?id="divcss5">我大小為14px</div>?

<div?class="divcss5">我大小為18px</div>?

3、font-size案例截圖

font-size文字字體大小案例截圖

七、對CSS font-size總結(jié) ? -?TOP

我們使用CSS font-size設(shè)置對象字體大小樣式,一般設(shè)置文字字體大小以具體長度單位值來確定對象內(nèi)容文字大小。總之記住如CSS代碼font-size:14px,即設(shè)置對象字體大小為14px(像素)。

對于對對象文本字體大小的樣式控制設(shè)置我們可以使用font-size+具體數(shù)字+單位,即可實現(xiàn)對象內(nèi)文字大小控制。一般字體大小為正,除了使用數(shù)字加單位設(shè)置對象文字文字大小實現(xiàn),也可以以百分比進(jìn)行文字大小設(shè)置如(100%)實現(xiàn)文本字體大小,大家下來可以試試。

擴(kuò)展:如過遇到谷歌瀏覽器Chrome設(shè)置具體字體大小小于了12px會出現(xiàn)設(shè)置無效,此時可以看看解決谷歌瀏覽器設(shè)置文字字體小于12px方法:http://www.divcss5.com/wenji/w321.shtml

擴(kuò)展相關(guān)閱讀:

div字體大小

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,145評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,811評論 1 45
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,439評論 0 40
  • 基本常識與實踐 css的每一個語句包括一個場所,以及這個場所的一個屬性,還要應(yīng)用到這個屬性一個樣式,一個典型的cs...
    丁俊杰_閱讀 1,124評論 0 0
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”,它主要是用于定義HTM...
    snowy_sunny閱讀 1,202評論 0 4

友情鏈接更多精彩內(nèi)容