網頁css樣式之文字排版知識梳要

2021-07-25 11:40:20 字數 3119 閱讀 9031

1: font-size屬性重要設定字型大小  屬性值有:值描述

xx-small

x-small

small

medium

預設值large

x-large

xx-large

smaller

設定比父元素更小的尺寸

larger

設定比父元素更大的尺寸

length

設定為乙個固定的值

%基於父元素的乙個百分比的值

inherit

從父繼承字型尺寸

2:font-style屬性設定字型樣式     屬性值有:

normal  ------->預設值

italic      -------->瀏覽器會顯示乙個斜體的字型樣式,注意是選擇該字型的有的傾斜樣式字型

oblique ---------> 瀏覽器會顯示乙個傾斜的字型樣式,這是物理上強行傾斜

inherit   ---------> 規定應該從父元素繼承字型樣式

3:font-weight 設定字型粗細          屬性值有:

normal ----------->預設值

bold      ----------->定義粗體字元

bolder  ----------->定義更粗體字元

lighter  ------------>定義更細的字元

100~900 --------->定義由粗到細的字元。100等價於lighter  400等價於nomarl   700等價於bold  900等價於bolder(經測試與bold與差異)

inherit  ------------>繼承父元素的font-weight

4:font-family屬性設定字型系列 如:

有兩種型別的字型系列名稱:

5:font-variant屬性

把段落設定為小型大寫字母字型,但是所有使用小型大寫字型的字母與其餘文字相比,其字型尺寸更小        屬性值有:

normal--------------->預設值

small-caps--------->瀏覽器會顯示小型大寫字母的字型

inherit---------------->從父元素繼承font-variant屬性值

6.text-transform  

控制元素中的字母

屬性值有:

•text-transform: capitalize | uppercase |lowercase 

(文字大小寫轉換,值分別是, 將單詞首字母轉大寫 | 所有字母轉大寫 | 所有字母轉小寫,只對英文單詞起作用。)

屬性值有:

normal--------->預設值。規定字元沒有額外的空間

length---------->定義字元間的固定空間的距離(允許使用負值)

inherit ---------->從父元素繼承letter-spacing的屬性值            注意:ie不支援該屬性值

屬性值有:

normal-------------->預設;定義單詞間的標準空間

length  ------------->定義單詞間固定空間

inherit--------------->從父元素繼承word-spacing的屬性值     注意:ie不支援

屬性值:

normal------------>預設;空白會被瀏覽器忽略(只留乙個)

nowrap------------>文字不換行,文字會在同一行上繼續,直到遇到

標籤為止

pre------------------>空白,換行會被瀏覽器保留。其行為方式類似html中的標籤

pre-wrap---------->保留空白符序列,但是正常的進行換行

pre-line------------>合併空白符序列(去掉多餘空白符),但也能保留換行符

inherit-------------->從父元素繼承white-space屬性值             注意:ie不支援

屬性值有:

length-------------->定義固定的縮排,預設值為0

%-------------------->定義基於父元素寬度的百分比的縮排

inherit-------------->從父元素繼承text-indent屬性值   注意:ie不支援該屬性

語法:text-shadow: h-shadow v-shadow blurcolor;

說明:1

、h-shadow

:必需,水平陰影的位置,允許負值

2、v-shadow

:必需,垂直陰影的位置,允許負值

3、blur

:可選,模糊的距離

4、color

:陰影的顏色

text-align:水平對齊方式

語法:

vertical-align:垂直對齊方式

語法:

適用於:指定垂直對齊方式,相對於其他文字

該屬性只對

inline-block

型別的元素起作用,他設定的是元素左右兩邊的元素相對於自己的對齊方式

屬性值有:

normal---------------------->預設。設定合理的行間距

number--------------------->設定數字,此數字會與當前的字型尺寸相乘來設定行間距

length----------------------->設定固定的行間距

%----------------------------->基於當前尺寸的百分比行間距

inherit----------------------->從父元素繼承line-height屬性值    注意:ie不支援

word-wrap屬性允許長的內容可以自動換行。

語法結構:word-wrap: normal|break-word;

normal:只在允許的斷字點換行(瀏覽器保持預設處理)。

break-word:在長單詞或url位址內部進行換行。

愛**,愛生活!

文字排版之CSS屬性

align center 文字排版之css屬性 align b 1.1段落設定 b 1 text indent,段落首行文字縮排。例 for mat 2 水平對齊方式 設定或檢索物件 和文字等 中文字的左中右對齊方式。語法 text align center 居中對齊。text align left...

Bootstrap全域性CSS樣式之排版

bootstrap能完全友好的支援html5的文字元素,這裡不再贅述,具體可參考我另一篇文章 html的文字元素總結 這裡主要針對bootstrap封裝好的css文字樣式做一下彙總。small 當前元素字型大小的 85 常用作副標題時,也可用來代替 lead 讓段落突出顯示 text left te...

CSS之文字樣式

縮排文字 縮排文字,使用了text indent屬性 縮排文字,使用text indent的百分比 text align center文字居中,只標籤內的內容,不影響標籤 字間隔ccc 屬 性,改變字 單詞 之間的標準間隔,word spacing預設值為normal字間隔 30px 字間隔ccc ...