Css 中常用的字型大小

2021-06-27 07:47:53 字數 3462 閱讀 6161

css font-size字型文字大小樣式屬性-字型大小樣式篇:

本節divcss5為大家介紹通過css樣式設定文字字型大小知識,涉及css樣式單詞font-size

目錄設定字型大小css單詞與語法

font-size使用方法

font-size效果截圖

font size=5什麼意思

css font-size常見運用

font-size案例

對css font-size總結

基本語法結構:

.divcss5

設定了文字大小為12px畫素

font-size+字型大小數值+單位

單詞: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:正常(預設值),根據字型進行調整

large:大

x-large:較大

xx-large:最大

也可取具體長度單位值

font-size:12px; 設定物件具體字型大小為12px

font-size:xx-small; 設定文字大小為最小

font-size:small; 設定文字字型大小為小

font-size:x-large;設定物件字型大小為較大

font-size:larger;設定物件字型大小為大

font-size:smaller;相對于父容器中字型尺寸進行相對減小

font-size:50%;相對于父容器中字型尺寸進行相應調整為50%大小

font-size:150%;相對于父容器中字型尺寸進行相應調整為150%大小

對應css+div**:

>font-size字型大小測試-divcss5實驗

title

>

<

style

type="text/css"

>

body 

.exp1 

.exp2 

.exp3 

.exp4 

.exp5 

.exp6 

.exp7 

.exp8 

style

>

head

>

<

body

>

<

divclass="exp1"

>我被font-size值為12px大小

div>

<

divclass="exp2"

>我被font-size值為xx-small大小

div>

<

divclass="exp3"

>我被font-size值為small大小

div>

<

divclass="exp4"

>我被font-size值為x-large大小

div>

<

divclass="exp5"

>我被font-size值為larger大小

div>

<

divclass="exp6"

>我被font-size值為smaller大小

div>

<

divclass="exp7"

>我被font-size值為50%大小

div>

<

divclass="exp8"

>我被font-size值為150%大小

div>

body

>

html

>

font-size樣式設定與ie瀏覽對比效果圖:

font-size樣式屬性演示圖

有時我們看見或遇到如:

內容這個方法也是直接使用font標籤加size設定物件字型大小。這裡5代表設定物件字型大小為5號字。

大家可以使用此方法測試測試比如設定size="2"、size="3"、size="8"等等不同值觀察觀察區別並掌握。

5-1、直接標籤內使用font-size設定物件內容字型大小

我被設定字型大小為14px

5-2、使用標籤與css樣式分離設定物件內容字型大小(推薦)

css**:.divcss5

對應html div**:我被css font-size樣式設定字型大小為16px

我們常常以此方法來設定物件字型大小。也就是所說的表現與css樣式分離。

1、文字大小案例css**:

#divcss5 

.divcss5 

2、字型大小案例html**:

<

divid="divcss5"

>我大小為14px

div>

<

divclass="divcss5"

>我大小為18px

div>

3、font-size案例截圖

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

我們使用css font-size設定物件字型大小樣式,一般設定文字字型大小以具體長度單位值來確定物件內容文字大小。總之記住如css**font-size:14px,即設定物件字型大小為14px(畫素)。

對於對物件文字字型大小的樣式控制設定我們可以使用font-size+具體數字+單位,即可實現物件內文字大小控制。一般字型大小為正,除了使用數字加單位設定物件文字文字大小實現,也可以以百分比進行文字大小設定如(100%)實現文字字型大小,大家下來可以試試。

擴充套件:如過遇到谷歌瀏覽器chrome設定具體字型大小小於了12px會出現設定無效,此時可以看看解決谷歌瀏覽器設定文字字型小於12px方法:

CSS 字型大小最常用的單位

元素的font size屬性是從該元素的父元素繼承的。所以這一切都是從整個文件的根元素 元素 表示乙個html文件的根 頂級元素 所以它也被稱為根元素。所有其他元素必須是此元素的後代。href 開始,瀏覽器的font size標準設定的值為 16px。在根元素中的任何段落 或者那些瀏覽器沒有設定預設...

css中常用的屬性(1)

padding 10px 上右下左邊距均為10px padding 10px 20px 表示上下內邊距10px 左右邊距20px padding 10px 20px 30px 表示上邊距10px 右邊距20px 下邊距30px 左邊距同右 padding 10px 20px 30px 40px 按照...

css中常用方法總結

css 提供了 text indent 屬性,該屬性可以方便地實現文字縮排。通過使用 text indent 屬性,所有元素的第一行都可以縮排乙個給定的長度,甚至該長度可以是負值。這個屬性最常見的用途是將段落的首行縮排。在設計乙個網頁的時候,有時候為了讓頁面的可讀性更好,更加美觀 就會使用到lett...