diff options
Diffstat (limited to 'files/tr/learn/css/styling_text/fundamentals/index.html')
| -rw-r--r-- | files/tr/learn/css/styling_text/fundamentals/index.html | 737 |
1 files changed, 737 insertions, 0 deletions
diff --git a/files/tr/learn/css/styling_text/fundamentals/index.html b/files/tr/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..0bf22d6921 --- /dev/null +++ b/files/tr/learn/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> |