001---css樣式規則及css字型樣式

舒眉發表於2018-04-17
CSS

一、css產生的原因

為了解決混亂的樣式結構。

二、css的樣式規則


例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		h1 {
			color: red;
		}			
	</style>
</head>
<body>
	<h1>我變成紅色</h1>
</body>
</html>

效果：


詳細規則：


三、css字型樣式font

1. font-size：字號大小

可以使用相對長度，也可以使用絕對長度。推薦使用px（畫素）


例項：

<p>字號大小</p>
<style>
	p {
		font-size: 40px;
	}			
</style>

效果圖前後對比：


2.  字型

①font-family ：字型

設定字型，如宋體、微軟雅黑、arial等字型，不用刻意背會。

注意事項：


部分程式碼（其他程式碼與上相同）：

font-family: "宋體";

效果圖前後對比（前圖預設字型）

         

如果是字型有多個，可以如此：

font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB";

這種情況下，不會一下子用所有的字型，有相當於查詢的效果，如果可以用微軟雅黑，其他就不執行，如果沒有，則接著看其他的字型有沒有，如果都沒有，則用預設的字型。

②CSS Unicode字型（不用記憶）


3. 字型粗細font-weight

語法：

①

font-weight: normal 或 bold 或 bolder 或 lighter 或 <integer>（100/200/300/.../900）;

②與上面對應相等

font-weight: 400 或 700 或 比bold更重 或 比bold較輕 或 用數字表示粗細（100/200/300/.../900）

更習慣於用數字表示。

4.  font-style：斜體

語法：

font-style:normal|italic|oblique;

normal：預設值，不傾斜

italic：斜體

oblique：傾斜（不常用）

5. 字型綜合設定

語法：

font: font-style font-weight font-size/line-height font-family;
注意：使用font屬性的時候，必須按照上面的順序，中間用空格隔開。其中不需要設定的屬性可以省略，但必須保留font-size和font-family屬性，否則font不起作用。


相關文章