CSS字型屬性和文字屬性詳解

Joerrot發表於2019-03-10
CSS

CSS單位

html中的單位只有一種，那就是畫素px，所以單位是可以忽略的，但是在CSS中的單位則不可忽略，因為沒有預設單位。

絕對單位： 1 in=2.54cm=25.4mm=72pt=6pc。

各種單位的含義：

  • in：英寸Inches (1 英寸 = 2.54 釐米)

  • cm：釐米Centimeters

  • mm：毫米Millimeters

  • pt：點Points，或者叫英鎊 (1點 = 1/72英寸)

  • pc：皮卡Picas (1 皮卡 = 12 點)

相對單位：

  • px：畫素（為什麼說畫素px是一個相對單位呢，這也很好理解。比如說，電腦螢幕的的尺寸是不變的，但是我們可以讓其顯示不同的解析度，在不同的解析度下，單個畫素的長度肯定是不一樣的啦。）
  • em：印刷單位相當於12個點 
  • %：百分比，相對周圍的文字的大小

字型屬性

行高：所有行，都有行高。盒子模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上的。

如：

為了嚴格保證字在行裡面居中，一般有一個約定： 行高、字號，一般都是偶數。這樣可以保證，它們的差一定偶數，就能夠被2整除。

小技巧：如果一段文字只有一行，如果此時設定行高 = 盒子高，就可以保證單行文字垂直居中。這個很好理解。

上面這個小技巧，只適用於單行文字垂直居中，不適用於多行。如果想讓多行文字垂直居中，還需要計算盒子的padding。計算方式如下：

字型屬性

css樣式中，字型屬性有以下幾種：

p{
	font-size:50px; 		/*字型大小*/
	line-height: 30px;      /*行高*/
	font-family:"幼圓","黑體"; 	/*字型型別：如果沒有幼圓就顯示黑體，沒有黑體就顯示預設*/
	font-style:italic ;		/*italic表示斜體，normal表示不傾斜*/
	font-weight:bold;	/*粗體：屬性值寫成bolder也可以，也可以直接使用數值表示*/
	font-variant:small-caps;  /*小寫變大寫*/
}

上面這些屬性中，字號、行高、字型這三個屬性是最常見的，

是否加粗屬性以及上面這三個屬性，我們可以連寫：（是否加粗、字號 font-size、行高 line-height、字型 font-family）

格式：

	font: 加粗 字號/行高/ 字型

舉例：

	font: 400 14px/24px “宋體”;

PS：400是nomal，700是bold。

上面這幾個屬性可以連寫，但是有一個要求，font屬性連寫至少要有字號和字型，否則連寫是不生效的（相當於沒有這一行程式碼）。

行高可以用百分比，表示字號的百分之多少。

一般來說，百分比都是大於100%的，因為行高一定要大於字號。

比如說， font:12px/200% “宋體”等價於font:12px/24px “宋體”。200%可以理解成word裡面的2倍行高。

反過來， font:16px/48px “宋體”;等價於font:16px/300% “宋體”。

font-family屬性說明：

（1）網頁中不是所有字型都能用，因為這個字型要看使用者的電腦裡面裝沒裝，比如你設定：

	font-family: "華文彩雲";

上方程式碼中，如果使用者電腦裡面沒有這個字型，那麼就會變成宋體。

頁面中，中文我們只使用：微軟雅黑、宋體、黑體。英文使用：Arial、Times New Roman。頁面中如果需要其他的字型，就需要切圖。

（2）為了防止使用者電腦裡，沒有微軟雅黑這個字型。就要用英語的逗號，隔開備選字型。如下：（可以備選多個）

	font-family: "微軟雅黑","宋體";

上方程式碼表示：如果使用者電腦裡沒有安裝微軟雅黑字型，那麼就是宋體。

（3）我們須將英語字型放在最前面，這樣所有的中文，就不能匹配英語字型，就自動的變為後面的中文字型：

	font-family: "Times New Roman","微軟雅黑","宋體";

上方程式碼的意思是，英文會採用Times New Roman字型，而中文會採用微軟雅黑字型（因為美國人設計的Times New Roman字型並不針對中文，所以中文會採用後面的微軟雅黑）。比如說，對於smyhvae哈哈哈這段文字，smyhvae會採用Times New Roman字型，而哈哈哈會採用微軟雅黑字型。

可是，如果我們把中文字型寫在前面：(錯誤寫法)

	font-family: "微軟雅黑","Times New Roman","宋體";

上方程式碼會導致，中文和英文都會採用微軟雅黑字型。

（4）所有的中文字型，都有英語別名。

微軟雅黑的英語別名：

	font-family: "Microsoft YaHei";

宋體的英語別名：

	font-family: "SimSun";

於是，當我們把字號、行高、字型這三個屬性合二為一時，也可以寫成：

	font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";

文字屬性

CSS樣式中，常見的文字屬性有以下幾種：

  • letter-spacing: 0.5cm ; 單個字母之間的間距
  • word-spacing: 1cm; 單詞之間的間距
  • text-decoration: underline; 字型修飾：underline下劃線、line-through中劃線、overline上劃線
  • text-transform: lowercase; 單詞字型大小寫。uppercase大寫、lowercase小寫
  • color:red; 字型顏色
  • text-align: center; 在當前容器中的對齊方式。屬性值可以是：left、right、center（在當前容器的中間）、justify
  • text-transform: lowercase; 單詞的字型大小寫。屬性值可以是：uppercase（單詞大寫）、lowercase（單詞小寫）、capitalize（每個單詞的首字母大寫）

詳見下面圖片：

列表屬性

ul li{
	list-style-image:url(images/2.gif) ;  /*列表項前設定為圖片*/
	margin-left:80px;  /*公有屬性*/
}

另外還有一個簡寫屬性叫做list-style，它的作用是：將上面的多個屬性寫在一個宣告中。

我們來看一下list-style-image屬性的效果：

 

給列表前面的圖片加個邊距吧，不然顯示不完整：

詳見下面圖片：

overflow屬性：超出範圍的內容要怎麼處理

overflow屬性的屬性值可以是：

  • auto：瀏覽器自己解決。在必需時裁切物件多餘的內容或顯示滾動條。一般採用這個屬性值。
  • visible：預設值。多餘的內容不剪下也不新增滾動條，會全部顯示出來。
  • hidden：不顯示超過物件尺寸的內容。 物件將以包含物件的 window 或 frame 的尺寸進行裁切，並且 clip 屬性設定將失效。
  • scroll：總是顯示滾動條。

針對上面不同的屬性值，我們來看一下效果，舉例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">

		div{
			width: 100px;
			height: 100px;
			background-color: #00cc66;
			margin-right: 100px;
			float: left;
		}

		#div1{
			overflow:auto;/*超出的部分讓瀏覽器自行解決*/
		}
		#div2{
			overflow:visible;/*超出的部分會顯示出來*/
		}

		#div3{
			overflow:hidden;/*超出的部分將剪下掉*/
		}

	</style>

 </head>

 <body>

	<div id="div1">其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實並不難 是你太悲觀 隔著一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案</div>
	<div id="div2">其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實並不難 是你太悲觀 隔著一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案</div>
	<div id="div3">其實很簡單 其實很自然 兩個人的愛由兩人分擔 其實並不難 是你太悲觀 隔著一道牆不跟誰分享 不想讓你為難 你不再需要給我個答案</div>
 </body>

</html>

滑鼠的屬性cursor

滑鼠的屬性cursor有以下幾個屬性值：

  • auto：預設值。瀏覽器根據當前情況自動確定滑鼠游標型別。
  • pointer：IE6.0，豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。
  • hand：和pointer的作用一樣：豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。

另外還有以下的屬性：（不用記，需要的時候查一下就行了）

  • all-scroll :　 IE6.0 有上下左右四個箭頭，中間有一個圓點的游標。用於標示頁面可以向上下左右任何方向滾動。
  • col-resize :　 IE6.0 有左右兩個箭頭，中間由豎線分隔開的游標。用於標示專案或標題欄可以被水平改變尺寸。
  • crosshair :　 簡單的十字線游標。
  • default :　 客戶端平臺的預設游標。通常是一個箭頭。
  • hand :　 豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。
  • move :　 十字箭頭游標。用於標示物件可被移動。
  • help :　 帶有問號標記的箭頭。用於標示有幫助資訊存在。
  • no-drop :　 IE6.0 帶有一個被斜線貫穿的圓圈的手形游標。用於標示被拖起的物件不允許在游標的當前位置被放下。
  • not-allowed :　 IE6.0 禁止標記(一個被斜線貫穿的圓圈)游標。用於標示請求的操作不允許被執行。
  • progress :　 IE6.0 帶有沙漏標記的箭頭游標。用於標示一個程式正在後臺執行。
  • row-resize :　 IE6.0 有上下兩個箭頭，中間由橫線分隔開的游標。用於標示專案或標題欄可以被垂直改變尺寸。
  • text :　 用於標示可編輯的水平文字的游標。通常是大寫字母 I 的形狀。
  • vertical-text :　 IE6.0 用於標示可編輯的垂直文字的游標。通常是大寫字母 I 旋轉90度的形狀。
  • wait :　 用於標示程式忙使用者需要等待的游標。通常是沙漏或手錶的形狀。
  • *-resize :　 用於標示物件可被改變尺寸方向的箭頭游標。
  •                  w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
  • url ( url ) :　 IE6.0 使用者自定義游標。使用絕對或相對 url 地址指定游標檔案(字尾為 .cur 或者 .ani )。

濾鏡

這裡只舉一個濾鏡的例子吧。比如說讓圖片變成灰度圖的效果，可以這樣設定濾鏡：

<img src="3.jpg" style="filter:gray()">

舉例程式碼：

 <body>
	<table>
		<tr>
			<td>原始圖片</td>
			<td>圖片加入黑白效果</td>
		</tr>
	<tr>
		<td><img src="3.jpg"></td>
		<td><img src="3.jpg" style="filter:gray()"></td> /*濾鏡：設定圖片為灰白效果*/
	</tr>
	</table>
 </body>

效果如下：（IE有效果，google瀏覽器無效果）

導航欄的製作

現在，我們利用float浮動屬性來把無序列表做成一個簡單的導航欄吧，效果如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">
		ul{
			list-style: none;/*去掉列表前面的圓點*/
			width: 420px;
			height: 60px;
			background-color: black;/*設定整個導航欄的背景為灰色*/
		}

		li{
			float: left;/*平鋪*/
			margin-right: 30px;
			margin-top: 16px;
		}

		a{
			text-decoration: none;/*去掉超鏈的下劃線*/
			font-size: 20px;
			color: #BBBBBB;/*設定超鏈的字型為黑色*/
			font-family:微軟雅黑;
		}

	</style>

 </head>
 <body>
	<ul>
		<li><a href="">部落格園</a></li>
		<li><a href="">新隨筆</a></li>
		<li><a href="">聯絡</a></li>
		<li><a href="">訂閱</a></li>
		<li><a href="">管理</a></li>

	</ul>
 </body>
</html>

 

相關文章