1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
translation_of: 'Web/CSS/::first-letter'
---
<div>{{CSSRef}}</div>
<p> <strong><code>::first-letter</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementi</a> bir <a href="/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">blok seviyeli element</a>in ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).</p>
<pre class="brush: css no-line-numbers notranslate">/* Bir <p> elementinin ilk harfini seçiyoruz. */
p::first-letter {
font-size: 130%;
}</pre>
<p>Bir elementin ilk harfini belirlemek her zaman kolay değildir:</p>
<ul>
<li>İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), ve <em>other punctuation</em> (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.</li>
<li>Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki <code>IJ</code> gibi. Bu durumlarda, kalıbı oluşturan iki harfin de <code>::first-letter</code> sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki <a href="/en-US/docs/Web/CSS/::first-letter#Browser_compatibility">tarayıcı uyumluluk tablosu</a>na göz atın.)</li>
<li>{{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, <code>::first-letter</code> oluşturulan bu içeriğin ilk harfini kancalayacaktır.</li>
</ul>
<div class="note">
<p>CSS3 ile birlikte, <a href="/en-US/docs/Web/CSS/Pseudo-classes">sözde-sınıfları</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementler</a>den ayırmak amacıyla iki noktalı <code>::first-letter</code> gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, <code>:first-letter</code> yazımını da kabul ediyorlar.</p>
</div>
<h2 id="İzin_verilen_nitelikler">İzin verilen nitelikler</h2>
<p><code>::first-letter</code> pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:</p>
<ul>
<li>Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}</li>
<li>Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}</li>
<li>Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
<li>Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
<li>Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.</li>
<li>{{ cssxref("color") }} niteliği</li>
<li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer <code>float</code> niteliğine <code>none</code> değeri atanmışsa) CSS nitelikleri</li>
</ul>
<h2 id="Söz_dizimiSyntax">Söz dizimi(Syntax)</h2>
{{csssyntax}}
<h2 id="Örnekler">Örnekler</h2>
<h3 id="Basit_drop-capSatırdan_taşan_büyük_harf">Basit drop-cap(Satırdan taşan büyük harf)</h3>
<p>Bu örneğimizde <code><h2></code> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için <code>::first-letter</code> sözde elementini kullanacağız</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><h2>My heading</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}</pre>
<h4 id="Sonuç">Sonuç</h4>
<p>{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}</p>
<h3 id="Özel_noktalama_işaretleri_ve_Latin_alfabesinde_bulunmayan_karakterler_üzerindeki_etki">Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki</h3>
<p>Aşağıdaki örnek, <code>::first-letter</code> sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. </p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">p::first-letter {
color: red;
font-size: 150%;
}</pre>
<h4 id="Sonuç_2">Sonuç</h4>
<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
<td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td>
<td>{{ Spec2('CSS3 Text Decoration')}}</td>
<td>Allows the use of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph <code>IJ</code>).</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Initial definition, using the one-colon syntax.</td>
</tr>
</tbody>
</table>
<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2>
<div>
<p>{{Compat("css.selectors.first-letter")}}</p>
</div>
<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2>
<ul>
<li>{{cssxref("::first-line")}}</li>
</ul>
|
