CSS基礎之本設置

        前篇博客對CSS的選擇器進行了一些總結,本次博客對文本的設置進行一個小小的總結。文本的設置又包括了字體的設置和文本的一些屬性的設置,

     字體的設置

        字體的設置又包括設置字體樣式、設置字體大小、設置字體粗細一級文字的樣式(如斜體)等。

      ------》font-family:指定字體

        font-family用於設置字體:例如宋體,楷體等等。語法格式如下:

p{
     font-family:"微軟雅黑";
}
或者

p{
     font-family:"Times New Roman",Georgia,Serif;
}

     font-family 可以把多個字體名稱作爲一個“回退”系統來保存。如果瀏覽器不支持第一個字體,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。

注意:

  • 各種字體之間必須使用英文狀態下的逗號隔開
  • 一般情況下如果有空格隔開的多個單詞組成的字體加引號
  • 儘量使用系統默認自帶字體,保證在任何用戶的瀏覽器中都能正確顯示
  • 最常見的幾個字體: body [font-family,” Microsoft YaHei‘’;tahoma, arial," Hiragino Sans GB"};

      ------》font-size:指定字體大小

        基本語法:

h1 {font-size:60px;}
h2 {font-size:40px;}

        font-size 值可以是絕對或相對值。

絕對值:

  • 將文本設置爲指定的大小
  • 不允許用戶在所有瀏覽器中改變文本大小(不利於可用性)
  • 絕對大小在確定了輸出的物理尺寸時很有用

相對大小:

  • 相對於周圍的元素來設置大小
  • 允許用戶在瀏覽器改變文本大小

注意

        如果您沒有規定字體大小,普通文本(比如段落)的默認大小是 16 像素 (16px=1em)。使用像素來設置字體大小。通過像素設置文本大小,可以對文本大小進行完全控制:

      ------》font-weight:指定加粗

        語法格式:

p{font-weight:normal;}
p{font-weight:bold;}
p{font-weight:900;}

        font-weight值得設定:font-weight設置爲400等同於設置爲normal,設置爲700等同於設置爲bold.

        ------》font-style

        可用於對字體設置斜體等。語法格式:

p{font-style:normal;}
p{font-style:italic;}
p{font-style:oblique;}

        ------》font-variant

        該屬性用於設置大寫字母的字體顯示。具體的語法格式如下:{ font-variant: normal 、small-caps、inherit: )其中的參數值分別表示默認值、顯示型大寫字母的字體、繼承

        ------》font複合屬性

        用於一次性設置元素字體的兩個或者更多的方面,似的代碼更簡潔。但是此複合屬性的運用有一定的使用順序。

        font-style---》font-variant----》font-weight----》font-size----》font-family

        如果沒有設置值得話系統會使用默認值。

屬性 表示 注意點
font-size 字號 常用單位px像素
font-fanily 字體 按照設計約定來設置字體
font-weight 字體粗細 注意:400是normal,700是bold,數字後面不跟單位
font-style 字體樣式 傾斜是italic,不傾斜是normal,工作中常用normal
font 字體連寫 此用法是有順序的,不能隨意更換位置,並且字號和字體必須同時出現

     文本的屬性

        文本的屬性包括:文本顏色(color)、對齊文本(text-align)、裝飾文本(text-decoration)、文本縮進(text-indent)和行間距(line-height)。

        ------》color

/*預定義顏色值*/
body
  {
  color:red;
  }
/*十六進制*/
h1
  {
  color:#00ff00;
  }
/*RGB代碼*/
p
  {
  color:rgb(0,0,255);
  }

        ------》對齊文本text-align(水平對齊)

 

            wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

        此設置只能設置文本的水平對齊方式而不能設置垂直方向對齊,垂直方向設置對齊需要另外一個設置:那就是設置文字行高=盒子高【line-height=盒子高】

        ------》裝飾文本text-decoration

        在設置鏈接下劃線的時候會涉及到這個屬性的使用。

       語法格式:

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

取值用法:

        ------》文本縮進text-indent

        經常用語設置文本的首航縮進字符的時候使用。

        語法格式:

p
  {
  text-indent:2em;
  }

        em是一個相對單位,就是當前元素一個文字的大小,如果當前元素沒有設置大小,就默認按照父元素的一個文字大小。

        ------》行間距line-height

        該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。

        line-height 與 font-size 的計算值之差(在 CSS 中成爲“行間距”)分爲兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章