iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
0
Modern Web

挑戰 CSS 30 天系列 第 10

day10_text-align&text-decoration

  • 分享至 

  • xImage
  •  

text-align 屬性是用來設定文字是如何對齊。可能的值包括:
left: 靠左對齊
right: 靠右對齊
center: 向中間對齊
justify: 左右對齊

text-decoration 屬性是用來設定文字上有什麼裝飾。可能的值包括:
underline: 文字下加上一條線。
overline: 文字上加上一條線。
line-through: 文字中間加上一條線劃過去。

範例如下:

<!DOCTYPE html>
<html>
<head>
  <title>CSS text-align&text-decoration</title>
  <meta charset="utf-8">
  <style type="text/css">
	#p1{
		text-align:left;
	}
	#p2{
		text-align:right; 
	}
	#p3{
		text-align:center; 
	}
	#p4{
		text-align:justify; 
	}
	#p5{
		text-decoration:underline; 
	}
	#p6{
		text-decoration:overline; 
	}
	#p7{
		text-decoration:line-through; 
	}
  </style>
</head>
<body>
    <p id="p1">靠左對齊</p>
	<p id="p2">靠右對齊</p>
	<p id="p3">向中間對齊</p>
	<p id="p4">左右兩邊都對齊</p>
	<p id="p5">文字下加一條線</p>
	<p id="p6">文字上加上一條線</p>
	<p id="p7">文字中間加上一條線劃過去</p>
</body>
</html>

上一篇
day9_letter-spacing&line-height
下一篇
day11_text-indent&text-transform&word-spacing
系列文
挑戰 CSS 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言