CSS3：文字屬性

時間 2019-12-14

標籤 css3 css 文字屬性欄目 CSS 简体版

原文原文鏈接

文字屬性注意的細節：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    p {
        /*font-family: "unknow font","Microsoft Yahei";*/
        font-family: "Times New Roman","Microsoft Yahei";
    }
</style>
</head>
<body>
<!--
1：若是設置的字體不存在，那麼系統會使用默認的字體來顯示宋體
2：若是設置的字體不存在，而咱們又不想用默認的字體來顯示怎麼辦？
    能夠給字體設置備選方案：font-family: "unknow font","Microsoft Yahei";
3：若是想給中文和英文分別設置單獨的字體，怎麼辦？
    但凡是中文字體，裏面都包含了英文；但凡是英文字體，裏面都沒有包含中文
    也就是說中文字體能夠處理英文，而英文字體不能處理中文
    因此英文字體的設置要寫在中文字體設置的前面：font-family: "Times New Roman","Microsoft Yahei";

補充：在企業開發中最多見的字體有如下幾個：
中文：宋體 (SimSun)/黑體(SimHei)/微軟雅黑 (Microsoft YaHei)
英文："Times New Roman"/Arial
以上字體，在操做系統中默認就有
由於中文字體其實都有本身的英文名稱，因此是否是中文字體主要看能不能處理中文
-->
<p>ABC這是一個段落</p>
</body>
</html>

文字屬性的縮寫格式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    p {
        /*font-style:italic;
        font-weight:bold;
        font-size:10px;
        font-family:"Microsoft YaHei";*/
        font:italic bold 10px "Microsoft YaHei";
    }
</style>
</head>
<body>
<!--
    p {
        font-style:italic;
        font-weight:bold;
        font-size:10px;
        font-family:"Microsoft YaHei";
    }
    縮寫的格式爲：
    p {
       font:italic bold 10px "Microsoft YaHei";
    } 
注意點：
1：在縮寫格式中有的屬性值能夠省略，如：style , weight屬性
2：在縮寫格式中style和weight的位置能夠互換
3：size與family兩個屬性不能省略且位置不能互換，size屬性必定寫在family的前面
-->
<p>ABC這是一個段落</p>
</body>
</html>

文本相關屬性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    p {
        text-decoration:underline;
    }
    a {
        text-decoration: none;
    }
    .right {
        text-align: right;
    }
</style>
</head>
<body>
<!--
1：文本裝飾的屬性
    text-decoration:underline;
    該屬性的取值以下：
    underline：下劃線
    line-through：刪除線
    overline：上劃線
    none：常見用途就是去掉超連接的下劃線
2：文本水平對齊的屬性
    text-align: right;
    取值：
    right：右
    left：左
    center：居中
3：文本縮進的屬性
    text-indent: 2em
    取值：
    2em：em是單位，一個em表明縮進一個文字的寬度
    
-->

<u>這是帶下劃線的文字</u>
<s>這是帶刪除線文字</s>
<o>這是帶刪除線文字</o>
<p class="right">靠右對齊的文字</p>
<p>這是段落</p>
<a href="">超連接</a>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。