字體大小
-
font-size 屬於設置字體大小 屬性值有相對長度單位、絕對長度單位 相對長度單位比較常用 一般推薦使用
見下表:
一般常用px進行表示字體的大小,另外也有百分比的使用方式大家只要記住最常用的方式即可 記得一定要帶單位px或em
字體
font-family 常用字體有宋體 微軟雅黑....記得帶上雙引號
例如: font-family: "宋體";
字體粗細
font-weight 用於定義字體的粗細 屬性值有:normal、bold、bolder、lighter;也可以用數字代替100-900(100的整數倍)
數字 400 等價於 normal,而 700 等價於 bold
字體風格
font-style 屬性用於定義字體風格,像設置斜體、傾斜或正常字體,屬性值如下:
normal:默認值,瀏覽器會顯示標準的字體樣式。
italic:瀏覽器會顯示斜體的字體樣式。
oblique:瀏覽器會顯示傾斜的字體樣式。(傾斜字體使用比較少)
Font綜合
如果一個元素標籤設置多個font的屬性 會使得代碼冗餘,不方便閱讀,我們也可以使用連寫
具體語法順序如下:
選擇器{font: font-style font-wei**ght font-size/line-height font-family;}
注意:其中不需要設置的屬性可以省略(取默認值),但必須保留font-size和font-family屬性,否則font屬性將不起作用。
下邊是一個小例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
/*font-family: "微軟雅黑";*/
font-family: "microsoft yahei", Arial;
/*font-family: Arial;*/
}
p {
font-size: 16px; /*千萬別忘了帶px 單位*/
line-height: 28px; /* 行高 行與行之間的距離*/
text-indent: 2em; /*段落首行縮進2個字 em 也是一個單位 1em 就是一個字的距離 */
}
a {
/*font-weight: bold; 字體加粗*/
font-weight: 700; /* 700 沒有單位 == bold */
}
h1 {
/*font-weight: normal; 讓粗體不加粗思密達*/
font-weight: 400; /*讓粗體不加粗思密達 400 == normal 建議用數值*/
text-align: center; /*讓h1 裏面的文字水平居中*/
}
em {
color: skyblue;
font-style: normal; /*讓斜體不傾斜*/
}
span {
/*color: #ff0000;*/
color: #FDD000;
}
div {
text-align: center;
}
.nub {
color: #f00;
font-weight: 400; /*不加粗*/
}
</style>
</head>
<body>
<h1>中乙隊賽前突然換帥仍勝毅騰 高原黑馬欲阻擊舜天</h1>
<div>2017年07月16日20:11 <span>新浪體育 評論中大獎</span> (<a href="#" class="nub">11</a>人蔘與) <a href="#">收藏本文</a></div>
<hr />
<p>新浪體育訊 7月16日是燕京啤酒<em>[微博]</em>2017中國足協盃第三輪比賽,麗江嘉雲昊隊主場迎戰哈爾濱毅騰隊的比賽日。然而就在比賽日中午,麗江嘉雲昊隊主帥李虎和另外兩名成員悄然向俱樂部提出了辭呈,並且收拾行囊準備離開。在這樣的情況下,麗江嘉雲昊隊不得不由此前的教練員楊貴東代理指揮了本場比賽。</p>
<p>
在昨日麗江嘉雲昊隊主帥李虎就缺席了賽前的新聞發佈會,當時俱樂部給出的解釋是李虎由於身體欠佳,去醫院接受治療。然而今日李虎出現在俱樂部時,向記者否認了這一說法,並且坦言已經向俱樂部提出了辭呈。</p>
<p>據記者多方瞭解的情況,李虎<em>[微博]</em>極其教練組近來在執教成績上承受了不小的壓力,在聯賽間歇期期間,教練組曾向俱樂部提出能夠多引進有實力的球員補強球隊,然而由於和俱樂部在投入以及成績指標上的分歧,李虎最終和教練組一起在比賽日辭職。</p>
<p>這樣的情況並沒有影響到麗江嘉雲昊隊<em>[微博]</em>的隊員,在比賽中麗江隊在主場拼的非常兇,在暴雨之中仍然發揮出了體能充沛的優勢,最終憑藉點球擊敗了中超球隊哈爾濱毅騰,順利晉級下一輪比賽。根據中國足協盃的賽程,麗江嘉雲昊隊將在本月23日迎戰江蘇舜天隊。</p>
</body>
</html>