diff options
Diffstat (limited to 'files/tr/öğren/css/styling_text')
-rw-r--r-- | files/tr/öğren/css/styling_text/fundamentals/index.html | 737 | ||||
-rw-r--r-- | files/tr/öğren/css/styling_text/index.html | 83 | ||||
-rw-r--r-- | files/tr/öğren/css/styling_text/styling_links/index.html | 453 | ||||
-rw-r--r-- | files/tr/öğren/css/styling_text/styling_lists/index.html | 436 | ||||
-rw-r--r-- | files/tr/öğren/css/styling_text/typesetting_a_homepage/index.html | 143 | ||||
-rw-r--r-- | files/tr/öğren/css/styling_text/web_fonts/index.html | 221 |
6 files changed, 2073 insertions, 0 deletions
diff --git a/files/tr/öğren/css/styling_text/fundamentals/index.html b/files/tr/öğren/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..0bf22d6921 --- /dev/null +++ b/files/tr/öğren/css/styling_text/fundamentals/index.html @@ -0,0 +1,737 @@ +--- +title: Temel metin ve yazı tipi biçimi +slug: Öğren/CSS/Styling_text/Fundamentals +tags: + - Acemi + - Aile + - Aralık + - Article + - Beginner + - CSS + - Ders + - Genişlik + - Guide + - Hizalama + - Kısa Tanım + - Metin + - Rehber + - Style + - Tarz + - Text + - Yazı Tipi + - aligment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p><span class="seoSummary">Bu derste, {{glossary("CSS")}} ile metin stilinde ustalaşma yolculuğuna başlayacağız.</span> Burada, yazı tipi genişliğini, ailesini, yazı tipi kısa tanımını, hizlamasını, satır/harf aralığını ve diğer efektleri de dahil omak üzere metin/yazı tipi stilinin tüm temellerini ayrıntılı olarak inceleyeceğiz.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="CSSde_metnin_stilini_belirlemeye_neler_dahildir">CSS'de metnin stilini belirlemeye neler dahildir?</h2> + +<p>HTML ve CSS ile yaptığın çalışmalarda zaten deneyimlemiş olacağın gibi, bir öğenin içindeki metin, öğenin içerik kutusunun içine yerleştirilir. İçerik alanının sol üstünde (veya RTL metin yönünde sağ üstte) başlar ve satırın sonuna doğru akar. Kutunun sınırına ulaştığında, bir sonraki satıra iner ve tüm içerik kutuya yerleştirilinceye kadar sonraki satıra devam eder. Metin içeriği etkili bir şekilde bir dizi satır içi öğe gibi davranır. Satırlar birbirlerine bitişik olarak yerleştirilir ve satır sonuna ulaşılmadıkça veya {{htmlelement("br")}} etikeytiyle karşılaşmadıkça satır kesmeleri(satır başı) oluşturulmaz.</p> + +<div class="note"> +<p><strong>Not</strong>: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce <a href="/tr/docs/Öğren/CSS/CSS_yapi_taslari/The_box_model">Kutu Modeli</a> dersimizi bir daha inceleyin.</p> +</div> + +<p>Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:</p> + +<ul> + <li><strong>Font stilleri</strong>: Metne uygulanan fontu etkileyen, hangi fontun uygulanacağını, ne kadar büyük olduğunu, kalınlığını, italik olup olmadığını gibi özellikler.</li> + <li><strong>Metnin mizanpaj stilleri</strong>: Metinin aralığını, satır/harf arasındaki boşluğunu ve metinin kutu içerisinde hizalanmasının ddeğiştirilmesi gibi özellikler.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: Bir öğenin içindeki metnin tek bir varlık olarak etkilendiğini unutmayın. Metni {{htmlelement("span")}} veya {{htmlelement("strong")}} gibi öğelerin içine almadıkça veya <a href="/tr/docs/Web/CSS/::first-letter">::first-letter</a>(bir öğenin içindeki metnin ilk harfi), <a href="/tr/docs/Web/CSS/::first-line">::first-line</a>(bir öğenin içindeki metnin ilk satırı) veya <a href="/tr/docs/Web/CSS/::selection">::selection</a>(imleç tarafından o anda seçilen kısmı) gibi sözde öğeleri kullanmadıkça, alt bölümleri seçemez ve bunlara stil uygulayamaz.</p> +</div> + +<h2 id="FontlarYazı_Tipleri">Fontlar(Yazı Tipleri)</h2> + +<p>Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:</p> + +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">Bitmiş örneği GitHub</a>'da bulabilirsiniz (ayrıca <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">kaynak kodunu</a> da görebilirsiniz).</p> + +<h3 id="Renk">Renk</h3> + +<p>{{cssxref("color")}} niteliği hedeflenen öğedeki görünen içeriğin rengini belirler(bunlar, genellikle metindir fakat metne {{cssxref("text-decoration")}} niteliğiyle uygulanan alt ve üst çizgidir).</p> + +<p><code>color</code> niteliği herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk birimini</a> kabul edebilir. Örneğin:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi +temizlemek için geri çekildi. Pek çok şişko sokak faresi, +bu harika makinanın güçlü dişleri arasında kendi ölümüyle +karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin +anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<p>{{ EmbedLiveSample('Renk', '100%', '230') }}</p> + +<h3 id="Font_ailesi">Font ailesi</h3> + +<p>Metninizde farklı bir yazı tipi ayarlamak için {{cssxref("font-family")}} niteliği kullanılır — bu, tarayıcının hedeflenen öğelere uygulaması için bir font (veya font listesi) belirlememize olanak tanır. Tarayıcı, yalnızca web sitesine erişilen makinede mevcutsa bir yazı tipi uygular; mevcut değilse tarayıcı {{anch("Default fonts", "varsayılan fontu")}} kullanır. Basit bir örnek şöyle görünür:</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.</p> + +<h4 id="Web_uyumlu_fontlar">Web uyumlu fontlar</h4> + +<p>Font kullanılabilirliliğinden bahsetmişken, genellikle tüm işletim sistemlerinde mevcut olan ve bu sayede endişe duyulmadan kullanılabilen bir kaç font vardır. Bunlara <strong>web uyumlu font(yazı tipleri)</strong> denir.</p> + +<p>Çoğu zaman, web geliştiricileri olarak, metin içeriğimizi görüntülemek için kullanacağımız font üzerinde daha fazla kontrole sahip olmak isteriz. Bu aşamada karşımıza çıkacak sorun, web sayfasını görüntülemek için kullanılan cihazda(Bilgisayar, tablet, akıllı telefon vb) hangi fontların yüklü olduğunu bilememizdir. Bunu bilmenin bir yolu da yoktur, ancak web uyumlu fontların en çok kullanılan işletim sistemlerinde(macOS, Windows, en yaygın Linux dağıtımları, iOS ve Android) bir örneğinin mevcut olduğunu bilmeniz ilk aşamada yeterlidir.</p> + +<p>Gerçek web uyumlu fontların listesi, işletim sistemleri geliştikçe değişecektir, ancak aşağıdaki fontları şimdilik web için kullanılabilir olduklarını kabul etmek faydalıdır(bunların çoğu, 90'ların sonları ve 2000'lerin başında Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Çekirde Web Fontları</a></em> sayesinde popüler hale gelmiştir):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Adı</th> + <th scope="col" style="white-space: nowrap;">Genel Tipi</th> + <th scope="col">Notlar</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td> + <p>Arial'in daha fazla desteğe sahip olmasına rağmen Helvetica'yı tercih edebilirsiniz, çünkü yazı tipinin görünümü neredeyse aynı olsa da, Helvetica'nın daha güzel bir şekle sahip olduğu düşünülür. En bariz farkı iki yazı tipi arasındaki satır aralığı farkıdır. Helvetica biraz daha geniş bir satıra aralığına sahiptir.</p> + </td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td> + <p>Bazı işletim sistemlerinde <em>Courier New</em> yazı tipinin muhtemelen daha eski bir sürümü olan <em>Courier</em> yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan <em>Courier New</em>'in kullanılması tavsiye edilir.</p> + </td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td> + <p>Bazı işletim sistemlerinde <em>Times New Roman</em>'ın muhtemelen daha eski bir sürümü olan <em>Times</em> yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan <em>Times New Roman</em>'in kullanılması tavsiye edilir.</p> + </td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td> + <p>Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.</p> + </td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Not</strong>: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> sitesi Windows ve macOS işletim sistemlerinde bulunan yazı tiplerinin ne kadar güvenli oldukları ve sistem üzerinde bulunabilirliği hakkında size yardımcı olabilir.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Web sayfalarında kullanmak istediğimiz yazı tipinin kurulu olup olmadığına bakmaksızın, her hangi bir yazı tipini kullanmamıza olanak sağlayan bir seçeneğimiz de vardır: <strong>Web yazı tipleri</strong>. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde <a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">ayrı bir derste</a> inceleyeceğiz.</p> +</div> + +<h4 id="Varsayılan_yazı_tipleri">Varsayılan yazı tipleri</h4> + +<p>CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> ve <code>fantasy</code>. Bu isimler bir genellemedir ve bu adları kullanırken hangi yazı tipinin kullanılacağı tarayıcı ve tarayıcının kurulu olduğu işletim sistemine bağlıdır. Bu adları, tarayıcının belirlemiş olduğumuz yazı tipine/tiplerine uygun herhangi bir yazı tipiyle eşleştirme yapamadığı durumlarda, bu adlara tanımlanmış herhangi bir yazı tipini belirlemesi için kullanırız.</p> + +<p>Bu beş adlandırma şu şekilde guruplandırılmıştır:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col" style="width: 100px;">Ad</th> + <th scope="col">Tanım</th> + <th scope="col">Örnek</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td> + <p>Serifli yazı tipleri olarak bilinirler. Harflerde okumayı kolaylaştırdığı düşünülen harflerin köşelerinde hafif çıkıntı ve süslemelerin olduğu yazı tipleridir.</p> + </td> + <td><span style="font-family: serif;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>Serif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür.</td> + <td><span style="font-family: sans-serif;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>Yazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır.</td> + <td><span style="font-family: monospace;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Akıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir.</td> + <td><span style="font-family: cursive;">Ben büyük kırmızı bir filim</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>Daha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir.</td> + <td><span style="font-family: fantasy;">Ben büyük kırmızı bir filim</span></td> + </tr> + </tbody> +</table> + +<h4 id="Yazı_tipi_listesi">Yazı tipi listesi</h4> + +<p>Web sayfalarınızda kullanmak istediğiniz yazı tiplerinin kullanılabilirliğini garanti edemeyeceğiniz için (bir web yazı tipi bile herhangi bir nedenle başarısız olabilir), tarayıcının seçim yapabileceği birden çok yazı tipini tanımlayabiliriz. Bunun için, <code>font-family</code> niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir <strong>yazı tipi listesi</strong> tanımlarız. örn.</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>Böyle bir durumda, tarayıcı listenin başından başlar ve yazı tipinin işletim sisteminde bulunup bulunmadığına bakar. Yazı tipi varsa, var olan yazı tipini öğelere uygular. Değilse, sonraki yazı tipine geçer ve bu şekilde devam eder.</p> + +<p>Listenin sonunda uygun bir genel yazı tipi grubu adı sağlamak iyi bir yaklaşım olur. Böylece listeelenen yazı tiplerinden hiçbiri mevcut değilse, tarayıcı en azından istediğimiz yazı tipine uygun bir seçim yapmasını sağlayabiliriz. Bu noktayı vurgulamak için, eğer genel adlandırma kullanmaz isek tarayıcı paragraflara varsayılan serifli bir yazı tipi uygulayabilir — bu genellikle Times New Roman olur — sans-serif yazı tipi olmasını istediğimiz durumlar için istediğimiz bir sonuç değil.</p> + +<div class="note"> +<p><strong>Not</strong>: <code>Trebuchet MS</code> gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin <code>"Trebuchet MS"</code>.</p> +</div> + +<h4 id="Bir_font-family_örneği">Bir font-family örneği</h4> + +<p>Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>Sayfamız artık böyle görünür:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> + +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> + +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Bir_font-family_örneği', '100%', 220) }}</p> + +<h3 id="Yazı_Tipi_Boyutu">Yazı Tipi Boyutu</h3> + +<p>Önceki ünitede <a href="/tr/docs/Öğren/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a> dersimizde, uzunluk ve boyut birimlerini inceledik. Yaz tipi boyutu ({{cssxref("font-size")}} niteliği ile ayarlanır), bu nitelik birçok ölçü birimi değerini kabul eder(<a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Percentages">yüzdelikler</a> ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:</p> + +<ul> + <li><code>px</code> (piksel): Metnin yüksekliğini piksel adedi olarak belirler. Bu mutlak bir birimdir — Her tarayıcı ve işletim sisteminde aynı yüksekliğe sahip olur.</li> + <li><code>em</code>s: 1 <code>em</code>, stilini belirlediğiniz mevcut öğenin üst öğesinde ayarlanan yazı tipi boyutuna eşittir(daha karakteristik olarak, ana öğenin içinde bulunan M hafinin genişliği). Farklı yazı tipi boyutlarına sahip iç içe yerleştirilmiş birçok öğenin olduğu aşağıdaki gibi bir örnekte ki tanımlamaları nasıl yapabiliriz. İşi neden zorlaştırıyoruz? Bir kez alıştığımızda <code>em</code> kullanımı oldukça doğal gelmeye başlayacaktır ve sadece metni değil, her şeyi boyutlandırmada kullanabiliriz. Bakımı kolay olan bir web sitesi sahibi olmak için <code>em</code> çok yardımcı olacaktır.</li> + <li><code>rem</code>s: <code>rem</code> hedeflediği öğenin bir üst öğesindeki değeri değilde belgenin kök öğesindeki — {{htmlelement("html")}} — değeri baz almanın dışında aynı <code>em</code> gibi davranır. Bu, yazı tipi boyutlarınızı hesaplamak için matematik işlemlerini çok daha kolaylaştırır, eğer eski tarayıcıları destekelemek istiyorsanız, ek bildirimlerde bulunmanız gerecektir — <code>rem</code> Internet Explorer 8 ve alt sürümlerinde desteklenmez.</li> +</ul> + +<p><code>font-size</code> nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan {{htmlelement("html")}} kök öğesinin <code>font-size</code> nitelik değeri 16px olarak tanımlanmasıyla, kök öğenin çocukları ve torunları için bir kural oluşturmadığınız sürece sayfanızdaki tüm öğelerin<code>font-size</code> değeri aynı olur. Diğer bazı öğelerin tarayıcı tarafından tanımlanmış varsayılan değerleri de olabilir, meselâ {{htmlelement("h1")}} öğesinin varsayılan <code>font-size</code> nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.</p> + +<p>İç içe geçmiş öğelerin yazı tipi boyutunu ayarlamaya başladığınızda işler biraz karmaşaya neden olabilir. Örn., sayfanızdaki {{htmlelement("article")}} öğesinin yazı tipi boyutunu <code>1.5em</code> olarak ayarladınız buda normal şartlarda <code>24px</code> olarak hesaplanacaktır ve <code><article></code> öğesinin içerisindeki paragrafların yazı tipi boyutunuda <code>20px</code> olmasını istiyorsunuz. Bu durumda hangi <code>em</code> değerini kullanırdınız?</p> + +<pre class="brush: html notranslate"><!-- belgenin kök font-size değeri 16px --> +<article> <!-- Buradaki font-size 1.5em olmasını istiyoruz --> + <p>My paragraph</p> <!-- tüm paragraflarımızın font-size değerininde 20px olmasını planladık? --> +</article></pre> + +<p>Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <code><article></code> öğemizin yazı tipi boyutu <code>24px</code> olarak hesaplanır, paragraflarımızda <code>font-size</code> nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <code><article></code> yazı tipi boyutundan alacağı için; em * 24=20, em=20/24, em=0,83333333 olarak yazmamız gerekir. Bu biraz tuhaf gelebilir, bu yüzden bir şeyleri nasıl şekillendirdiğiniz konusunda dikkatli olmalısınız. <code>rem</code> işleri bira daha basit tutmak için kullanışlı olabilir.</p> + +<h4 id="Basit_bir_boyutlandırma_örneği">Basit bir boyutlandırma örneği</h4> + +<p>Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan {{htmlelement("html")}} kök öğemizin <code>font-size</code> nitelik değerini <code>10px</code> olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde <code>rem</code> niteliklerimiz varsayılan <code>16px</code> değeri yerine <code>10px</code> değerini baz alacaklardır. Sayfamızdaki öğeler için <code>font-size</code> nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.</p> + +<p>Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> + +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> + +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi + temizlemek için geri çekildi. Pek çok şişko sokak faresi, + bu harika makinanın güçlü dişleri arasında kendi ölümüyle + karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin + anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Basit_bir_boyutlandırma_örneği', '100%', 260) }}</p> + +<h3 id="Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi">Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi</h3> + +<p>CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:</p> + +<ul> + <li>{{cssxref("font-style")}}: Metnin italik görünümünü açıp/kapatmak için kullanılır. Olası değerler aşağıdaki gibidir(Herhangi bir nedenle italik görünmesini istediğimizde bunu nadiren kullacaksınız — belkide <strong>web yazı tipinizin</strong> sadece italik sürümü vardır): + + <ul> + <li><code>normal</code>: Metni normal yazı tipine ayarlar (mevcut italikleri kapatır.)</li> + <li><code>italic</code>: Metni, varsa yazı tipinin <em>italik</em> sürümünü kullanacak şekilde ayarlar; yoksa, bunun yerine <em>italik</em> görünüm simüle/benzetim edilecektir.</li> + <li><code>oblique</code>: Metni, normal yazı tipi sürümünün <em>italik</em> olarak görünmesi için simüle/benzetim edilerek görüntülenmesini sağlar.</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: Metnin ne kadar kalın olacağını ayarlar. Burada kullanabileceğimiz bir çok terimimiz vardır(-light, -normal, -bold, -extrabold, -black vb.). Fakat bunların içerisinden en çok kullanacaklarımız normal ve bold terimleridir: + <ul> + <li><code>normal</code>, <code>bold</code>: Yazı tipi genişliğini normal and <strong>kalın</strong> olarak ayarlar.</li> + <li><code>lighter</code>, <code>bolder</code>: Geçerli öğenin kalınlığını, ebeveynin kalınlığından bir adım daha ince ve daha kalın olacak şekilde ayarlar.</li> + <li><code>100</code>–<code>900</code>: yukarıdakilerden daha hassas kontol sağlayan sayısal kalınlık değerleri.</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Metninizin harf dönüşümlerini kontrol etmek için kullanılır. Alabileceği değerler: + <ul> + <li><code>none</code>: Herhangi bir dönüşümü engeller.</li> + <li><code>uppercase</code>: Tüm metni <em>BÜYÜK HARFLERE</em> dönüştürür.</li> + <li><code>lowercase</code>: tüm metni <em>küçük harflere</em> dönüştürür.</li> + <li><code>capitalize</code>: Tüm metninizdeki kelimelerin <em>İlk Harflerini Büyük Olacak Şekilde</em> dönüştürür.</li> + <li><code>full-width</code>: Metninizdeki tüm glifleri, tek aralıklı karakterler şeklinde <span style="text-transform: full-width;">sabit genişlikteki bir kutu içine yazılacak</span> şekilde dönüştürür. Örn. latin karakterlerinin Asya dil glifleriyle (Çince, Japonca, Korece gibi) hizalanmasına izin verir.</li> + <li><code>full-size-kana</code>: Ruby karakterlerinde (Çince, Japonca, Korece gibi) kullanılan küçük yazı tipi boyutlarındaki okunabilirlilik sorunlarını telefai etmek için küçük <em>kana</em> karakterlerini tam boyutlu <em>KANA'ya</em> dönüştürmek için kullanılır.<br> + ぁぃぅぇぉゕゖっゃゅょゎ -> <span style="text-transform: full-size-kana;">ぁぃぅぇぉゕゖっゃゅょゎ</span></li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: Metin süslemelerini ayarlar/kaldırır( bunu genelde, bağlantıların altındaki alt çizgiyi kaldımak için kullanırsınız). Mevcut değerleri şunlardır: + <ul> + <li><code>none</code>: Mevcut olan tüm metin süslemelerini kaldırır.</li> + <li><code>underline</code>: <u>Metnin altını çizer</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Metnin üzerine bir çizgi çizer.</span></li> + <li><code>line-through</code>: <s>Metnin üstüne üst çizgi</s> çizer.</li> + </ul> + {{cssxref("text-decoration")}} ile aynı anda birden fazla süsleme eklemek istiyorsanız, aynı anda birden fazla değeri kabul edebileceğiniz unutmayın. Örn. <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ayrıca {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} ve {{cssxref("text-decoration-color")}} nitelikleri için {{cssxref("text-decoration")}} niteliği bir kısa tanımdır. İlginç süslemeler oluşturmak için bu nitelikleri farklı şekillerde birleştirirerek kullanabilirsiniz <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>Örneğimize bu niteliklerden birkaçını ekleyelim:</p> + +<p>Görüntünün yeni çıktısı şu şekildedir:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Yazı_tipi_stili_yazı_tipi_kalınlığı_metnin_BÜYÜKküçük_dönüşümü_ve_metnin_dekorasyonusüslemesi', '100%', 260) }}</p> + +<h3 id="Metnin_alt_gölgeleri">Metnin alt gölgeleri</h3> + +<p>{{cssxref("text-shadow")}} niteliğini kullanarak metninize alt gölgeler uygulayabilirsiniz. Bu şekilde metninizin altındaki görsel veya renk ile kontrastını arttırarak okunabilirliliğini yükseltmiş oluruz yada sadece görsellik için kullanırız. Aşağıdaki gibi bu özelliği kullanabilmek için niteliğe en fazla dört değer atanabilir.</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>Dört özellik aşağıdaki gibidir:</p> + +<ol> + <li> + <p>Gölgenin metninize olan yatay uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> birimi olacaktır. Pozitif değer gölgelendirmeyi sağa doğru, negatif eder ise gölgelendirmeyi sola doğru hareket ettirir. Bu değerin bulunması zorunludur.</p> + </li> + <li> + <p>Gölgenin meninize olan dikey uzaklığını belirtir — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, ancak en yaygın olarak kullanacağımız <code>px</code> birimi olacaktır. Pozitif değer gölgelendirmeyi aşağıya doğru, negatif eder ise gölgelendirmeyi yukarıya doğru hareket ettirir. Bunun dışında yatay tanımlama ile aynı davranışı sergiler. Bu değerin de bulunması zorunludur.</p> + </li> + <li> + <p>Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve ölçü birimlerinin</a> çoğunu alabilir, bu değer belirtilmez ise varsıylan olarak 0 değerini alır ve buda bulanıklılığın olmadığı anlamına gelir. Değer yükseldikçe gölge daha geniş bir alana yayılır. Eksi değer alamaz.</p> + </li> + <li> + <p>Gölgenin temel rengi tanımlanır. Herhangi bir <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Colors">CSS renk değerini</a> alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin <code>color</code> niteliğinden alınır.</p> + </li> +</ol> + +<h4 id="Birden_çok_gölge">Birden çok gölge</h4> + +<p>Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.</p> + +<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, + 2px 2px 1px green;</pre> + +<p>Bunu {{htmlelement("h1")}} öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:</p> + +<div class="hidden"> +<h5 id="Hidden_example1">Hidden example1</h5> + +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p> + +<div class="note"> +<p><strong>Not</strong>: <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">CSS ile metinlere ay ışığı gölgelendirmesi</a> dersinde, <code>text-shadow</code> ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.</p> +</div> + +<h2 id="Metin_düzeni">Metin düzeni</h2> + +<p>Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.</p> + +<h3 id="Metin_hizalama">Metin hizalama</h3> + +<p>{{cssxref("text-align")}} niteliği metin içeren kutunun içerisindeki metnin hizalanmasını kontrol etmek için kullanılır. Mevcut değerler aşağıdaki gibidir ve normal bir kelime işlmeci uygulamasına benzer şekilde çalışır:</p> + +<ul> + <li><code>left</code>: Metni içinde bulunduğu kutunun soluna yaslar</li> + <li><code>right</code>: Metni içinde bulunduğu kutunun sağına yaslar</li> + <li><code>center</code>: Metni içinde bulunduğu kutuya ortalar</li> + <li><code>justify</code>: Metnin satırlarını, içinde bulunduğu kutunun içerik alanının her iki yanına yaslanabilmesi için kelimeler arasındaki boşlukları değiştirerek metni yayar. Bu özelliği kullanırken dikkatli olmanız gerekir — özellikle içerisinde çok uzun bir kelimenin olduğu paragrafların görünümü korkunç olabilir. Eğer bu özelliği kullanmak isterseniz, bununla birlikte {{cssxref("hyphens")}} niteliğinide kullanarak, kelimelerin uygun yerlerinden tire "-" işaretiyle fazlalığın bir alt satıra inmesi sağlanarak görünümün daha iyi olması sağlanmalıdır.</li> +</ul> + +<p>{{htmlelement("h1")}} öğemize <code>text-align: center;</code> bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Metin_düzeni', '100%', 260) }}</p> + +<h3 id="Satır_yüksekliği">Satır yüksekliği</h3> + +<p>{{cssxref("line-height")}} niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimini</a> alabilir, ancak aynı zamanda çarpan olarak davranan ve genellikle en iyi seçenek olarak kabul edilen birimsiz bir değer de alabilir. Satır yüksekliğini elde etmek için yazı tipi boyutuyla {{cssxref("font-size")}} çarpılır. Gövde metni genellikle daha güzel görünür ve satırlar aralandığında okunması daha kolaydır; önerilen satır yüksekliği 1,5-2'dir(çif aralık). Dolayısıyla, metin satırlarımızı yazı tipinin yüksekliğinin 1,6 katına ayarlamak için şunu kullanırsını:</p> + +<pre class="brush: css notranslate">line-height: 1.6;</pre> + +<p>Bunu örneğimizdeki {{htmlelement("p")}} öğemize uyguladığımızda şu sonucu verir:</p> + +<div class="hidden"> +<h5 id="Hidden_example2">Hidden example2</h5> + +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.6; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p> + +<h3 id="Harf_ve_kelime_aralığı">Harf ve kelime aralığı</h3> + +<p>{{cssxref("letter-spacing")}} ve {{cssxref("word-spacing")}} nitelikleri, metninizdeki harf ve kelimlerin arasındaki boşluğu ayarlamanıza olanak sağlar. Bunları çok sık kullanmayacaksınız, ancak belirli bir görünüm elde etmeleri veya özellikle yoğun bir yazı tipinin okunabilirliğini artırmaları için bir kullanabilirsiniz. Çoğu <a href="/tr/Öğren/CSS/CSS_yapi_taslari/Values_and_units#Length_and_size">uzunluk ve boyut birimlerini</a> alabilir.</p> + +<p>Örnek olarak, örneğimizdeki her bir {{htmlelement("p")}} öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +}</pre> + +<p>Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy'nin kedisi</h1> +<p>Hatırladığım kadarıyla bir öğün öncesiydi...</p> +<p>Tommy'nin kedisi, güçlü boğazına kaçan yabancı maddeyi temizlemek için geri çekildi. Pek çok şişko sokak faresi, bu harika makinanın güçlü dişleri arasında kendi ölümüyle karşılaştı. Gerçekten harika bir şehir avcısı olan kedinin anlatılacak çok hikayesi vardı. Ama bu yaptığı nadir bir durumdu.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 5rem; + text-transform: capitalize; + text-shadow: 1px 1px 1px red, + 2px 2px 1px green; + text-align: center; + letter-spacing: 2px; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +} + +p { + font-size: 1.5rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.6; + letter-spacing: 1px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p> + +<h3 id="Bakmaya_değer_diğer_nitelikler">Bakmaya değer diğer nitelikler</h3> + +<p>Yukarıdaki özellikler size bir web sayfasında metin stilini nasıl belirleyeceğiniz konusunda bir fikir verir, ancak kullanabileceğiniz daha birçok nitelik vardır. Sadece en önemlilerini burada ele almak istedik. Yukarıdakileri kullanmaya alıştığınızda, aşağıdakileri de keşfetmelisiniz.</p> + +<p>Yazı tipi stilleri:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Küçük harfleri, küçük harf yüksekliğinde büyük harflere dönüştürür.</li> + <li>{{cssxref("font-kerning")}}: Yazı tipinin karakter aralığını açık/kapatır.</li> + <li>{{cssxref("font-feature-settings")}}: Çeşitli <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> yazı tipi özelliklerini açık/kapatır.</li> + <li>{{cssxref("font-variant-alternates")}}: Yazı tipinin alternatif gliflerinin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-caps")}}: Alternatif büyük harf gliflerinin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-east-asian")}}: Japonca ve Çince gibi Doğu Asya alfabeleri için alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-ligatures")}}: Metindeki bitişik harflerin görünümünü kontrol eder.</li> + <li>{{cssxref("font-variant-numeric")}}: Sayılar, kesirler ve sıra işaretçileri için alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-variant-position")}}: üst simge veya alt simge olarak konumlandırılmış daha küçük boyutlardaki alternatif gliflerin kullanımını kontrol eder.</li> + <li>{{cssxref("font-size-adjust")}}: Fontun görsel boyutunu gerçek font boyutundan bağımsız olarak ayarlar.</li> + <li>{{cssxref("font-stretch")}}: Belirli bir yazı tiğinin olası alternatif uzatılmış versiyonları arasında geçiş yapmamızı sağlar.</li> + <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> niteliğinin <code>underline</code> değeriyle ayarlanan alt çizginin konumunu belirler.</li> + <li>{{cssxref("text-rendering")}}: Metin görüntülenmek için işlenme aşamısının iyileştirilmesi için kullanılır.</li> +</ul> + +<p>Metin düzeni stilleri:</p> + +<ul> + <li>{{cssxref("text-indent")}}: Metin içeriğinin ilk satırının başlangıcından önce ne kadar yatay boşluk bırakılması gerektiğini belirler.</li> + <li>{{cssxref("text-overflow")}}: Taşan içeriğin ne şekilde ele alınacağını belirler.</li> + <li>{{cssxref("white-space")}}: Öğenin içerisindeki boşlukların ve satır sonlarının nasıl işleneceğini tanımlar.</li> + <li>{{cssxref("word-break")}}: Sözcüklerin satıra bölünüp bölünmeyeceğini tanımlar.</li> + <li>{{cssxref("direction")}}: Metin yönünü tanımlar (Bu, kullanılan dile bağlıdır ve genellikle HTML'nin metin içeriğine bağlı olduğu için bu bölümü işlemesine izin vermek daha iyidir.)</li> + <li>{{cssxref("hyphens")}}: Desteklenen diller için tirelemeye(kesme işareti) izin verir.</li> + <li>{{cssxref("line-break")}}: Asya dilleri için satır kırmayı gevşetin ve güçlendirin.</li> + <li>{{cssxref("text-align-last")}}: Zorlanmış satır kesmesinde, bloğun veya bir paragrafın son satırının nasıl hizalanacağını tanımlar.</li> + <li>{{cssxref("text-orientation")}}: Bir satırdaki metnin yönünü tanımlayın.</li> + <li>{{cssxref("overflow-wrap")}}:Taşmayı önlemek için tarayıcının kelimeler içindeki satırları kesip kesmeyeceğini belirler..</li> + <li>{{cssxref("writing-mode")}}: Metin satırlarının yatay mı yoksa dikey mi düzenleneceğini ve sonraki satırların aktığı yönü tanımlar.</li> +</ul> + +<h2 id="Yazı_tipi_kısa_tanımları">Yazı tipi kısa tanımları</h2> + +<p>{{cssxref("font")}} niteliği ile yazı tipinin birçok özelliği tanımlanabilir. Tanımlabilen nitelikler şu sırayla yazılır: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} ve {{cssxref("font-family")}}.</p> + +<p>Tüm bu nitelikler arasında sadece <code>font-size</code> ve <code>font-family</code> kullanılırken <code>font</code> kısa tanımında belirtilmesi gereken bir kullanım vardır.</p> + +<p>{{cssxref("font-size")}} ve {{cssxref("line-height")}} niteliklerinin arasına eğik çizgi konulmalıdır.</p> + +<p>Kullanım örneği:</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Aktif_öğrenim_metin_stilini_değiştirin">Aktif öğrenim: metin stilini değiştirin</h2> + +<p>Bu aktif öğrenme oturumunda, yapabileceğiniz belirli bir alıştırmanız yok. sadece bazı yazı tipi/metin düzeni nitelikleriniyle oyun oynamanızı ve neler üretebileceğinizi görmenizi istiyoruz! Bunu çevrimdışı HTML/CSS dosyalarını kullanarak yapabilir veya kodunuzu aşağıdaki canlı düzenlenebilir örneğe girebilirsiniz.</p> + +<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak baştan başlayabilirsiniz.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Kod Girişi</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> +<p>Denemeniz için bazı örnek metinler</p> + </textarea> + + <h2>CSS Kodu Girişi</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> +p { + +} +</textarea> + + <h2>Çıktı</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +let htmlCode = htmlInput.value; +let cssCode = cssInput.value; +const output = document.querySelector(".output"); + +const styleElem = document.createElement('style'); +const headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="/tr/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> diff --git a/files/tr/öğren/css/styling_text/index.html b/files/tr/öğren/css/styling_text/index.html new file mode 100644 index 0000000000..6e7c8c3500 --- /dev/null +++ b/files/tr/öğren/css/styling_text/index.html @@ -0,0 +1,83 @@ +--- +title: Metni stilini belirleme +slug: Öğren/CSS/Styling_text +tags: + - Acemi + - Bağlantılar + - Beginner + - CSS + - CodingScripting + - Fonts + - Golgelendirme + - Hat + - Landing + - Links + - Listeler + - Mektup + - Metin + - Modul + - Module + - Text + - Web Yazı Tipleri + - Yazı Tipi + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p>CSS dilinin temelleri ele alındığında, odaklanmamız gereken bir sonraki konu, CSS ile yapacağımız en yaygın uygulamalardan biri olan metnin stilini oluşturmaktır. Bu ünitede yazı tipini, kalınlığı, italikliği, satır ve harf aralığını, alt gölgeler ve diğer metin özellikerini ayarlamak da dahil olmak üzere metin stilinin temellerine bakacağız. Sayfamıza özel yazı tiplerini uygulamak, listeleri ve bağlantıları şekillerdirmeye bakarak üniteyi tamamlayacağız.</p> + +<div class="in-page-callout webdev"> +<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun"><span class="highlight-span">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</span></h3> + +<p>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık.</p> + +<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> +</div> + +<h2 id="Ön_Koşullar">Ön Koşullar</h2> + +<p>Bu üniteye başlamadan önce, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML'e giriş</a> ünitesinde ele aldığımız temel HTML bilgisine ve <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS'e giriş</a> ünitesinde ele aldığımız CSS'in temel ilkelerini biliyor olmanız gerekmektedir.</p> + +<div class="note"> +<p><strong>Not</strong>: Eğer çalışırken kullandığınız cihazınızda (bilgisayar, tablet veya diğer cihazlar) kendi örneklerinizi yazıp çalışabileceğiniz bir ortamınız bulunmuyorsa, <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> veya <a href="https://glitch.com/">Glitch</a> ortamlarını çevrimiçi kullanabilirsiniz.</p> +</div> + +<h2 id="Rehber">Rehber</h2> + +<p>Bu modül, HTML metin içeriğini şekillendirmenin altındaki tüm temelleri öğretecek dersleri içerir.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stili</a></dt> + <dd>Bu derste yazı tipinin; kalınlığını, ailesini ve stilini, kısa tanımını, hizalanmasını, satır ve harf aralığını ve diğer efektleri ayarlama da dahil olmak üzere metnin/fontun stilini belirlemede kullanacağımız tüm yöntemleri ele alacağız.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Listeleri biçimlendirme</a></dt> + <dd>Listelerin diğer metinler gibi davranmanın yanında kendilerine özgü bilmeniz gereken bazı davranışları ve dikkat etmeniz bazı uygulamaları vardır. Bu ders de her şeyi açıklayacağım.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Bağlantıları biçimlendirme</a></dt> + <dd>Bağlantıları şekillendirirken, bağlantı durumlarını etkili bir şekilde biçimlendirmek için sözde sınıflardan nasıl yararlanılacağını, gezinme menüleri ve sekmeler gibi yaygın arayüz özelliklerinde kullanılan bağlantıların nasıl şekillendirileceğini anlamak önemlidir. Bu yazıda tüm bu konuların üzerinden geçeceğiz.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></dt> + <dd>Bu derste web yazı tiplerini ayrıntılı olarak inceleyeceğiz — bunlar, sistemlerde bulunurluluğu az olan fontları veya özel metin stillerini web sayfanızda kullanmanıza olanak sağlayan yaklaşımları ele alacağız.</dd> +</dl> + +<h2 id="Değerlendirmeler">Değerlendirmeler</h2> + +<p>Aşağıdaki değerlendirme, yukarıdaki rehberlerde anlatılan metin şekillendirme tekniklerini ne düzeyde anladığınızı test edecektir.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir okulun ana sayfasındaki metinleri şekillendirmek</a></dt> + <dd>Bu değerlendirme, bir okulun ana sayfasındaki metinlerin stilini belirleme kabileyitini ve metnin şekillendirme konusundaki yaklaşımını test edecektir.</dd> +</dl> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowup" style="left: 302px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> diff --git a/files/tr/öğren/css/styling_text/styling_links/index.html b/files/tr/öğren/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..3cf6997aa5 --- /dev/null +++ b/files/tr/öğren/css/styling_text/styling_links/index.html @@ -0,0 +1,453 @@ +--- +title: Bağlantıları şekillendirmek +slug: Öğren/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bağlantıları</a> etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Bağlantılara_bir_göz_atalım">Bağlantılara bir göz atalım</h2> + +<p>HTML'mizde <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">bağlantı oluşturma</a> konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.</p> + +<h3 id="Bağlantı_durumları">Bağlantı durumları</h3> + +<p>Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">sözde sınıflar</a> ile kontrol edilebilmesidir:</p> + +<ul> + <li><strong>Bağlantı</strong>: {{cssxref(":link")}} sözde sınıfı ile hedeflenilebilen ve bir hedefi olan bir bağlantıdır (sadece adlandırılmış boş bir bağlantı olmayan).</li> + <li><strong>Ziyaret edilmiş</strong>: {{cssxref(":visited")}} sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.</li> + <li><strong>Üzerinde</strong>: {{cssxref(":hover")}} sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.</li> + <li><strong>Odak</strong>: {{cssxref(":focus")}} sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından <kbd>Tab</kbd> tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.</li> + <li><strong>Aktif</strong>: {{cssxref(":active")}} sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.</li> +</ul> + +<h3 id="Varsayılan_stiller">Varsayılan stiller</h3> + +<p>Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)</p> + +<pre class="brush: html notranslate"><p><a href="#">Basit bir bağlantı</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}</p> + +<div class="note"> +<p><strong>Not</strong>: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır. Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.</p> +</div> + +<p>Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:</p> + +<ul> + <li>Bağlantıların altı çizilmiştir.</li> + <li>Ziyaret edilmeyen bağlantılar mavidir.</li> + <li>Ziyaret edilen bağlantılar mordur.</li> + <li>Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.</li> + <li>Odaklanmış bağlantıların etrafında bir ana hat vardır.</li> + <li>Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).</li> +</ul> + +<p>İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:</p> + +<ul> + <li>Bağlantılar için alt çizgi kullanın, ancak başka şeyler için kullanmayın. Bağlantıların altını çizmek istemiyorsanız, en azından onları başka bir şekilde vurgulayın. Ne oldukları belli olsun kimse onların ne işe yaradığını bulmak için zaman harcamasın.</li> + <li>Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.</li> +</ul> + +<p>Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:</p> + +<ul> + <li>{{cssxref("color")}} metin rengi için.</li> + <li>{{cssxref("cursor")}} fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.</li> + <li>{{cssxref("outline")}} Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!</p> +</div> + +<h3 id="Bağlantıların_stilini_belirleme">Bağlantıların stilini belirleme</h3> + +<p>Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.</p> + +<p>Başlangıç olarak boş kural kümelerimizi yazacağız:</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "<strong>L</strong>a<strong>V</strong> <strong>F</strong>ena <strong>HA</strong>lde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.</p> + +<p>Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:</p> + +<pre class="brush: html notranslate"><p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve +<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p></pre> + +<p>İkisini bir araya getirmek bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}</p> + +<p>Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:</p> + +<ul> + <li>İlk iki kural burada tartışmak için önemli değil.</li> + <li>Üçüncü kural <code>a</code>, metnin altındaki varsayılan çizgiden ve odak çerçevesinden kurtulmak için seçiciyi kullanır(Her halükarda tarayıcılara göre değişir) ve her bağlantıya küçük bir miktar dolgu ekler — bunların tümü daha sonra netleşecektir.</li> + <li>Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için <code>a:link</code> ve <code>a:visited</code> sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.</li> + <li>Sonraki iki kural ile <code>a:focus</code> ve <code>a:hover</code> sözde sınıfları ile odaklanma ve üzerinde bulunma durumları için farklı alt çizgi ve arka plan renkleri ayarlıyoruz. Burada dikkat edilmesi gereken iki nokta vardır: + <ul> + <li>Alt çizgi {{cssxref("border-bottom")}} kullanılarak oluşturuldu, {{cssxref("text-decoration")}} ile değil — bazı insanlar bunu tercih ediyor çünkü birincisi ikincisinden daha iyi stil seçeneklerine sahip ve biraz daha aşağıdan çiziliyor ve bu yüzden altı çizilen kelimenin altlarını kesmiyor.</li> + <li>{{cssxref("border-bottom")}} niteliğine <code>1px solid</code> değeri renk değeri girilmeden tanımlanmıştır. Bu sayede kenarlığın öğenin metniyle aynı rengi almasını sağladık. Bu metnin farklı renkleri alacağı durumlarda oldukça faydalıdır.</li> + </ul> + </li> + <li>Son olarak <code>a:active</code> sözde sınıfı ile etkinleştirilen bağlantılara ters renk şeması vererek bir şeylerin gerçekleşmek üzere olduğunu netleştirmek için kullanışlıdır!</li> +</ul> + +<h3 id="Aktif_öğrenme_Kendi_bağlantılarınızın_stilini_belirleyin">Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin</h3> + +<p>Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.</p> + +<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak <em>sıfırlayabilirsiniz.</em> Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için <em>Çözümü göster</em> düşmesini kullanın.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p><a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, ve +<a href="#">Microsoft Edge</a> gibi tarayıcılar mevcuttur.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Çözümü göster" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Bağlantılara_simgeler_eklemek">Bağlantılara simgeler eklemek</h2> + +<p>Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — <a href="https://icons8.com/web-app/741/external-link">Örnek olabilecek simgeler için icons8.com</a>.</p> + +<p>Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:</p> + +<pre class="brush: html notranslate"><p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin, +ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p></pre> + +<p>Ardından CSS:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}</p> + +<p>Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki <a href="/tr/Öğren/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">liste öğelerinde özel madde işaretlerini</a> işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine {{cssxref("background")}} kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, <code>no-repeat</code> ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.</p> + +<p>{{cssxref("background-size")}} niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?</p> + +<p>Son olarak, {{cssxref("padding-right")}} niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.</p> + +<p>Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML bağlantıları</a> yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">nitelik şeciciyle</a>(<code>a[href*="http"])</code> {{htmlattrxref("href","a")}} öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.</p> + +<p>İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code>href</code> değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <code><iframe></code> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Henüz <a href="/tr/docs/Öğren/CSS/Styling_boxes">arka planlar</a> ve <a href="/tr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">duyarlı web tasarımına</a> aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.</p> +</div> + +<h2 id="Bağlantıları_buton_olarak_biçimlendirmek">Bağlantıları buton olarak biçimlendirmek</h2> + +<p>Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.</p> + +<p>Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.</p> + +<p>İlk olarak, biraz HTML:</p> + +<pre class="brush: html notranslate"><ul> + <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li> +</ul></pre> + +<p>ve birazda CSS:</p> + +<pre class="brush: css notranslate">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>Bu bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}</p> + +<p>En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:</p> + +<ul> + <li>İkinci kural; {{htmlelement("ul")}} öğemizin varsayılan {{cssxref("padding")}} değerini sıfırlar ve genişliğini ebeveyni olan {{htmlelement("body")}} tamamını kullanmasını söyler.</li> + <li>{{htmlelement("li")}} öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için <a href="/tr/Öğren/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS kutu tipleri</a>'ne bakın), yani kendi satırlarına sahip olacak şekilde davranırlar. Fakat biz burada {{cssxref("display")}} niteliği ile {{htmlelement("li")}} öğelerimizin satır içi öğeler olacak şekilde tanımlıyoruz ve bu şekilde {{htmlelement("li")}} öğelerimiz aynı satır içerisinde yan yana durabiliyorlar.</li> + <li>Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim + <ul> + <li>Önceki örneğimizdeki gibi varsayılan {{cssxref("text-decoration")}} ve {{cssxref("outline")}} niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar</li> + <li>Daha sonra {{cssxref("display")}} niteliğimize <code>inline-block</code> değerini atayarak {{htmlelement("a")}} öğemizin satır içi öğe gibi davranıp diğer kardeşleriyle aynı satırda bulunmalarını ve aynı zamanda bir blok öğe gibi davranıp boyutlandırılabilmesini sağlıyoruz.</li> + <li>Şimdi boyutlandıralım! {{htmlelement("ul")}} öğemizin tüm içeriğini doldurmak istiyoruz. Bu yüzden her düğme arasında küçük bir kanar boşluğu bırakıyoruz(ancak sağ kenarda bir boşluk bırakmayacağız) ve hepsinin aynı boyutta olmasını istediğimiz 5 adet butonumuz olduğu için her birinin genişliğini %19,5 ve sağdan kenar boşluğu olarakda %0,625 olarak tanımlıyoruz. Tüm bu genişliklerin toplamının %100,625 olduğunu farkadeceksiniz ve buda son düğmenin taşmasına neden olacaktır fakat bir sonraki kuralda son <code><a></code> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <code><ul></code> öğemizin içerisine tam olarak oturacaktır.</li> + <li>Son üç beyan oldukça basittir ve sadece görsel amaçlıdır. Metinleri bağlantı butonları içerisinde yatay olarak ortaladık ve {{cssxref("line-height")}} niteliğine 3 değerini tanımlayarak metinlerimizi buton içerisinde dikey olarakta hizaladık ve metin rengini siyah olarak tanımladık.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">satır içi blok öğeleri arasındaki boşluklarla savaşma </a>bölümünde bulabilirsiniz.</p> +</div> + +<h2 id="Becerilerinizi_tes_edin!">Becerilerinizi tes edin!</h2> + +<p>Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfası tasarımı</a>.</p> + +<p>Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/öğren/css/styling_text/styling_lists/index.html b/files/tr/öğren/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..b9690f6d23 --- /dev/null +++ b/files/tr/öğren/css/styling_text/styling_lists/index.html @@ -0,0 +1,436 @@ +--- +title: Listeleri Şekillendirmek +slug: Öğren/CSS/Styling_text/Styling_lists +tags: + - Acemi + - Article + - Beginner + - CSS + - Ders + - Guide + - Listeler + - Metin + - Rehber + - Stil + - Styling + - Text + - biçimlendirme + - bullets + - lists + - Şekillendirme +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p><a href="/tr/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Listeler</a> çoğunlukla diğer metinler gibi davranır, ancak bilmeniz gereken bazı listelere özgü CSS özellikleri ve uygulama yaklaşımları vardır. Bu ders herşeyi açıklıyor.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Öğren/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Öğren/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Öğren/CSS/Ilk_adimlar" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Listeleri şekillendirmeyle ilgili en iyi uygulamalara ve özelliklere aşîna olmak.</td> + </tr> + </tbody> +</table> + +<h2 id="Basit_bir_liste_örneği">Basit bir liste örneği</h2> + +<p>Basit bir liste örneğiyle başlayalım. Bu ders boyunca sıralanmamış, sıralanmış ve açıklama listelerine bakacağız. Hepsinin birbirlerine benzeyen, bazılarında ise kendi liste türlerine özgü şekillendirme özellikleri vardır. <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github üzerinde</a> biçimlendirilmemiş bir örneğimiz mevcuttur(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">kaynak koduna</a> bakabilirsiniz).</p> + +<p>Liste örneğimizin HTML'si şu şekildedir.</p> + +<pre class="brush: html notranslate"><h2>Sırasız alışveriş listesi</h2> + +<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> + +<ul> + <li>Humus</li> + <li>Pide</li> + <li>Yeşil salata</li> + <li>Hellim peyniri</li> +</ul> + +<h2>Sıralı tarif listesi</h2> + +<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> + +<ol> + <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin</li> + <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li>Salatayı yıkayıp doğrayın</li> + <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol> + +<h2>Madde açıklama listesi</h2> + +<p><span class="tlid-translation translation" lang="tr"><span title="">Referans için paragraf, referans için paragraf, referans için paragraf,</span> +<span title="">referans için paragraf, referans için paragraf, referans için paragraf.</span></span></p> + +<dl> + <dt>Humus</dt> + <dd>Genellikle tahin, limon suyu, tuz, sarımsak ve diğer malzemelerle harmanlanmış nohuttan yapılan koyu bir sos</dd> + <dt>Pide</dt> + <dd>Yumuşak, hafif mayalı bir gözleme</dd> + <dt>Hellim peyniri</dt> + <dd>Normalden daha yüksek erime noktasına sahip, genellikle keçi/koyun sütünden yapılan yarı sert, olgunlaşmamış, salamura peynir</dd> + <dt>Yeşil salata</dt> + <dd>Bir çoğumuzun kebapları süslemek için kullandığımız yeşil sağlıklı sebzeler</dd> +</dl></pre> + +<p>Şimdi canlı örneğe giderseniz ve <a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">tarayıcı geliştirme araçlarını</a> kullanarak liste öğelerini araştırırsanız, birkaç stil varsayılanını fark edeceksiniz:</p> + +<ul> + <li>{{htmlelement("ul")}} ve {{htmlelement("ol")}} öğeleri için üst ve alttan <code>16px</code>(<code>1em</code>) {{cssxref("margin")}} için ve soldan <code>40px</code>(<code>2,5em</code>) {{cssxref("padding-left")}} için varsayılan bir değere sahip olduklarını;</li> + <li>Liste {{htmlelement("li")}} öğesinin varsayılan dolgu ve kenar boşluğu değerlerinin olmadığını;</li> + <li>{{htmlelement("dl")}} öğesinin alt ve üstten <code>16px</code> {{cssxref("margin")}} değerine sahip olduğunu fakat herhangi bir dolgu değerinin bulunmadığını;</li> + <li>Liste {{htmlelement("dt")}} öğesinin varsayılan dolgu ve kenar boşluğu değerinin olmadığını;</li> + <li>liste {{htmlelement("dd")}} öğesinin {{cssxref("margin-left")}} niteliğinin <code>40px</code> (<code>2.5em</code>.) değerine sahip olduğunu görürsünüz.</li> + <li>{{htmlelement("p")}} öğesini size referans olması için dahil ettik. Bu öğemiz de, farklı liste türleriyle aynı üst ve alt {{cssxref("margin")}}(<code>16px (1em)</code>) değerine sahiptir.</li> +</ul> + +<h2 id="Liste_aralıklarını_kontrol_etme">Liste aralıklarını kontrol etme</h2> + +<p>Listelerin şeklini belirlerken, stillerini çevreleyen öğelerle(paragraf ve görüntü gibi; dikey ritmi olarakta adlandırılır) aynı dikey aralığına ve birbirleriyle aynı yatay aralığa sahip olacak şekilde ayarlamamız gerekebilir(you can see the <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">finished styled example</a> on Github, and <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">find the source code</a> too.).</p> + +<p>When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other ( <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">bitmiş örneğimizi</a> Github'da bulabilir ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">kaynak kodlarınıda</a> görebilirsiniz).</p> + +<p>Metin stili ve aralığı için kullanılan CSS aşağıdaki gibidir:</p> + +<pre class="brush: css notranslate">/* Genel Stil */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} +</pre> + +<ul> + <li>İlk kural, site genelinde bir yazı tipi ve 10 piksellik yazı tipi boyutu belirler. Bunlar sayfadaki her öğe tarafından miras alınır.</li> + <li>2. ve 3. kurallar da, başlıklar farklı liste türleri(liste öğelerinin alt öğeleri bunları devralır) ve paragraflar için göreli yazı tipi boyutlarını belirler. Bu, her paragrafın ve listenin aynı yazı tipi boyutuna ve üst/alt aralığa sahip olacağı anlamına gelir ve bu da dikey ritmi tutarlı tutmaya yardımcı olur.</li> + <li>4. kural da, {{cssxref("line-height")}} niteliği ile dikey ritmin tutarlı tutmaya yardımcı olur. Paragraflarda ve liste öğelerinde aynı işlemi yapar ve böylece paragraflar ve her bir liste öğesi satırlar arasında aynı aralığa sahip olur.</li> + <li>5. ve 6. kurallar da, açıklama listesine uygulanır. {{cssxref("line-height")}} niteliği ile paragraf ve liste öğelerinde yaptığımız gibi, açıklama listesi terimleri ve açıklamalarında da aynısını belirleriz. Yani tutarlılık iyidir! Ayrıca açıklama terimlerinin kalın yazı tipine sahip olmasını sağlayarak görsel olarak daha kolay öne çıkmasına yardımcı olduk.<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="Listeye_özgü_şekiller">Listeye özgü şekiller</h2> + +<p>Şimdiye kadar listeler için genel boşluk tekniklerine baktık, bundan sonra da listeye özgü bazı özellikleri inceleyelim.</p> + +<p>İlk başta bilmeniz gereken, {{htmlelement("ul")}} ve {{htmlelement("ol")}} öğelerinde ayarlanabilen üç nitelik vardır.</p> + +<ul> + <li>{{cssxref("list-style-type")}}: Liste için kullanılacak madde işaretlerinin türünü belirler; örn. sırasız bir liste için kare veya daire madde işaretlerini; sıralı bir liste için sayılar, harfler veya roma rakamları.</li> + <li>{{cssxref("list-style-position")}}: Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde mi yoksa liste içeriğinin dışında mı(sol dışında) görüneceğini belirler.</li> + <li>{{cssxref("list-style-image")}}: Madde işareti için basit bir kare veya daire yerine özel bir görüntü kullanmamızı sağlar</li> +</ul> + +<h3 id="Madde_işareti_şekilleri">Madde işareti şekilleri</h3> + +<p>Yukarıda belirtildiği gibi, {{cssxref("list-style-type")}} niteliğiyle madde işaretleri için ne tür bir işaret kullanacağını ayarlamamıza izin verir. Örneğimizde, sıralı listeyi büyük harfli roma rakamları kullanacak şekilde ayarlamak için:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>Kuralını oluşturduğumuzda bize aşağıdaki gibi bir sonuç verir.:</p> + +<p><img alt="Madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı liste." src="https://mdn.mozillademos.org/files/17434/list-style-type.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 437px;"></p> + +<p>{{cssxref("list-style-type")}} referans sayfasına bakarak daha fazla seçenek buluabilirsiniz.</p> + +<h3 id="Madde_işareti_konumu">Madde işareti konumu</h3> + +<p>{{cssxref("list-style-position")}}, Madde işaretlerinin öğenin başlangıcından önce liste içeriğinin içinde yada liste içeriğinin dışında(sol dışında) görünür. Varsayılan değeri olan <code>outside</code> ile yukarıda görüldüğü gibi madde işaretlerinin liste öğelerinin dışında kalmasına neden olur.</p> + +<p>Değeri <code>inside</code> olarak ayarlarsak, madde işaretleri öğe içerik alanı içerisine oturur.</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="madde işaretlerinin liste öğesi metninde görünecek şekilde ayarlandığı sıralı bir liste." src="https://mdn.mozillademos.org/files/17435/list-style-position-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 431px;"></p> + +<h3 id="Özel_bir_madde_işareti_görüntüsü_kullanma">Özel bir madde işareti görüntüsü kullanma</h3> + +<p>{{cssxref("list-style-image")}} niteliği madde işaretlerinde özel bir resim kullanılmasını sağlar. Sözdizimi oldukça basittir:</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>Ancak bu nitelik, madde işareti konumunu, boyutunu vb. gibi özellikleri kontrol etme açısından biraz sınırlıdır. <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve sınırlar</a> dersinde {{cssxref("background")}} nitelik ailesinde öğrendiklerinizi kullanmanız daha iyi olacaktır. Şimdilik tanıyoruz!</p> + +<p>Bitmiş örneğimizde, sıralanmamış listeyi bu şekilde biçimlendirdik(yukarıda daha anlattıklarımızın üstüne):</p> + +<pre class="brush: css notranslate">ul { + padding-left: 2rem; + list-style-type: none; +} + +ul li { + padding-left: 2rem; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>Burada aşağıdakileri yaptık:</p> + +<ul> + <li>{{cssxref("padding-left")}} niteliğimizle, {{htmlelement("ul")}} öğemizin <code>40px</code> olan varsayılan kenar boşluğunu <code>20px</code> olarak ayarladık, sonra liste öğelerininde aynı kenar boşluğuna sahip olması için bir kural tanımladık. Böylece, sipariş liste öğeleriyle açıklama listesi öğelerinin aynı hizada olmasını sağladık. Eğer liste öğlerine(<code>li</code>) kenar boşluğu vermeseydik, liste öğelerinin arka planı içerisinde görüntülediğimiz resmimizle üst üste gelmesine neden olurdu.</li> + <li>{{cssxref("list-style-type")}} niteliğimize <code>none</code> değerini atayarak, liste madde işaretlerinde herhangi bir şeyin görüntülenmesini engelemiş olduk. Böylece {{cssxref("background")}} niteliğimizle yerleştireceğimiz madde işaretine temiz bir zemin hazırlamış olduk.</li> + <li>Sıralanmamış listenin herbir liste öğesine, resmi madde işareti olarak ekledik. İlgili nitelikler aşağıdaki gibidir: + <ul> + <li>{{cssxref("background-image")}}: Bu, madde işareti olarak kullanmak istediğimiz resmin dosyasının yolunu belirtiriz.</li> + <li>{{cssxref("background-position")}}: Bu, seçilen öğenin arka planında görüntünün nerede görüneceğini tanımlar — <code>0 0;</code> durumunda, her madde işareti tanımlandığı öğenin sol üst köşesinde görüneceği anlamına gelir.</li> + <li>{{cssxref("background-position")}}: Bu, arka plan resminin boyutunu ayarlar. İdeal olarak madde işaretlerinin liste öğeleriyle aynı boyutta(veya çok az küçük/büyük) olmasını istiyoruz. Madde işaretinin içeriğe oturmasınına izin verdiğimiz dolguya çok iyi uyan bir boyut olan <code>1.6rem(16px)</code> değeri kullanıyoruz. Madde işareti ile liste öğesinin arasında ki (<code>20px-16px</code>) 4px boşluk çok iyi duruyor.</li> + <li>{{cssxref("background-repeat")}}: Varsayılan olarak, arka plan resimleri kullanılabilir arka plan alanını doldurana kadar yenilenir. Her durumda görüntünün yalnızca bir kopysının eklenmesini istiyoruz, bu nedenle niteliğimize <code>no-repeat</code> değerini tanımlıyoruz.</li> + </ul> + </li> +</ul> + +<p>Bu bize şu sonucu verir:</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/17436/list-style-image-tr.png" style="border-style: solid; border-width: 1px; display: block; height: 110px; margin: 0px auto; width: 170px;"></p> + +<h3 id="Liste_şekillendirebilen_kısa_tanım">Liste şekillendirebilen kısa tanım</h3> + +<p>Yukarıda belirtilen üç niteliğin tümü, tek bir kısa tanım niteliği kullanılarak tanımlanabilir ({{cssxref("list-style")}}). Örn., aşağıdaki CSS:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Bununla değiştirilebilir:</p> + +<pre class="brush: css notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>Değerler herhangi bir sırayla girilebilir, biri, ikisi veya üçünü birden tanımlayabilirsiniz (tanımlanmayan değerler için varsayılan değerler kullanılır <code>disc</code>, <code>none</code> ve <code>outside</code> vbg.) Birinci ve ikincideki <code>type</code> ve <code>image</code> türü bildirimin nedeni: Eğer herhangi bir nedenden dolayı resim yüklenemezse de görüntüleyebileceği bir madde işaretini tanımlamaktır.</p> + +<h2 id="Liste_sayımını_kontrol_etme">Liste sayımını kontrol etme</h2> + +<p>Bazen sıralı bir listede sıralamanın farklı şekillerde numaralandırılmasını isteyebiliriz — örn. 1'den farkllı bir sayıdan başlayarak veya geriye doğru sayarak veya 1'den fazla adımlarla sayarak. HTML ve CSS'in burada bizlere yardımcı olacak bazı araçları vardır.</p> + +<h3 id="başlangıç">başlangıç</h3> + +<p>{{htmlattrxref("start","ol")}} niteliği listenin 1'in haricinde bir sayıdan başlatmak istediğimizde kullanırız. Aşağıdaki örneğimizde listemiz saymaya 4'den başlar:</p> + +<pre class="brush: html notranslate"><ol start="4"> + <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> + <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li>Salatayı yıkayıp doğrayın</li> + <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol></pre> + +<p>Bize bu çıktıyı verir:</p> + +<p>{{ EmbedLiveSample('başlangıç', '100%', 150) }}</p> + +<h3 id="tersten_numaralandırmak">tersten numaralandırmak</h3> + +<p>{{htmlattrxref("reversed","ol")}} niteliği liste numaralandırma sayılarını ileri doğru değilde, geriye doğru yazılmasını sağlar:</p> + +<pre class="brush: html notranslate"><ol start="4" reversed> + <li>Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> + <li>Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li>Salatayı yıkayıp doğrayın</li> + <li>Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('tersten_numaralandırmak', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Not</strong>: Geriye doğru ilerleyen bir listede belirtilen sayıdan daha fazla liste öğesi varsa, sayı sıfır ve ardından negatif sayılara doğru devam eder. 2, 1, 0, -1, -2, ...</p> +</div> + +<h3 id="değer">değer</h3> + +<div class="hidden"> +<h4 id="degerleme">degerleme</h4> + +<pre class="brush: html notranslate"><ol style="list-style-type: decimal;"> + <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> + <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li value="6">Salatayı yıkayıp doğrayın</li> + <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol></pre> +</div> + +<p>{{htmlattrxref("value","ol")}} niteliğiyle liste öğelerine belirli bir sayısal değeri tanımlamamıza izin verir:</p> + +<pre class="brush: html notranslate"><ol> + <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> + <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li value="6">Salatayı yıkayıp doğrayın</li> + <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('degerleme', '100%', 100) }}</p> + +<div class="note"> +<p><strong>Not</strong>: Sayı olmayan, farklı bir maddeleme işareti kullansanız bile, yine de <code>value</code> niteliğindeki değere eş değer bir değer getirilir.</p> +</div> + +<div class="hidden"> +<h5 id="izli1">izli1</h5> + +<pre class="brush: html notranslate"><ol style="list-style-type:lower-alpha;"> + <li value="2">Pideyi pişirin, soğumaya bırakın ve ardından kenarını dilimleyin.</li> + <li value="4">Hellim'i her iki tarafı da kızarıncaya kadar sığ ve yapışmaz bir tavada kızartın</li> + <li value="6">Salatayı yıkayıp doğrayın</li> + <li value="8">Pideyi salata, humus ve kızarmış hellim ile doldurun.</li> +</ol></pre> +</div> + +<p>{{ EmbedLiveSample('izli1', '100%', 100) }}</p> + +<h2 id="Aktif_öğrenme_İç_içe_listeyi_şekillendirme">Aktif öğrenme: İç içe listeyi şekillendirme</h2> + +<p>Bu aktif öğrenme oturumunda, yukarıda öğrendiklerinizi anlamanızı ve iç içe geçmiş bir liste şekillendirmenizi istiyoruz. Size HTML'yi sağladık ve şunları yapmanızı istiyoruz:</p> + +<ol> + <li>Sırasız listeye kare madde işaretleri verin.</li> + <li>Sırasız liste öğelerine ve sıralı liste öğelerine yazı tipi boyutlarının 1,5'i kadar yüksekliğinde bir satır yüksekliği verin.</li> + <li>Sıralı listeye daha düşük alfabetik madde işaretleri verin.</li> + <li>Liste örenğiyle istediğiniz kadar oynayabilirsiniz, madde işareti türleri, boşluklar veya bulabileceğiniz başka özellikleri deneyebilirsiniz.</li> +</ol> + +<p>Bir hata yaparsanız, sıfırla butonunu kullanarak her zaman başlangıça dönebilirsiniz. Gerçekten takılırsanız, olası bir cevap görmek için Çözümü göster düşmesine basabilirsiniz.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<p>CSS sayaçları, liste sayma ve şeklini özelleştirmek için gelişmiş araçlar sağlar, ancak oldukça karmaşıktır. Kendinizi geliştirmek istiyorsanız bunlara bakmanızı öneririz:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<p>Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>İlişkili birkaç temel ilkeyi ve belirli özelliği öğrendikten sonra, listelerin stil oluşturmaya alışması nispeten kolaydır. Sonraki makalede bağlantı stil tekniklerine geçeceğiz.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/öğren/css/styling_text/typesetting_a_homepage/index.html b/files/tr/öğren/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..0d5c95314b --- /dev/null +++ b/files/tr/öğren/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,143 @@ +--- +title: Bir okulun ana sayfasını düzenlemek +slug: Öğren/CSS/Styling_text/Typesetting_a_homepage +tags: + - Acemi + - Assessment + - Bağlantı + - Beginner + - CSS + - CodingScripting + - Değerlendirme + - Link + - Liste + - Metnin Stilini Belirleme + - Styling text + - Web Yazı Tiği + - Yazı Tipi + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Bu değerlendirmede, bir okulun ana sayfasının metnin şekillendirmenizi sağlayarak, bu ünite boyunca ele aldığımız tüm metin şekillendirme tekniklerini kavrayışınızı test edeceğiz. Yol boyunca biraz eğelebilirsiniz.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşul:</th> + <td>Bu değerlendirmeyi denemeden önce, bu ünitedeki tüm derslerin üzerinde çalışmış olmanız gerekir</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS metin stil tekniklerinin anlaşılmasını test etmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Başlangıç_noktası">Başlangıç noktası</h2> + +<p>Bu değerlendirmeyi başlatmak için şunları yapmalısınız:</p> + +<ul> + <li>Alıştırma için gerekli <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> dosyalarını ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">harici bağlantı simgelerini</a> alın.</li> + <li>Yerel bilgisayarınızda bunların bir kopyasını oluşturun.</li> +</ul> + +<p>Alternatif olarak, değerlendirmenizi yapmak için <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ve <a href="https://glitch.com/">Glitch</a> gibi siteleri kullanabilirsiniz. HTML'yi yapıştırabilir ve CSS'i bu çevrimiiçi düzenleyicilerden birine doldurabilir ve arka plan resmini işaret etmek için <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">bu URL</a>'yi kullanabilirsiniz. Kullandığınız çevrimiçi düzenleyicinin ayrı bir CSS paneli yoksa, bunu <code><style></code> etiketi ile HTML sayfanıza yerleştirebilirsiniz.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Sıkıştığınızda bizden yardım isteyebilirsiniz — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazlası")}} bölümüne bakabilirsiniz.</p> +</div> + +<h2 id="Proje_tanıtımı">Proje tanıtımı</h2> + +<p>Hayli bir okulun ana sayfası için bir miktar ham HTML, ayrıca sayfayı üç sütunlu bir düzende biçimlendiren ve başka bazı temel stil sağlayan bazı CSS'ler sağlandı. Yaptığınız bitleri işaretlemenin kolay olduğundan emin olmak için CSS eklemelerinizi CSS dosyasının altındaki yourmun altına yazmalısınız. Bazı seçiciler tekrarlıysa endişelenmeyin.</p> + +<p>Yazı tipleri:</p> + +<ul> + <li>Öncelikle, kullanımı ücretsiz birkaç yazı tipi indirin. Bu bir okul olduğundan, yazı tipleri sayfada oldukça ciddi, resmi, güveniir bir his verecek şekilde seçilmelidir — genel metin gövdesi için serif site çapında bir yazı tipi, başlıklar için ise sans-serif veya slab-serif birlikte güzel olabilir.</li> + <li><code>@font-face</code> ile bu iki yazı tipi için uygun bir hizmet kullanın.</li> + <li>Gövde yazı tipinizi tüm sayfaya ve başlıklar için seçtiğiniz yazı tipinide başlıklara uygulayın.</li> +</ul> + +<p>Genel metin stili:</p> + +<ul> + <li>Sayfaya site genelinde <code>font-size: 10px</code> olarak tanımlayın.</li> + <li>Başlıklarınıza ve diğer öğe türlerinize, uygun bir göreli birim kullanarak tanımlanmış uygun yazı tipi boyutları verin.</li> + <li>Gövde metninize <code>line-height</code> niteliği ile uygun bir metin yüksekliği verin.</li> + <li>Üst düzey başlığınızı sayfada ortalayın.</li> + <li>Başlıklarınızı <code>letter-spacing</code> niteliği ile fazla ezilmemeleri için harflerin arasına biraz boşluk verin.</li> + <li>Gövde metninize <code>letter-spacing</code> ve <code>word-spacing</code> nitelikleri ile biraz boşluk verin.</li> + <li>Her başlıktan sonra ilk paragrafa <code><section></code> ile biraz metin girintisi verin, örn. 20px.</li> +</ul> + +<p>Başlantılar:</p> + +<ul> + <li>Bağlantıları ziyaret, odak ve fareyle üzerine gelme durumlarına göre sayfanın üst ve alt kısmındaki yatay çubukların rengiyle uyumlu bazı renkler verin.</li> + <li>Varsayılan olarak bağlantıların altı çizili olacak şekilde yapın, ancak üzerine geldiğinizde veya odaklandığınızda alt çizgiler kaybolmalı.</li> + <li>Varsayılan odak çerçevesini sayfadaki TÜM bağlantılardan kaldırın.</li> + <li>Etkin duruma gözle görülür şekilde farklı bir stil verin, böylece güzelce öne çıksın, ancak yine de genel sayfa tasarımına uymasını sağlayın.</li> + <li>Dış bağlantıların yanlarına harici bağlantı simgesinin eklenmesini sağlayın.</li> +</ul> + +<p>Listeler:</p> + +<ul> + <li>Listelerinizin ve liste öğelerinizin aralığının genel sayfasının stiliyle uyumlu olduğundan emin olun. Her liste öğesi <code>line-height</code> niteliği değeriyle paragraf satırıyla aynı olmalıdır ve her liste öğesi paragraflar arsında yaptığınız gibi üstte ve altta aynı boşluğa sahip olmalıdır.</li> + <li>Liste öğelerinize sayfanın tasarımına uygun güzel bir madde işareti verin. Özel bir madde işareti götüntüsü mü yoksa başka bir şey mi seçeceğiniz size kalmış.</li> +</ul> + +<p>Gezinti menüsü:</p> + +<ul> + <li>Sayfa için uygun bir görünüme sahip olacak şekilde gezinme menünüzün stilini belirleyin.</li> +</ul> + +<h2 id="İpuçları_ve_püf_noktaları">İpuçları ve püf noktaları</h2> + +<ul> + <li>Bu alıştırma için HTML'yi herhangi bir şekilde düzenlemenize gerek yoktur.</li> + <li>Gezinme menüsünün düğmelere benzemesi gerekmez, ancak sayfanın yan tarafında aptalca görünmemesi için biraz daha uzun olması gerekir; ayrıca bunu dikey bir gezinme menüsü yapmanız gerektiğini unutmayın.</li> +</ul> + +<h2 id="Örnek">Örnek</h2> + +<p>Aşağıdaki ekran görüntüsüi bitmiş tasarımın nasıl görünebileceğine dair bir örnek göstermektedir:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Değerlendirme_ve_daha_fazlası">Değerlendirme ve daha fazlası</h2> + +<p>Çalışmanızın değerlendirilmesini istiyorsanız veya takılıp kaldıysanız yardım isteyebilirsiniz.</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyeiciye koyun.</li> + <li><a href="https://discourse.mozilla.org/c/mdn/learn">MDN söyleşi/öğrenme forumu kategorisinde</a> değerlendirme ve/veya yardım isteyen bir yazı gönderin. Gönderi şunları içermelidir: + <ul> + <li>"Okulun ana sayfasını düzenlemek için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>halihazırda denedikleriniz ve biden ne yapmamızı istediğinizle ilgili ayrıntılar, örneğin, takılıp kaldıysanız ve yardıma ihtiyacınız varsa veya bir değerlendirme istiyosanız.</li> + <li>Değerlendirilmesini istediniz veya yarımda ihtiyaç duyduğunuz önreğin bir çevrimiçi paylaşılabillir düzenleyicide bulunan bağlantısı (yukarıdaki 1.adımda belitildiği gibi). Bu, içine girmek için iyi bir uygulamadır — kodunu göremiyorsanız, kodlama sorunu olan birine yardım etmek çok zordur.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> diff --git a/files/tr/öğren/css/styling_text/web_fonts/index.html b/files/tr/öğren/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..cf13b6533a --- /dev/null +++ b/files/tr/öğren/css/styling_text/web_fonts/index.html @@ -0,0 +1,221 @@ +--- +title: Web Yazı Tipleri +slug: Öğren/CSS/Styling_text/Web_fonts +tags: + - '@font-face' + - Article + - Beginner + - CSS + - CSS Fonts + - Fonts + - Guide + - Learn + - Web Development + - Web Fonts Article + - Web fonts documentation + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Ünitenin ilk dersinde, yazı tiplerini ve metni şekillendirmek için kullanılan temel CSS özelliklerini keşfettik. Bu dersimizde daha da ileri gideceğiz, web yazı tiplerini ayrıntılı olarak inceleyceğiz — bunlar, daha çeşitli, özel metin stillerine izin vermek için web sayfanızla birlikte özel yazı tiplerinide kullanmanıza izin verir.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek</td> + </tr> + </tbody> +</table> + +<h2 id="Yazı_tipi_aileleri_özeti">Yazı tipi aileleri özeti</h2> + +<p><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi stilinde</a> incelediğimiz gibi, HTML'nize uygulanan yazı tipleri {{cssxref("font-family")}} niteliği ile kontrol edilebilinir. Bu, bir veya daha fazla yazı tipi ailesi adını alır ve tarayıcı, çalıştığı sistemde mevcut olan bir yazı tipini bulana kadar bu listede ileriye doğru hareket eder:</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>Bu sistem iyi çalışıyor, ancak geleneksel olarak web geliştiricilerinin yazı tipi seçenekleri sınırlıdır. Tüm yaygın sistemlerde kullanılabilceğini garanti edebileceğiniz yalnızca bir avuç yazı tipi vardır — <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Web uyumlu yazı tipleri</a>. Tercih edilen yazı tiplerini belirtmek için yazı tipi yığınını, ardından web için güvenli alternatifleri ve ardından varsayılan sistem yazı tipini belirtebilirsiniz, ancak bu tasarımlarınızın her yazı tipiyle iyi göründüğünden emin olmak için test açısından ek yük getirir.</p> + +<h2 id="Web_yazı_tipleri">Web yazı tipleri</h2> + +<p>IE sürüm 6'ya kadar çok iyi çalışan bir alternatifimiz var. Web yazı tipleri, web siteniz erişilirken indirilecek yazı tipi dosyalarını belirtmenize olanak tanıyan bir CSS özelliğidir, yani web'i destekleyen herhangi bir tarayıcı tam olarak sizin belirlediğiniz fontlara sahip olabilir. Gerekli sözdizimi şuna benzer:</p> + +<p>Her şeyden önce CSS'in başlangıcında {{cssxref("@font-face")}} ile başlayan indirilecek yazı tipi dosyalarını belirten bir bloğumuz var:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.woff"); +}</pre> + +<p>Bunun altında, özel yazı tipinizi normal olarak istediğiniz herhangi bir şeye uygulamak için @font-face içinde belirtilen yazı tipi ailesi adını kullanabilirsiniz:</p> + +<pre class="brush: css notranslate">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.</p> + +<p>Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:</p> + +<ol> + <li>Tarayıcılar farklı yazı tipi biçimlerini desteklerler, bu nedenle tarayıcılar arasında daha iyi bir destek için birden çok yazı tipi biçimine ihtiyacınız olacaktır. Örneğin, çoğu modern tarayıcı, piyasadaki en verimli biçim olan WOFF/WOFF2'yi (Web Açık Yazı Tipi Biçimi sürüm 1 ve 2) destekler, ancak IE'nin eski sürümleri yalnızca EOT(Gömülü Açık Tip) yazı tiplerini destekler ve iPhone ve Android tarayıcıların eski sürümlerini desteklemek için yazı tipinin bir SVG sürümünü eklemeniz gerekebilir. Gerekli kodu nasıl oluşturacağınızı aşağıda göstereceğiz.</li> + <li>yazı tiplerinin kullanımı genellikle ücretsiz değildir. bunlar için ödeme yapmanız ve/veya yazı tipi oluşturucuyu kodda (veya sitenizde) belirtmek gibi diğer lisa ns koşullarını izlemeniz gerekir. Yazı tiplerini çalmamalı ve uygun şekilde kredi vermeden kullanmamalısınız.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.</p> +</div> + +<p>Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">Firefox yazı tipi düzenleyicisini</a> kullanabilirsiniz. Bu video güzel bir yol sunar:</p> + +<p>{{EmbedYouTube("UazfLa1O94M")}}</p> + +<h2 id="Aktif_öğrenme_Bir_web_yazı_tipi_örneği">Aktif öğrenme: Bir web yazı tipi örneği</h2> + +<p>İlk ilkelerden temel bir web yazı tipi örneği oluşturalım. Gömülü bir canlı örnek kullanarak bunu göstermek zordur, bu nedenle, süreç hakkında bir fikir edinmek için aşağıdaki bölümlerde ayrıntılı olarak açıklanan adımları izlemenizi öneririz.</p> + +<p>Kullanmanız için size iki örnek dosya; <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">canlı örneği</a> görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın. <code>web-font-start.css</code> dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.</p> + +<h3 id="Yazı_tipi_bulmak">Yazı tipi bulmak</h3> + +<p>Bu örnek için, biri başlıklar ve diğeri gövde metni için olmak üzere iki web fontu kullanacağız. Başlangıç olarak, yazı tiplerini içeren yazı tipi dosyalarını bulmamız gerekiyor. Yazı tipleri, yazı tipi dökümhaneleri tarafından oluşturulur ve farklı dosya formatlarında saklanır. yazı tiplerini edinebileceğiniz genellikle üç tür site vardır:</p> + +<ul> + <li>Ücretsiz bir yazı tipi dağıtıcısı: Bu, ücretsiz yazı tiplerini indirilebilir hale getiren bir sitedir (yazı tipi oluşturucusuna atıfta bulunmak gibi bazı lisans koşulları hala olabilir). Örnek siteler arasında <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, ve <a href="https://everythingfonts.com/">Everything Fonts</a> sayılabilir.</li> + <li>Ücretli bir yazı tipi dağıtıcısı: Bu, yazı tiplerini <a href="http://www.fonts.com/">fonts.com</a> veya <a href="http://www.myfonts.com/">myfonts.com</a> gibi ücret karşılığında kullanıma sunan siteler sayılabilir. Yazı tiplerini, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, veya <a href="http://www.exljbris.com/">Exljbris</a> gibi doğrudan yazı tipi dökümhanelerinden de satın alabilirsiniz.</li> + <li>Çevrim içi yazı tipi hizmeti: Bu, yazı tiplerini sizin için saklayan, sunan ve tüm süreci kolaylaştıran bir sitedir. Daha fazla ayrıntı için {{anch("Using an online font service")}} bölümüne bakın.</li> +</ul> + +<p>Biraz yazı tipi bulalım! <a href="https://www.fontsquirrel.com/">Font Squirrel</a> sitesine gidelim ve iki adet font seçelim — başlıklar için ilginç ve gösterişli bir yazı tipi ve paragraflar içinde daha okunabilir bir yazı tipi. Her bir yazı tipini bulduğunuzda, indirme düşmesine basın ve dosyayı daha önce kaydettiğiniz HTML ve CSS dosyalarının bulunduğu dizine kaydedin. TTF (True Type Fontlar) veya OTF (Open Type Fontlar) olması önemli değil.</p> + +<p>Her durumda, yazı tipi paketini açın (Web yazı tipleri genellikle yazı tipi dosyalarını ve lisans bilgilerini içeren ZIP dosyalarında dağıtılır). Pakette birden fazla yazı tipi dosyası bulabilirsiniz — bazı yazı tipleri, örneğin ince, orta, kalın, italik, ince italik vb. gibi farklı şekillere sahip aile olarak dağıtılır. Bu örnek için, yalnızca her seçim için bir yazı tipi dosyası yeterli.</p> + +<div class="note"> +<p><strong>Not</strong>: Sağ taraftaki sütunda "Yazı tiplerini bul" bölümü altında, görüntülenen seçenekleri filtrelemek için farklı etiketlere ve sınıflandırmalara tıklayabilirsiniz.</p> +</div> + +<h3 id="Gerekli_kodun_oluşturulması">Gerekli kodun oluşturulması</h3> + +<p>Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:</p> + +<ol> + <li>Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.</li> + <li>Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Web yazı tipi oluşturucuya</a> gidin.</li> + <li>Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.</li> + <li>"Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.</li> + <li>Kitinizi indirin.</li> +</ol> + +<p>Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.</p> + +<h3 id="Kodu_demonuza_uygulamak">Kodu demonuza uygulamak</h3> + +<p>Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.</p> + +<ul> + <li>Har yazı tipinin çoklu sürümleri:(örn, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, vb. tarayıcı desteği gereksinimleri değiştikçe yazı tipleri zamanla güncellenecektir) Yukarıda belirtildiği gibi, tarayıcılar arası destek için birden fazla yazı tipi gereklidir — bu, Fontsquirrel'ın ihtiyacınız olan her şeye sahip olduğunudan emin olmanın faydalı bir yoludur.</li> + <li>Her yazı tipi için bir demo HTML dosyası — yazı tipinin farklı kullanım bağlamlarında nasıl görüneceğini görmek için bunlar tarayıcınıza yükleyin.</li> + <li><code>stylesheet.css</code> ihtiyaç duyacağınız @font-face kodunu içeren bir dosya.</li> +</ul> + +<p>Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:</p> + +<ol> + <li>Sıkıştırılmış dosyayı klasöre açın, örn <code>fonts</code>.</li> + <li><code>stylesheet.css</code> dosyasını açın ve her iki <code>@font-face</code> kod bloğunu <code>web-font-start.css</code> dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.</li> + <li><code>url()</code> işlevlerin her biri, CSS'mize aktarmak istediğimiz bir yazı tipi dosyasına işaret eder. Dosyalara giden yolların doğru olduğundan emin olamanız gerekir. Bizim durumumuzda her yolun başına <code>fonts/</code> eklmeyi unutmayın.</li> + <li>Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn: + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>Üzerinde bazı güzel yazı tiplerinin uygulandığı bir demo sayfası bulmalısınız. Farklı yazı tipleri farklı boyutlarda oluşturulduğundan, görünümü ve hissi verebilmek için boyutu, aralığı vb. durumları ayarlamanız gerekebilir.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Not</strong>: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">bitmiş örneği canlı çalıştırın</a>).</p> +</div> + +<h2 id="Çevrimiçi_bir_yazı_tipi_hizmeti_kullanma">Çevrimiçi bir yazı tipi hizmeti kullanma</h2> + +<p>Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle <code>@font-face</code> kodu yazma konusunda endişelenmenize gerek kalmaz ve genellikle her şeyin çalışması için sitenize basit bir veya iki satır kod eklemeniz gerekir. Örnekler arasında <a href="https://fonts.adobe.com/">Adobe Fonts</a> ve <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan <a href="https://www.google.com/fonts">Google Fonts</a> dışında, abonelik tabanlıdır.</p> + +<p>Bu hizmetlerin kullanımı kolaydır, bu nedenle onları ayrıntılı olarak ele alacağız. Google yazı tiplerine hızlıca bir göz atalım, böylece fikir edinebilirisiniz. Yine, başlangıç noktanız olarak <code>web-font-start.html</code> ve <code>web-font-start.css</code> dosyalarının birer kopyalarını kullanalım.</p> + +<ol> + <li><a href="https://fonts.google.com/">Google Fonts</a>'a gidin.</li> + <li>Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.</li> + <li>Seçmek istediğiniz yazı tipi ailesine tıklayın.</li> + <li>Yazı tipi ailesindeki yazı tiplerinin listelenecek.</li> + <li>Her yazı tipinin sağındaki "+ Select this style" tıkladığınızda sağda açılan "Selected family" ekranında (eğer açılmazsa sayfadaki sağ üsttü bulunan <img alt="" style="height: 24px; width: 24px;"> butonuna tıklayın) ilk önce gösterilen HTML kod satırını kopyalayıp HTML dosyanızın başına yapıştırmanız gerekir. CSS'nizde kullanmadan önce HTML sayfanızda CSS'inizden önce tanımlanması gerekir. Daha sonra kendi stil kodunuzu veya dosyanızı eklemelisiniz.</li> + <li>Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.</li> +</ol> + +<div class="note"> +<p><strong>Not</strong>:Tamamlanmış bir sürümü <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">canlı örneğe bir göz atın</a>.</p> +</div> + +<h2 id="font-face_daha_ayrıntılı_olarak_bakalım">@font-face daha ayrıntılı olarak bakalım</h2> + +<p>Fontsquirrel tarafından olşturulan <code>@font-face</code> kural bildirimini inceleyelim.</p> + +<p>Bloklardan biri şuna benzemektedir:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p>Bu "bulletproof @font-face sözdizimi", <code>@font-face</code> popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:</p> + +<ul> + <li><code>font-family</code>: bu satır, yazı tipine atıfta bulunmak istediğimiz adı belirler. CSS'inizde tutarlı bir şekilde kulllandığınız sürece bunu istediğiniz şekilde belirleyebilirsiniz.</li> + <li><code>src</code>: Bu satırlar, CSS'inize (<code>url</code> bölümü) aktarılacak yazı tipi dosyalarının yollarını ve her bir yazı tipi dosaysının (<code>format</code> bölümü) formatını belirtir. Her durumda ikinci bölüm isteğe bağlıdır, ancak tarayıcıların daha hızlı kullanabilecekleri bir yazı tipi bulmasına izin verdiği için bunu açıklamak yararlıdır. Birden çok bildirim, virgülle ayrılmış olarak listelenebilir — WOFF2 gibi daha yeni daha iyi formatları öne, TTF gibi daha eski ve çok iyi olmayan formatları daha sonra koymak en iyisidir. Bunun tek istisnası, EOT yazı tipleridir — IE'nin eski sürümlerindeki birkaç hatayı düzeltmek için ilk olarak yerleştirilirler ve bu sayede bulduğu ilk yazı tipini kullanmaya çalışır.</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Bu satırlar, yazı tipinin hangi ağırlığa sahip olduğunu ve italik olup olmadığını belirtir. Aynı yazı tipinin birden çok ağırlığını içe aktarıyorsanız, yazı tipi ailesinin tüm farklı üyelerini farklı adlar olarak adlandırmak yerine, ağırlıklarının/stillerinin ne olduğu belirleyebilir ve sonra aralarında seçim yapmak için farklı {{cssxref("font-weight")}}/{{cssxref("font-style")}} nitelik değerlerini kullanabilirsiniz. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: CSS'nizi basit tutmak için yazı tipi ağırlığını ve yazı tipi stilini tanımlayın</a> ile Roger Johansson ne yapmanız gerektiğini daha ayrıntılı olarak gösteriyor.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: Web yazı tipleriniz için belirli {{cssxref("font-variant")}} ve {{cssxref("font-stretch")}} değerleri de belirtebilirsiniz. Daha yeni tarayıcılarda, {{cssxref("unicode-range")}} niteliği ile web yazı tipinde kullanmak istediğiniz belirli bir karakter aralığı olan bir değer de belirteblirsiniz — destekleyen tarayıcılar da, yalnızca belirtilen karakterler indirilecek ve gereksiz indirme yapılmayacaktır. Drew McLellan tarafından yayınlanan <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.</p> +</div> + +<h2 id="Değişken_yazı_tipleri">Değişken yazı tipleri</h2> + +<p>Tarayıcılarda değişken yazı tipi adı verilen daha yeni bir yazı tipi teknolojisi vardır — bunlar, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosayasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesine izin veren yazı tipleridir. Başlangıç dersimiz için biraz ileri düzeydedirler, ancak kendinizi esnetmek ve geliştirmek istiyorsanız <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Değişken yazı tipleri klavuzumuzu</a> okuyabilirsiniz.</p> + +<h2 id="Becerilerinizi_test_edin!">Becerilerinizi test edin!</h2> + +<p>Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Modülün sonunda bu bilgileri sakladğınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a>.</p> + +<h2 id="Özet">Özet</h2> + +<p>Artık metin biçimlendirme temelleri hakkındaki makalelerimizi incelediğinize göre, topluluk okulu anasayfası olan Dizgi oluşturma modülüne yönelik değerlendirmemizle anlamanızı test etme zamanı.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> |