1.5 常用CSS樣式1:文字樣式

尹成發表於2018-11-09

css基本語法及頁面引用

css基本語法

css的定義方法是:

選擇器 { 屬性:值; 屬性:值; 屬性:值;}

選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設定的樣式屬性每個屬性有一個或多個值。程式碼示例:

div{ width:100px; height:100px; color:red }

css頁面引入方法:

1、外聯式:通過link標籤,連結到外部樣式表到頁面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式:通過style標籤,在網頁上建立嵌入的樣式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、內聯式:通過標籤的style屬性,在標籤上直接寫樣式。

<div style="width:100px; height:100px; color:red ">......</div>

css文字設定

常用的應用文字的css樣式:

  • color 設定文字的顏色,如: color:red;
  • font-size 設定文字的大小,如:font-size:12px;
  • font-family 設定文字的字型,如:font-family:'微軟雅黑';
  • font-style 設定字型是否傾斜,如:font-style:'normal';設定不傾斜,font-style:'italic';設定文字傾斜
  • font-weight 設定文字是否加粗,如:font-weight:bold; 設定加粗 font-weight:normal設定不加粗
  • font 同時設定文字的幾個屬性,寫的順序有相容問題,建議按照如下順序寫: font:是否加粗 字號/行高 字型;如:font:normal 12px/36px '微軟雅黑';
  • line-height 設定文字的行高,如:line-height:24px;
  • text-decoration 設定文字的下劃線,如:text-decoration:none; 將文字下劃線去掉
  • text-indent 設定文字首行縮排,如:text-indent:24px; 設定文字首行縮排24px
  • text-align 設定文字水平對齊方式,如text-align:center 設定文字水平居中

 

相關文章