CSS——行高、字型、文字的樣式
一、行高
行高(line height)
行高指的是文字佔有的實際高度
可以通過line-height來設定行高
行高可以直接指定一個大小(ex pm)
也可以設定一個整數
如果是一個整數行高將會是字型的指定的倍數
預設行高是1.33
行高經常用來設定文字的行間距
行間距等於行高減去字型大小
字型框:
設定字型框就是字型存在的格子,設定font-size實際上設定我們字型框的高度
行高會在字型框的上下平均分配
可以將行高設定為和高度一樣的值,使單行文字在一個元素中垂直居中
font-size: 50px;
line-height: 200px;
二、字型
/* font-face可以將伺服器中的字型直接提供給使用者去使用 */
@font-face {
/* 指定字型的名字 */
font-family: 'myfont';
/* 伺服器字型的路徑 */
src: url('./xx/xxxx.ttf');
}
p{
和font-size相關的單位
em 相當於當前元素的一個font-size
rem 相當於根元素的font-size
font-family 字型族(字型的格式)
可選值:
serif :襯線字型
sans-serif:非襯線字型
monospace:等寬字型
cursive:草書字型
fantasy:虛幻字型
指定字型的類別 瀏覽器會自動使用該類別下的字型
font-family可以指定多個字型 使用逗號隔開,
優先使用第一個 第一個無法使用則使用第二個 以此類推。
/*font-family: 'Courier New', Courier, monospace;*/
font可以設定字型相關所有屬性
語法:字型大小/指定行高 字型族
行高可以省略不寫 如果不寫它會使用預設值
簡寫屬性省略用的是預設值
font: 50px/2 'Courier New', Courier, monospace ;
font-weight設定字型加粗效果
可選值:
normal 預設值 不加粗
bold 加粗
100-900級別(沒什麼用)
font-style :
normal正常
italic斜體
二、文字樣式
text-align 文字的水平對齊
可選值:
left左側對齊
right右側對齊
center居中對齊
justify兩端對齊
vertical-align 垂直對齊
可選值
baseline 預設值 基線對齊
top頂部對齊
bottom 底部對齊
middle 居中對齊
text-decoration設定文字修飾
可選值:
none什麼都沒有
underline下劃線
line-through刪除線
overline上劃線
white-space 用來設定網頁如何處理空白
可選值:
normal正常
nowrap不換行
pre保留空白 保留文字格式
/* 設定省略號效果 */
white-space:nowrap ;
overflow: hidden;
text-overflow: ellipsis;
相關文章
- CSS——CSS 給文字加樣式:① 字型屬性CSS
- css字型樣式CSS
- CSS從入門到精通——文字與字型樣式CSS
- css字型樣式屬性CSS
- CSS系列:CSS文字樣式CSS
- 二十款漂亮的CSS字型樣式CSS
- 常用CSS樣式1:文字樣式CSS
- 001---css樣式規則及css字型樣式CSS
- Css基本樣式————文字CSS
- css 字型樣式設定大全CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- 1.5 常用CSS樣式1:文字樣式CSS
- CSS 設定文字樣式CSS
- CSS input文字框樣式CSS
- CSS input 文字框樣式CSS
- CSS學習筆記之字型樣式CSS筆記
- CSS設定半個文字的樣式CSS
- CSS 設定元素第一行文字樣式CSS
- CSS 設定placeholder文字樣式CSS
- CSS 設定input文字框樣式CSS
- css設定input文字框樣式CSS
- 第 15 章 CSS 文字樣式[上]CSS
- 第 15 章 CSS 文字樣式[下]CSS
- CSS內聯樣式的使用,設定字型屬性CSS
- css設定文字第一行的樣式程式碼例項CSS
- CSS如何設定物件中第一行文字的樣式CSS物件
- css--實現一個文字少時居中,文字換行時居左的樣式CSS
- font-class引入css樣式,引入字型圖示CSS
- 高仿Windows 98主題的CSS樣式庫WindowsCSS
- 《vue系列》github-markdown-css讓接收的文字帶樣式VueGithubCSS
- 行高與字型的關係
- 樣式字型測試使用
- 純css實現控制文字框獲得焦點的樣式CSS
- CSS的基本樣式CSS
- css樣式CSS
- 直播系統app原始碼,設定樣式(字型樣式、行列寬高、對齊方式、邊框)APP原始碼
- 探索CSS奧秘:深入解析版式佈局與字型樣式的應用技巧CSS
- CSS字型屬性和文字屬性詳解CSS