CSS基礎-文字屬性和文本屬性

文字屬性

  • font-style
  • font-weight
  • font-size
  • font-family

font-style作用

  • 規定文字樣式

font-style格式

font-style:italic;

取值

  • normal:正常的,默認值
  • italic:傾斜的

font-weight作用

  • 規定文字粗細

font-weight格式

font-weight:bold;

取值

  • 單詞取值
    • lighter:細線,默認值
    • bold:加粗
    • bolder:比加粗還要粗
  • 數字取值
    • 100-900之間整百的數字

font-size作用

  • 規定文字大小

font-size格式

font-size:10px;

取值

  • px(像素 pixel)

font-family作用

  • 規定文字字體

font-family格式

font-family:"字體";

取值

  • 各種字體名稱

注意點

  • 取值是中文時, 需要用雙引號或者單引號括起來
  • 設置的字體必須是用戶電腦里面已經安裝的字體
  • 如果設置的字體不存在, 那么系統會使用默認的字體來顯示,即宋體
  • 如果設置的字體不存在, 而我們又不想用默認的字體,可以給字體設置備選方案,格式:font-family:"字體1", "備選方案1", ...;
  • 如果想給界面中的英文單獨設置字體, 那么英文的字體必須寫在中文的前面(因為中文字體, 里面都包含了英文,但是英文字體, 里面都沒有包含中文)

文字屬性縮寫

font: style weight size family;

注意點

  • 在這種縮寫格式中style和weight屬性值不僅可以交換位置,而且可以省略
  • 在這種縮寫格式中size和family屬性值不能省略,size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最后

文本屬性

  • text-decoration
  • font-align
  • font-indent

text-decoration作用

  • 給文本添加裝飾

text-decoration格式

text-decoration:underline;

取值

  • underline:下劃線
  • line-through:刪除線
  • overline:上劃線
  • none:什么都沒有, 最常見的用途就是用于去掉超鏈接的下劃線

text-align作用

  • 設置文本水平對齊方式

text-align格式

text-align:center;

取值

  • left:水平靠左,默認值
  • center:水平居中
  • right:水平靠右

text-indent作用

  • 設置文本縮進

text-indent格式

text-indent:2em;

取值

  • 2em, 其中em是單位, 一個em代表縮進一個文字的寬度
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容