支援CSS1 以上
CSS2 (:first-line).
CSS3 (::first-line).
用法：first-letter
說明：選擇字首 套用樣式
套用定義的tag元素的第一組文字的開頭字。
css定義：
套用p tag 裡的字首
p::first-letter {
font-size: 20px; 字型20像素
color: red; 字顏色red
background-color: yellow; 背景色 yellow
}
注意事項：
字首選擇器(first-letter) 限以下可套用：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
程式：
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 first-letter 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
p::first-letter{
font-size: 20px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>css基本定義 first-letter 套用樣式 1</p>
<div>
<p>css基本定義 first-letter 套用樣式 2</p>
</div>
</body>
</html>
圖1：
css定義：
套用div tag 裡的字首
div p::first-letter {
font-size: 20px; 字型20像素
color: red; 字顏色red
background-color: yellow; 背景色 yellow
}
注意事項：
程式：
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 first-letter 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
div p::first-letter{
font-size: 20px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>css基本定義 first-letter 套用樣式 1</p>
<div>
<p>css基本定義 first-letter 套用樣式 2</p>
<p>css基本定義 first-letter 套用樣式 3</p>
</div>
<p>css基本定義 first-letter 套用樣式 4</p>
</body>
</html>
圖1：
測試結束~
如果還不了解可參考：w3schools CSS Selector Reference
感謝~
其它文章
沒有留言:
張貼留言