與文本編排有關的CSS屬性設置

2021-01-07 瑩潔T7r

與字體相關的屬性包括字體族、文本大小、粗細、字體風格、行高等。

1、font-family:設置字體族。

格式為font-family:字體1,字體2,……,通用字體族|inherit。

通用字體族,是指一類相似的字體。W3C的CSS規則規定,要指定一個通用字體族,避免客戶端沒有安裝指定字體時能使用本機上的通用字體族中的字體。該屬性及其值的涵義如下圖

2、font-size:設置文本的大小。該屬性及其值的涵義如下圖

2、font-size:設置文本的大小。該屬性及其值的涵義如下圖

3、font-weight:設置文本加粗。該屬性及其值的涵義如下圖

4、font-style:可設置字體是正常還是斜體。該屬性及其值的涵義如下圖

5、line-height:設置文本的行高,它是指上下文本行的基線之間的垂直距離。其屬性及其值的涵義如下圖

6、字體屬性font:是字體設置的簡寫形式,其格式及解釋如下:

其中,用[]括住的屬性是可選的,而font-size和font-family是必須要寫的兩個屬性,其他屬性若不寫,則網頁將使用它們對應的默認值。另外,font-size/line-height必須用/組成一個,不能分開寫。例如:

這段CSS設置了字號為12像素,2倍行距,字體族為arial 和arial black。

7、字體顏色color屬性:

8、text-align屬性:設置文本的水平對齊方式。其值有三,分別是左對齊left(默認)、居中對齊center、右對齊right。

9、首行縮進屬性text-indent:其屬性值及涵義見下圖。

10、文本修飾屬性text-decoration:用來設置文本是否帶有下劃線或刪劃線等,其值及涵義如下圖:

11、字符間距屬性letter-spacing:設置字符與字符之間的間隔,正值是拉寬字符間距,負值是縮小字符間距。其值及涵義如下圖:

12、字間距屬性word-spacing:設置單詞與單詞之間的間隔。該屬性對包含兩個詞以上的英文有作用,對漢字是沒有作用的。

例如,定義一種文本樣式,其字體族為「黑體,宋體,新宋體」,字體粗細為500,斜體,大小16像素,行距26像素,紅色,帶下劃線,則代碼應寫成下圖所示:

以上是我總結的與文本樣式相關的CSS屬性及其值的解釋,希望對大家的學習有所幫助

相關焦點

  • 黑馬程式設計師:css文本如何設置?
    學習目標:css 文本如何設置1、文本顏色:text-indent 屬性:例:p {background-color: gray;}a) 使用負值:例:{text-indent: -5em;}注意:在為 text-indent
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表,瀏覽器會使用它可識別的第一個值。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • css3必須了解的知識 css中常見的樣式屬性和值
    繼續上一篇文章的繼續了解css的基礎知識 全棧學習筆記,不同平臺不同的我!css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性內外邊距滑鼠光標屬性列表樣式定位屬性浮動和清除浮動滾動條樣式顯示和隱藏字體與顏色font-family:微軟雅黑;/*字體名稱(類型):微軟雅黑,黑體,楷體,宋體*/font-size: 20px;/*字體大小*/font-weight: 600;/*字體加粗*/font-style: italic
  • 常見的CSS樣式之單行文本固定width溢出文字用省略號替換顯示
    今天小菌為大家介紹CSS樣式之單行文本固定width溢出文字用省略號替換顯示的用法,今天的乾貨是在css手冊裡無法看到的哦!純粹是前端的前輩們在工作實戰項目中積累下的經驗。首先我們會用到的四個CSS樣式屬性:width: xxx px; //設置段落的高度和寬度。
  • 有趣的css屬性content
    今天說一個非常有趣的css屬性content,可能很多人都會說,這個屬性誰會不知道,對於一些老手來說,這個屬性確實可能是經常會用到,但是總會有你沒有發現的地方
  • CSS基礎—CSS樣式如何應用到HTML元素
    一種方式是利用HTML元素的style屬性,樣式表作為style屬性的值,該方式也稱為行內樣式;一種方式是將樣式表放置在HTML網頁文檔head標籤內,每個樣式表賦予一個名稱,然後在HTML元素中通過class屬性引入樣式表,該方式也稱為內部樣式;再一種方式是單獨將樣式表寫入到一個文件,文件的擴展名為css,然後通過HTML的link標籤連結外部樣式表文件,在HTML元素中通過class屬性引入樣式表文件中的樣式表
  • 前端進階:css必知的幾個底層知識和技巧
    問題學習法就是強調有意注意有關解決問題的信息,使學習有了明確的指向性,從而提高學習效率。在介紹完問題學習法之後,進入我們今天的主題,接下來我會介紹css的一些底層的知識的現象,藉此來讓大家對css有更深入的理解。
  • HTML技巧篇:如何讓單行文本以及多行文本溢出顯示省略號(…)
    核心css語句:1、overflow:hidden; (顧名思義超出限定的寬度就隱藏內容)2、white-space: nowrap; (設置文字在一行顯示不能換行)3、text-overflow: ellipsis;(規定當文本溢出時顯示省略符號來代表被修剪的文本)我們具體的代碼效果演示就如下圖所示:(設置ul寬度為300,超出的文字內容讓其自動隱藏並顯示
  • Web前端學習第20課,如何為HTML元素編寫CSS樣式表
    本節課主要有關CSS兩個方面的問題:css樣式規則怎麼寫以及寫在哪裡的問題。1.CSS的寫法規則CSS 寫法規則由兩部分構成:選擇器,以及一條或多條屬性聲明。選擇器是您需要設置樣式的 HTML 元素。每條聲明由屬性和值組成。屬性是您希望設置元素哪方面的樣式,比如文本的顏色color,每個屬性有一個具體的取值。屬性和值之間用冒號分開。
  • css樣式如何美化表格和邊框的外觀?
    如今大家習慣了使用DIV+CSS布局頁面,其實table+css曾經也是流行的頁面布局方式。下面深圳市博納網絡信息技術有限公司介紹css樣式如何美化表格和邊框的外觀。1.表格邊框:使用border屬性可用設置表格的邊框。例如下面這段代碼,使用border屬性設置了<table>、<bh>和<td>的邊框屬性,效果如圖。2.摺疊邊框:使用border-collapse屬性設置是否表格邊框摺疊為單一邊框。
  • Python學習第235課——html引入css的4種方式
    比如我們要把整個網站的每一個網頁的h標籤設置成一個樣式、每一個網頁的p標籤設置成一個樣式,每一個網頁的a標籤都設置成一個統一的樣式(比如每一個頁面上的每一個a標籤裡面的字體,我們都要讓它顏色、字體大小相同),那麼如果我們只能用內嵌式的話,就要在每一個html文件中<head>標籤的<style>標籤中對css逐一重複的進行修改。
  • css3 box-sizing屬性筆記
    box-sizing屬性定義及用法box-sizing屬性是css3中新增的屬性,允許你以某種方式定義某些元素,以適應指定區域(假如您需要並排放置兩個帶邊框的框,可通過將 box-sizing屬性設置為"border-box",這可令瀏覽器呈現出帶有指定寬度和高度的框,並把邊框和內邊距放入框中
  • CSS樣式表和選擇器
    如果在sublime中輸入<st或者<style然後按tab鍵,可以自動生成的格式如下:(建議) <style type="text/css"></style>type表示「類型」,text就是「純文本」,css也是純文本。
  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    1、行內樣式表行內樣式表是在HTML標籤內部,通過style屬性的值來廟宇CSS樣式,格式如下圖:例如,為一段文本設置行內樣式表,樣式例如,為一段文本設置行內樣式表,樣式分別為文字顏色、文字下劃線、文字大小和加粗,其代碼和效果如下圖:這種方式的樣式表應用,其缺點是樣式代碼不能重複使用,所以一般不建議使用
  • CSS中常用的字體樣式屬性
    font-size:設置文本的字體大小選擇器:{font-size:15px;}此屬性可以使用相對長度單位,也可以使用絕對長度單位。二者之間相對長度單位比較常用,相對長度種px(像素)單位使用較多。字體樣式連寫:學過了上面的幾個屬性之後我們發現如果一個標籤這些樣式都要設置的話寫起來會很繁瑣,代碼冗餘性太強,下面我們來學習一下簡單的設置方式。
  • Web前端學習第19課,簡單了解CSS層疊樣式表
    1.為什麼使用樣式表大家通過前面的學習,已經了解了設置一個元素的樣式可以使用如下三種形式:(1) 通過標籤的屬性來設置。例如,設置下面段落字體的顏色屬性樣式為紅色。<p fontcolor=」red」>這是一個段落</p>。
  • CSS,給你點「顏色「看看
    HTML頁面哪些屬性可以設置顏色?CSS顏色體系中那些被忽略的王者成員總結閒話少說,我們開門見山:一、CSS顏色體系包含哪些成員?一張圖。幾點說明:顏色關鍵字,CSS3中新增147個顏色關鍵字,詳情請見www.w3school.com.cn/cssref/css_…HEX,格式如#RRGGBB,其中RR、GG、BB取值00-
  • 這裡有一些CSS中文排版技巧,值得收藏!
    文字排版 字體 我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。 對齊 想為塊狀元素中的文本、圖片設置居中樣式嗎?
  • CSS學習筆記
    注釋:/*表示開始,*/表示結束引入方式:link標籤<link rel="stylesheet" type="text/css" href="文件路徑" />rel即relative的縮寫,取值固定type屬性取值也固定
  • 如何在HTML文檔中使用CSS樣式表?
    但我們無法重用此方法,因此可重用性是此方法的缺點。如果使用內聯樣式將CSS添加到HTML文檔中,可以參考以下步驟。步驟1:首先,在文本編輯器中輸入HTML代碼,或者打開現有的HTML文件。<!這些樣式表定義在<head>開始和結束標籤之間。如果我們想使用「內部樣式表」將CSS添加到我們的Html文檔中,請參考以下步驟。步驟1:首先,在文本編輯器中輸入HTML代碼,或者打開現有的HTML文件。步驟2:將<style>標籤放置在<head>標籤的開始和結束之間,在<title>標籤之後。