CSS基礎—文字的尺寸、字體、行距及顏色

2021-01-19 米粒教育

文字的尺寸、字體、行距及顏色樣式標籤為font-size(尺寸)、font-family(字體)、line-height(行距)、color(顏色)。

font-size(尺寸)

font-size樣式用於設置文字大小,單位有px(像素)、 em(相對值,以父元素的大小為基準單位)、rem(相對值,以根元素的大小為基準單位)。

px的英文全稱是Pixels,中文名稱為像素,手機屏幕的解析度就是以像素為單位的,因此它是一個物理單位。使用px為單位的樣式會隨著顯示設備解析度的不同而發生大小變化。例如,font-size在PC網頁中被設置為16px,在手機端顯示該網頁時,文字會顯示的比較大,因為PC屏幕的解析度一般都大於手機屏幕的解析度。

em是一個相對單位,主要是相對於父元素的font-size。假設當前元素的父元素的font-size設置為16px,如果當前元素的font-size設置為1.2em,則當前元素的font-size實際值為16*1.2=19.2px;如果當前元素的font-size設置為0.65em,則當前元素的font-size實際值為16*0.65=10.4px。需要注意的是,如果當前元素以px為單位設置了font-size的值,則其它採用em單位的樣式,都會以當前font-size的值為基準單位。

rem同em一樣都是相對單位,區別是em以父元素的font-size為基準單位,rem以網頁根元素的font-size為基準單位,也就是瀏覽器的默認字體尺寸,瀏覽器的默認字體尺寸是16px。

下面的網頁文檔展示了font-size採用不同單位的應用。

在上面的網頁代碼中。城闕輔三秦語句的font-size被設置為1.2rem,rem以瀏覽器默認的字體尺寸為基準單位,因此其font-size的實際值為1.2 * 16 = 19.2px;與君離別意語句的font-size被設置為1.2em,em以父元素的字體尺寸為基準單位,該元素的父元素為body元素,因此其font-size的實際值為1.2*12=14.4px。瀏覽器顯示效果如下圖所示。

font-family(字體)

font-family用於設置文字採用何種字體進行顯示。使用該樣式設置字體時,建議使用作業系統常見的內置中文字體。Windows作業系統常見的內置中文字體有宋體(SimSun)、黑體(SimHei)、微軟雅黑(Microsoft Yahei)、楷體(KaiTi)、仿宋(FangSong)。其中,宋體是中文字體名稱,SimSun是英文字體名稱。在CSS樣式中,中文字體名稱和英文字體名稱都可以使用。下面的CSS樣式語句設置了文章標題使用黑體字體、文章正文使用宋體。

如果瀏覽器所在的作業系統沒有安裝CSS樣式設置的字體時,瀏覽器會使用作業系統的默認字體進行替換。

line-height(行距)

line-height樣式用於設置文欄位落的行距,line-height的單位有px、em、rem、百分比。百分比按照當前font-size的尺寸進行計算。下面的網頁文檔展示了line-height樣式的使用。

在上面的網頁代碼中。第一個div元素使用默認行距,默認行距與瀏覽器有關且與默認字體尺寸相關;第二個div元素使用設置的行距,單位為百分比,值為180%。需要注意的是,行距不是行間距,而是文字內容區域高度與行間距的和。下圖是瀏覽器的顯示效果。

color(顏色)

color樣式用於設置文字的顏色,顏色模式為RGB。顏色值為表示RGB顏色值的十六進位數值,也可以用rgb函數進行設置。

設置title樣式的顏色為紅色。

下面的HTML文檔展示了color樣式的使用方法。

在上面的網頁代碼中。城闕輔三秦語句被設置為紅色,顏色值為#00ff00;與君離別意語句使用rgb函數設置顏色值,傳入的三個參數分別為R的顏色值、G的顏色值和B的顏色值。下圖是瀏覽器顯示效果。

相關焦點

  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • Meta CSS框架發布
    在深入介紹之前,我們來考慮幾個web開發者非常容易遇到的問題:  同樣的一個款式的按鈕,有些頁面它要在左邊,但是有些頁面要在右邊  同樣作用的一段提示文字,有些地方字體要大號,有些卻要小號  同樣風格的一段文字,有些要紅色,有些卻要綠色  這樣的狀況是相當頻繁的。
  • 常見的CSS文字居中顯示
    </span></div>css.box{ width: 200px; height: 200px; overflow: hidden; background
  • 圖解css表示顏色的4種方式:顏色名稱、十六進位值、rgb和hsl函數
    當我們在編寫css樣式規則的時候,很多情況下都是在指定顏色。比如,指定元素的背景色、字體的顏色、邊框的顏色和陰影的顏色等等。所以,我們需要一種表示方法來表示我們要使用哪一種顏色。今天我們就來講解一下css中4種基本的表示顏色的方式,它們分別是:顏色的英文名稱、十六進位顏色值、rgb顏色函數和hsl顏色函數。1.
  • 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...
    Loader加載器包含/* 1).less-loader: 處理.less相關文件 2).sass-loader: 處理.scss相關文件 3).url-loader: 打包處理css中與url路徑有關的文件 4).babel-loader:處理高級js語法的加載器 5).postcss-loader 6).css-loader,
  • CSS教程:網頁字體及字體大小的設計
    字體大小CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。
  • 海報設計用哪些文字字體比較合適
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享 海報設計用哪些文字字體比較合適?在設計的過程中離不開文字的選擇,如何選擇合適的文字?文字的樣式呈現哪種感覺?是很多人都非常困擾的問題。本篇文章圍繞文字的不同選擇,呈現出來的視覺效果多樣性,通過不同的體現,獲得不同的版面效果。
  • 前端Web開發人員的CSS相對字體大小
    大多數人開始使用像素單元,因為它可以讓您 完全控制文字大小。如果未指定字體大小,則正常文本的默認大小(如段落)為16px。使用像素單元的主要問題在於它們不具有可伸縮性,因此在不同屏幕尺寸下對字體大小進行更改可能具有挑戰性。另外,PX單元與任何事物都沒有關係。因此,如果您想要根據屏幕大小更改整個頁面的大小,則必須單獨更改每個元素的字體大小。
  • 學習CSS了解單位em和px的區別
    平時都是用px來定義字體,所以無法用瀏覽器字體放大的功能,而國外大多數網站都可以在IE下使用。因為1、IE無法調整那些使用px作為單位的字體大小;2、國外的大部分網站能夠調整的原因在於其使用了em作為字體單位;3、Firefox能夠調整px和em,但是96%以上的中國網民使用IE瀏覽器(或內核)。px像素(Pixel)。相對長度單位。
  • 全面掌握CSS基本知識點
    嵌套塊元素垂直邊距合併,當父級元素沒有設置border、padding的情況下,父子元素的margin邊距會合併,其取值為較大值css3的新特性答案解析常用css3新特性:動畫屬性animation、彈性布局盒子、顏色設置支持rgba、媒體查詢@media、盒子屬性定義、形狀轉換transform、text的相關屬性(超出內容換行、超出內容展示形式)div{
  • 迷你世界:彩色字體運用一覽,超炫酷的閃爍文字輕鬆搞定!
    對於萌新玩家來說,彩色字體總是如同傳送門一般神秘的存在,玄妙又費解。我們羨慕著小夥伴在冒險模式裡樹立的五顏六色的告示牌,也憧憬著創作大神地圖裡可以閃爍的螢光文字。而自己卻只能敲出枯燥的白色文字。其實,想要敲出這些特殊的字體是需要一些特定指令的哦,只要熟悉了這些指令看似複雜的彩色文字大家便能輕鬆掌握了。關於文字變色不同於可以直接使物品改變顏色的彩蛋槍,我們需要依靠特殊的前綴指令來使顏色產生變化。而最簡單的變色指令便是「#+指定顏色英文首字母大寫」的格式了。
  • CSS常考知識點
    2.2 布局常用單位面試官:請列舉一下我們css布局常用的單位及區別(基礎題)px:絕對單位,頁面按精確像素展示%:相對單位,根據父容器進行百分比計算em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size
  • 中文是表意文字,沒有字幕特別容易產生歧義,PR如何創建文本字幕
    使用輸入工具在「字幕」面板的編輯窗口的任意位置單擊,即可輸人相應文字,從而創建水平文本字幕。此外,使用區域輸入工具在「字幕」面板的編輯窗口中繪製文本框後,輸人文字,可以創建多行水平文本字幕,如圖 1所示。在輸入文本內容的過程中,按(Enter〉鍵可以使文字內容另起一行。
  • HTML5+CSS+JS時間
    /css/page.css"type="text/css"rel="stylesheet"></head><body><divclass="Scanner"><h2>博客頁面登錄系統</h2><form><!
  • 一鍵就能調文字大小?Word當中你所不知的快捷鍵
    「Ctrl+數字」快速設置行距  行間距經常會用到,但傳統的對話框調整太繁瑣。其實經常用到的行間距也就那麼幾種,不妨用快捷鍵來試一試,「Ctrl+1代表單倍行距、Ctrl+2代表2倍行距、Ctrl+5代表1.5倍行距」,簡單快捷!
  • 文檔編輯的基本操作,字體、段落、紙張、頁邊距的設置
    上一期,我們分享了如何快速錄入文字的技巧,不管你的普通話標不標準,會不會說,都沒有關係,你說方言也沒問題,都能讓你快速錄入文字,節省你大量的時間。本期我們來聊聊錄入文本後的文檔設置方面的事,比如,想換個字體; 在哪能找到漂亮的字體; 如何設置段落設置; 如何設置紙張的大小;如何調節紙張的頁邊距等等問題。大家來看看吧。
  • AI第四課:畫筆工具和文字工具
    拖動改變字體的大小。文字>轉換區域文本區域文本工具:選中拖出一個框。拖動改變行,顯示不完全顯示紅色。文字>轉換點文本區域文字工具:必須需要有路徑,放在形狀的邊上單擊即可路徑文字工具:要鋼筆創建路徑,沒有封閉直排文字工具:文字》文字方向>直排、水平直排區域文字工具、直排路徑工具裝飾文字工具:對單個文字進行操作文字字符面板【Ctrl+T】可以對基本功能操作,選中對整體文字操作對文字的字體、大小、粗細、間距、行距、插入空格行距:Alt+上下鍵字距:Alt+左右鍵注意標準羅馬對齊方式需要注意和直排內橫排段落文本面板
  • 全PS實現金屬效果3d字體
    但是為了照射出字體的體積感,側面使用了較強的光源。整體作品投影柔和。結構方面,整體字體側面厚度上擁有一個凹陷的設計,而其中「新說唱」的文字有一圈金屬外框。這裡再次聲明,在臨摹之前的觀察分析,相當重要!!