close

css基本定義 first-letter 元素屬性 套用樣式


支援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


感謝~

 




 






 















其它文章


arrow
arrow
    文章標籤
    CSS Selector first letter
    全站熱搜
    創作者介紹
    創作者 PG Levin Li 的頭像
    PG Levin Li

    程式開發學習之路

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄