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

尹成發表於2018-11-09
CSS

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 設定文字水平居中

 

相關文章