diff options
Diffstat (limited to 'files/tr/learn/css/building_blocks')
22 files changed, 0 insertions, 4657 deletions
diff --git a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index da23bd22ef..0000000000 --- a/files/tr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Arka planlar ve kenarlıklar -slug: Learn/CSS/Building_blocks/Backgrounds_and_borders -tags: - - Arka Plan - - Background - - Başlangıç - - Beginner - - CSS - - Eğitim - - Image - - Kenarlık - - Konum - - Learn - - Position - - Renk - - Resim - - borders - - color -translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Backgrounds_and_borders ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktır.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSde_arka_planların_stilini_ayarlama">CSS'de arka planların stilini ayarlama</h2> - -<p>CSS'deki {{cssxref("background")}} niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.</p> - -<pre class="brush: css notranslate"><code>.box { - background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, - url(big-star.png) center no-repeat, rebeccapurple; -} </code> -</pre> - -<p>Bu eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.</p> - -<h3 id="Arka_plan_renkleri">Arka plan renkleri</h3> - -<p>CSS {{cssxref("background-color")}} niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değerini kabul eder. <code>background-color</code>, öğenin içeriğinin ve dolgusunun altını boyar.</p> - -<p>Aşağıdaki örnekte, kutuya bir arka plan rengi, bir başlık ve bir {{htmlelement("span")}} öğelerine çeşitli renk değerleri ekledik.</p> - -<p><strong>Geçerli olan <a href="/tr/docs/Web/CSS/color_value"><color></a> değerlerini kullanarak bunlarla oynayın.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> - -<h3 id="Arka_plan_resimleri">Arka plan resimleri</h3> - -<p>{{cssxref("background-image")}} niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.</p> - -<p>Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> - -<p><strong>Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte <code>background-color</code> niteliğine renk bildiriminde bulun.</strong></p> - -<h4 id="Arka_plan_tekrarını_kontrol_etme">Arka plan tekrarını kontrol etme</h4> - -<p>{{cssxref("background-repeat")}} niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:</p> - -<ul> - <li><code>no-repeat</code> — arka planın tekrarlanmasını durdur.</li> - <li><code>repeat-x</code> — yatay olarak tekrarla.</li> - <li><code>repeat-y</code> — dikey olarak tekrarla.</li> - <li><code>repeat</code> — varsayılan değer; her iki yönde de tekrarlayın.</li> -</ul> - -<p><strong>Bu değerleri aşağıdaki örnekte deneyin. Biz değerini <code>no-repeat</code> olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene. </strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> - -<h4 id="Arka_plan_resmini_boyutlandırma">Arka plan resmini boyutlandırma</h4> - -<p>Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için <a href="/tr/docs/Web/CSS/length">uzunluk</a> veya <a href="/tr/docs/Web/CSS/percentage">yüzde</a> değeri alabilen {{cssxref("background-size")}} niteliğini kullanabiliriz.</p> - -<p>Ayrıca anahtar kelimeleri de kullanabiliriz:</p> - -<ul> - <li><code>cover</code> — tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplaycak şekilde boyutlandırır. Bu durumda, görüntünün bir kısmı muhtemelen kutunun dışında kalacaktır.</li> - <li><code>contain</code> — tarayıcı, resmi kutunun içine sığacak şekilde boyutlandıracaktır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün iki yanında veya üstünde ve altında boşluklar oluşabilir.</li> -</ul> - -<p>Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.</p> - -<p>Uygula.</p> - -<ul> - <li>Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.</li> - <li>Uzunluk birimlerini sil ve <code>background-size: cover</code> veya <code>background-size: contain</code> tanımlamalarını yap.</li> - <li>Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için <code>background-repeat</code> niteliğinin değerini değiştir.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> - -<h4 id="Arka_plan_resmini_konumlandırma">Arka plan resmini konumlandırma</h4> - -<p>{{cssxref("background-position")}} niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (<code>x</code>) ve dikey (<code>y</code>) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Varsayılan olarak <code>background-position</code>'ın başlangıç değeri<code>(0,0)</code> dır.</p> -</div> - -<p><code>background-position</code> yatay ve dikey olarak iki ayrı değer alır.</p> - -<p><code>top</code> ve <code>right</code> gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için {{cssxref("background-position")}} sayfasına bak):</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top center; -} </code> -</pre> - -<p><a href="/tr/docs/Web/CSS/length">Uzunluk</a> ve <a href="/tr/docs/Web/CSS/percentage">yüzdeler</a>:</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: 20px 10%; -} </code> -</pre> - -<p>Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:</p> - -<pre class="brush: css notranslate">.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top 20px; -}</pre> - -<p>Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla konumlandırıyoruz:</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url(star.png); - background-repeat: no-repeat; - background-position: top 20px right 10px; -} </code></pre> - -<p><strong>Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın..</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <code>background-position</code> is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.</p> -</div> - -<h3 id="Degrade_arka_planlar">Degrade arka planlar</h3> - -<p>Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca {{cssxref("background-image")}} niteliği kullanılarak tanımlanır.</p> - -<p><code><a href="/tr/docs/Web/CSS/gradient"><gradient></a></code> veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan <a href="https://cssgradient.io/">birini kullanmaktır</a>.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.</p> - -<p>Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> - -<h3 id="Birden_çok_arka_plan_görüntüsü">Birden çok arka plan görüntüsü</h3> - -<p>Birden çok arka plan görüntüsüne sahip olmak da mümkündür — <code>background-image</code> niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.</p> - -<p>Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir</p> -</div> - -<p>Diğer <code>background-*</code> nitelikleride <code>background-image</code> gibi virgülle ayrılmış değerlere sahip olabilirler:</p> - -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); -background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right;</pre> - -<p>Farklı özelliklerin her bir değeri, diğer özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki <code>image1</code>'in <code>background-repeat</code> değeri <code>no-repeat</code> olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki <code>background-position</code> değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — <code>image3</code>'e ilk konum değeri <code>image4</code>'de de ikinci konum değeri verilecektir.</p> - -<p><strong>Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> - -<h3 id="Arka_plan_sabitleme">Arka plan sabitleme</h3> - -<p>Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan <span>{{cssxref("background-attachment")}} niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.</span></p> - -<ul> - <li><code>scroll</code>: Arka plan tanımlandığı öğeye değilde, sayfaya sabitlenir. Bu yüzden sayfa kaydırılırsa hareket eder. Öğenin içeriğinin kaydırılması arka planın hareket etmesini sağlamaz.</li> - <li><code>fixed</code>: Bir öğenin arka planının, sayfa veya öğe içeriği kaydırıldığında kaymaması için görünüm alanına sabitlenmesine neden olur. Ekrandaki arka plan daima aynı konumda kalacaktır.</li> - <li><code>local</code>: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü <code>scroll</code> değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. <code>local</code> değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kutu içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket eder.</li> -</ul> - -<p>{{cssxref("background-attachment")}} niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (ayrıca <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">kaynak koduda</a> burada).</p> - -<h3 id="Arka_plan_tanımı_için_kısatanım_kullanımı">Arka plan tanımı için kısatanım kullanımı</h3> - -<p>Bu dersin başında bahsettiğim gibi, genellikle {{cssxref("background")}} niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.</p> - -<p>Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından <code>no-repeat</code> değerine sahip bir görüntü ve en altta bir renk var.</p> - -<p>Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin</p> - -<ul> - <li><code>background-color</code>, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.</li> - <li> - <p><code>background-size</code> değeri, sadece <code>background-position</code> değerinden sonra '<code>/</code>' karakteriyle ayırarak tanımlanabilir.</p> - </li> -</ul> - -<p>{{cssxref("background")}} tüm detaylarını görebilmek için MDN sayfasına bir göz atın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> - -<h3 id="Arka_planla_erişilebilirlikle_ilgili_hususlar">Arka planla erişilebilirlikle ilgili hususlar</h3> - -<p>Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de <code>background-color</code> tanımlamalısın.</p> - -<p>Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.</p> - -<h2 id="Kenarlıklar">Kenarlıklar</h2> - -<p>Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.</p> - -<p>Aşağıdaki {{cssxref("border")}} ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.</p> - -<pre class="brush: css notranslate"><code>.box { - border: 1px solid black; -} </code></pre> - -<p>Veya kutunun bir kenarını hedefleyebiliriz, örneğin:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top: 1px solid black; -} </code></pre> - -<p>Bu kısatanımların bireysel nitelikleride böyle olacaktır:</p> - -<pre class="brush: css notranslate"><code>.box { - border-width: 1px; - border-style: solid; - border-color: black; -} </code></pre> - -<p>Ve daha detaylı tanımlama için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top-width: 1px; - border-top-style: solid; - border-top-color: black; -} </code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan <em>mantıksal</em> niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">farklı metin yönleri</a>'ni ele alan bir sonraki derste işleyeceğiz.</p> -</div> - -<p><strong>Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stilini, genişliğini ve rengini değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> - -<h3 id="Yuvarlatılmış_köşeler">Yuvarlatılmış köşeler</h3> - -<p>{{cssxref("border-radius")}}, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.</p> - -<p>Örneğin, bir kutunun dört köşesinin de 10 piksellik bir yarıçapa sahip olmasını sağlamak için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-radius: 10px; -} </code></pre> - -<p>Veya sağ üst köşenin yatay yarıçapı 1em ve dikey yarıçapı %10 olmasını sağlamak için:</p> - -<pre class="brush: css notranslate"><code>.box { - border-top-right-radius: 1em 10%; -} </code></pre> - -<p>Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. {{cssxref("border-radius")}}'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> - -<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> - -<p>Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders">Becerilerini test edin: Arka Planlar ve Kenarlıklar</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.</p> - -<p>Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? </p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html deleted file mode 100644 index b5b9796991..0000000000 --- a/files/tr/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: Kaynak sırası ve miras -slug: Learn/CSS/Building_blocks/Cascade_and_inheritance -tags: - - Acemi - - Art arda - - Beginner - - CSS - - Cascade - - Inheritance - - Learn - - Miras - - Oğitim - - kaynak siparişi - - kurallar - - ozgüllük - - rules - - source order - - specificity -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -original_slug: Öğren/CSS/CSS_yapi_taslari/Cascade_and_inheritance ---- -<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu dersin amacı, CSS'nin HTML'ye nasıl uygulandığına ve çakışmaların nasıl çözüldüğünü kontrol eden en temel kavranlar olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve kalıtım hakkındaki bilgilerini geliştirmektir.</p> - -<p>Bu ders üzerinde çalışmak, kursun diğer bazı bölümlerine göre daha az alaklı ve biraz daha akademik görünse de, bunları anlaman daha sonra karşılaşacağın sorunları daha kolay çözmeni sağlayacaktır! Bu bölümü dikkatlice çalışmanı ve dersi bitirmeden önce kavramları anladığını kontrol etmeni öneririm.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td><a title="Cascade: Adım adım kontrol">ardarda denetim</a> ve <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> hakkında bilgi edinmek ve CSS'de kalıtımın nasıl çalıştığını öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Çakışan_kurallar">Çakışan kurallar</h2> - -<p>CSS, <strong>Basamaklı Stil Sayfaları</strong> anlamına gelir ve <em>basamaklandırmanın(<a title="Cascade: Basamaklama - adım adım kontrol">art arda denetimin</a>)</em> anlaşılması inanılmaz derecede önemlidir. Art arda denetimin davranış şekli, CSS'i anlamanın anahtarıdır.</p> - -<p>Bir gün, bir proje üzerinde çalışıyor olacaksın ve bir öğeye uygulanması gerektiğini düşündüğün CSS'in çalışmadığını göreceksin. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmandır. <strong><a title="Cascade: Basamaklama - adım adım kontrol">Art arda Denetim</a></strong> ve <strong><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a></strong> denetim mekanizmaları bu tür bir etkileşim olduğu zaman bir kuralın geçerli olmasını sağlar. Öğenin stilini belirleyen kuralın sonucu beklediğin olmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlaman gerekir.</p> - -<p>Burada ayrıca önemli olan <strong>kalıtım</strong> kavramıdır; bu, varsayılan olarak bazı CSS özelliklerinin mevcut öğenin ebeveynlerinin sahip olduğu değerlerin bazılarını devraldığı anlamına gelir. Bu, beklemediğin bazı davranışlara neden olabilir.</p> - -<p>Anlattığım temel konulara hızlıca bir göz atarak başlayalım, ardından sırayla her birine bakıp birbirleriyle ve CSS'le nasıl etkileşim kurduklarını görelim. Bu, anlaşılması zor bir ders gibi gelebilir.</p> - -<h3 id="Art_arda_denetim"><a title="Cascade: Basamaklama - adım adım kontrol">Art arda denetim</a></h3> - -<p>Stil sayfaları <strong>basamaklıdır</strong> — çok basit bir şekilde bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllüğe</a> sahip olan iki kural uygulandığında, CSS en son gelen kural kullanılacaktır.</p> - -<p>Aşağıdaki örnekte, <code>h1</code> seçicisini kullandığım iki adet kuralım var. CSS'de yazılan bu kurallar aynı seçici olması ve aynı özgülleğe sahip olduklarından mavi(<code>blue</code>) olan kırmızı(<code>red</code>)'dan sonra geldiği için bu yarışı kazanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> - -<p>Şöyle özetlemek gerekirse: CSS stil sayfasını ilk yorumlamaya başladığında stil sayfamızı adım adım okumaya başlar. İlk önce 1. satırda belirtilen <code>h1</code> etiketimizi seçip <code>color</code> niteliğini 2. satırda belirtiğimiz kırmızı(<code>red</code>) olarak tanımlar ve dosyamızı okumaya devam eder. 3. satırdaki } süstlü parantezle birlikte <code>h1</code> öğemizle ilgili tamınlamayı bitir. Tekrardan 4. satırdaki <code>h1</code> öğesinin <code>color</code> niteliğini 5. satırdaki mavi(<code>blue</code>) olarak tanımlar. CSS stil sayfamızın sonuna geldiğinde etiketteki nitelik değerlerini HTML sayfamızdaki öpelere uygulamaya başlar. <code>h1</code> öğesinin <code>color</code> değişkeninde en son atanan değer mavi(<code>blue</code>) olduğu için HTML sayfamızdaki <code>h1</code> öğemizin renk değeri mavi olur.</p> - -<p>Bir sonraki kısımda CSS'in öğelerimizin nitelik değerlerine atama yaparken göz önünde bulunan diğer bir kritere değineceğiz.</p> - -<h3 id="Özgüllük"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">Özgüllük</a></h3> - -<p>Özgüllük; Birden çok kuralın farklı seçicileri varsa, yinede aynı öğeye işaret ediyorsa tarayıcının hangi kuralın uygulanacağına karar vermesidir. Temelde, bir seçicinin seçiminin ne kadar özgül olacağının bir ölçüsüdür:</p> - -<ul> - <li>öğe seçici daha az belirsizdir — HTML sayfasında bulunan kendi türündeki tüm öğeleri seçer — bu yüzden daha düşük puan alır.</li> - <li>Sınıf seçici daha belirgindir — sadece HTML sayfasındaki <code>class</code> nitelik değerine sahip öğeleri seçer — bu yüzden daha yüksek puan alır.</li> -</ul> - -<p>Örnek zamanı! Aşağıda <code>.main-heading</code> sınıfına dahil <code><h1></code> etiketi seçicimiz var. CSS sayfamızdaki kurallar uygulanırken sınıf seçicinin özgüllüğü daha yüksek olduğu için öğe seçicimiz sınıf seçicimizden daha sonra gelmiş olmasına rağmen HMTL öğemize uygulanmaz. Bu sefer yarışı sınıf seçicimiz kazanır ve içeriğimiz kırmızı görünür.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> - -<p>Bunuda şöyle özetlemek gerekirse: CSS stil sayfamızı yorumlamaya başladığında sayfamızı adım adım okumaya başlar. İlk önce <code>.main-heading</code> sınıfımızın color niteliğini kırmızı olarak tanımlar. Sonraki adımlarda <code>h1</code> öğemizin <code>color</code> nitelik değerini de mavi olarak tanımlar. Sayfamızın sonuna geldiğinde toplamış olduğu verileri HTML sayfamızdaki öğelere uygularken öğelerimizin tanımlarına bakarak ilerler. Sayfadaki tüm <code>h1</code> öğeleri renk tanımlarını blue olarak tanımlayacaktır fakat bizim HTML sayfamızda sadece tek bir <code>h1</code> öğesi olduğundan ve oda bir sınıfa dahil olduğu için, dahil olduğa sınıfa ait bir CSS kuralı olup olmadığına bakar. Eğer sınıfa ait bir kural varsa bu kuralı uygular yoksa öğe etiketi için tanımlamış olduğu kuralı uygular. CSS sayfamızda öğe seçici kuralı, sınıf seçici kuralından sonra gelmiş olsa bile özgüllük sınavını geçemez.</p> - -<p>Özgüllük puanlamasını ve diğer benzer nitelikleri daha sonra açıklayacağız.</p> - -<h3 id="Miras">Miras</h3> - -<p>Üst öğelere uygulanan CSS stillerin bir kısmı alt öğeler tarafından <strong>miras</strong> olarak alınır.</p> - -<p>Örneğin, <code>color</code> ve <code>font-family</code> niteliklerini bir öğeye ayarlarsan ve öğenin alt öğeleri doğrudan farklı bir renk ve yazı tipi değeri tanımlamazsan, nitelik verilen öğenin içinde bulunan tüm öğelerin renk ve yazı tipi üst öğenin tanımlandığı şekilde şekillendirilecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> - -<p>Bazı özellikler miras olarak alınmaz — Örneğin; {{cssxref("width")}} niteliğini %50 olarak ayarlarsan, tüm alt öğelerin genişlikleri üst öğelerin genişliğinin %50'si olacak şekilde tanımlanmaz. Durum bu şekilde olsaydı CSS'in kullanılması sinir bozucu olurdu!</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: MDN CSS nitelikleri referans sayfalarında, nitelikler bölümünün altında, niteliğin miras alıp almadığıda dahil olmak üzere bir dizi veri noktasının listelendiği teknik bilgi tablosunu bulabilirsin. <a href="/tr/docs/Web/CSS/color#Specifications">Renk özelliği ayrıntıları</a>, bölümüne bakın.</p> -</div> - -<h2 id="Kavramların_birlikte_nasıl_çalıştığını_anlamak">Kavramların birlikte nasıl çalıştığını anlamak</h2> - -<p>Bu üç kavram (art arda denetim, özgüllük ve miras) birlikte hangi CSS'in hangi öğelere uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Biraz karmaşık görünebilir, Ancak CSS ile daha deneyimli hale geldikçe bunları hatırlamaya başlayacaksın ve unutursan her zaman buradaki ayrıntılara bakabilirsin! Deneyimli geliştiriciler bile tüm tedayları hatırlamıyor.</p> - -<p>Aşağıdaki video, bir sayfanın art arda kontrol, özgüllüğü ve daha fazlasını incelemek için Firefox Geliştirici Araçlarını nasıl kullanabileceğini gösterir:</p> - -<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p> - -<h2 id="Mirası_anlamak">Mirası anlamak</h2> - -<p>Mirasla başlayacağız. Aşağıdaki örnekte , İki seviyeli sırasız listemiz bulunmakta {{HTMLElement("ul")}}. Dış taraftaki <code>ul</code> öğemize bir sınır, dolgu ve yazı tipi rengi verdik.</p> - -<p>Renk doğrudan çocuklara da uygulandı, aynı zamanda dolaylı çocuklara(torunlara) da uygulandı <code><li></code>. Daha sonra ikinci listemizi <code>special</code> sınıfını ekledik ve ona farklı bir renk uyguladık. Bu sınıftaki değerlerde ikicinci listemizin çocukları tarafından miras alındı.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> - -<p>Genişlikler(yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve sınırlar miras olarak alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her liste öğesi bir sınır kazanırdı — muhtemelen istediğimiz bir etki değil!</p> - -<p>Hangi özellikler varsayılan olarak miras alınıp alınmadı büyük ölçüde sağduyuya bağlıdır.</p> - -<h3 id="Mirası_kontrol_etmek">Mirası kontrol etmek</h3> - -<p>CSS, mirası kontrol etmek için dört özel evrensel nitelik değeri sağlar. Her CSS niteliği bu değerleri kabul eder.</p> - -<dl> - <dt>{{cssxref("inherit")}}</dt> - <dd>Seçilen öğe niteliğinin miras alıp alamadığına bakılmaksızın, ebeveyninden miras alması sağlanır.</dd> - <dt>{{cssxref("initial")}}</dt> - <dd>Niteliğe tanımlanmış tüm kurallar yok sayılır ve tüm miraslar engellenilerek <a href="/tr/docs/Web/CSS/initial_value">başlangıç değerine</a> ayarlanır(sıfırlarnır. Varsayılan değerler de kullanılmaz).</dd> - <dt>{{cssxref("unset")}}</dt> - <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerinin sıfırlanmasını sağlar. Miras alabilen nitelikler için {{cssxref("inherit")}} gibi, alamayan nitelikler için {{cssxref("initial")}} gibi davranır.</dd> - <dt>{{cssxref("revert")}}</dt> - <dd>Seçilen öğe niteliği doğal olarak miras alabiliyorsa değeri miras olarak almasını, doğal olarak miras alamıyorsa değerin tarayıcının veya kullanıcının varsayılan stil sayfasında belirtilmiş varsayılan değerin tanımlanmasını sağlar.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bunların nasıl çalıştıkları hakkında daha fazla bilgi için {{SectionOnPage("/tr/docs/Web/CSS/Cascade", "CSS Kökeni bildirisi")}}'ne bak.</p> -</div> - -<p>Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebilirsin. Aşağıdaki etkileşimli örnek, CSS ile oynamana ve değişiklik yaptığında ne olacağını görmene onlanak tanır. Kodla oynamak HTML ve CSS ile başa çıkmanın en iyi yoludur.</p> - -<p>Örnek:</p> - -<ol> - <li>İkinci liste öğesine <code>my-class-1</code> sınıfı uygulanmıştır. Bu sınıf <code><a></code> öğesinin rengini miras alacak şekilde ayarlar. Kuralı kaldırdığında bağlantı rengi nasıl gözükür?</li> - <li>Üçüncü ve dördüncü halkaların neden oldukları renk değişimlerini anlıyor musun? Eğer anlamadıysan yukarıdaki açıklamayı yeniden gözden geçir.</li> - <li><code><a></code> öğesinin yeni bir renk tanımlarsan hangi öğelerin rengi değişir. Örnek <code>a { color: red; }</code>?</li> -</ol> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> - -<h3 id="Tüm_öğelerin_değerlerini_sıfırlama">Tüm öğelerin değerlerini sıfırlama</h3> - -<p>CSS'in <code>all</code> niteliği, öğelerin mirası kontrol eden değerlerini öğenin tüm niteliklerine uygulamak için kullanılır. Bu miras kontrol değerlerinin herhangi biri için kullanılabilir(<code>inherit</code>, <code>initial</code>, <code>unset</code> veya <code>revert</code>). Yeni tanımlara başlamadan önce bilinen bir başlangıç noktasına geri dönebilmen için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.</p> - -<p>Aşağıdaki örnekte iki adet alıntı bloğu var(<code>blockquote</code>). CSS sayfamızda alıntı bloğuna uygulanan bir stilimiz var ve sınıf tanımımızda da öğelerin tüm niteliklerindeki miras kontrol değerini tek seferde <code>unset</code> değerini atayan bir bildirimimiz var: <code>all</code>: <code>unset</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> - -<p> <code>all</code> niteliğine mevcut diğer değerleri atayıp farkın neler olduğunu gözlemle.</p> - -<h2 id="Ardarda_kontrolü_anlamak">Ardarda kontrolü anlamak</h2> - -<p>HTML yapısının derinliklerine yerleştirilmiş bir paragrafın, gövdeye uygulanan bir CSS ile neden aynı renk olduğunu şimdi anlıyoruz. Ayrıca belgenin herhangi bir noktasında bir öğeye uygulanan CSS'i nasıl değiştirebileceğimizi de biliyoruz. Şimdi, birden fazla seçicinin bir öğeye stil uyguladığında, art arda kontrolün hangi CSS kuralının geçerli olduğunu nasıl tanımladığına düzgün bir şekilde bakacağız.</p> - -<p>Burada önem sırasına göre sıralanan, dikkate alınması gereken üç etken vardır. Sonraki bir öncekini geçersiz kılar:</p> - -<ol> - <li><strong>Kaynak sırası</strong></li> - <li><strong>Özgüllük</strong></li> - <li><strong>Önem</strong></li> -</ol> - -<p>Tarayıcıların tam olarak hangi CSS'in uygulanması gerektiğini nasıl anladığını görmek için bunları irdeliyeceğiz.</p> - -<h3 id="Art_arda_denetim_2">Art arda denetim</h3> - -<p>Art arda denetim için kaynak sırasının ne kadar önemli olduğunu zaten görmüştük. Tam olarak aynı ağırlığa sahip birden fazla kuralın varsa, en son gelen kural dikkate alınır. Bunu öğeleri biçimlendirilme aşaması anına, en yakın olan kuralın kazandığı bir eleme olarak düşünebilirsin. Kaynak sırasındaki seçicilerin hedef kitlesi geneldir, HTML sayfasında seçicinin belirttiği bütün öğeleri seçer.</p> - -<h3 id="Özgüllük_2"><a title="Özel etken oranı: Kuralı uygulanacak en baskın seçiciyi belirleme">Özgüllük</a></h3> - -<p>Kaynak sırasının önemli olduğu gerçeğini anladık; fakat bir öğenin stili için yapmış olduğun kuralın, stil sayfandaki kaynak sırasında sonda olmasına rağmen ondan bir veya daha önceki kuraldan etkilendiğini göreceksin. Bunun nedeni, önceki kuralın <strong>daha yüksek özgüllüğe</strong> sahip olmasıdır — hangi kuralın özgüllüğü daha yüksek ise, tarayayıcı öğeleri şekillendirecek kural olarak onu seçer. Çünkü özgüllüğü yüksek olan seçiciler(<code>class</code>, <code>id</code> vb.) HTML sayfasında bulunan bütün elamanları değilde tanımlandıkları öğenin/öğelerin üzerinde etkili olduklarından hedefleri daha belirgindir. Ayrıca eşit özgüllüğe sahip seçiciler kendi aralarında kaynak sırasına tabidir.</p> - -<p>Bu derste daha önce gördüğümüz gibi, sınıf seçicinin ağırlığı öğe seçiciden daha fazladır, bu nedenle sınıfta tanımlanan özellikler öğeye doğrudan uygulanan şekillleri geçersiz kılar.</p> - -<p>Burada dikkat edilmesi gereken şey, öğeye uygulanan kurallardaki tüm nitelikleri değilde sadece aynı nitelik üzerinde tanımlanmış kuralları etkilemesidir. Örneğin ilk kuralda renk ve font tanımı olsun, özgüllüğü yüksek veya sonra gelen kuralda sadece renk tanımı varsa bir önceki veya düşük özgülleğe sahip kuraldaki font tanımını etkilemez.</p> - -<p>Bu davranış, CSS'de tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stilleri tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin; aşağıdaki stil sayfasında 2. seviye başlıklar için genel stilleri tanımladık ve sonra sadece bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır, daha sonra sınıflarla birlikte başlıklara daha karakteristik değerler uygulanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> - -<p>Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından üzerine yazılabileceğini zaten biliyoruz. Esasen bu seçicilere verilen puan cinsinden bir değerdir, farklı türdeki seçicilere ait puanlarını toplamak bize söz konusu seçicinin özgüllük değerini verir ve bu da diğer kuralların sahip oldukları puan ile karşılaştırılır.</p> - -<p>Bir seçicinin sahip olduğu özgüllük miktarı dört farklı değer (veya bileşen) kullanılarak ölçülür, bunlar binler basamağı, yüzler basamağı, onlar basamağı ve birler basamağı olarak düşünülebilir.</p> - -<ol> - <li><strong>Binler basamağı</strong>: Bir bildirim HTML içerisinde tanımlarken {{htmlattrxref("style")}} niteliğiyle şekillendiriliyorsa bu sütuna bir puan eklenir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000'dir.</li> - <li><strong>Yüzler basamağı</strong>: Öğeye tanımlanmış bir kimlik için seçici <code>(id</code>) varsa, bu sütuna bir puan eklenir.</li> - <li><strong>Onlar Basamağı</strong>: Her bir sınıf(<code>class</code>), öznitelik veya genel seçicide bulunan sözde sınıf için bu sütuna bir puan eklenir.</li> - <li><strong>Birler</strong>: Genel seçici içinde bulunan her bir öğe veya sözde öğe için bu sütunda bir puan eklenir.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Evrensel seçici (<code>*</code>), birleştirici seçiciler (<code>+</code>, <code>></code>, <code>~</code>, ' '), ve olumsuzluk ifadesi sözde sınıfının (<code>:not</code>) özgüllük üzerinde herhangi bir etkisi yoktur.</p> -</div> - -<p>Aşağıdaki tablo, birkaç seçilmiş örneği göstermektedir. Bunları gözden geçirmeye ve onlara verdiğimiz özgüllüğü anlamaya çalış. Seçicileri henüz ayrıntılı olarak ele almadık, istersen her bir seçicinin ayrıntılarını MDN <a href="/tr/docs/Web/CSS/CSS_Selectors">seçiciler kaynağına </a>bakabilirsin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Binler</th> - <th scope="col">Yüzler</th> - <th scope="col">Onlar</th> - <th scope="col">Birler</th> - <th scope="col">Toplam özgüllük</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>h1</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1</td> - <td>0001</td> - </tr> - <tr> - <td><code>h1 + p::first-letter</code></td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>3</td> - <td>0003</td> - </tr> - <tr> - <td><code>li > a[href*="tr"] > .inline-warning</code></td> - <td>0</td> - <td>0</td> - <td>2</td> - <td>2</td> - <td>0022</td> - </tr> - <tr> - <td><code>#identifier</code></td> - <td>0</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0100</td> - </tr> - <tr> - <td>{{htmlattrxref("style")}} niteliği. İçinde seçici yok.</td> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>1000</td> - </tr> - </tbody> -</table> - -<p>Devam etmenden önce bir örneğe bakalım.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> - -<p>Peki burada neler oluyor? İlk önce, bu örneğin ilk yedi kuralıyla ilgileniyoruz ve fark edeceğin gibi, bunların özgüllük değerlerini her birinden önce yoruma ekledim.</p> - -<ul> - <li>İlk iki seçici, bağlantının arka plan renginin stili üzerinde rakabet ediyor — ikincisi kazanır ve arka plan rengi mavi yapar çünkü zincirde fazladan bir kimlik <code>id</code> seçicisi vardır: özgüllüğü 201'e karşı 101'dir.</li> - <li>Üçüncü ve dördüncü seçiciler, bağlantının metin rengi üzerinde rekabet ediyor — ikincisi kazanır ve metni beyaz yapar çünkü bir tane daha az öğe seçiciye sahip olmasına rağmen, eksik olanın yerine bir tane sınıf seçiciye sahip. Yani kazanan özgüllük 113'e 104'tür.</li> - <li>Seçiciler 5-7, üzerine gelindiğinde bağlantının kenarlığının üzerinde rekabet ediyor. Seçici altı, 23'e 24'le beşe kaybeder — zincirde bir adet daha az seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hemde altıyı yener — zincirde beşle aynı sayıda alt seçiciye sahip olmasına rağmen bir öğe seçicinin yerinde bir sınıf seçici vardır. Yani kazanan 23 ve 24'de karşı 33'tür.</li> -</ul> - -<ol> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Bu, anlaşılma kolaylığı açısından yalnızca bir örnektir. Gerçekte, her seçici türünün, daha düşük özgüllük dizeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyi vardır. Örneğin, bir <em>milyon</em> <strong>sınıf(<code>class</code>) </strong>seçici, bir <strong>kimlik(<code>id</code>) </strong>seçicinin üzerine yazamaz.</p> - -<p>Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük seviyelerini ayr ayrı en yüksekten başlayarak en düşüğe doğru puanlamak olacaktır. Yanlızca belirli bir düzeydeki seçici puanları arasında bir bağ olduğunda, bir sonraki düzeyi aşağı doğru değerlendirmen gerekir; aksi takdirde, daha yüksek özgüllük seviyelerinin üzerine asla yazmacakları için daha düşük özgüllük seviyesi seçicleri göz ardı edebilirsin.</p> -</div> - -<h3 id="!important_!önemli">!important (!önemli)</h3> - -<p>Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğin özel bir CSS <em>bildirimi</em> var, ancak onu kullanırken çok dikkatli olmalısın — <code>!important</code>. Bu, belli bir özelliği-şekli belirli bir öğeye veya öğelere uygulamak istediğimiz tanımları uygulanabilmesi için, kademenin diğer tüm kurallarını geçersiz kılar.</p> - -<p>Bir tanesinin bir kimliğe sahip iki tane paragrafımızın olduğu bu örneğe bir göz atın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> - -<p>Neler olduğunu görmek için bunu gözden geçirelim — anlamakta zorlanıyorsan ne olacağını görmek için bazı özellikleri kaldırmayı deneyin:</p> - -<ol> - <li>Üçüncü kuralın {{cssxref("color")}} ve {{cssxref("padding")}} değerlerinin uygulandığını, fakat {{cssxref("background-color")}} değerinin uygulanmadığını göreceksin. Neden? Gerçekten üçü de kesinlikle uygulanmalıdır, çünkü kaynak sıradaki kurallar genellikle daha önceki kuralları geçersiz kılar.</li> - <li>Bununla birlikte, yukarıdaki kurallar kazanır, çünkü sınıf seçiciler öğe seçilerden daha yüksek özgüllüğe sahiptir.</li> - <li>Her iki elamanda <code>better</code> sınıfına ({{htmlattrxref("class")}}) atanmış, ama bir tanesi <code>winning</code> kimliğine({{htmlattrxref("id")}}) atanmış. Kimliklerin sınıflardan <em>daha yüksek bir özgüllüğü</em> olduğundan (bir sayfadaki her benzersiz kimliğe sahip yalnızca bir öğe olabilir, ancak aynı sınıfa sahip birçok öğe bulunabilir — kimlik seçicileri hedefledikleri öğe açısından daha belirgindir), 1 piksel kalınlığındaki siyah kenarlık 2. nesneye uygulanmalı, ilk öğe gri arka plan rengini almalı ve sınıf tarafından belirtildiği gibi kenarlık olmamalıdır.</li> - <li>2. elamanın arka planı kırmızı (<code>red)</code> ancak hiçbir sınırı yok. Neden? Çünkü ikinci kuraldaki bildirim nedeniyle: <code>!important</code> — Kimlik(<code>ID</code>) daha yüksek bir özgüllüğe sahip olsa bile, <code>border: none</code> nitelik tanımlaması <code>!important</code> bildirimine sahip olduğu için tüm kuralları aşarak kazanmış olur.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: <code>!important</code> bildirimini geçersiz kılmanın tek yolu, daha sonra kaynak sırasına veya aynı özgüllüğe sahip daha sonraki kaynak sırasına veya daha yüksek özgüllüğe sahip bir <code>!important</code> bildiriminde bulunmak.</p> -</div> - -<p><code>!important</code> bildiriminin var olduğunu bilmek, başka kişilerin kodlarında onunla karşılaştığında ne olduğunu bilmen için yararlıdır. <strong>Ancak, kesinlikle mecbur kalmadıkça asla kullanmamanı şiddetle taviye ederim</strong>. <code>!important</code> Kaynak sırasının normal çalışma şeklini değiştirir. Bu nedenle büyük bir stil sayfasında CSS sorunlarının hata ayıklamasını gerçekten zorlaştırır.</p> - -<p>Kullanmanı gerektirebilecek bir duruma örnek vermek gerekirse, çekirdek CSS modüllerini düzenleyemediğin bir CMS üzerinde çalışırken ve başka bir şekilde geçersiz kılınamayan bir stili gerçekten geçersiz kılmak istediğinde faydalı olabilir. Ama farklı bir şekilde yapabiliyorsan kullanma.</p> - -<h2 id="CSS_konumunun_etkisi">CSS konumunun etkisi</h2> - -<p>Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da bilmende fayda var — kullanıcılar, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlayabilir, örneğin, kullanıcı görme engelli olabilir ve daha kolay okuma sağlamak için ziyaret ettiği tüm web sayfalarında yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlayabilir..</p> - -<h2 id="Özet">Özet</h2> - -<p>İhtilaflı beyanlar aşağıdaki sırayla uygulanacak, daha sonraki beyanlar öncekileri geçersiz kılacaktır:</p> - -<ol> - <li>Kullanıcı aracındaki stil sayfaları (ör. Tarayıcının varsayılan stilleri, başka bir stil ayarlanmadığında kullanılır).</li> - <li>Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen şekillendirmeler).</li> - <li>Yazar şekillendirme sayfasındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen şekillendirmelerdir).</li> - <li>Yazar stil sayfalarındaki önemli bildirimler.</li> - <li>Kullanıcı stil sayfalarındaki önemli bildirimler.</li> -</ol> - -<p>Web geliştiriclerinin şekillendirme sayfalarının kullanıcı şekillendirme sayfalarını geçersiz kılması mantıklıdır, böylece tasarım amaçlandığı gibi korunabilir, ancak bazen kullanıcıların yukarıdaki belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri olabilir. Bunu da <code>!important</code> bildirimini kullanarak sağlayabilirler.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu makalede bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri kavradığını doğrulamak için senin için bazı testler hazırladım. — bk. <a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_tasks">Becerilerini test edin: Kaynak sırası.</a></p> - -<h2 id="Sıradaki_ne">Sıradaki ne</h2> - -<p>Bu makalenin çoğunu anladıysan, tebrik ederim — CSS'in temel makaniğine aşina olmaya başladın. Sırada, seninle seçicilere ayrıntılı olarak bakacağız.</p> - -<p>Kaynak sırasını, özgüllüğü ve mirası tam olarak anlamadıysan endişelenme! Bunlar, şu ana kadar derste ele aldığımız en karmaşık ve bazen profesyonel web geliştiricilerinin bile zorlandığı konulardır. Kursa devam ederken bu makaleye birkaç kez dönmeni ve bu konular üzerinde biraz daha kafa yormanı tavsiye ederim.</p> - -<p>Beklendiği gibi uygulanmayan şekillendirmelerle ilgili garip sorunlarla karşılaşmaya başlarsan buraya tekrar bak. Özgüllük sorunu olabilir.</p> - -<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/debugging_css/index.html b/files/tr/learn/css/building_blocks/debugging_css/index.html deleted file mode 100644 index 37af423069..0000000000 --- a/files/tr/learn/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: CSS'de hata ayıklamak -slug: Learn/CSS/Building_blocks/Debugging_CSS -tags: - - Acemi - - Beginner - - CSS - - DOM - - Debugging - - DevTools - - Eğitim - - Hata Ayıklama - - Kaynak kod - - Learn - - source -translation_of: Learn/CSS/Building_blocks/Debugging_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Debugging_CSS ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> - -<p>Bazen CSS yazarken, CSS'in beklediğini yapmadığı bir sorunla karşılaşabilirsin. Belki belirli bir seçicinin bir öğeyle eşleşmesi gerektiğine inanıyorsun ancak hiçbir şey olmuyor veya bir kutu beklediğinden farklı bir boyuttadır. Bu ders, bir CSS sorununu nasıl gidereceğin konusunda rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini gösterecektir.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Tarayıcının temellerini ve DevTools ile CSS'in basit bir şekilde nasıl incelenip düzenlenebileceğini öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Tarayıcılarda_DevToolsa_nasıl_erişilir">Tarayıcılarda DevTools'a nasıl erişilir</h2> - -<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirici araçları nelerdir</a> dersi; çeşitli tarayıcılarda ve platformlarda araçlara nasıl erişileceğini açıklayan güncel bir rehberdir. Çoğunlukla belirli bir tarayıcıda geliştirmeyi seçebilir ve bu nedenle o tarayıcıda bulunan araçlara aşina olabilirsin. Fakat bunlara diğer tarayıcılarda da nasıl erişebileceğini bilmek faydalı olacaktır. Bu, birden çok tarayıcı arasında tasarımında farklılıklar görüdüğünde yardımcı olacaktır.</p> - -<p>Ayrıca, tarayıcılar DevTools'larını oluştururken farklı alanlara odaklandıklarını göreceksin. Örneğin, Firefox'ta CSS düzeni ile görsel olarak çalışabilmek için, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Izgara Düzeni</a>, <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>'ı ve <a href="/tr/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Biçimleri</a> incelemenizi ve düzenlemenizi sağlayan bazı mükemmel araçları vardır. Ancak, diğer tarayıcılar da bunlara benzer temel araçlara sahiptirler.</p> - -<p>Bu derste, Firefox Geliştirici Araçlarının CSS ile çalışmak için bazı yararlı özelliklerine bakacağız. Bunu yapmak için <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">örnek bir dosya</a> kullanacağım. Devam etmek istiyorsanız bunu yeni bir sekmede açman ve yukarıda bağlantısı verilen derste açıklandığı gibi DevTools'a erişmelisin.</p> - -<h2 id="DOM_ve_görüntüleme_kaynağı_karşılaştırması">DOM ve görüntüleme kaynağı karşılaştırması</h2> - -<p>Yeni gelenleri DevTools'a çekebilecek bir şey, bir web sayfasının <a href="/tr/docs/Tools/View_source">kaynağını görüntülediğinde</a> veya sunucuya koyduğunuz HTML dosyasına baktığınızda gördüklerin ile DevTools'un <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Panelinde</a> görebileceklerin arasındaki farktır. Kaynağı Görüntüle aracılığıyla görebileceğine kabaca benzer görünse de bazı farklılıklar vardır.</p> - -<p>Tarayıcı DOM'da kötü yazılmış bazı HTML'yi bizim için düzeltmiş olabilir. Bir öğe yanlış kapatılmış ise, örneğin bir adet açmış olduğunuz <code><h2></code><font><font> etiketini </font></font><code></h3></code> ile kapatırsanız, tarayıcı ne yapmak istediğinizi anlar ve DOM'daki HTML'yi yanlış kapatılan <code></h3></code>'ü <code></h2></code> ile düzeltir. Tarayıcı ayrıca tüm HTML'yi normalleştirecek ve DOM'daki JavaScript tarafından yapılan tüm değişiklileri de gösterecektir.</p> - -<p>Kaynağı görüntüle ile görünen sunucuda depolanan HTML kaynak kodudur. DevTools ile karşılaştırıldığında, DevTools ziyaret edilen sayfanın ziyaret edildiği esnada kaynak kodunun yanında yeniden şekillendirilen(JavaScript vb) <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML ağacı</a>'nda ne olup bittiği hakkında daha detaylı bilgi vermektedir.</p> - -<h2 id="Uygulanan_CSSi_inceleme">Uygulanan CSS'i inceleme</h2> - -<p>Sayfanda incelemek istediğin öğeyi seçtikten sonra, farenin sağ/ctrl+sol tuşuyla tıkladıktan sonra açılan menüden <em>öğeyi incele</em>'yi seçerek veya <em>Araçlar</em> menüsündeki <em>Web geliştirici</em> sekmesinde bulunan seçeneklerden birini seçerek <em>DevTools'a</em> geçiş yapabilirsin. Ders boyunca ortak çalışma alanımız olması için hazırladığım örnek web sayfasındaki <code>box1</code> sınıfına atanmış öğeyi seçip <em>DevTools'u </em>aktif hale getirerek anlatımıza başlayabiliriz. Seçecek olduğumuz öğe örneğimizdeki kenarlığa sahip ilk öğededir.</p> - -<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> - -<p>Açılan <em>DevTools</em> ekranında birçok sekme ve bu sekmeler içerisinde çeşitli düzenleme ve kontrol alanlarının olduğunu göreceksin. Açılan bölümde <em>Denetçi</em> sekmesinde bulunan HTML alanının sağındaki <a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Kurallar görünümüne</a> bakarsan, seçmiş olduğun öğeye uygulanan CSS niteliklerini ve değerlerini görmelisin. Öğemize doğrudan uygulanan <code>box1</code> sınıfına ait kuralları ve ebeveynlerinden miras aldığı CSS kurallarını listeleyecektir, bizim durumumuzda öğemizin ebeveyni olan <code><body></code>'den alınan miraslar da olacaktır. İstemediğimiz CSS davranışlarını tespit etmemize olanak sağlayacak yer burasıdır. Belki bir üst öğeden miras alıyordur veya farklı bir kuralın etkisi altındadır. Böyle bir durumla karşılaştığımızda bu öğe için yeni bir kural yazılıp yazılmayacağına karar vermemize yardımcı olacak kısım da burasıdır.</p> - -<p>Ayrıca, kısa tanımları genişletme yeteneğini de faydalı bulacaksın. Örneğimizde kullandığım <code>margin</code> kısa tanımı üzerinden ilerleyelim.</p> - -<p><strong>Kısa tanımı genişletip uzun tanımlarının nitelik ve özelliklerini görebilmek için, nitelik etiketinin sonunda, değerin ise önünde bulunan küçük oka tıklayalım. Bu küçük ok aynı zamanda hangi niteliklerin kısa tanım olduğunu bilmemizde bize yardımcı olur. Kısa tanım olmayan nitelik etiketlerinin sonunda bu küçük ok bulunmaz.</strong></p> - -<p><strong>Kurallar görünümünde aynı zamanda öğemize uygulanan CSS kurallarını aktif/pasif konumuna getirebiliriz. Farenin imlecini niteliğimizin üzerine getirdiğimizde görünen onay kutusunun onayını kaldırdırdığımızda öğeye uygulanan CSS kuralının artık uygulanmadığını görebilirsin. Yeniden aktifleştirmek için onay kutusunu onaylaman yeterli olacaktır. Örneğin, <code>border-radius</code> niteliğimizin onay kutusunudaki işareti kaldırırsak CSS uygulamayı durduracaktır. Kısa tanımların uzun tanımlarını görebiliriz fakat bunların bildirimlerini bizim yapmadığımız ve <em>DevTools</em> bilgi için listelediğinden bunları aktif/pasif konumuna getiremeyiz. Uzun tanımların da aktif/pasif olabilmesi için CSS dosyamızda bizim tarafından tanımlanması gerekmektedir.</strong></p> - -<p>Bunu bir A/B karşılaştırması yapmak, kuralın uygulanmış halinin mi yoksa uygulanmadığı halinin mi daha iyi olduğuna karar vermek ve aynı zamanda bir hatalı gösterim varsa bu hatanın işlem yaptığımız kuraldan mı kaynaklandığını bulabilmek için bu özelliği kullanırız. Mesela tasaramımızda bir düzensizlik var ve <code>box1</code> sınıfımıza ait kuralların içerisindeki bir bildirimden mi kaynaklandığını tespit etmek istiyorsak, tek tek bildirimlerimiz üzerindeki onay kutularının işaretlerini kaldırıp kontrol etmemizi sağlar.</p> - -<p>Aşağıdaki video, Firefox Geliştirici Araçlarını kullanarak CSS'de hata ayıklama konusunda bazı yararlı ipuçları sağlar:</p> - -<p>{{EmbedYouTube("O3DAm82vIvU")}}</p> - -<h2 id="Değerleri_düzenleme">Değerleri düzenleme</h2> - -<p>Nitelikleri aktif/pasif konuma getirmenin yanı sıra niteliklerimizin değerlerini de değiştirebiliriz. Bir öğenin boyutunun daha büyük/küçük olmasını ve belki başka bir rengin daha iyi görünmesine veya daha iyi bir kontrasta sahip olabileceğini görmek isteyebiliriz. DevTools bir stil sayfasını düzenlemek ve sayfayı yeniden yüklemekten daha fazla zaman kazandırır.</p> - -<p><strong>Seçtimiz <code>box1</code> sınıfına ait öğemizin <em>Kurallar görünümündeki</em> <code>color</code> niteliğinin yanıda ki küçük renkli daireye tıklayalım.</strong><strong> Bir renk seçicinin açıldığını ve farklı renkleri deneyebilmemiz için tanımlanabilecek tüm renkleri bize gösterdiğini göreceksin. Bu küçük pencereden istediğin rengi seçebilir ve bu seçiminin gerçek zamanlı web belgenize uygulandığını görebilirsin. Benzer bir şekilde, kenarlığın genişliğini, stilini veya rengini de değiştirebilirsin.</strong></p> - -<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> - -<h2 id="Yeni_nitelik_eklemek">Yeni nitelik eklemek</h2> - -<p><em>DevTools'u</em> kullanarak niteliklerde ekleyebiliriz. Belki de kutunun <code><body></code> öğesinden miras aldığı yazı tipi boyutunu değiştirmek ve kendi boyutunu ayarlamak istediğini fark edebilirsin. Bunu CSS dosyanıza eklemeden önce DevTools'ta yapabilirsin.</p> - -<p><strong>Yeni bir bildirim girebilmek için kuralın sonunda bulunan <code>}</code> süslü paranteze tıklamalısın, bu noktada yeni niteliği yazmaya başladığında DevTools size öğenizle eşleşen tüm niteliklerin otomatik tamamlama listesini sunacaktır. İstediğiniz niteliği seçtikten/yazdıktan sonra istediğiniz değeri verebilirsiniz. Biz burada örnek olması itibariyle <code>font-size</code> niteliğini seçeceğiz. Aynı seçiciyle ek bir kural eklemek için Kural görünümünde bulunan + düşmesine tıklayabilir ve yeni kuralını oluşturabilirsin.</strong></p> - -<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Kurallar görünümde başka yararlı özelliklerde vardır. Buna örnek geçersiz bir değere sahip veya başka bir kural tarafından ezilen bildirimlerin üzerleri çizilir Daha fazla bilgi için <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">CSS'i inceleme ve düzenleme</a> dersine bakın.</p> -</div> - -<h2 id="Kutu_modelini_anlamak">Kutu modelini anlamak</h2> - -<p>Önceki derslerde <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu Modeline</a> verdiğimiz boyutun üzerine dolgu ve kenarlık genişliklerinin de eklendiğini, ayrıca bu hesaplama yöntemini değiştiren alternatif bir kutu modelimizin olduğunu öğrenmiştik. DevTools bir öğenin boyutunun nasıl hesaplandığını anlamamıza da yardımcı olur.</p> - -<p><a href="/tr/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Düzen görünümde(Layout)</a> seçilen öğenin kutu modelinin satır içi genişliğini/yüksekliğini ve dolgu, kenarlık ve boşluk genişliklerini gösteren bir diagramla birlikte kutunun açıkça tanımlanmamış olsa bile kutu modeli niteliklerini ve değerlerini gösteren bir alanda bulunmaktadır.</p> - -<p>Bu panelde, kutu modeli özelliklerinden biri olan <code>box-sizing</code> öğenin hangi kutu modelini kullandığını kontrol eden niteliktir.</p> - -<p><strong><code>box1</code></strong><strong> ve <code>box2</code> sınıflarına dahil olan kutuları karşılaştırdığında, her ikisinin de genişliğinin 400 piksel olacak şekilde tanımlandığını, ancak <code>box1</code> sınıfına dahil olan kutunun diğer kutudan daha geniş göründüğünü görürsün. İki kutu arasındaki bu farkın birinci kutunun kutu modeli niteliğinin <code>context-box</code> değerine sahip olmasından kaynaklanmaktadır. Bu değer kutuya verdiğimiz genişliğe ek olarak, dolgu ve kenarlık genişliklerinin de eklenmesine sebeb olmuştur ve kutumuzun satır içi geniliği verdiğimiz genişlikle aynı olmuştur.</strong></p> - -<p><strong><code>box2</code> sınıfına dahil olan öğemizin kutu modeli <code>border-box</code> olduğundan verdiğimiz genişlikten dolgu ve kenarlık genişlikleri çıkartılmış ve kutumuzun satır içi genişliği 350 piksel olmuştur. Ama kutunun da sayfada kapladığı alanı tam olarak belirtebilmemize olanak sağlamıştır. Bizim tanımlamamızda kutumuzun sayfada kapladığı alanın genişliği 400px olacaktır.</strong></p> - -<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="/tr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Kutu Modelini İnceleme ve Düzenleme</a> bölümünden daha fazla bilgi edinebilirsin.</p> -</div> - -<h2 id="Özgüllük_sorunlarını_çözme">Özgüllük sorunlarını çözme</h2> - -<p>Bazen mevcut bir sitede geliştirme yaparken CSS kurallarınının gerektiği gibi uygulanmadığını, farklı kuralların zorluklar yaşattığını göreceksin. Ne yaparsan yap öğen CSS'i uygulamıyor gibi gözükecek. Mühtemelen burada oluşan hata, özgüllüğü daha yüksek olan bir seçicinin, oluşturmuş olduğun kuralı geçersiz kılmasıdır ve DevTools bunların tespitinde de yardımcı olacaktır.</p> - -<p>Örnek dosyamızda bir <code><em></code> öğesi içerisinde iki kelimemiz bulunmakta. Birinci turuncu, diğeri ise sıcak pembe olarak görüntülenmektedir. Öğeye uyguladığım CSS kuralı aşağıda:</p> - -<pre class="brush: css notranslate">em { - color: hotpink; - font-weight: bold; -}</pre> - -<p>Bunla birlikte stil sayfamda <code>.special</code> sınıf seçicisine sahip bir kuralım daha var:</p> - -<pre class="brush: css notranslate">.special { - color: orange; -}</pre> - -<p><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a> dersinden hatırlayacağınız gibi, sınıf seçiciler öğe seçicilerden daha yüksek bir özgüllüğe sahiptir. DevTools, nitelik kurallarının bulunduğu büyük stil sayfalarında bu tür çakışmaları bulmanda yardımcı olacaktır.</p> - -<p><strong>Kontrol görünümünde <code><em></code> öğe ve <code>.special</code> sınıf seçicilerinin öğemize uyguladığı kuralları ve bu kuralların içerisinde turuncu renk bildirimin geçerli olduğunu, öğe seçicimiz içerisinde bulunan <code>color</code> niteliğininde üzerinin çizik olduğunu görebilirsin. Artık aynı tür öğenin içerisinde bulunan metinlerin neden farklı olduğunu anlayabiliyoruz.</strong></p> - -<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> - -<h2 id="Firefox_Geliştirici_Araçları_hakkında_daha_fazla_bilgi_edinin">Firefox Geliştirici Araçları hakkında daha fazla bilgi edinin</h2> - -<p>MDN'de Firefox DevTools hakkında pek çok bilgi mevcuttur. Daha ayrıntılı bilgi alabilmek ve işlerin nasıl yürüdüğünü öğrenebilmek için <a href="/tr/docs/Tools">DevTools bölümüne</a> ve <a href="/tr/docs/Tools/Page_Inspector#How_to">Nasıl Yapılır Rehberi'ne</a> bakın.</p> - -<h2 id="CSSde_hata_ayıklama_sorunları">CSS'de hata ayıklama sorunları</h2> - -<p>DevTools, CSS sorunlarını çözerken çok yardımcı olabilir, bu nedenle kendini CSS'inin beklediğin gibi davranmadığı bir durumla karşılaştığında, nasıl davranmalısın? Aşağıdaki adımlar yardımcı olacaktır.</p> - -<h3 id="Sorundan_bir_adım_uzaklaşın">Sorundan bir adım uzaklaşın</h3> - -<p>Herhangi bir kodlama problemleri özelliklede CSS problemleri oldukça can sıkıcı olabilir, çünkü çevrim içi aramayla bir çözüm bulmaya yardımcı olabilecek hata mesajı vermez. Hayal kırıklığına uğrarsınız, bir süre konudan uzaklaşın — yürüyüşe çıkın, bir şeyler için, bir arkadaşınızla sohbet edin veya bir süre başka bir konu üzerinde çalışın. Bazen sorun hakkında düşünmeyi bıraktığınızda çözüm sihirli bir şekilde ortaya çıkar. Böyle olmasa bile kendini dinlenmiş, dinç ve iyi hissettiğinden sorun üzerinde daha rahat çalışabilirsin.</p> - -<h3 id="HTML_ve_CSS_kodların_geçerli_mi">HTML ve CSS kodların geçerli mi?</h3> - -<p>Tarayıcılar, CSS ve HTML'nin doğru şekilde yazılmasını bekler, ancak tarayıcılar kusurları örterek, biçimlendirme veya stil sayfasında hataların olsa bile web sayfanı görüntülemek için ellerinden geleni yapacaklardır. Kodunda hatalar varsa, tarayıcının ne demeye çalıştığını tahmin etmesi gereki ve olmasını istediğinden farklı bir karar verebilir. Ek olarak, iki farklı tarayıcı sorunlarla farklı şekilde başa çıkmaya çalışabilir. Bu nedenle web sayfanı yayınlamadan önce herhangi bir hatanın olup olmadığını doğrulamak için HTML ve CSS'ini bir doğrulama aracıyla test etmen gerekir.</p> - -<ul> - <li><a href="https://jigsaw.w3.org/css-validator/">CSS doğrulayıcı</a></li> - <li><a href="https://validator.w3.org/">HTML doğrulayıcı</a></li> -</ul> - -<h3 id="Nitelik_ve_değer_test_ettiğin_tarayıcı_tarafından_destekleniyor_mu">Nitelik ve değer, test ettiğin tarayıcı tarafından destekleniyor mu?</h3> - -<p>Tarayıcılar, anlamadıkları CSS'i görmezden gelir. Kullandığınız özellik veya değer, test ettiğiniz tarayıcı tarafından desteklenmiyorsa, hiçbir şey bozulmaz ancak desteklenmeyen bildiriminiz uygulanmaz. DevTools genellikle desteklenmeyen özellikleri ve değerleri bir şekilde vurgular. Aşağıdaki ekran görüntüsünde, tarayıcı {{cssxref("grid-template-columns")}} için alt ızgara değerlerini desteklemiyor.</p> - -<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> - -<p>MDN'deki her özellik sayfasının altındaki Tarayıcı uyumluluk tablolarına da göz atabilirsin. Tablolarda nitelik için tarayıcı desteğini gösterir, niteliğin bazı kullanımı için destek varsa ve diğerleri için desteklenmiyorsa bölünür. Aşağıdaki tablo {{cssxref("shape-outside")}} niteliği için tarayıcı uyum verilerini göstermektedir.</p> - -<p>{{Compat("css.properties.shape-outside")}}</p> - -<h3 id="CSSini_geçersiz_kılan_başka_bir_etken_mi_var">CSS'ini geçersiz kılan başka bir etken mi var?</h3> - -<p>Özgüllük hakkında öğrendiğiniz bilgilerin çok faydalı olacağı yer burasıdır. Yapmaya çalıştığınız etkiyi geçersiz kılan daha karakteristik bir kuralınız varsa, ne olduğunu anlamaya çalıştığın bir durumun içerisinde kendini bulabilirsin. Bu durumda DevTools CSS'ini neyin geçersiz kıldığını vurgulayarak gösterecek ve geçersiz kılan karakteristik kuralınızı geçersiz kılabilecek bir kural yazmanız gerektiğini öğrenebileceksiniz.</p> - -<h3 id="İndirgenmiş_test_senaryosu">İndirgenmiş test senaryosu</h3> - -<p>Sorun yukarıdaki adımlarla çözülmediyse, biraz daha uğraşman gerekecektir. Bu noktada yapılacak en iyi şey, indirgenmiş test senaryosu olarak bilinen bir ortam oluşturmaktır. "Bir sorunu azaltabilmek" gerçekten yararlı bir beceridir. kendi kodundaki ve meslektaşlarının kodundaki sorunları bulmana yardımcı olacak ve ayrıca hataları bildirmenize, hatta daha etkili bir şekilde yardım istemenize olanak sağlayacaktır.</p> - -<p>İndirgenmiş test senaryosu, ilgisiz görünen içerikleri ve stilleri kaldırarak sorunu mümkün olan en basit şekilde oluşturan kod bloğudur. Bu genellikle, hatalı olarak gördüğünüz görüntüyü oluşturan kodların ve kuralların diğer çalışan kodlarınızdan ve kurallarınızdan ayrıştırılması anlamına gelir.</p> - -<p>İndirgenmiş bir test senaryosu oluşturmak:</p> - -<ol> - <li>Biçimlendirmeniz dinamik olarak oluşturulmuşsa — örn. CMS aracılığıyla — sorunu oluşturan kodlarınızın statik/sabit bir sürümünü oluşturun. <a href="https://codepen.io/">CodePen</a> gibi çevrim içi kodlamaya ve paylaşmaya imkan tanıyan web sayflarıyla çalışarak koduna heryerden ulaşabilir ve meslektaşlarınla kolayca paylaşabilirsin. Bunun için sayfa kaynağını görüntüleyi seçip HTML'yi CodePen'e kopyalaman, ardından ilgili CSS ve JavaScript'i de alıp çalışmana dahil etmelisin. Bundan sonra sorunun halen devam edip etmediğini kontrol edebilirsin.</li> - <li>JavaScript'i kaldırıp sorunun devam edip etmediğine bakın. Eğer javascript kaldırmanız sorunu çözmediyse javascript kodunuzu yeniden ekleyin.</li> - <li>Soruna katkıda bulunmayan tüm HTML'leri kaldırın. Düzenin bileşenlerini ve hatta ana öğelerini kaldırın ve sorunu devam etmesine sağlayacak en küçük kod bloğuna kadar inmeye çalışın.</li> - <li>Sorunu etkilemeyen tüm CSS'leri kaldırın.</li> -</ol> - -<p>Bunu yapma sürecinde, belirlirli nitelikleri açıp kapatarak soruna neyin olduğunu keşfedebilirsin. Bir şeyler keşfettikçe kodlarının arasına bazı yorumlar eklemeyi de unutma. Yardım istemen gerektiğinde, size yardım eden kişiye denediklerinizi de gösterebilirsiniz.</p> - -<p>Hala sorunu çözmek için mücadele ediyorsanız, indirgenmiş bir test senaryosuna sahip olmanız bir forum sayfasında veya iş arkadaşınıza gösterebileceğiniz yalın bir dosyanız olmuş olur. Yardım istemeden önce sorunu dar bir kalıbın içerisine hapsetmiş olmanız, sorun hakkında yardım alma olasılığınız çok daha yüksek olacaktır. Çünkü kimse bir başkasının kod karmaşası içerisinde uğraş vermek istemez. Yardım isteyen kişinin çözüm için bir çabasının olduğunu bilmek ister. Çünkü öğrenim, problemlerin çözümlerini arama aşamasında olgunlaşır. Yoksa öğretmenlerimiz neden problem versinler ki.</p> - -<p>Sorunun aslında bir tarayıcıdaki hatadan kaynaklanması durumunda, ilgili tarayıcı geliştiricilerine bir hata raporu içerisinde indirgenmiş test senaryonu da göndermen faydalı olacaktır(örn. Mozilla'nın <a href="https://bugzilla.mozilla.org">bugzilla</a> sitesi).</p> - -<p>CSS ile daha deneyimli hale geldikçe, sorunları çözmede daha hızlı olduğunuzu göreceksiniz. Ancak en tecrübeli bizler bile bazen kendimizi dünyada neler olup bittiğini merak ederken buluruz. Metodik bir yaklaşım benimsemek, indirgenmiş bir test senaryosu oluşturmak ve sorunu başka birine açıklamak genellikle düzeltmenin bulunmasıyla sonuçlanacaktır.{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html deleted file mode 100644 index f0f6d6a04b..0000000000 --- a/files/tr/learn/css/building_blocks/handling_different_text_directions/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Farklı metin yönlerini kullanma -slug: Learn/CSS/Building_blocks/Handling_different_text_directions -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - logical properties - - mantıksal ozellikler - - writing modes - - yazma modu -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions -original_slug: Öğren/CSS/CSS_yapi_taslari/Handling_different_text_directions ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS öğrenimimizde şimdiye kadar karşılaştığımız özelliklerin çoğu, ekranımızın fiziksel boyutlarına bağlanmıştır. Örneğin bir kutunun üstünde, sağında, altında ve solunda kenarlıklar oluşturmak gibi. Bu fiziksel boyutlar, yatay olarak görüntülenen içeriğe çok düzgün bir şekilde eşleşir ve HTML varsayılan olarak, soldan sağa dilleri(örn. Türkçe veya İngilizce), sağdan sola yazılan dillere(Arapça gibi) göre daha iyi destekleme eğilimindedir.</p> - -<p>Ancak son yıllarda, sağdan sola ve aynı zamanda yukarıdan aşağıya içeriklerde(Japonca gibi) dahil olmak üzere farklı içerik yönlerine daha iyi destek vermek için CSS gelişti — bu farklı yönlerin görüntülenmesine <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarını anlamak çok yardımcı olacaktır, bu nedenle şimdi onu tanıtacağız.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Modern CSS için yazma modlarının önemini anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Yazma_modları_nelerdir">Yazma modları nelerdir?</h2> - -<p>CSS'de bir yazma modu, metnin yatay mı yoksa dikey mi çalıştığını ifade eder. {{cssxref("writing-mode")}} niteliği bize mevcut yazma modundan başka bir yazma moduna geçiş yapmamıza olanak sağlar. Bunu yapmak için dikey yazı modu kullanan bir dilde çalışmana gerek de yoktur — tasarımının bölümlerinin yazma moduna yaratıcı amaçlala da değiştirebilirsin.</p> - -<p>Aşağıdaki örnekte <code>writing-mode: vertical-rl</code> kullanılarak görüntülenen bir başlığımız var. Metin artık dikey olarak çalışıyor. Dikey metin, grafik tasarımında yaygındır ve web tasarımına daha ilginç bir görünüm ve his katmanın bir yolu olabilir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> - -<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> niteliği için olası üç değer şunlardır:</p> - -<ul> - <li><code>horizontal-tb</code>: Yukarıdan aşağıya blok akış yönü. Cümleler yatay olarak ilerler.</li> - <li><code>vertical-rl</code>: Sağdan sola blok akış yönü. Cümleler dikey olarak ilerler.</li> - <li><code>vertical-lr</code>: Soldan sağa blok akış yönü. Cümleler dikey olarak ilerler.</li> -</ul> - -<p>Yani <code>writing-mode</code> niteliği öğelerin sayfada, bloklar halinde görüntülendiği yönü belirler — yukarıdan aşağıya, sağdan sola veya soldan sağa. Bu daha sonra metnin cümlelerde aktığı yönü belirler.</p> - -<h2 id="Yazma_modları_ve_blok_ve_satır_içi_düzen">Yazma modları ve blok ve satır içi düzen</h2> - -<p><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">Blok ve satır içi düzeni</a>, daha önce bazı öğelerin blok ve bazılarının da satır içi öğeler olarak götüntülendiğini tartıştık. Yukarıda açıkladığımız yazma modunda ki blok ve satır içi yönler fiziksel ekrana değil, belgeye bağlıdır bağlıdır. Türkçe gibi metni yatay olarak görüntüleyen bir yazma modu kullanıyosan, bloklar sayfanın üstünden altına doğru görüntülenir.</p> - -<p>Bir örneğe bakarsak, bu daha da netleşecektir. Bu örneğimizde, bir başlık ve bir paragraf içeren iki kutum var. İlki <code>writing-mode: horizontal-tb</code>, sayfanın üstünden altına doğru yatay eksende hareket eden bir yazma modu kullanır. İkincisi <code>writing-mode: vertical-rl</code>; sayfanın sağından sola doğru dikey eksende hareket eden bir yazma modudur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> - -<p>Yazma modunu değiştirdiğimizde, aslın hangi yönün blok ve hangisinin de satır içi olduğunu belirliyoruz. Bir <code>horizontal-tb</code> yazma modunda blok yönü yukarıdan aşağıya doğru ilerler; bir <code>vertical-rl</code> yazma modunda blok yönü yatay olarak sağdan sola ilerler. Daha iyi açıklamak istersek; <strong>block dimension:</strong> yazım modunda bloğu paragraf gibi düşünebiliriz. blok yönü paragrafların sayfada dizileceği yönü belirler. Yukarıdan aşağıya, soldan sağa veya sağdan sola. <strong>inline dimension: </strong>Satır içi ise paragrafların içerisindeki satırlar(dizeler) olarak düşünebiliriz, satır içi cümlenin satır içerisindeki akış yönünü belirler.</p> - -<p>Bu şekil, yatay yazma modundayken iki boyutu göstermektedir.</p> - -<p>,<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png"></p> - -<p>Bu şekil, dikey yazma modundaki iki boyutu göstermektedir.</p> - -<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> - -<p>CSS mizanpajına ve özellikle yeni mizanpaj yöntemlerine geliştirmeye başladığında, bu blok ve satır içi fikri çok önemli hale gelir. Tekrardan bu konuya değineceğiz.</p> - -<h3 id="Yön">Yön</h3> - -<p><span>Yazma moduna ek olarak metin yönümüz de var. Yukarıda belirtildiği gibi, Arapça gibi bazı diller yatay olarak ancak sağdan sola yazılır. Bu, kreatif anlamda kullanacağın bir uygulama değildir </span>— bir metni sağ taraftan başlatmak istiyoran, bunu yapmanın başka yolları da vardır — ancak bunu CSS'in doğasının bir parçası olarak anlamak önemlidir. Web sadece soldan sağa gösterilen diller için değildir.</p> - -<p>Yazma modu ve metnin yönünün değişebilmesi nedeniyle, yeni CSS mizanpaj yöntemleri sola ve sağa, yukarı ve sağıya atıfta bulunmaz. Bunun yerine, bu satır içi ve bu blok ayrımıyla birlikte <em>başlangıç</em> ve <em>bitiş</em> tanımlarıyla bu işi çözer. Şu anda bunun için fazla endişelenmeyin, ancak düzene bakmaya başlarken bu fikirleri aklında blundurun; bunu CSS anlayışında gerçekten yararlı bulacaksın.</p> - -<h2 id="Mantıksal_özellikler_ve_değerler">Mantıksal özellikler ve değerler</h2> - -<p>Öğreniminin bu noktasında yazma modları ve yönü hakkında konuşmamın nedeni, ekranın fiziksel boyutlarına bağlı bir çok özelliğe zaten bakmış olmamız ve konu hakkında fikir sahibi olmandır.</p> - -<p>İki kutumuza tekrar bir göz atalım — biri <code>horizontal-tb</code> ve diğeride <code>vertical-rl</code> değerlerine sahip. Bu iki kutuya da bir {{cssxref("width")}} değeri verdim. Gördüğün gibi kutu dikey yazma modundayken bir genişliğe sahiptir ve bu metnin taşmasına neden olmuştur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> - -<p>Aslında burada olmasını istediğimiz şey, yazma moduyla birlikte yükseği de, genişliği de değiştirmek. Dikey yazma modundayken, yatay modda olduğu gibi kutunun blok boyutunun da genişlemesini istiyoruz.</p> - -<p>Bunu kolaylaştırmak için, CSS yakın zamanda bir dizi eşlenmiş özellik geliştirdi. Bunlar esasen fiziksel özellikleri — <code>width</code> ve <code>height</code> gibi — <strong>mantıksal</strong> veya <strong> akışla ilgili</strong> sürümlerle değiştirir.</p> - -<p>Yatay yazma modundayken çağırılan {{cssxref("inline-size")}} niteliği satır içi boyuttaki <code>width</code>'yi ifade eder. {{cssxref("block-size")}} niteliği ise blok boyuttaki <code>height</code> boyutunu ifade eder. Bunların nasıl çalıştığını aşağıdaki örnekte görebilirsin. <code>inline-size</code> ile <code>width</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> - -<h3 id="Mantıksal_kenar_boşluğu_kenarlık_ve_dolgu_nitelikleri">Mantıksal kenar boşluğu, kenarlık ve dolgu nitelikleri</h3> - -<p>Son iki derste CSS kutu modeli ve CSS kenarlıkları hakkında konuştuk. Kenar boşluğu, kenarlık ve dolgu niteliklerinde, fiziksel niteliklerin bir çok örneklerini bulacaksın {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, ve {{cssxref("border-bottom")}}. Genişlik ve yükseklik için eşlemelerimiz olduğu gibi, bu nitelikler için de eşlemelerimiz var.</p> - -<p><code>margin-top</code> niteliğinin eşlemesi olan {{cssxref("margin-block-start")}}, her zaman kenar boşluğunun blok boyutunun başında olmasını sağlayacaktır.</p> - -<p>{{cssxref("padding-left")}} niteliğinin eşlemesi olan {{cssxref("padding-inline-start")}}, satır içi yönüne başlamadan uygulanacak olan dolguyu ayarlar. {{cssxref("border-bottom")}} niteliğinin eşlemsi olan {{cssxref("border-block-end")}} ise blok boyutunun sonunda bir sınır koymamızı sağlar.</p> - -<p>Aşağıda fiziksel ve mantıksal nitelikler arasında bir karşılaştırma görebilirsin.</p> - -<p><strong>Eğer <code>.box</code> sınıfı içerisindeki <code>writing-mode</code>'u </strong><strong><code>vertical-rl</code> olarak değiştirirsen, fiziksel boyut ile mantıksal niteliklerin yazma modu üzerindeki etkisini daha iyi anlayabilirsin.</strong></p> - -<p><strong>Ayrıca </strong><strong>{{htmlelement("h2")}} etiketinin <code>border-bottom</code> niteliğine sahip olduğunu görebilirsin. Her iki yazma modunda da alt kenarlığın her zaman metnin altında kalmasını nasıl sağalayacağını bulabilir misin?</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> - -<p>Tek tek kenarlık uzuntanımları göz önünde bulundurduğunda çok sayıda nitelik vardır ve <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Mantıksal Özellikler ve Değerler</a> için MDN sayfasında eşlenen tüm nitelikleri görebilirsin.</p> - -<h3 id="Mantıksal_değerler">Mantıksal değerler</h3> - -<p>Şimdiye kadar mantıksal nitelik adlarına baktık. Fiziksel yönleri belirten bazı nitelik son ekleri vardır <code>top</code>, <code>right</code>, <code>bottom</code>, ve <code>left</code>. Bu yönleri belirten eklerin de eşleştirmeleri vardır — mantıksal son eklerine bakacak olursa, <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, ve <code>inline-start</code>.</p> - -<p>Örneğin, metnin resmin etrafına sarılmasına neden olmak için bir resmi sola kaydırmak isteyebilirsin. <code>left</code> değerinin yerini <code>inline-start</code> değerinin aldığını görebilirsin</p> - -<p><strong>Resim üzerinde nasıl bir etkisi olduğunu görebilmek için <code>horizontal-tb</code> değerini <code>vertical-rl</code> ile değiştirebilirsin. Ayrıca <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace;'>float</span><span style="background-color: #ffffff;"> niteliğindeki </span><code>inline-start</code> değerini <code>inline-end</code> ile değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> - -<p>Burada ayrıca, yazma modu ne olursa olsun kenar boşluklarının doğru yerde olmasını sağlamak için mantıksal kenar boşluk değerlerini kullanıyoruz.</p> - -<div class="blockIndicator note"> -<p>Şu anda, yalnız"ca Firefox için <code>float</code> akış kontrol değerleri desteklenmektedir. Eğer <strong>Google Chrome</strong> veya <strong>Microsoft Edge</strong> kullanıyorsan, metnin kaymadığını fark edebilirsin.</p> -</div> - -<h3 id="Fiziksel_veya_mantıksal_özellikleri_kullanmalı_mısın">Fiziksel veya mantıksal özellikleri kullanmalı mısın?</h3> - -<p>Mantıksal özellikler ve değerleri, fiziksel eşdeğerlerinden daha yenidir ve bu nedenle tarayıclarda yakın zamanda desteklenmiştir. Tarayıcı desteğinin ne kadar geriye gittiğini görmek için MDN'deki herhangi bir özellik sayfasını kontrol edebilirsin. Birden fazla yazma modu kullanmıyorsan, şimdilik fiziksel sürümleri kullanmayı tercih edebilirsin. Bununla birlikte, nihayetinde insanların çoğu için mantıksal versiyonlara geçiş yapmalarını bekliyorum, çünkü flexbox ve grid gibi düzen yöntemleriyle de uğraşmaya başladığında çok mantıklı geliyorlar.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Becerilerini test edin: yazma modları</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste açıklanan kavramlar CSS'de giderek daha önemli hale geliyor. Blok ve satır içi yönün ve yazma modunda bir değişiklikle metnin akışını nasıl değiştiğinin anlaşılması, ileride çok faydalı olacaktır. Yatay mod dışında bir yazma modu kullanmasan bile CSS'i anlamana yardımcı olacaktır.</p> - -<p>Bir sonraki modülde, CSS'deki taşmayı derinlemesine ele alacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> - <li>/ol></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html b/files/tr/learn/css/building_blocks/images_media_form_elements/index.html deleted file mode 100644 index eeb021ca8c..0000000000 --- a/files/tr/learn/css/building_blocks/images_media_form_elements/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Görseller, medya ve form öğeleri -slug: Learn/CSS/Building_blocks/Images_media_form_elements -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Forms - - Gorüntü - - Images - - Learn - - Media - - Medya - - değiştirilen içerik - - form - - replaced content -translation_of: Learn/CSS/Building_blocks/Images_media_form_elements -original_slug: Öğren/CSS/CSS_yapi_taslari/Images_media_form_elements ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> - -<p>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Görseller, diğer ortamlar ve form öğeleri, CSS ile biçimlendirme de şimdiye kadar öğrendiğin kutu davranışlarından biraz farklı davranırlar. Neyin yapılıp neyin yapılamadığını anlamak bazı karmaşıklıklardan seni kurtarabilir. Burada dikkat etmemiz gereken bazı ana konulara değineceğ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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Bazı öğelerin CSS ile stil verildiğinde alışılmadık davranışlar göstermesini anlamak</td> - </tr> - </tbody> -</table> - -<h2 id="Yenilenen_öğeler">Yenilenen öğeler</h2> - -<p>Görüntüler ve medyalar <strong><a href="/en-US/docs/Web/CSS/Replaced_element">yenilenen öğeler</a></strong> olarak tanımlanır. Bu, CSS'in bu öğeleri dahili düzenini etkileyemeceği anlamına gelir — yalnızca sayfadaki diğer öğelerle arasındaki konumlarına müdahale edebilir. Ancak göreceğimiz gibi, CSS'in bir görüntüye yapabileceği çeşitli şeyler de vardır.</p> - -<p>Görüntüler ve medyalar gibi bazı değiştirilebilen öğeler de bir <strong>en boy oranına</strong> sahip olarak var olurlar. Bu, hem yatay(x) hem de dikey(y) boyutlara sahip olduğu ve varsayılan olarak dosyanın iç boyutları kullanılarak görüntüleneceği anlamına gelir.</p> - -<h2 id="Görüntüleri_boyutlandırma">Görüntüleri boyutlandırma</h2> - -<p>Bu zamana kadar ki derslerden öğrendiğin gibi, CSS'deki her öğe bir kutudan oluşturulur. Her iki yönde de görüntü dosyasının iç boyutlarından daha küçük veya daha büyük bir kutunun içine bir görüntü yerleştirirsen, ya kutudan daha küçük görünür yada kutunun sınırları dışına taşar. Taşma ile ne yapılacağı konusunada bizim karar vermemiz gerekir.</p> - -<p>Aşağıdaki örnekte, her ikisi de 200 piksel boyutunda iki kutumuz var:</p> - -<ul> - <li>Biri 200 pikselden daha küçük bir görüntü içeriyor — kutudan daha küçük ve onu doldurmak için genişlemiyor.</li> - <li>Diğeri 200 pikselden büyüktür ve kutunun sınırları dışına taşmaktadır.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> - -<p>Öyleyse taşma konusu hakkında ne yapabiliriz?</p> - -<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Önceki dersimizde</a> öğrendiğimiz gibi, yaygın bir teknik olan {{cssxref("max-width")}} niteliğinin değerinine %100 değerini tanımlayabiliriz. Bu, görüntünün boyut olarak kutudan daha küçük olmasını ancak daha büyük olmamasını sağlayacaktır. Bu teknik, <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code>lar ve <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>ler içinde geçerlidir.</p> - -<p><strong>Yukarıdaki örnekte bulunan <code><img></code> öğesine <code>max-width: 100%;</code> niteliğini tanımlayın. Daha küçük görüntünün değişmeden kaldığını, ancak daha büyük olanın kutuya sığabilmek için küçüldüğünü göreceksin.</strong></p> - -<p>Kutuların içindeki görüntülerle ilgili başka seçimler de yapabilirsin. Örneğin, bür görüntüyü bir kutuya tamamen kaplayacak şekilde boyutlandırmak isteyebilirsin.</p> - -<p>Bunu sağlamak için {{cssxref("object-fit")}} niteliği size yardımcı olacaktır. <code>object-fit</code> niteliği yenilenebilen öğelerde kullanıldığında, görselin kutuya sığabilmesi için çeşitli şekillerde bize yardımcı olur..</p> - -<p>Aşağıda <code>cover</code>, en boy oranını koruyarak, görüntüyü küçülten ve kutuyu düzgün bir şekilde dolduran değeri kullandık. En-boy oranı korunduğu için, görüntünün kutudan taşan kısımları kırpılacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> - -<p>Değer olarak <code>contain</code>'nu kullanırsak, görüntü kutunun içine tamamen sığabileceği kadar küçültülür. Görüntü, kutuyla aynı en-boy oranına sahip değilse "sinemaskop" şeklinde görüntülenecektir.</p> - -<p><code>fill</code> değeri ise, kutuyu tamamen dolduracak fakat görüntü, kutuyla aynı en-boy oranına sahip değilse görüntüyü büzüp gerecektir. Yukarıdaki örnekte kutunun birinde bu değeri kullanıp nasıl sonuçlandığını görebilirsin.</p> - -<h2 id="Düzende_yenilenebilen_öğeler">Düzende yenilenebilen öğeler</h2> - -<p>Yenilenebilen öğeler üzerinde çeşitli CSS mizanpaj tekniklerini kullanırken, diğer öğelere göre biraz farklı davrandıklarını fark edebilirsin. Örneğin, esnek veya ızgara düzeninde öğeler varsayılan olarak tüm alanı dolduracak şekilde boyutlandırılır. Görüntüler yeniden boyutlandırılmazlar, bunun yerine ızgara alanının veya esnek kabın başlangıcına hızalanırlar.</p> - -<p>Bunu aşağıdaki, içinde dört öğe bulunan iki sütun ve iki satırdan oluşan bir ızgara örneğinde görebilirsin. Tüm <code><div></code> öğelerinin bir arka plan rengi vardır, satır ve sütunu doldurmak için öğemiz boyutlandırılır. Ancak görüntünün boyutunda bir değişim olmaz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> - -<p>Bu dersleri sırayla takip ediyorsan, henüz düzene bakmamışsındır. Değiştirilen öğelerin bir ızgara veya esnek mizanpajın parçası olduklarında, dahil oldukları düzen tarafından garip bir şekilde uzatılmalarını önlemek için farklı varsayılan davranışlara sahip olduklarını unutmayın.</p> - -<p>Görüntüyü, içinde bulunduğu ızgara hücresini dolduracak şekilde uzatmaya zorlamak için aşağıdaki gibi bir tanımlama yapman gerekir:</p> - -<pre class="brush: css notranslate">img { - width: 100%; - height: 100%; -}</pre> - -<p>Ancak bu, görüntüyü uzatır ve bu olmasını istediğin bir görünüm değidir.</p> - -<h2 id="Form_öğeleri">Form öğeleri</h2> - -<p>Form öğeleri, CSS ile stil oluşturma söz konusu olduğunda zor bir konu olabilir ve <a href="/en-US/docs/Learn/Forms">Web Formları dersi</a>, burada yeniden anlatamayacağım kadar karmaşık yönlerine yönelik ayrıntılı kılavuzlar içerir. Makalenin bu bölümünde vurgulanmaya değer bir kaç temel var.</p> - -<p><code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> etiketi aracılığıyla sayfana birçok form denetimi eklenir — bu, renk ve tarih seçiciler gibi HTML5'e eklenen daha karmaşık alanlara kadar ve metin girişleri gibi basit form alanlarını tanımlar. Ayrıca <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> gibi satırlı metin girişine izin veren ek unsurlar ve ek unsurlar için kullanılan form üzerindeki öğelerin gruplandırılması ve etiketlenmesini sağlayan ek tanımlar da vardır — <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code> ve <code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code> gibi.</p> - -<p>HTML5 ayrıca web geliştiriclerinin hengi alanların gerekli olduğunu ve hatta girilmesi gereken içerik türünü belirtmesine olanak tanıyan nitelikler içerir. Kullanıcı beklenmedik bir şey girerse veya gerekli bir alanı boş bırakırsa, tarayıcı hata mesajı gösterebilir. Farklı tarayıcılar, bu tür öğeler için ne kadar stil ve özelleştirmeye izin verdikleri konusunda tutarsızdır.</p> - -<h3 id="Metin_giriş_öğelerini_şekillendirme">Metin giriş öğelerini şekillendirme</h3> - -<p>Metin girişine izin veren <code><input type="text"></code> gibi, belirli türlerin girişine izin veren <code><input type="email"></code> gibi ve birden fazla satıra sahip metin girişine izin veren <code><textarea></code> etiketi gibi öğelerin stillendirilmesi oldukça kolaydır ve sayfandaki diğer kutular gibi davranma eğilimindedirler. Bu öğelerin varsayılan stili kullanıcının, siteyi ziyaret ettiği işletim sistemi ve tarayıcıya bağlı olarak farklılıklar gösterecektir.</p> - -<p>Aşağıdaki örnekte, CSS kullanarak bazı metin girişlerine stil uyguladık. Kenarlık, kenar boşlukları ve dolgu gibi stillerin beklediğin gibi uygulandığını ve farklı girdi türlerini hedeflemek için nitelik seçicilerin kullanıldığını görebilirsin. Kenarlıkları, arka plan renklerini, yazı tiplerini ve dolguyu değiştirerek bu formun görünümünü değiştirmeyi denebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> - -<div class="blockIndicator warning"> -<p><strong>Önemli</strong>: Form öğelerinin kullanıcı için görülebilir olması için form öğelerinin görümünü değiştirirken dikkatli olmalısın. Çevresindeki diğer nesnelerden neredeyse ayırt edilemeyen kenarlık ve arka planna sahip bir form girişi oluşturulabilir, ancak bu fark edilmesini ve bilgi girişi yapılmasını zorlaştırır.</p> -</div> - -<p>Bu kursun HTML bölümündeki <a href="/en-US/docs/Learn/Forms/Styling_web_forms">form stiliyle</a> ilgili derslerde açıklandığı gibi, daha karmaşık giriş türlerinin çoğu işletim sistemi tarafından oluşturulur ve şekillendirme için erişilemez. Bu nedenle her zaman formların farklı ziyaretçiler için oldukça farklı görüneceğini varsaymalı ve çeşitli tarayıcılarda karmaşık formları test etmelisin.</p> - -<h3 id="Kalıtım_ve_form_öğeleri">Kalıtım ve form öğeleri</h3> - -<p>Bazı tarayıcılar, form öğeleri varsayılan olarak yazı tipi stilini devralmaz. Bu nedenle, form alanlarının gövdede veya bir ana öğede tanımlanan yazı tipini kullandığından emin olmak istiyorsan, bu kuralı CSS'ine eklemelisin.</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - font-family : inherit; - font-size : 100%; -} </code></pre> - -<h3 id="Form_öğeleri_ve_kutu_boyutlandırma">Form öğeleri ve kutu boyutlandırma</h3> - -<p>Tarayıcılar arasında form öğleri, farklı widget'ler için farklı kutu boyutlandırma kuralları kullanır. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli dersimizde</a> <code>box-sizing</code> niteliği hakkında bilgi edindin ve bu bilgiyi form öğelerinde genişlik ve yükseklileri ayarlarken tutarlı bir görünüm sağlamak için formları şekillendirirken kullanabilirsin.</p> - -<p>Tutarlılık için tüm öğelerde kenar boşlukları ve dolgu değerlerini <code>0</code> olarak ayarlamak ve ardından belirli kontrolleri şekillendirirken bunları tekrardan tanımlamak iyi bir fikirdir.</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - box-sizing: border-box; - padding: 0; - margin: 0; -}</code></pre> - -<h3 id="Diğer_kullanışlı_ayarlar">Diğer kullanışlı ayarlar</h3> - -<p>Yukarıda belirtilen kurallara ek olarak, hiç gereği yokken <code><textarea></code> öğesinde bir kaydırma çubuğu gösteren IE'yi durdurmak için, <code>overflow: auto</code> tanımını yapın:</p> - -<pre class="brush: css notranslate">textarea { - overflow: auto; -}</pre> - -<h3 id="Hepsini_bir_araya_getirerek_sıfırlamak">Hepsini bir araya getirerek "sıfırlamak"</h3> - -<p>Son bir adım olarak, çalışmak ortamında tutarlı bir temel sağlamak için, yukarıda tartışılan çeşitli özellikleri aşağıdaki "form sıfırlama" ile tamamlayabiliriz. Bu, son üç bölümde bahsedilen tüm öğeleri içerir:</p> - -<pre class="brush: css notranslate"><code>button, -input, -select, -textarea { - font-family: inherit; - font-size: 100%; - box-sizing: border-box; - padding: 0; margin: 0; -} - -textarea { - overflow: auto; -} </code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Normalleştirme stil sayfaları, birçok geliştirici tarafından projelerinde bir dizi temel stil şablonu oluşturmak için kullanılır. Salt olarak bunlar, CSS üzerinde kendi stilini oluşturmadan önce, tarayıcılar arasında ki farklı varsayılan değerler için ve yukarıda bahsettiğimiz davranışlar için tutarlı bir varsayılana sahip olmanı sağlar. Tarayıcılar tipik olarak geçmişe göre daha tutarlı olduğundan, eskisi kadar önemli değiller. Bununla birlikte, bir örneğe göz atmak istersen, bir çok popüler stil sayfasından biri olan ve pekçok projede kullanılan <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> bakabilirsin.</p> -</div> - -<p>Biçimlendirme formları hakkında daha fazla bilgi için, MDN'nin HTML bölümdeki iki derse göz atın.</p> - -<ul> - <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Web formlarını şekillendirme</a></li> - <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Gelişmiş form stili</a></li> -</ul> - -<h2 id="Becerilerini_test_edin!">Becerilerini test edin!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Images_tasks">Becerilerini test et: Görüntüler ve form öğeleri.</a></p> - -<h2 id="Özet">Özet</h2> - -<p>Bu ders, CSS'de görseller, medya ve diğer alışılmadık unsurlarla çalışırken karşılaşacağın bazı farklılıkları ele aldı. Sonraki makalede, HTML tablolarını biçimlendirmen gerektiğinde yararlı bulacağın birkaç ipucuna bakacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/index.html b/files/tr/learn/css/building_blocks/index.html deleted file mode 100644 index a0c22927c6..0000000000 --- a/files/tr/learn/css/building_blocks/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: CSS yapı taşları -slug: Learn/CSS/Building_blocks -tags: - - Başlangıç - - Beginner - - CSS - - Learn - - building blocks - - kutu oluşturmak - - Öğrenme -translation_of: Learn/CSS/Building_blocks -original_slug: Öğren/CSS/CSS_yapi_taslari ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Bu derste, <a href="/tr/docs/Learn/CSS/First_steps">CSS'in ilk adımlarının</a> kaldığı yerden devam ediyor. Artık dile ve sözdizimine aşinalık kazandın ve onu kullanma konusunda bazı temel deneyimler edindin, biraz daha derine dalma zamanı. Bu bölüm, art arda denetime ve mirasa, sahip olduğun tüm seçici türlerine, birimlere, boyutlandırmaya, arka planların ve kenarlıkların stilini belirleme, hata ayıklama ve çok daha fazlasına bakar.</p> - -<p class="summary">Buradaki amaç, sana yeterli CSS yazman için altyapı hazırlamak ve <a href="/tr/docs/Learn/CSS/Styling_text">metin şekillendirme</a> ve <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karakteristik kurallara geçmeden önce tüm temel teorileri anlamana yardımcı olmak</p> - -<div class="callout"> -<h3 id="Bir_front-endarayüz_geliştiricisi_mi_olmak_istiyorsun">Bir front-end(arayüz) geliştiricisi mi olmak istiyorsun?</h3> - -<p><span>Hedefine ulaşabilmen için ihtiyanıcın olan tüm temel bilgileri içeren bir kurs hazırladık</span>.</p> - -<p><a class="cta primary" href="/tr/docs/Learn/Front-end_web_developer">Başla</a></p> -</div> - -<h2 id="Gereksinimler">Gereksinimler</h2> - -<p>Bu üniteye başlamadan önce şunlara sahip olmalısın:</p> - -<ol> - <li>Bilgisayar kullanma ve Web'i sıradan bir şekilde kullanma (örn. web sayfalarında dolaşma, web üzerinde araştırma yapabilme)</li> - <li><a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Gerekli uygulamaların yüklenmesi</a> bölümünde ayrıntılı olarak verilen çalışma ortamı ve <a href="https://developer.mozilla.org/tr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dosyalarla çalışmak</a> bölümünde ayrıntılarıyla anlatıldığı gibi dosyanın nasıl oluşturulacağının ve yönetileceğinin anlaşılması</li> - <li><a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> ünitesinde tartışıldığı gibi alt yapıya sahip olmak.</li> - <li><a href="/tr/docs/Learn/CSS/First_steps">CSS ilk adımlar</a> ünitesinde açıklanan temellerin anlaşılması.</li> -</ol> - -<div class="note"> -<p><strong>Not</strong>: Kendi dosyalarını oluşturma imkanının olmadığı bir bilgisayar/table/başka bir çihaz üzerinde çalışıyorsan; çevrim içi kod düzenleyip deneyebileceğin şu siteleri kullanabilirsin: <a href="http://jsbin.com/">JSBin</a> veya <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Kılavuzlar">Kılavuzlar</h2> - -<p>Bu ünite, CSS dilinin en önemli kısımlarını kapsayan aşağıdaki makaleleri içerir. Ders boyunca, gördüklerini denemene izin verecek bir çok alıştırmalarla karşılaşacaksın.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Art arda denetim ve miras</a></dt> - <dd> - <p>Bu dersin amacı, CSS'in HTML'ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden CSS'in en temel kavramlarından bazıları olan <a title="Cascade: Adım adım kontrol">art arda denetim</a>, <a title="Özel etken oranı: Kuralı uygulanacak en baskın seçici">özgüllük</a> ve miras anlayışını geliştirmektir.</p> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a></dt> - <dd>CSS'de, stil verilecek öğeleri seçerken yüksek hassasiyetli birçok seçici mevcuttur. Bu makale ve alt makalelerinde, seçicilerin farklı türlerinin nasıl çalıştığını görerek incelemiş olacağız. Alt makalelerin bağlantıları aşağıdadır: - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></dt> - <dd>CSS'deki herşeyin etrafında bir kutu vardır ve bu kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin ve öğelerin diğer öğelerle hizlanmasının anahtarıdır. Bu derste, nasıl çalıştığını ve bununla ilgili terminolojiyi anlayarak daha karmaşık tasarımların üstesinden gelebilmen için CSS <em>Kutu Modeline</em> derinlemesine bakacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></dt> - <dd>Bu derste CSS arka planları ve kenarlıkları ile yapabileceğin bazı yenilikçi özelliklere bir göz atacağız. Renk geçişleri, arka plan resimleri ve yuvarlatılmış köşeler yapabilmek. CSS'deki arka planlar ve kenarlıklar bir çok stil sorunun çözümüdür.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a></dt> - <dd>Son yıllarda, sağdan sola ve yukarıdan aşağıya doğru(japonca gb.) içeriklerinde dahil olduğu farklı yönlülüğü daha iyi desteklemek için CSS gelişti. Bu farklı yönlere <strong>yazma modu</strong> denir. Çalışmanda ilerledikçe ve mizanpajla çalışmaya başladığında, yazma modlarının anlamak sana çok yardımcı olacaktır. Bu nedenle bunları bu makalede tanıtacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></dt> - <dd>Bu derste CSS'deki başka bir önemli soruna bakacağız — <strong>taşma</strong>. Taşma, bir kutunun sınırları içerisinde tutabileceğinden daha fazla içerik olduğunda olan davranıştır. Bu makalede ne olduğunu ve nasıl yönetileceğini öğreneceksin.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">CSS değerleri ve birimleri</a></dt> - <dd>CSS'de kullanılan her nitelik, o nitelik için izin verilen bir değere veya değerler kümesine sahiptir. Bu derste, kullanılan en yaygın değerlerden ve birimlerden bazılarına göz atacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutlandırma</a></dt> - <dd>Şimdiye kadarki derslerde, CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarına az buçuk aşına oldun. Tasarımındaki farklı özelliklerin ne kadar büyük olacağını anlamak gerçekten önemlidir ve bur derste, nesnelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yolarını özetleyeceğiz ve gelecete size yardımcı olacak boyutlandırma ile ilgili bir kaç terim tanıtacağız.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form nesneleri</a></dt> - <dd>Bu derste, CSS'de belirli özel öğelerin nasıl işlendiğine bir göz atacağız. Resimler, diğer ortamlar ve form nesneleri gibi. CSS ile biçimlendirme becerin açısından normal kutulardan biraz farklı davranırlar. Neyin mümkün olup neyin mümkün olmadığını anlamak bazı hayal kırıklıklarından seni kurtarabilir. Bu ders bilmen gereken bazı ana konuları vurgular.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></dt> - <dd>Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı işi değildir, ancak bazen bunu yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin uygulanmasıyla HTML tablolarının güzel görünmesi için sana bir klavuz sağlar.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></dt> - <dd>Bazen CSS yazarken, CSS'nin istediğin şeyi yapmadığı bir sorunla karşılaşırsın. Bu makale, bir CSS sorununu nasıl gidereceğin konusunda sana rehberlik edecek ve tüm modern tarayıcılarda bulunan DevTools'un neler olup bittiğini öğrenmene nasıl yardımcı olabileceğini göstereceğiz.</dd> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></dt> - <dd>Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığında, büyük bir CSS dosyasını korumanın ne kadar zor olabileceğini keşfedeceksin. Bu makalede, CSS'ini yazmak için kullanılan en iyi uygulamalara ve bakımı iyileştirmeye yardımcı olmak için başkaları tarafından kullanılan çözümlerden bazılarına kısa bir göz atacağız.</dd> -</dl> - -<h2 id="Değerlendirmeler">Değerlendirmeler</h2> - -<p>CSS becerilerini test etmek ister misin? Aşağıdaki değerlendirmeler, yukarıdaki kılavuzlarda anlatılan CSS hakkında edindiğin bilgileri sınayacak.</p> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Temel CSS anlayışı</a></dt> - <dd>Bu değerlendirme, temel sözdizimi, seçiciler, özgüllük, kutu modeli ve daha fazlası hakkında öğrendiklerini sınar.</dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Süslü antetli kağıt oluşturma</a></dt> - <dd>Doğru izlenimi bırakmak istiyorsan, güzel bir antetli kağıda bir mektup yazmak gerçekten iyi bir başlangıç olabilir. Bu değerlendirme, böyle bir görünüm elde etmek için seni çevrimiçi bir şablon oluşturmaya davet edeceğim.</dd> - <dt><a href="/tr/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Harika görünümlü bir kutu</a></dt> - <dd>Burada, göz alıcı bir kutu oluşturmak için arka plan ve kenarlık stilini kullanma konusunda biraz pratik yapacağız.</dd> -</dl> - -<h2 id="Göz_at">Göz at</h2> - -<dl> - <dt><a href="/tr/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Gelişmiş stil efektleri</a></dt> - <dd>Bu makale, kutu gölgleri, karışım modları ve filtreler gibi bazı ilginç gelişmiş stil özelliklerine giriş sağlayan bir <em>numara kutusu</em> görevi görür.</dd> -</dl> diff --git a/files/tr/learn/css/building_blocks/organizing/index.html b/files/tr/learn/css/building_blocks/organizing/index.html deleted file mode 100644 index 6fe3ee5d36..0000000000 --- a/files/tr/learn/css/building_blocks/organizing/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: CSS planlama -slug: Learn/CSS/Building_blocks/Organizing -tags: - - Acemi - - Beginner - - CSS - - CodingScripting - - Eğitim - - Learn - - biçimlendirme - - comments - - formatting - - methodologies - - organizing - - post-processor - - pre-processor - - stil rehberi - - styleguide - - yorumlar -translation_of: Learn/CSS/Building_blocks/Organizing -original_slug: Öğren/CSS/CSS_yapi_taslari/Organizing ---- -<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p>Projelerin büyüdükçe, projenle birlikte büyüyen CSS Stil sayfalarınla çalışmanın ne kadar zor olacağını tecrübe edeceğin zamanlar gelecek. Bu derste, CSS Stil sayfalarında tecrübeli geliştiriciler tarafından kullanılan; sana yol gösterip, zorlanmadan geliştirme ve bakım yapabilmene yardımcı olacak bazı çözümlere göz atacağız.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Stil sayfalarını organize etmeye yönelik bazı ipuçlarını ve CSS en iyi şekilde planlama uygulamalarını öğrenmek, ekip çalışmasına yardımcı olacak ortak adlandırmalar ve araçlar hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="CSSi_düzenli_tutmak_için_ipuçlar">CSS'i düzenli tutmak için ipuçlar</h2> - -<p>Düzenli stil sayfaları yazmak ve stül sayfalarını düzenli tutmak için bazı genel öneriler</p> - -<h3 id="Projende_kodlama_stili_rehberin_var_mı">Projende kodlama stili rehberin var mı?</h3> - -<p>mevcut bir proje üzerinde bir ekiple çalışyorsan, kontrol etmen gereken ilk şey, projenin CSS için mevcut bir stil reberine sahip olup olmadığıdır. Takım stil rehberi her zaman kendi kodlama tercihlerine sahip olmalıdır. Çoğu zaman bir şeyler yapmak için doğru veya yanlış bir yol yoktur, ancak tutarlılık önemlidir.</p> - -<p>Örneğin, <a href="/tr/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN kod örnekleri için CSS yönergelerine</a> bir göz atın.</p> - -<h3 id="Tutarlı_olmasını_sağlayın">Tutarlı olmasını sağlayın</h3> - -<p>Projede bir takımla veya yanlız çalışıyor olsan bile, yapman gereken ilk iş kendine tutarlı bir yol belirlemektir. Buradaki tutarlılık, sınıflar için aynı adlandırma kurallarını kullanmak, rengi tanımlamak için bir yöntem seçmek veya biçimlendirmeyi sabitlemek (örn. kodunuzu girintilemek için sekmeler mi yoksa boşluklar mı kullanacaksın? Girinti kaç karakter olacak?)</p> - -<p>Her zaman uygulayacağın bir dizi kurala sahip olduğunda, CSS yazarken gereken zihinsel ek yükten kurtulursun. Bu kuralı oluşturmak için illaki bir projeye başlaman gerekmiyor. Bu eğitim serisi devam ederken dahi, bu kurallarının ilk adımlarını belirleyebilirsin.</p> - -<h3 id="CSS_biçimlendirmen_okunabilir_olsun">CSS biçimlendirmen okunabilir olsun</h3> - -<p>CSS'i biçimlendirmenin birkaç yolu vardır. Bazı geliştiriciler, tüm kuralları tek bir satıra koyar. Örneğin:</p> - -<pre class="brush: css notranslate">.box { background-color: #567895; } -h2 { background-color: black; color: white; }</pre> - -<p>Diğer geliştiriciler her şeyi yeni bir satıra ayırmayı tercih ediyor:</p> - -<pre class="brush: css notranslate">.box { - background-color: #567895; -} - -h2 { - background-color: black; - color: white; -}</pre> - -<p>Tarayıcılar, hangi CSS biçimlendirmesini kullandığınızı önemsemez. Kişisel olarak her bir özellik ve değer çiftinin yeni bir satırda bulunmasının okunurluluğu arttırdığını düşünüyorum.</p> - -<h3 id="CSS_hakkında_yorumlarda_bulun">CSS hakkında yorumlarda bulun</h3> - -<p>CSS'ine yorum eklemek, diğer geliştiriciclerin CSS dosyanızda çalışmasına yardımcı olmasının yanında kendi yazmış olduğun kodları ne için ve neden yazıldığını hatırlanmanda da yardımcı olacaktır.</p> - -<pre class="brush: css notranslate">/* Bu bir CSS yorumudur -Birden fazla satıra bölünebilir. */</pre> - -<p>Bir ipuçu, Stil sayfandaki mantıksal bölümler kullanmak, sayfanda arama yaparken bölümler arasında hızlı bir şekilde ilerlemeni hatta direk o bölüme atlamana olanak sağlayacaktır. Yorumlarında bir dizge kullanmayı alışkanlık haline getirirsen, onu arayarak bölümlerinin arasında aradığın bölüme rahatlıkla atlayabilirsin. Bölümler için aşağıda <code>||</code> mantıksal işaretini kullandım.</p> - -<pre class="brush: css notranslate">/* || Genel stiler */ - -... - -/* || Yazıları şekillendir */ - -... - -/* || Üst bilgi ve ana gezinti bölmesi */ - -... - -</pre> - -<p>CSS'indeki her kuralı yorumlamana gerek yok, çünkü çoğu kendi kendini açıklayıcı olacaktır. Yorumlaman gerekenler, vermiş olduğun bir kararın sebebini veya diğer bildirimlerden bariz bir şekilde ayrılmış olanlar hakkında olacaktır.</p> - -<p>Eski tarayıcı uyumsuzluklarını aşmak için eski tarayıcıların desteklediği bir bildirimde bulunmuş olabilirsin. Örneğin:</p> - -<pre class="brush: css notranslate">.box { - background-color: red; /* linear-gradient değerini desteklemeyen tarayıcılar için arka plan rengi */ - background-image: linear-gradient(to right, #ff0000, #aa0000); -} -</pre> - -<p>Belkide bir işin üstesinden gelebilmek için başka bir kaynaktan yardım aldın ve CSS biraz kafa karıştırıyor. Bu durumda, kaynağın URL'sini yorumlarak ekleyebilirsin. Bir süre sonra bu projeye geri döndüğünde kendine teşekkür edeceksin. Çünkü işin üstesinden gelebilmek için bir yerden yardım aldım ama nerede? diyer türlü bunu hatırlamak zaman alacaktı.</p> - -<h3 id="Stil_sayfanda_mantıksal_bölümler_oluştur.">Stil sayfanda mantıksal bölümler oluştur.</h3> - -<p>Tüm ortak stillerin, stil sayfanda ilk olarak bildirilmesi iyi bir fikirdir. Bu, o öğeyle özel bir tasarım yapmadığın sürece tüm projende standart bir tasarımı elde etmeni sağlayacaktır. Genellikle şunlar için oluşturduğun kuralların olacak:</p> - -<ul> - <li><code>body</code></li> - <li><code>p</code></li> - <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> - <li><code>ul</code> ve <code>ol</code></li> - <li><code>table</code> özellikleri</li> - <li>Bağlantılar</li> -</ul> - -<p>Stil sayfasının bu bölümünde, sitedeki yazı için varsayılan stil sağlıyoruz, veri tabloları ve listeler içinde varsayılan bir stil bildiriminde bulunoyor vb.</p> - -<pre class="brush: css notranslate">/* || Genel Stiller */ - -body { ... } - -h1, h2, h3, h4 { ... } - -ul { ... } - -blockquote { ... } -</pre> - -<p>Daha sonra, birkaç yardımcı sınıf tanımlayabiliriz. Örneğin, esnek öğeler olarak veya başka bir şekilde göstereceğimiz listeler için varsayılan liste stilini kaldıran bir sınıfımız olsun. Ayrıca birçok farklı öğeye uygulamak isteyeceğimizi bildiğimiz birkaç tanımlamamız da varsa, bunları da bu bölümde tanımlayabiliriz.</p> - -<pre class="brush: css notranslate">/* || Araçlar */ - -.nobullets { - list-style: none; - margin: 0; - padding: 0; -} - -... - -</pre> - -<p>Sonra site genelinde her sayfada kullanmayı planladığımız tüm kurallarıda şuraya ekleyebiliriz. Bunlar, temel sayfa düzeni, başlık, gezinme stili vb. gibi bölümler için olabilir.</p> - -<pre class="brush: css notranslate">/* || Site geneli */ - -.main-nav { ... } - -.logo { ... } -</pre> - -<p>Son olarak; içeriğe, sayfaya ve hatta kullanıldıkları bileşene göre ayrılmış belilirli kısımlar için CSS ekleyeceğiz.</p> - -<pre class="brush: css notranslate">/* || Site sayfaları */ - -.product-listing { ... } - -.product-box { ... } -</pre> - -<p>Çalışmamazı bu şekilde sıralayarak, en azından stil sayfasında değişiklik yapmak istediğimizde, değiştireceğimiz bildirimlerin/kuralların hangi bölümde olduğu hakkında bir fikrimiz olur.</p> - -<h3 id="Aşırı_karakteristik_seçicilerden_kaçının">Aşırı karakteristik seçicilerden kaçının</h3> - -<p>Çok özel seçiciler oluşturulduğunda; aynı kuralın başka bir öğeye de uygulanması gerektiğinde, CSS kuralının çoğaltıldığını sıklıkla göreceksin. Örneğin, <code>main</code> sınıfına dahil <code><article></code> öğesinin torunlarından <code>box</code> sınıfına dahil <code><p></code> öğeleri için bir kuralımız olabilir.</p> - -<pre class="brush: css notranslate">article.main p.box { - border: 1px solid #ccc; -}</pre> - -<p>Fakat daha sonra aynı kuralları <code>main</code> sınıfına dahil olmayan ebeveyne sahip öğeye veya <code><p></code> öğesi dışındaki bir öğeye uygulamak isteyebiliriz. Bu durumda, bu kurala ya yeni bir seçici ekleyecek yada tamamen yeni bir kural kümesi oluşturmamız gerekecek. Bunun yerine, bu stil için <code>.box</code> seçiciye sahip bir kural oluşturur ve bu kuralı uygulamak istediğimiz tüm öğeleri <code>box</code> sınıfına dahil ederiz.</p> - -<pre class="brush: css notranslate">.box { - border: 1px solid #ccc; -}</pre> - -<p>Daha karakteristik seçiciler oluşturacağımız mantıklı zamanlarımız olacaktır, ancak bu genellikle normal uygulamadan ziyade istisnaî bir durum olacaktır.</p> - -<h3 id="Büyük_stil_sayfalarını_daha_küçük_parçalara_bölün">Büyük stil sayfalarını daha küçük parçalara bölün</h3> - -<p>Farklı tasarlanmış veya özellikli sayfalara sahip sitelerde, genel kuralların bulunduğu stil sayfalarınla, her web sayfasının kendine has kurallarının olduğu stil sayfalarını bir birinden ayırmak geliştirme ve düzeltmelerde yararlı olacaktır. Bir stil sayfasında birden çok stil sayfasına bağlanabilirsin. Stil sayfasına bağladığınız diğer stil sayfasının içindeki kurallar, bağlantı yapılan satırdan itibaren asıl stil sayfanıza yazılmış gibi işlem görür ve art arda kontrol şartları gereği bağlandığı noktadan sonra kuralınızı geçersiz kılacak diğer kurallar için dikkat etmeniz gerekir.</p> - -<p>Örneğin, bir mağaza için hazırlanmış bir sitenin parçası olarak ürün listelerinin ve formların olduğu iki sayfamızın olduğunu düşünelim. Ürün listeleri ve formlar için farklı CSS kuralları olacağı için bu iki sayfa için gerekli stil sayfalarını birbirinden ayırıp, ürün listelerinin olduğu web sayfası yüklenirken sadece bu sayfa için gerekli CSS'lerin indirilmesi sağlanarak internet trafiğinden de tasarruf yapmış oluruz.</p> - -<p>CSS'inizi ayrı dosyalarda tutmanız, kodlarınızı düzenli tutmanızı kolaylaştırabilir. Aynı zamanda da birden fazla kişinin çalıştığı projelerde CSS üzerinde çalışan kişilerin, aynı anda aynı CSS dosyası üzerinde çalışma olasılığıyla daha az karşılaşılır ve bu da kaynak kontrolünde daha az çakışmalara yol açacağı anlamına gelir.</p> - -<h2 id="Yardımcı_olabilecek_diğer_araçlar">Yardımcı olabilecek diğer araçlar</h2> - -<p>CSS'inin kendi içinde yerleşik organizasyon şeklinde bir yeteneği yoktur, bu nedenle CSS'i nasıl yazdığınla ilgili tutarlılık ve ilkeler oluşturmak için çalışman gerekir. Web topluluğu daha büyük CSS projelerini yönetmene yardımcı olabilecek çeşitli araçlar ve yaklaşımlar geliştirmiştir. Araştırmanız için size yardımcı olabileceklerinden ve diğer insanlarla çalışırken bunlarla karşılaşmanız muhtemel olduğundan, bazıları hakkında kısa bir rehber ekledim.</p> - -<h3 id="CSS_metodolojileri">CSS metodolojileri</h3> - -<p>CSS yazmak için kendi kurallarınızı oluşturmak yerine, topluluk tarafından halihazırda tasarlanmış ve birçok projede test edilmiş yaklaşımlardan yararlanabilirsin. Bu metodolojiler temelde CSS kodlama kılavuzlarıdır ve CSS yazmak ve düzenlemek için çok iyi yapılandırılmış bir yaklaşım benimserler. Tipik olarak, her seçiciyi o proje için özel bir kurallar kümesine yazıp optimize ettiyseniz, gereksinim duyduğunuzdan daha ayrıntılı bir CSS kullanımına neden olma eğilimindedirler.</p> - -<p>bununla birlikte, birini benimseyerek çok fazla yapı kazanırsınız ve bu sistemlerin çoğu çok yaygın olarak kullanıldığından, diğer geliştiricilerin kullandığınız yakşalımı anlaması ve CSS'lerini aynı şekilde yazması daha olasıdır. Sıfırdan kendi kişisel metodolojinizi geliştirmek zorunda kalmazsınız.</p> - -<h4 id="OOCSS">OOCSS</h4> - -<p>Karşılaşacağın yaklaşımların çoğu, <a href="https://github.com/stubbornella/oocss/wiki">Nicole Sullivan'ın çalışmasıyla</a> popüler hale gelen Nesne Yönelimli CSS (OOCSS) kavramına bir şeyler borçludur. OOCSS'in temel fikri, CSS'ini sitenizde ihtiyaç duyduğunuz her yerde kullanabileceğiniz, yeniden kullanılabilir nesnelere dönüştürmektir. OOCSS'in standart örneği, <a href="/tr/docs/Web/CSS/Layout_cookbook/Media_objects">Media Nesnesi</a> olarak tanımlanan modeldir. Bu, bir tarafında sabit boyutlu bir görüntü, video veya başka bir öğe ve diğer tarafında esnek içerik bulunan bir modeldir. Yorumlar, listeler vb. tüm web sitelerinde gördüğümüz bir modeldir.</p> - -<p>OOCSS yaklaşımını benimsemesende, bu tür modellerin kullanıldığı yerler için özel CSS oluşturabilirsin, örneğin bileşen parçaları için bir dizi kurala sahip <code>comment</code> adlı bir sınıf ve neredeyse <code>comment</code> sınıfıyla arasında bazı farklılıklar haricinde aynı olan <code>list-item</code> sınıfı oluşturalım. Bu iki bileşen arasındaki fark, liste öğesinin bir alt kenarlığa sahip olması ve yorumlardaki resimlerin kenarlığı varken, liste öğesindeki resimlerin kenarlıklarının olmamasıdır.</p> - -<pre class="brush: css notranslate">.comment { - display: grid; - grid-template-columns: 1fr 3fr; -} - -.comment img { - border: 1px solid grey; -} - -.comment .content { - font-size: .8rem; -} - -.list-item { - display: grid; - grid-template-columns: 1fr 3fr; - border-bottom: 1px solid grey; -} - -.list-item .content { - font-size: .8rem; -}</pre> - -<p>OOCSS'de, her iki bileşen içinde ortak CSS'e sahip olan <code>media</code> adlı tekbir model oluştururuz. Daha sonra küçük farklılıkların üstesinden gelmek için ek sınıflar ekleyip CSS'imizi genişlettik.</p> - -<pre class="brush: css notranslate">.media { - display: grid; - grid-template-columns: 1fr 3fr; -} - -.media .content { - font-size: .8rem; -} - -.comment img { - border: 1px solid grey; -} - -.list-item { - border-bottom: 1px solid grey; -} </pre> - -<p>HTML'emizdeki yorum kısmının hem <code>media</code>, hem de <code>comment</code> sınıflarına dahil edilmesi gerekir:</p> - -<pre class="brush: html notranslate"><div class="media comment"> - <img /> - <div class="content"></div> -</div> -</pre> - -<p>Liste öğelerinin de hem <code>media</code>, hem de <code>list-item</code> sınıfklarına dahil edilmesi gerekir:</p> - -<pre class="brush: html notranslate"><ul> - <li class="media list-item"> - <img /> - <div class="content"></div> - </li> -</ul></pre> - -<p>Nicole Sullivan'ın bu yaklaşımını açıklarken ve onu teşvik ederken yaptığı çalışma, bugün OOCSS yaklaşımını sıkı bir şekilde takip etmeyen kişlerin bile, CSS yaklaşımını bir gün bir şekilde kullanacağı anlamına geliyor — genel olarak olaylara yaklaşmanın iyi bir yolu olarak görünüyor.</p> - -<h4 id="BEM">BEM</h4> - -<p>BEM, Blok Öğe Değiştirici anlamına geliyor. BEM'de bir blok, düğme, menü veya logo gibi bağımsız bir nesnedir. Bu öğe, bir liste elamanı veya bulunduğu bloğa bağlı bir başlık gibi bir şeydir. CSS sınıflarında çizgi ve alt çizlerin yoğun kullanımı nedeniyle BEM yaklaşımı kullanan kodu heryerde tanıyacaksın. Örneğin, <a href="http://getbem.com/naming/">BEM Adlandırma kuralları</a> sayfasındaki HTML'ye uygulanan sınıflara bakın:</p> - -<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> - <input class="form__input" type="text" /> - <input - class="form__submit form__submit--disabled" - type="submit" /> -</form></pre> - -<p>Ek sınıflar, OOCSS örneğinde kullanılanlara benzer, ancak BEM katı adlandırma kuralları kullanır.</p> - -<p>BEM, daha büyük web projelerinde yaygın olarak kullanılmaktadır ve birçok kişi CSS'lerini bu şekilde yazmaktadır.</p> - -<p>Sistem hakkında daha fazla bilgi edinmek için CSS Hileleri üzerine <a href="https://css-tricks.com/bem-101/">BEM 101'i</a> okuyun.</p> - -<h4 id="Diğer_yaygın_sistemler">Diğer yaygın sistemler</h4> - -<p>Kullanımda olan bu sistemlerden daha fazlası da vardır. Diğer popüler yaklaşımlar arasında Jonathan Snook tarafından oluşturulan <a href="http://smacss.com/">Ölçeklenebilir ve Modüler CSS Mimarisi(SMACSS)</a>, Harry Roberts'tan <a href="https://itcss.io/">ITCSS</a> ve Yahoo! tarafından oluşturulan <a href="https://acss.io/">Atomic CSS (ACSS)</a> bulunmaktadır. Bu yaklaşımlardan birini kullanan bir projeyle karşılaşırsan, o zaman avantajın aynı tarzda kodlamayı anlamana yardımcı olabilecek bir çok makale ve rehbere ulaşabilmendir.</p> - -<p>Böyle bir sistemi kullanmanın dezavantajı, özellikle küçük projeler için aşırı derecede karmaşık görünebilmeleridir.</p> - -<h3 id="CSS_için_bir_sistem_oluşturun.">CSS için bir sistem oluşturun.</h3> - -<p>CSS'i düzenlemenin bir başka yolu da, arayüz geliştiricileri için mevcut olan bazı araçlardan yarlanmaktır; bu CSS yazmak için biraz daha programlı bir yaklaşım benimsemene olanak tanır. Ön işlemci ve son işlemci olarak adlandırdığımız bir dizi araç vardır. Bir ön işlemci, ham dosyalarınız üzerinde çalışır ve onları bir stil sayfasına dönüştürür, oysa bir son işlemci bitmiş stil sayfasını alır ve ona bir şeyler yapar — daha hızlı yüklenmesi için onu optimize edebilir.</p> - -<p>Bu araçlardan herhangi birini kullanmak için, geliştirme ortamının ön ve son işlemeyi yapan komut dosyalarını çalıştırabilmesi gerektirir. Birçok kod düzenleyici bunu sizin için yapabilir veya yardımcı olması için komut satırı araçları yükleyebilirsiniz.</p> - -<p>En popüler ön işlemci <a href="https://sass-lang.com/">Sass</a>'tır. Bir bir Sass öğreticisi değildir, bu yüzden diğer Sass özelliklerinden herhangi birini kullanmasanız bile, Sass'ın yapabileceği, planlama açısından gerçekten yarlı olan birkaç konuyu kısaca açıklayacağım. Sass hakkında daha çok şey öğrenmek istiyorsanız, <a href="https://sass-lang.com/guide">Sass Temelleri</a> makalesi ile başlayın ve ardından diğer belgelerine geçin.</p> - -<h4 id="Değişken_tanımlama">Değişken tanımlama</h4> - -<p>CSS artık yerel <a href="/tr/docs/Web/CSS/Using_CSS_custom_properties">özel özelliklere</a> sahiptir ve bu Sass'ın özelliğini, giderek daha az önemli hale getirir, ancak Sass'ı kullanmamızın nedenlerinden biri, bir projede kullanılan tüm renkleri ve yazı tiplerini bir dosyada tanımlayabilmek ve ardından bu değişkeni tüm proje içerisinde kullanmaktır. Bu, mavinin yanlış tonunu kullandığınızı fark ettiğinde, yanlış tanımı sadece bir yerde değiştirmenin yeterli olacağı anlamanı gelir.</p> - -<p>Aşağıdaki ilk satırdaki gibi bir <code>$base-color</code> değişkeni tanımlarsak, onu stil sayfası aracıyla bu rengi kullanmamız gereken her yerde kullanabiliriz.</p> - -<pre class="brush: css notranslate"><code>$base-color: #c6538c; - -.alert { - border: 1px solid $base-color; -}</code></pre> - -<p>CSS derlendikten sonra aşağıdaki gibi gözükecektir.</p> - -<pre class="brush: css notranslate"><code>.alert { - border: 1px solid #c6538c; -}</code></pre> - -<h4 id="Birleşen_stil_sayfalarını_derlemek">Birleşen stil sayfalarını derlemek</h4> - -<p>Yukarıda CSS'i planlamanın bir yolununda stil sayfalarını daha küçük stil sayfalarına bölmek olduğundan bahsetmiştim. Sass'ı kullanırken bunu başka bir seviyeye taşıyabilir ve çok sayıda çok küçük stil sayfalarına sahip olabilirsin — hatta her bileşen için ayrı bir stil sayfasına sahip olacak kadar ileri gidebilirsin. Sass(kısımlar-partials) içerme işlevini kullanarak, web sitenizde kullanmak istediğiniz stil sayfalarını bir birine bağlayarak bir veya daha fazla stil sayfasını kullanabilirsin.</p> - -<p>Örneğin, <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials(kısımlar)</a> ile bir dizin içerisinden birkaç stil dosyaların olabilir: Diyelim ki <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code> vb. dosyaların olsun. Bunları Sass'da kullanmak için <code>@use</code> bildirimini kullanabilirsin:</p> - -<pre class="brush: css notranslate">// foundation/_index.sass -@use 'code' -@use 'lists' -@use 'footer' -@use 'links'</pre> - -<p>Kısımların tümü, yukarıda belirtildiği gibi bir dizin dosyasına yüklenirse, daha sonra tüm dizini tek seferde başka bir stil sayfasına bağlayabilirisin:</p> - -<pre class="brush: css notranslate">// style.sass -@use 'foundation'</pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Sass'ı denemenin basit bir yolu <a href="https://codepen.io">CodePen</a> kullanmakttır. CSS'in için Sass'ı ayarlardan etkinleştirerek, CodePen'nin web sayfanı normal şekilde görebilmen için Sass aracını kullanmasını sağlayabilirsin. Bazen CSS öğreticilerinin CodePen demolarında düz CSS yerine Sass kullandığını göreceksin, bu sebeble bu konuda bilgi sahibi olman faydalı olacaktır.</p> -</div> - -<h4 id="Optimizasyon_için_son_işlem">Optimizasyon için son işlem</h4> - -<p>Örneğin, çok sayıda ek yorum ve boşluk ekleyerek stil sayfalarının boyutunun artmasından endişe ediyorsan, üretim sürümünde gereksiz olan her şeyi kaldırarak CSS'i optimize etmek için bir işlem sonrası yapılması gerekenler olabilir. Bunu yapmak için son işlemci çözümüne bir örnek <a href="https://cssnano.co/">cssnano</a>.</p> - -<h2 id="Bundan_sonra">Bundan sonra</h2> - -<p>Bu, CSS'i öğrenme rehberinin son bölümüdür ve görebileceğin gibi CSS'i keşfinin bu noktadan sonra devam edebileceği birçok yol vardır.</p> - -<p>CSS'de mizanpaj hakkında daha fazla bilgi edinmek için <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Mizanpajını Hakkında</a> bölümüne bakabilirsin.</p> - -<p>Artık <a href="/tr/docs/Web/CSS">MDN CSS</a> materyalinin geri kalanını keşfetme becerisine sahip olmalısın. özellikleri ve değerleri arayabilir, kullanılacak kalıplar için <a href="/tr/docs/Web/CSS/Layout_cookbook">CSS YemekKitabını</a> inceleyebilir ve <a href="/tr/docs/Web/CSS/CSS_Grid_Layout">CSS Izgara Düzeni Rehberi</a> gibi bazı özel kılavuzlardan daha fazlasını okuyabilirsin.</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/overflow_tasks/index.html b/files/tr/learn/css/building_blocks/overflow_tasks/index.html deleted file mode 100644 index d84ac5c022..0000000000 --- a/files/tr/learn/css/building_blocks/overflow_tasks/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Taşma' -slug: Learn/CSS/Building_blocks/Overflow_Tasks -tags: - - Acemi - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Overflow_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflow_Tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevlerin amacı, CSS'deki taşma konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <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 bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>Kutu sabit bir yüksekliğe sahip olduğu için içerik kutudan taşıyor. yüksekliği koruyun, ancak yalnızca taşmaya neden olacak kadar metin varsa kutunun kaydırma çubuklarına sahip olmasını sağlayın. Metnin bir kısmını HTML'den kaldırarak test edin, yalnızca kutunun sınırlarını aşmayacak uzunlukta içerik mevcut ise, kaydırma çubuklarının gizlenmesi gerekmektedir.</p> - -<p><img alt="A small box with a border and a vertical scrollbar." src="https://mdn.mozillademos.org/files/17133/mdn-overflow1.png" style="height: 456px; width: 632px;"></p> - -<p>Bitmiş örneği oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-scroll.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-scroll-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_Görev">İkinci Görev</h2> - -<p>Bu görevde bir görüntü kutunun içindedir, kutunun boyutlarından daha büyük olduğunda gözle görülür bir şekilde taşar. Resmin, kutudan taşan kısımlarının görüntülenmecek şekilde gizlenmesini sağlayın.</p> - -<p><img alt="A box with an image which fills the box but does not spill out the edges." src="https://mdn.mozillademos.org/files/17134/mdn-overflow2.png" style="height: 389px; width: 565px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturabilmek için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/overflow/overflow-hidden.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/overflow/overflow-hidden-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</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üzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</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> diff --git a/files/tr/learn/css/building_blocks/overflowing_content/index.html b/files/tr/learn/css/building_blocks/overflowing_content/index.html deleted file mode 100644 index 4737025f4f..0000000000 --- a/files/tr/learn/css/building_blocks/overflowing_content/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: İçerik taşması -slug: Learn/CSS/Building_blocks/Overflowing_content -tags: - - Acemi - - Beginner - - Block Formatting Context - - CSS - - Data Loss - - Eğitim - - Learn - - Veri kaybı - - overflow - - taşma -translation_of: Learn/CSS/Building_blocks/Overflowing_content -original_slug: Öğren/CSS/CSS_yapi_taslari/Overflowing_content ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> - -<p>Bir kutuya sığmayacak kadar fazla içerik olduğunda taşma olur. Bu derste taşmanın ne olduğunu ve nasıl yönetilceğini öğreneceksin.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Taşmayı ve onu nasıl yöneteceğini anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Taşma_nedir">Taşma nedir?</h2> - -<p>CSS'deki her öğe bir kutudur. {{cssxref("width")}} ve {{cssxref("height")}} (veya {{cssxref("inline-size")}} ve {{cssxref("block-size")}}) değerleri atayarak bu kutuların boyutlarını ayarlayabiliriz. <strong>Eğer boyutlarını ayarladığımız kutunun içeriği, kutunun boyutları içerisine sığmaz ise içerik kutu dışına çıkar ve biz bunu taşma olarak adlanırırız.</strong> CSS, taşmayı yönetmek için çeşitli araçlar sağlar. CSS düzeninde ilerledikçe ve CSS yazdıkça, daha fazla taşma durumuyla karşılaşacaksın.</p> - -<h2 id="CSS_veri_kaybını_önlemeye_çalışır">CSS, "veri kaybını" önlemeye çalışır</h2> - -<p>Taşma olduğunda CSS'in varsayılan davranışını gösteren iki örneği ele alım.</p> - -<p>İlk örnek, <code>height</code> niteliği kullanılarak kutunun uzunluğu kısaltılmıştır. Ardından ayrılan alanı aşan içerik ekliyoruz. İçerik kutunun dışına taşar ve aşağıdaki paragrafın üzerinde görüntülenir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> - -<p>İkinci örnek, kutu içeriğinde bir kelime vardır ve kutu kelime için çok küçük olacak şekilde boyutlandırıldı. Bu yüzden metin kutunun dışına çıktı.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> - -<p>CSS'in neden bu kadar dağınık bir şekilde çalıştığını ve içeriği amaçlanan kapsayıcısının dışında görüntülediğini merak edebilirsin. neden taşan içeriği gizlemiyorsun? Neden kapsayıcının boyutunu tüm içeriğe uyacak şekilde ölçeklendirmiyorun?</p> - -<p>Mümkün olan her yerde, CSS içeriği gizlemez. Bu, veri kaybına neden olur. Veri kaybıyla ilgili sorun, fark edemeyebilmendir. Web sitesi ziyaretçileri fark etmeyebilir. Bir formdaki gönder düğmesi kaybolursa ve kimse formu tamamlayamazsa, bu büyük bir sorun olabilir! Bunun yerine, CSS içeriğin sığmadığı durumlarda görünür bir şekilde taşar. Bir sorun olduğunu görme olasılığın daha yüksektir. En kötü ihtimalle, bir site ziyaretçisi içeriğin düzensizliğini size bildirecektir.</p> - -<p>Bir kutuya <code>width</code> veya <code>height</code> ile sınırlarsan, CSS ne yaptığını bilmene güvenir. CSS, taşma potansiyelini yönettiğini varsayar. Genel olarak, kutu metin içerdiğinde blok boyutunu sınırlamak sorunludur. Siteyi tasarlarken beklediğinden daha fazla metin olabilir veya metin daha büyük olabilir. (Örn, kullanıcı yazı tipi boyutunu arttırabilir)</p> - -<p>Sonraki iki konu, boyutlandırmayı taşmaya daha az eğilimli şekillerde kontrol etmeye yönelik farklı yaklaşımları açıklar. Bununla birlikte, sabit bir boyuta ihtiyacın varsa, taşmanın nasıl davranacağını da kontrol edebilirsin.</p> - -<h2 id="Taşma_niteliği_overflow">Taşma niteliği: <code>overflow</code></h2> - -<p>{{cssxref("overflow")}} niteliği bir öğenin taşma kontrolünün nasıl ele alınacağını belirler. Tarayıcıya nasıl davranması gerektiği konusunda talimat verme şeklimiz budur. Taşmanın varsayılan değeri <code>visible</code>'dir. Bu varsayılan ile içeriği taştığını da görebiliriz.</p> - -<p>Taşan içeriği gizlemek için de ayarlayabilirsin; <code>overflow: hidden</code>. Bu tam olarak söylediği şeyi yapar: taşmayı gizler. Bunun bazı içerikleri görünmez hale getirebileceğine dikkat edin. Bunu yalnızca içeriği gizlemek soruna neden olmaz ise yapmalısın.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> - -<p>Bunun yerine, belki de içerik taştığında kaydırma çubukları eklemek istersen; <code>overflow: scroll</code>. Taşma için yeterli içerik olmasa bile, görünür kaydırma çubuklarına sahip tarayıcılar kullanıldığında, bunları her zaman görüntülenir. Bu, kutudaki içerik miktarına bağlı olarak kaydırma çubuklarının görünmesi/kaybolması yerine düzeni tatarlı tutma avantajını sunar.</p> - -<p><strong>Aşağıdaki kutudan bazı içerikleri kaldırın. Kaydırmaya gerek olmasa bile kaydırma çubuklarının nasıl kaldığına dikkat edin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> - -<p>Yukarıdaki örnekte, sadece <code>y</code> ekseni için kaydırmamız gerekiyor, ancak her iki eksende de kaydırma çubukları görünüyor. Sadece <code>y</code> ekseninde kaydırma çubuğu olsun istiyorsak {{cssxref("overflow-y")}} niteliğini kullanmamız gerekiyor, tanımlama <code>overflow-y: scroll</code>.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> - -<p>{{cssxref("overflow-x")}} uzun kelimeleri barındırmak için önerilen bir yol olmasa da, bu nitelikle x ekseninde de kaydırabilirsin! Küçük bir kutuda uzun bir kelimen varsa, {{cssxref("word-break")}} veya {{cssxref("overflow-wrap")}} niteliklerini kullanmayı düşünebilirsin. Ek olarak, <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğeleri boyutlandırma bölümünde</a> tartışılan yöntemlerden bazıları, değişken içerik miktarlarını daha iyi ölçeklendiren kutular oluşturmana yardımcı olabilir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> - -<p><code>scroll</code>'da olduğu gibi, kaydırma çubuğuna neden olacak kadar içerik olup olmadığına bakılmaksızın kaydırma boyutunda bir kaydırma çubuğu elde edersin.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code>overflow</code> niteliği kullanılarak oluşturulan kuralda hem x, hemde y eksenleri için aynı özellikte kaydırma çubukları elde edersin. İki anahtar kelime kullanılırsa; örneğin, <code>overflow: scroll hidden</code>'nin açılımı: <code>overflow-x: scrool</code> ve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">overflow-y: hidden</span></font> olacak şekilde yorumlanacaktır.</p> -</div> - -<p>Kaydırma çubuklarının sadece kutuya sığamayacak kadar fazla içerik olduğunda görünmesini istiyorsan, <code>overflow:auto</code> kullanın. Bu, tarayıcının kaydırma çubuklarının görüntülenip görüntülenmemesinin gerekip gerekmediğini belirlemesini sağlar.</p> - -<p><strong>Aşağıdaki örnekte, kutuya sığana kadar içeriği silin. Kaydırma çubuklarının kaybolduğunu görmelisin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Kaydırma çubuklarının görünüp görüntülenmesi sadece CSS'in elinde değildir. Eğer işletim sisteminin sistem ayarlarında kaydırma(sarma) çubuklarının görüntülenme şekliyle ilgili bir ayar uygulamışsan; tarayıcın ilk önce bu sistem ayarını dikkate alacaktır.(örn. Mac OS X, "Sistem Tercihleri -> Genel -> Sarma çubuklarını göster" ayarı)</p> -</div> - -<h2 id="Taşma_Blok_Biçimlendirme_Kapsamı_oluşturur">Taşma, Blok Biçimlendirme Kapsamı oluşturur</h2> - -<p><code>scroll</code> veya <code>auto</code> gibi bir taşma değeri kullandığında, <strong>Blok Biçimlendirme Kapsamı(Block Formatting Context - BFC)</strong> oluşturursun. <code>overflow</code> olarak tanımladığın kutunun içeriği bağımsız bir düzen oluşturur. Kutunun dışındaki hiç bir içerik bu kutuyu çevreleyen düzenin içerisine giremez. Tutarlı bir kaydırma deneyimi oluşturmak için tüm kutu içeriğinin gösterilebilmesi ve başka öğelerle örtüşmemesi gerektiğinden bu kaydırma davranışını mümkün kılar.</p> - -<h2 id="Web_tasarımında_istenmeyen_taşma">Web tasarımında istenmeyen taşma</h2> - -<p>Modern yerleşim yöntemleri (<a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeninde</a> açıklanmıştır) taşmayı yönetir ve web sayfasında ne kadar içeriğin olacağı konusunda varsayımları veya bağımlılıkları olmadan çalışırlar.</p> - -<p>Bu her zaman bir ölçüt olmamıştır. Geçmişte bazı siteler, kutuların tabanlarını hizalamak için sabit yükseklikte kutular inşa ediyordu. Bu kutuların birbirleriyle hiçbir ilişkisi olmayabiliyordu ve bu kırılgandı. Eski bir uygulamada, içeriğin sayfadaki diğer içeriği kapladığı bir durumla karşılaşabilirisin. Artık bunun taşma ile gerçekleştiğini anlayabilirsin. İdeal olarak, düzeni sabit yükseklikteki kutulara bağlı kalmayacak şekilde yeniden düzenlemen gerekir.</p> - -<p>Bir site geliştirirken her zaman taşmayı aklında bulundurmalısın. Büyük ve az miktarda içeriğe sahip tasarımları test et. Metnin yazı tipi boyutlarını artır. Her zaman CSS'inin sağlam bir şekilde çalıştığından emin olmalısın. İçeriği gizlemek veya kaydırma çubukları eklemek için taşma değerinin değiştirilmesi, büyük olasılıkla birkaç belli kullanım durumu için illaki olacaktır.(Örn. Kaydırılmasına ihtiyaç duyduğun içeriğe sahip bir kutuda)</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Becerilerini test edin: taşma</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu derste taşma kavramını tanıttım. CSS'in Varsayılan davranışının, taşan içeriği görünmez hale getirmekten kaçındığını anlamalısın. Olası taşmayı yönetebileceğini ve ayrıca kazara sorunlu taşmaya neden olunmadığından emin olmak için tasarımını test etmen gerektiğini benimsemelisin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html deleted file mode 100644 index 224b5b181a..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Nitelik seçiciler -slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -tags: - - Attrubute - - Başlangıç - - Beginner - - CSS - - Learn - - Nitelik - - Ogrenim - - Selectors - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> - -<p>HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Durum_ve_değer_seçiciler">Durum ve değer seçiciler</h2> - -<p>Bu seçiciler, tek başına bir niteliğin varlığına (örneğin <code>href</code>) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[nitelik]</code></td> - <td><code>a[title]</code></td> - <td>Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)</td> - </tr> - <tr> - <td><code>[nitelik=değer]</code></td> - <td><code>a[href="https://example.com"]</code></td> - <td>Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.</td> - </tr> - <tr> - <td><code>[nitelik~=değer]</code></td> - <td><code>p[class~="special"]</code></td> - <td> - <p><br> - Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.</p> - </td> - </tr> - <tr> - <td><code>[nitelik|=<em>değer</em>]</code></td> - <td><code>div[lang|="zh"]</code></td> - <td>Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.</td> - </tr> - </tbody> -</table> - -<p>Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.</p> - -<ul> - <li><code>li[class]</code>: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip öğeyle eşleştirebiliriz.</li> - <li><code>li[class="a"]</code>: <code>a</code> sınıfına sahip bir öğeyle eşleşir. ancak öğe <code>a</code> sınıfından başka bir sınıfa da dahil edilmiş ise bu öğeyle eşleşmez.</li> - <li><code>li[class~="a"]</code>: <code>a</code> sınıfıyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılarak tanımlanmış öğeleride seçer.</li> - <li><code>li[lang|="zh"</code>: <code>zh</code> ile tam eşleşen veya <code>zh</code><code>-</code> ile başlayan nitelik değerlerine sahip öğeleri seçer.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> - -<h2 id="Alt_dize_eşleştirme_seçicileri">Alt dize eşleştirme seçicileri</h2> - -<p>Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin, <code>box-warning</code> ve <code>box-error</code> sınıfların olsun ve siz <code>box-</code> dizesiyle başlayan her şeyi hedeflemek istiyorsan, <code>[class^="box-"]</code> ile ikisini birde seçebilirsin. (veya <code>[class|="box"]</code> yukarıdaki bölümde açıklandığı gibi).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>[nitelik^=<em>value</em>]</code></td> - <td><code>li[class^="box-"]</code></td> - <td>nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.</td> - </tr> - <tr> - <td><code>[nitelik$=<em>value</em>]</code></td> - <td><code>li[class$="-box"]</code></td> - <td>nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.</td> - </tr> - <tr> - <td><code>[nitelik*=<em>value</em>]</code></td> - <td><code>li[class*="box"]</code></td> - <td>nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.</td> - </tr> - </tbody> -</table> - -<p>(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır <code>^</code> ile başlayanlar ve <code>$</code> <em>ile bitenler</em>.)</p> - -<p>Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:</p> - -<ul> - <li><code>li[class^="a"]</code>: <code>a</code> ile başlayan herhangi bir nitelik değeriyle eşleşir. Bu nedenle ilk iki liste öğesiyle eşleşir.</li> - <li><code>li[class$="a"]</code>: <code>a</code> ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.</li> - <li><code>li[class*="a"]</code>: Herhangi bir nitelik değerinin, herhangi bir yerinde <code>a</code> dizesi geçiyorsa eşleşir. Bu yüzden tüm liste öğelerimizle eşleşir.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> - -<h2 id="Büyük_küçük_harf_duyarlılığı">Büyük küçük harf duyarlılığı</h2> - -<p>Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan <code>i</code> bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.</p> - -<p>Aşağıdaki örnekte, ilk seçici, <code>a</code> ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(<code>s</code>). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.</p> -</div> - -<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> - -<p>Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sözde sınıf ve sözde öğe seçiciler</a> hakkında bilgi edinebilirsin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/combinators/index.html b/files/tr/learn/css/building_blocks/selectors/combinators/index.html deleted file mode 100644 index 5141688e8e..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/combinators/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Birleştiriciler -slug: Learn/CSS/Building_blocks/Selectors/Combinators -tags: - - Birleştiriciler - - CSS - - Selectors - - combinators - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> - -<p>İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Soytorun_birleştirici">Soy(torun) birleştirici</h2> - -<p><strong>Soy birleştiricisi</strong> — tipik olarak tek bir boşluk (<code> </code>) karakterinden oluşur — <dfn>en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir.</dfn> Örneğin; aşağıda <code>body</code>'nin soyundan gelen <code>article</code>'nin soyundaki <code>p</code> ile eşleşirlir. <code>article</code> <code>body</code>'nin 50. torunu olabilir, <code>p</code>'de <code>article</code>'nin 15. torunu olabilir burada dikkat edilecek durum <code>p</code> ile <code>body</code> arasında herhengi bir yerde <code>article</code>'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.</p> - -<pre class="brush: css notranslate">body article p -</pre> - -<p>Aşağıdaki örnekte, sadece <code>.box</code> sınıfının içindeki <code><p></code> öğesini eşleştiriyoruz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> - -<h2 id="Çocuk_birleştirici">Çocuk birleştirici</h2> - -<p><strong>Çocuk birleştirici</strong>, iki seçici arasına yerleştirilen büyüktür işaretidir (<strong><code>></code></strong>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <code><article></code> öğesinin doğrudan bir alt öğesi olan <code><p></code> öğesiyle eşleşen bir kural yazmak istersek:</p> - -<pre class="brush: css notranslate">article > p</pre> - -<p>Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <code><ul></code> öğe seçicimin doğrudan bir alt öğesi olan <code><li></code> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.</p> - -<p>Buradaki <code><li></code> seçicinin çocuk olduğunu belirten <code>></code> işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> - -<h2 id="Bitişik_kardeş_birleştirici">Bitişik kardeş birleştirici</h2> - -<p>Bitişik kardeş seçici (<code>+</code>), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <code><p></code> öğesinden sonra gelen <code><img</code><code>></code> öğesini seçmek için:</p> - -<pre class="brush: css notranslate">p + img</pre> - -<p>Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <code><h1></code> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.</p> - -<p>Eğer <code><h1></code> ve <code><p></code> arasına <code><h2></code> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.</p> - -<p> {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> - -<h2 id="Genel_kardeş_birleştirici">Genel kardeş birleştirici</h2> - -<p>Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (<code>~</code>) kullanabilirsin. <code><p></code> öğesinden sonra gelen tüm <code><img></code> öğelerini seçmek için şunu yapardık.</p> - -<pre class="brush: css notranslate">p ~ img</pre> - -<p>Aşağıdaki örnekte, <code><h1></code> öğesinden sonra gelen <code><p></code>'yi seçip, daha sonra gelen <code><div></code>'i atlıyoruz ve bir sonra ki <code><p></code> öğesinide seçiyoruz.</p> - -<div class="blockIndicator note"> -<p>Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.</p> -</div> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> - -<h2 id="Birleştiricileri_kullanma">Birleştiricileri kullanma</h2> - -<p>Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <code><ul></code> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.</p> - -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> - -<p>ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.</p> - -<p>Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.</p> - -<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> - -<p>Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Becerilerini test et: Seçiciler</a>.</p> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz — <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">CSS Kutu Modeli</a>.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html deleted file mode 100644 index d78c248dbf..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: CSS seçicileri -slug: Learn/CSS/Building_blocks/Selectors -tags: - - Acemi - - Attribute - - Beginner - - CSS - - Class - - Eğitim - - Learn - - Nitelik - - Pseudo - - Selectors - - Sozde - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p>{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğ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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> - </tr> - </tbody> -</table> - -<h2 id="Seçici_nedir">Seçici nedir?</h2> - -<p>Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin <em>konusu</em> olarak anılır.</p> - -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir <code>h1</code> birinci dereceden başlıkları seçen seçiciyle <code>.special</code> gibi bir sınıf seçici.</p> - -<p>CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler standardizasyonunda</a> tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.</p> - -<h2 id="Seçici_listeleri">Seçici listeleri</h2> - -<p>Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı <em>seçici listelerinde</em> birleştirebiliriz. Örn.i hem <code>h1</code> hemde <code>.special</code> sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> - -<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> öğesine stil uygulanmaya devam edecektir.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Seçici_türleri">Seçici türleri</h2> - -<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.</p> - -<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> - -<p>Bu grup, HTML öğesini hedefleyen seçicileri <code><h1></code>.</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>Sınıfı hedefleyen seçicileri:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>ve bir kimliği hedefleyen seçicileri içerir:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="nitelik_seçicileri">nitelik seçicileri</h3> - -<p>Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Sözde_sınıf_ve_sözde_öğeler">Sözde sınıf ve sözde öğeler</h3> - -<p>Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., <code>:hover</code> sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.</p> - -<pre class="brush: css notranslate">a:hover { }</pre> - -<p>Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., <code>::first-line</code> her zaman bir öğenin (<code><p></code> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <code><span></code> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Birleştiriciler">Birleştiriciler</h3> - -<p>Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<code><article></code> öğesini alt birleştirici (<code>></code>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> sayfasına geçerek yolculuğuna başlayabilirsin.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Seçiciler_referans_tablosu">Seçiciler referans tablosu</h2> - -<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Örnek</th> - <th scope="col">CSS Eğitim sayfası</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/en-US/docs/Web/CSS/Type_selectors">Tür seçici</a></td> - <td><code>h1 { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> - <td><code>* { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf Seçici</a></td> - <td><code>.box { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf Seçici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> - <td><code>#unique { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçiciler</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Sözde öğe seçiciler</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde sınıflar</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Torun birleştiricil</a></td> - <td><code>article p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Child_combinator">Çocuk birleştirici</a></td> - <td><code>article > p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştirici</a></td> - <td><code>h1 + p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Genel Kardeş birleştirici</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> - </tr> - </tbody> -</table> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html deleted file mode 100644 index 5b2ecb8a1f..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Sözde sınıflar ve sözde öğeler -slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -tags: - - Başlangıç - - Beginner - - CSS - - Eğitim - - Learn - - Pseudo - - Pseudo-class - - Pseudo-element - - Selectors - - Sozde Ogeler - - Sozde sınıflar - - seçiciler -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<p>Bakacağımız bir sonraki seçici kümesi, <strong>sözde sınıflar</strong> ve <strong>sözde öğeler</strong> olarak adlandıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Sözde_sınıf_nedir">Sözde sınıf nedir?</h2> - -<p>Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki fazla sınıfları azaltmana yardımcı olur ve daha esnek, bakımı kolay bir kod sağlarlar.</p> - -<p>Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:</p> - -<pre class="notranslate">:<em>pseudo-class-name</em></pre> - -<h3 id="Basit_sözde_sınıf_örneği">Basit sözde sınıf örneği</h3> - -<p>Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> - -<p>Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine {{cssxref(":first-child")}} sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> - -<p>Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:</p> - -<ul> - <li><code><a href="/tr/docs/Web/CSS/:last-child">:last-child</a></code></li> - <li><code><a href="/tr/docs/Web/CSS/:only-child">:only-child</a></code></li> - <li><code><a href="/tr/docs/Web/CSS/:invalid">:invalid</a></code></li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan <code>:first-child</code>'ı doğrudan yazabilirsin ve artık kural <code><article></code> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. <code>first-child</code> ile <code>*:first-child</code>'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.</p> -</div> - -<h3 id="Kullanıcı_eylemi_sözde_sınıfları">Kullanıcı eylemi sözde sınıfları</h3> - -<p>Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. Bazen <strong>dinamik sözde sınıflar</strong> olarak adlandırılan bu <strong>kullanıcı eylemi</strong> sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklemiş gibi davranır. Örnek verirsek:</p> - -<ul> - <li><code><a href="/tr/docs/Web/CSS/:hover">:hover</a></code> — Farenin işaretçisi hangi öğenin üzerindeyse o öğeyi seçer. Farenin konumu değiştikçe seçilen öğede değişir. Fare işaretçisini bu listenin başındaki <code>:hover</code> dizesinin üzerine getirerek değişimi görebilirsin.</li> - <li><code><a href="/tr/docs/Web/CSS/:focus">:focus</a></code> — Bu sadece, kullanıcı öğeye klavye kontrolleri kullanarak odaklanılan öğeyi seçer.</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> - -<h2 id="Sözde_öğe_nedir">Sözde öğe nedir?</h2> - -<p>Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar <code>::</code>.</p> - -<pre class="notranslate"><em>::pseudo-element-name</em></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: İlk kullanılmaya başlanan bazı sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.</p> -</div> - -<p>Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <code><span></code> öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.</p> - -<p><code>::first-line</code> Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> - -<p>Sanki bir <code><span></code>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.</p> - -<p>Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.</p> - -<h2 id="Sözde_sınıfları_ve_sözde_öğeleri_birleştirmek">Sözde sınıfları ve sözde öğeleri birleştirmek</h2> - -<p>İlk paragrafın ilk satırını kalın yapmak istersen, <code>:first-child</code> ve <code>::first-line</code> seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <code><article></code> öğesi içinde bulunan ilk öğenin<code><p></code> ilk satırını seçmek istediğimizi söylüyoruz.</p> - -<pre class="brush: css notranslate"><code>article p:first-child::first-line { - font-size: 120%; - font-weight: bold; -}</code></pre> - -<h2 id="before_ve_after_ile_içerik_oluşturmak">::before ve ::after ile içerik oluşturmak</h2> - -<p>CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: <code>content</code>.</p> - -<p>Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. <code>content</code> özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca <code>::before</code> sözde öğesini <code>::after</code> olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> - -<p>CSS'den metin dizeleri eklemek aslında web'de çok sık yaptığımız bir şey değildir. Çünkü bu metne bazı ekran okuyucular tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.</p> - -<p>Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> - -<p>Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.</p> - -<p>Bu sonraki örnekte, <code>::before</code> sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu <code>display: block</code> olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> - -<p>Özellik ile birlikte <code>::before</code> ve <code>::after</code> sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, {{cssxref("::before")}} ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için {{cssxref("content")}} özelliğine bak.</p> - -<h2 id="Referans_bölümü">Referans bölümü</h2> - -<p>Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.</p> - -<h3 id="Sözde_sınıflar">Sözde sınıflar</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref(":active") }}</td> - <td>Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":any-link") }}</td> - <td>Bağlantının herhangi bir durumuyla eşleşir <code>:link</code> ve <code>:visited</code> her iki bağlantı durumunun ikisiylede eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":blank") }}</td> - <td>herhangi kullanıcı girişi olmayan <a href="/tr/docs/Web/HTML/Element/input"><code><input></code> öğesiyle</a> eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":checked") }}</td> - <td>Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.</td> - </tr> - <tr> - <td>{{ Cssxref(":current") }}</td> - <td>O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":default") }}</td> - <td>Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":dir") }}</td> - <td>Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML <code><a href="/tr/docs/Web/HTML/Global_attributes/dir">dir</a></code> niteliğinin değerine veya CSS <code><a href="/tr/docs/Web/CSS/direction">direction</a></code> özelliğindeki değere göre).</td> - </tr> - <tr> - <td>{{ Cssxref(":disabled") }}</td> - <td>Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.</td> - </tr> - <tr> - <td>{{ Cssxref(":empty") }}</td> - <td>Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":enabled") }}</td> - <td>Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.</td> - </tr> - <tr> - <td>{{ Cssxref(":first") }}</td> - <td><a href="/tr/docs/Web/CSS/Paged_Media">Basılı Medya</a>, içerisindeki ilk sayfayla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":first-child") }}</td> - <td>Kardeşler arasında birinci olan öğeyle eşleşir</td> - </tr> - <tr> - <td>{{ Cssxref(":first-of-type") }}</td> - <td>Türdeş kardeşler arasındaki ilk öğeyi seçer.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus") }}</td> - <td>Odaklanmış bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-visible")}}</td> - <td>Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":focus-within") }}</td> - <td>Odaklanılabilen bir çocuğu olan öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":future") }}</td> - <td>Geçerli öğeden sonraki öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":hover") }}</td> - <td>Kullanıcının üzerine geldiği öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":indeterminate") }}</td> - <td>Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle <a href="/tr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> - </tr> - <tr> - <td>{{ Cssxref(":in-range") }}</td> - <td>Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":invalid") }}</td> - <td>Geçersiz bir değer girilmiş olan <code><input></code> öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":lang") }}</td> - <td>Dil tanımı olan bir öğe ile eşleşir (HTML'nin <a href="/tr/docs/Web/HTML/Global_attributes/lang">lang</a> niteliğindeki değerleri baz alır).</td> - </tr> - <tr> - <td>{{ Cssxref(":last-child") }}</td> - <td>Kardeşler arasındaki en son öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":last-of-type") }}</td> - <td>Türdeş kardeşler arasındaki en son öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":left") }}</td> - <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, içersindeki soldaki sayfalarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":link")}}</td> - <td>Ziyaret edilmeyen bağlantılar ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":local-link")}}</td> - <td>Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":is", ":is()")}}</td> - <td>Seçicide belirtilen seçilerden herhangi biriyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":not") }}</td> - <td>Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-child") }}</td> - <td>Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-of-type") }}</td> - <td>Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-child") }}</td> - <td>Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> - </tr> - <tr> - <td>{{ Cssxref(":nth-last-of-type") }}</td> - <td>Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> - </tr> - <tr> - <td>{{ Cssxref(":only-child") }}</td> - <td>Kardeşi olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":only-of-type") }}</td> - <td>Türdeş kardeşi olmayan bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":optional") }}</td> - <td>Örnek girişlerin gösterildiği öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":out-of-range") }}</td> - <td>Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":past") }}</td> - <td>Geçerli öğeden önceki öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":placeholder-shown") }}</td> - <td>Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":playing") }}</td> - <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..</td> - </tr> - <tr> - <td>{{ Cssxref(":paused") }}</td> - <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-only") }}</td> - <td>Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":read-write") }}</td> - <td>Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":required") }}</td> - <td>Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":right") }}</td> - <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, sağ sayfalarla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":root") }}</td> - <td>Belgenin kök öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":scope") }}</td> - <td>scope öğesi olan herhangi öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":valid") }}</td> - <td>Geçerli bir değer girilmiş <code><input></code> öğesiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":target") }}</td> - <td>Geçerli bir URL'yi hedefleyen öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref(":visited") }}</td> - <td>Daha önceden ziyaret edilmiş bağlantılarla öşleşir.</td> - </tr> - </tbody> -</table> - -<h3 id="Sözde_öğeler">Sözde öğeler</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Seçici</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ Cssxref("::after") }}</td> - <td>Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::before") }}</td> - <td>Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-letter") }}</td> - <td>Öğe içeriğinin ilk harfiyle eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::first-line") }}</td> - <td>Öğe içeriğinin ilk satırıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::grammar-error") }}</td> - <td>HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .</td> - </tr> - <tr> - <td>{{ Cssxref("::marker") }}</td> - <td>Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::selection") }}</td> - <td>Belgenin seçilen kısmıyla eşleşir.</td> - </tr> - <tr> - <td>{{ Cssxref("::spelling-error") }}</td> - <td>HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.</td> - </tr> - </tbody> -</table> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html deleted file mode 100644 index e5260643f8..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 'Tür, sınıf ve Kimlik seçicileri' -slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors -tags: - - Başlangıç - - Beginner - - CSS - - Class - - Kimlik - - Learn - - Ogrenim - - Selectors - - id - - seçiciler - - sınıf -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> - -<p>Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını 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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>Farklı CSS seçicileri hakkında bilgi edinmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Tür_seçiciler">Tür seçiciler</h2> - -<p>Bir <strong>tür seçici</strong>, belgende bir HTML öğesini seçtiği için bazen <em>etiket seçici</em> veya <em>öğe seçici</em> olarak anılır. Aşağıdaki örnekte, <code>span</code>, <code>em</code> ve <code>strong</code> seçicilerini kullandık.</p> - -<p><strong><code><h1></code> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> - -<h2 id="Evrensel_seçici">Evrensel seçici</h2> - -<p>Evrensel seçici bir yıldız işaretiyle (<code>*</code>) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> - -<p>Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.</p> - -<h3 id="Seçicilerinin_daha_kolay_okunmasını_sağlamak_için_evrensel_seçiciyi_kullanma">Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma</h3> - -<p>Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin, <code><article></code> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, {{cssxref(":first-child")}} sözde sınıfını kullanabilirsin. <code><article></code> öğe seçiciyle birlikte bir alt seçici olarak <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a> kullanımı:</p> - -<pre class="brush: css notranslate">article :first-child { - font-weight: bold; -}</pre> - -<p>Bunla birlikte, bir öğenin ilk çocuğu olan <code><article></code> öğesini seçmek için kullanılan <code>article:first-child</code> ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.</p> - -<p>Bu karışıklığı önlemek için, <code>:first-child</code> sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <code><article></code> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.</p> - -<pre class="brush: css notranslate">article *:first-child { - font-weight: bold; -} </pre> - -<p>Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.</p> - -<h2 id="Sınıf_seçiciler">Sınıf seçiciler</h2> - -<p>Sınıf seçici bir nokta (<code>.</code>) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; <code>highlight</code> adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> - -<h3 id="Belirli_unsurlara_göre_sınıfları_hedeflemek">Belirli unsurlara göre sınıfları hedeflemek</h3> - -<p>Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, <code>highlight</code> sınıfına sahip <code><span></code> ve <code><h1></code> öğelerimize farklı stillerle vurgulayacağız.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> - -<p>Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.</p> - -<h3 id="Birden_fazla_sınıf_uygulanmış_bir_öğeyi_hedeflemek">Birden fazla sınıf uygulanmış bir öğeyi hedeflemek</h3> - -<p>Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.</p> - -<p>Aşağıdaki örnekte, <code><div></code> içerisinde bir notumuz var. Gri kenar, kutu bir <code>notebox</code> sınıfına dahilse uygulanır. Kutu ayrıca <code>warning</code> veya <code>danger</code> sınıflarından birine dahilse {{cssxref("border-color")}}'unu değiştirebiliriz.</p> - -<p>Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <code><div></code>'in sadece <code>danger</code> sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> - -<h2 id="Kimlik_seçiciler">Kimlik seçiciler</h2> - -<p>Kimlik seçici nokta karakterinden ziyade diyez <code>#</code> karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere tek bir kimlik(<code>id</code>) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> - -<div class="blockIndicator warning"> -<p><strong>Uyarı: </strong>Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.</p> -</div> - -<h2 id="Sonraki_derste">Sonraki derste</h2> - -<p><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a> inceleyerek seçicileri keşfetmeye devam edeceğiz.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html deleted file mode 100644 index 4794dbebae..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_items_in_css/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: CSS'de öğeleri boyutlandırma -slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS -tags: - - Acemi - - Beginner - - CSS - - Eğitim - - Intrinsic size - - Learn - - boyutlandırma - - goruntu alanı birimleri - - maksimum boyut - - max size - - min size - - minimum boyut - - percentage - - sizing - - viewport units - - yüzde - - İç boyut -translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS ---- -<p>https://wiki.developer.mozilla.org/tr/docs/%C3%96%C4%9Fren/CSS/CSS_yapi_taslari/Sizing_items_in_CSS$edit</p> - -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> - -<p>Şimdiye kadar ki derslerde, CSS kullanarak bir web sayfasındaki öğeleri buyutlandırmanın çeşitli yollarıyla karşılaştık. Tasarımındaki özelliklerin ne kadar çok olacağını anlamak önemlidir ve bu derste, öğelerin CSS aracılığıyla bir boyut elde etmenin çeşitli yollarını özetleyip, gelecekte size yardımcı olacak boyutlandırma ile ilgili birkaç terimi ele alacağız.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS'de nesneleri boyutlandırmanın farklı yollarını anlamak.</td> - </tr> - </tbody> -</table> - -<h2 id="Nesnelerin_doğal_veya_içsel_boyutu">Nesnelerin doğal veya içsel boyutu</h2> - -<p>HTML öğeleri, herhangi bir CSS'den etkilenmeden önce ayarlanmış doğal bir boyuta sahiptir. Görüntü buna iyi bir örnektir. Bir <code><image></code>'nin sayfaya gömdüğü görüntü dosyasında, tanımlı bir genişlik ve yükseklik vardır. Bu boyut, görüntünün kendisinden gelen <strong>gerçek boyut</strong> olarak tanımlanır.</p> - -<p>Bir sayfaya bir resim yerleştirirsen ve yüksekliğini, genişliğini <code><img></code> etiketi veya CSS üzerindeki niteklikleri kullanarak değiştirmezsen, görüntü iç boyut kullanılarak görüntülenir. Dosyanın boyutunu görebilmen için aşağıdaki örnekte görüntüyü bir çerçevenin içerisinde gösterdim.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> - -<p>Boş bir {{htmlelement("div")}}, kendine ait bir boyuta sahip değildir. HTML'ye içeriği olmayan bir {{htmlelement("div")}} ekleyip, buna da bir kenarlık verirsen, sayfada düz bir çizgi görürsün. Bu, öğenin daraltılmış kenarlığıdır — öğemize yükseklik verebilecek bir içerik yoktur. Aşağıdaki örneğimizde düz çizgi, içinde bulunduğu kutunun sınır genişliğine kadar uzanır, çünkü bu bir blok seviyesi öğesidir, size aşına olmaya başlaması gereken bir davranış. İçerik olmadığı için yüksekliği(veya blok boyuntunda boyutu) yoktur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> - -<p>Yukarıdaki örnekte, boş öğenin içine biraz metin eklemeyi deneyin. Kenarlık şimdi bu metni içerir, çünkü öğenin yüksekliği içerik tarafından belirlenir. Dolayısıyla <code><div></code> blok boyutundaki boyutu içeriğin boyutundan gelmektedir. Yani içeriğindeki öğenin gerçek boyutuyla öğemizin boyutu belirlenir.</p> - -<h2 id="Belirli_bir_boyut_belirleme">Belirli bir boyut belirleme</h2> - -<p>Elbette tasarımımızdaki öğelere belirli bir boyut verebiliriz. Bir öğenin boyutunu biz belirtirsek buna <strong>dışsal boyut</strong> denir. Yukarıdaki <code><div></code> örneğimizi ele alalım — ona belirli bir {{cssxref("width")}} ve {{cssxref("height")}} nitelikleri ile boyutunu belirttiğimizde içeriğine, ne gelirse gelsin boyut sabit kalacaktır. <a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşma konusundaki dersimizde</a> öğrendiğimiz gibi, sabit bir yüksekliğe sahip öğenin, alanına sığamayacak kadar büyük bir içerik gelirse, bu içeriğin öğenin sınırları dışına taşmasına neden olur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> - -<p>Taşma sorunu nedeniyle, web tasarımı yaparken öğelere vereceğin yüksekliklere çok dikkat etmelisin.</p> - -<h3 id="Yüzdeler_kullanma">Yüzdeler kullanma</h3> - -<p>Yüzdeler birçok yönden uzunluk birimleri gibi davranır ve <a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">değerler ve birimlerle ilgili derste</a> tartıştığımız gibi, genellikle uzunluklarla birbirinin yerine kullanılabilirler. Bir yüzde kullanırken, yüzdenin neyi baz alacağını bilmen çok önemlidir. Kutu içinde kutu olması durumunda, alt kutunun genişliğini yüzde ile belirtirsen, alt kutunun genişliği üst kutunun genişliğinin yüzdesi olacaktır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> - -<p>Bunun nedeni, yüzdelerin kapsayıcı bloğunun boyutuna göre çözülmesidir. <code><div></code>'e yüzde uygulanmaz ise, blok düzeyinde bir öğe olduğu için, içinde bulunduğu alanın %100'ünü kaplar. %1 genişlik verirsek, bu normalde dolduracağı alanın %1 olur.</p> - -<h3 id="Yüzde_kenar_boşlukları_ve_dolgu">Yüzde kenar boşlukları ve dolgu</h3> - -<p>Eğer <code>margins</code> ve <code>padding</code> niteliklerini yüzdelik olarak ayarlandığında, bazı garip davranışlar sergiler. Aşağıdaki örnekte bir kutumuz var. İç kutuya {{cssxref("margin")}} %10 ve {{cssxref("padding")}} %10 değerlerini verdik. Kutunun üstündeki ve altındaki dolgu ve kenar boşluğu, sol ve sağdaki kenar boşluğuyla aynı boyuttadır.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> - -<p>Mesela, üst ve alt kenar boşluklarını öğenin yüksekliğinin bir yüzdesi, sol ve sağ kenar boşluklarının öğenin genişliğinin bir yüzdesi olmasını bekleyebilirsin. Ancak durum bu şekilde değildir!</p> - -<p>Yüzdelik cinsinden kenar boşluğu ve dolgu niteliğini tanımladığında, yüzdelik ebeveynin <strong>satır içi boyutundan</strong> hesaplanır — yatay bir dilde çalışırken genişlik istenilmeyen bir sonuç verecektir. Bu nedenle, tüm kenarların kenar boşlukları ve dolgu genişlikleri eşit olacaktır — tüm kenarlara %10 değeri atandığı için. Yüzdelikleri bu niteliklerde kullandığında, bu davranışa dikkat etmen gerekir.</p> - -<h2 id="min-_ve_max-_boyutlar">min- ve max- boyutlar</h2> - -<p>Her şeye sabit bir boyut vermenin yanı sıra, CSS'de bir öğeye alabilecekleri minimum ve/veya maksimum bir boyutta tanımlayabiliriz. Değişken miktarda içerik barındırabilecek bir kutunuz varsa ve her zaman <em>en azından</em> belili bir yükseklikte olmasını istersen, {{cssxref("min-height")}} niteliğiyle bunu ayarlayabilirsin. Kutunun içeriği boş dahi olsa en azından bu boyuta sahip olacaktır. Fakat kutunun içeriği minimum alanın taşıyabileceğinden daha fazla içerik almaya başladığında, kutunun boyutları içeriği kapsayabileceği boyuta genişleyecektir.</p> - -<p>Aşağıdaki örnekte, her iki kutununda {{cssxref("min-height")}} niteliği 150 piksel olarak tanımlandı. Soldaki kutu 150 piksel yüksekliğindedir; sağdaki kutu daha fazla alan gerektiren içeriğe sahip olduğu için 150 pikselden daha uzundur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> - -<p>Bu teknik değişken içeriğe sahip olan öğelerde taşmayı önelemek için çok kullanışlıdır.</p> - -<p>Bunun diğer bir yaygın kullanımı ise görüntüleri kendi iç genişliklerinde görüntülemek için yeterli alanın olmadığı durumlarda, görüntünün gösterilmek istenilen kutunun genişliğinden daha fazla genişleğe sahip olmasını engellemek için {{cssxref("max-width")}} niteliğini kullanmaktır.</p> - -<p>Misal; <code>width: 100%</code> olarak tanımladığında görüntü içinde bulunduğu kutunun genişliğinden daha fazla olmayacaktır fakat görüntü kutunun genişliğinden küçük oluduğu durumlarda görüntü ebeveyninin genişliği kadar bir genişliğe sahip olması istendiği için büyütülecekti ve bu büyüme görüntünün pikselli görünmesine sebeb olurdu.</p> - -<p>Bunun yerine <code>max-width: 100%</code> tanımını kullanırsan, görüntü ebeveyninin genişliğinden daha büyük olsa bile ebeveyninin genişliğinin %100'ne geldiğinde duracaktır ve ebeveyninin genişliğinden küçük olması durumunda, görüntünün boyutu ebeveyninin boyutuna genişletilmeyip içsel boyutunda görüntüleneceğinden görüntüde bir bozulma olmayacaktır.</p> - -<p>Aşağıdaki örnekte aynı resmi üç kez kullandık. İlk görüntüye <code>width: 100%</code> tanımlaması yaptık ve kendisinden daha büyük bir kutu içerisine yerleştirdik. Bu nedenle kutunun genişliğine genişledi ve görüntünün pikselleri görünür hale geldi. İkinci görüntü <code>max-width: 100%</code> tanımlası yapıldı, bu nedenle kutuyu duldurmak için genişlemiyor sadece kendi iç boyutu kadar genişliyor. üçüncü kutu yine <code>max-width: 100%</code> tanımlası yapıldı ve kendisinden daha küçük genişliğe sahip bir kutunun içerisine yerleştirildi; bu durumda kutuya sığmak için nasıl küçüldüğünü görebilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> - -<p>Bu teknik, görüntüleri <em>duyarlı</em> hale getirmek için kullanılır, böylece daha küçük bir kutuda görüntülendiğinde uygun bir şekle bürünür. Büyük boyutlu resimleri görüntülemek için bu tekniği kullanmayın, bunun yerine büyük resimleri tarayıcı için uygun boyutta küçültmelisin. Görsellerin, tasarımda gösterildikleri boyuttan daha büyük olması, görsellerin indirilme süresini uzatacağından sitenin yavaşlamasına neden olur ve kotalı bir bağlantıya sahip kullanıcılara daha fazla ücrete mâl olabilir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="/tr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Duyarlı görüntüleme teknikleri</a> hakkında daha fazla bilgi edinin.</p> -</div> - -<h2 id="Görüntü_alanı_birimleri">Görüntü alanı birimleri</h2> - -<p>Bir siteyi görüntülemek için kullandığın tarayıcının, web sayfasını görüntülediği pencerenin de bir boyutu vardır. CSS'de, bu alanla da ilgili birimlerimiz de vardır — görüntüleme alanı genişliği(<code>vw</code>) ve görüntüleme alanı yüksekliği(<code>vh</code>) birimi. Bu birimleri kullanarak, kullanıcının görüntüleme alanına göre herhangi bir öğeyi boyutlandırabilirsin.</p> - -<p><code>1vw</code> görüntüleme alanının genişliğinin %1'ine, <code>1vh</code>'de görüntüleme alanının yüksekliğinin %1'ine eşittir. Bu birimleri kutuları, metinleri boyutlandırmak için kullanabilirsin. Aşağıdaki örnekte 20vh ve 20vw boyutlarında bir kutumuz var. Kutu içerisinde <code>font-size</code>'ı 10vh olan bir "A" harfi var.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> - -<p><strong>Eğer <code>vh</code> ve <code>vw</code> değerlerini değiştirirsen, kutunun ve yazı tipinin boyutuda değişecektir. Ayrıca görüntüleme alanının boyutunuda değiştirilmesi, kutu ve yazı tipinin boyutunun görüntüleme alanına bağladığımız için bunlarında boyutu değişecektir. Görüntüleme alanın değiştirildiğinde örnekteki boyutlarında değişmesini istiyorsan <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">örneği yeni bir pencerede açın</a>(yukarıdaki örnek <code><iframe></code> içerisinde gömülü olduğu için görüntüleme alanı olarak gömülü olduğu pencerenin değerlerine göre hareket edecektir)</strong></p> - -<p>Nesneleri görüntüleme alanına göre boyutlandırmak tasarımlarında faydalı olabilir. Örneğin, içeriğinin geri kalanından önce tam sayfa görüntülemek istediğin bir bölümün olmasını istiyorsan, sayfanın bu bölümünün yüksekliği <strong>100vh</strong> olarak tanımlarsan, içeriğin geri kalanı sayfanın altına itilir ve sayfan açıldığında sadece istediğin bölüm gözükür. Diğer içerikler için sayfanın kaydırılması gerekir.</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Becerilerini test et: Boyutlandırma</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu ders de web'deki öğeleri boyutlandırırken karşılaşabileceğin bazı temel sorunların bir özetini anlattım. <a href="/tr/docs/Learn/CSS/CSS_layout">CSS Düzenine</a> geçtiğinde, farklı düzen yöntemlerinde uzmanlaşmanda boyutlandırma çok önemli hale gelecektir, bu nedenle devam etmeden önce buradaki kavramları iyi anlamaya çalışmalısın.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/sizing_tasks/index.html b/files/tr/learn/css/building_blocks/sizing_tasks/index.html deleted file mode 100644 index a37b752372..0000000000 --- a/files/tr/learn/css/building_blocks/sizing_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Boyutlandırma' -slug: Learn/CSS/Building_blocks/Sizing_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Sizing_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Sizing_tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de Öğeleri Boyutlandırma</a> dersinde incelediğimiz bazı bazı değerler ve birimler hakkındaki öğrendiklerinizi kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <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 bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>Bu görevde iki kutunuz var. İlki, yüksekliğin en az 100 piksel olacak şekilde boyutlandırılmalıdır, kutu, içerik alanına sığabilecek miktardan daha az içeriğe sahip olsada bile bu boyutu korumalıdır. Ayrıca kutunun içerik alanına sığabilecek miktardan daha fazla içerik girildiğinde, içerik kutunun sınırlarını aşmamalıdır. Taşma engellenecek.</p> - -<p>İkinci kutu 100 piksel yüksekliğinde sabitlenmelidir, böylelikle içeriğinin alabileceğinden fazla içerik alırsa taşma gerçekleşecektir.</p> - -<p><img alt="Two boxes one with overflowing content" src="https://mdn.mozillademos.org/files/17140/mdn-sizing-height-min-height.png" style="height: 551px; width: 746px;"></p> - -<p>Aşağıdaki örneği resimdeki gibi görünebilemesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/height-min-height.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/height-min-height-download.html">Kaynak Kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_Görev">İkinci Görev</h2> - -<p>Bu görevde başka bir kutu içeren bir kutu vardır. Sizin göreviniz, iç kutuyu dış kutunun geniliğinin %60'ı kapsacak şekilde tanımlamaktır. {{cssxref("box-sizing")}} niteliği {{cssxref("border-box")}}olarak ayarlanmıştır; bu dolgu ve kenarlığın toplam genişliğe dahil edildiği anlamına gelmektedir. Ayrıca, bu yüzdenin hesaplanacağı boyut olarak genişliği (veya satır iyi boyutu) kullanarak iç kutu dolgusunu %10 olarak tanımlamalısınız.<img alt="A box with another box nested inside" src="https://mdn.mozillademos.org/files/17141/mdn-sizing-percentages.png" style="height: 274px; width: 720px;"></p> - -<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/percentages.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/percentages-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Görev_Üç">Görev Üç</h2> - -<p>Bu görevde, kutularda iki resim var. Bir görüntü kutudan daha küçük, diğeri daha büyük ve kutudan taşmış durumda. Kutunun duyarlı olduğunu ve bu nedenle büyüyüp küçülebileceğini hayal ederseniz, küçük ve büyük görüntünün kutularına göre boyutlandırılması ve küçük görüntünün gerilmemesi için gerekli kodları yazın.</p> - -<p><img alt="Two boxes with images in" src="https://mdn.mozillademos.org/files/17142/mdn-sizing-max-width.png" style="height: 807px; width: 742px;"></p> - -<p>Aşağıdaki örneğin resimdeki gibi görünebilmesi için kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/sizing/max-width.html", '100%', 1200)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/sizing/max-width-download.html">kaynak kodu</a>, editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</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üzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</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> diff --git a/files/tr/learn/css/building_blocks/styling_tables/index.html b/files/tr/learn/css/building_blocks/styling_tables/index.html deleted file mode 100644 index d6983c73f9..0000000000 --- a/files/tr/learn/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Tabloları şekillendirme -slug: Learn/CSS/Building_blocks/Styling_tables -tags: - - Acemi - - Article - - Beginner - - CSS - - CodingScripting - - Guide - - Komut Dosyası - - Makale - - NeedsUpdate - - Rehber - - Stil - - Styling - - Tables - - Tablo -translation_of: Learn/CSS/Building_blocks/Styling_tables -original_slug: Öğren/CSS/CSS_yapi_taslari/Styling_tables ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p class="summary">Bir HTML tablosu biçimlendirmek dünyadaki en göz alıcı iş değildir, ancak bazen bunu hepimiz yapmak zorunda kalırız. Bu makale, bazı özel tablo şekillendirme tekniklerinin vurgulanmasıyla HTML tablolarının güzel görünmesi için bir rehber sağlar.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>HTML tablolarının nasıl etkili bir şekilde biçimlendirileceğini öğrenmek.</td> - </tr> - </tbody> -</table> - -<h2 id="Standart_bir_HTML_tablosu">Standart bir HTML tablosu</h2> - -<p>Standart bir HTML tablosuna bakarak başlayalım. HTML tablo örneklerinin çoğu ayakkabılar, hava durumu veya çalışanlarlar hakkındadır. Aşağıda İngiltere'nin ünlü punk gruplarının bulunduğu bir tablo bulunmakta. Biçimlendirme şöyle görünür.</p> - -<pre class="brush: html notranslate"><table> - <caption>A summary of the UK's most famous punk bands</caption> - <thead> - <tr> - <th scope="col">Band</th> - <th scope="col">Year formed</th> - <th scope="col">No. of Albums</th> - <th scope="col">Most famous song</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Buzzcocks</th> - <td>1976</td> - <td>9</td> - <td>Ever fallen in love (with someone you shouldn't've)</td> - </tr> - <tr> - <th scope="row">The Clash</th> - <td>1976</td> - <td>6</td> - <td>London Calling</td> - </tr> - - ... some rows removed for brevity - - <tr> - <th scope="row">The Stranglers</th> - <td>1974</td> - <td>17</td> - <td>No More Heroes</td> - </tr> - </tbody> - <tfoot> - <tr> - <th scope="row" colspan="2">Total albums</th> - <td colspan="2">77</td> - </tr> - </tfoot> -</table></pre> - -<p>Tabloyu güzelce {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, vb. öğe ve niteliklerle işaretledikten sonra ne yazık ki pek iyi görünmüyor.(Tablonun HTML versiyonunu görmek için <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> sayfasına bakın.):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> - -<p>Yalnızca varsayılan tarayıcı stili ile sıkışık, okunması zor ve sıkıcı görünüyor. Bunu düzeltmek için biraz CSS kullanmamız gerekiyor.</p> - -<h2 id="Tablomuzu_şekillendirmek">Tablomuzu şekillendirmek</h2> - -<p>Tablo örneğimizi birlikte şekillendirmeye çalışalım.</p> - -<ol> - <li>Başlangıç olarak, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">kaynak kodları</a> ve iki adet resmi(<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> ve <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>) bilgisayarınıza indirin. İndirmiş olduğunuz üç dosyayıda bilgisayarınıza bir klasöre kopyalayın.</li> - <li>Ardından, adı <code>style.css</code> olan bir dosya oluşturun ve diğer indirmiş olduğunuz dosyalarla aynı klasörün içerisine kaydedin.</li> - <li>Aşağıdaki HTML satırını sayfanızın içine yerleştirerek CSS'i {{htmlelement("head")}} etiketi içerisinde HTML'ye bağlayın. - <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> - </li> -</ol> - -<h3 id="Aralık_ve_düzen">Aralık ve düzen</h3> - -<p>Yapmamız gereken ilk şey, tablonun düzenini ve hücreler arasındaki aralığı tanımlamak - varsayılan tablo stili çok sıkışık! Bunu yapmak için aşağıdaki CSS'yi <code>style.css</code> dosyasına eklemelisin:</p> - -<pre class="brush: css notranslate">/* spacing */ - -table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; - border: 3px solid purple; -} - -thead th:nth-child(1) { - width: 30%; -} - -thead th:nth-child(2) { - width: 20%; -} - -thead th:nth-child(3) { - width: 15%; -} - -thead th:nth-child(4) { - width: 35%; -} - -th, td { - padding: 20px; -}</pre> - -<p>Dikkat edilmesi gereken en önemli kısımlar aşağıdaki gibidir:</p> - -<ul> - <li>Bir {{cssxref("table-layout")}} niteliğine atanan <code>fixed</code> değeri tablonun daha öngürülebilir davranmasına sağlayarak çalışma alanımızda daha iyi bir ortam oluşturmuş oluruz. Normalde, tablo sütunları içerdikleri içeriğe göre boyutlandırılma eğilimindedirler ve bu da bazı garip sonuçlar doğurabilir. Biz de <code>tablo-layout: fixed</code> ile sütunlarımızı başlıkların genişliğine göre boyutlandırmış oluruz. Bu sāyede içeriklerle uygun şekilde ilgilenebiliriz. Daha sonra <code>thead th:nth-child(<em>n</em>)</code> bildirmiyle {{htmlelement("thead")}} öğemizin {{htmlelement("th")}} çocuklarını sırasıyla seçebilmek için {{cssxref(":nth-child")}} sözde öğe seçimizle başlıklarımızın genişliklerini yüzdelik olarak belirliyoruz. Sütun genişliklerinin tamamı başlıkların genişliklerine göre ayarlamak tablo sütunlarını boyutlandırmanın güzel bir yoludur. Chris Coyier bu tekniği daha ayrıntılı olarak ele aldığı <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a> makâlesinin çevirisine bakabilirsiniz.</li> - <li>Tablo genişliğini {{cssxref("width")}} niteliğine 100% uzunluk değeri vererek tablonun içinde bulunduğu kutunun genişliği kadar genişlik alması sağlandı(Her ne kadar dar ekranlarda genişliğin üzerinde biraz daha ek çalışmaya ihtiyaç duysa da)</li> - <li>{{cssxref("border-collapse")}} niteliğine <code>collapse</code> değeri atayarak tablonun sınır çizgisi tek çizgi olacak şekilde ayarlanıyor. Varsayılan olarak, tablo öğelerinde kenarlık ayarladığınızda, aşağıdaki resimde gösterildiği gibi, çizgilerin arasında boşuklar olacaktır: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Bu hoş bir görüntü oluşturmuyor(belgide istediğin bu görüntü olabilir, benimki bu değildi) <code>border-collapse: collapse;</code> bildirimi kenarlıkları teke indiriyor ve bu çok daha iyi görünüyor:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>{{cssxref("border")}} niteliğimizle tablonun etrafına bir kenarlık koyduk, çünkü daha sonra tablo başlığının ve altbilginin etrafına bazı kenarlıklar koyacağız — etrafını çevreleyen bir sınır olmadığında gerçekten tuhaf ve kopu görünür.</li> -</ul> - -<p>Bu noktada, tablomuz biraz daha iyi görünür:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> - -<h3 id="Basit_bir_tipografi">Basit bir tipografi</h3> - -<p>Şimdi metnimizi biraz şekillendirelim.</p> - -<p><a href="https://www.google.com/fonts">Google Fonts</a>'da punk gruplarına uygun bir yazı tipi bulduk. İstersen oraya gidip farklı bir tane bulabilirsin; bunun için {{htmlelement("link")}} etiketinin {{cssxref("font-family")}} beyanına Google Fonts'un verdiği tanımını eklemelisin.</p> - -<p>Öncelikle, aşağıdaki {{htmlelement("link")}} etiketini HTML başlığınıza, css dosya <code><link></code> tanımının hemen üstüne eklemelisin:</p> - -<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> - -<p>Şimdi, aşağıdaki CSS'i <code>style.css</code> dosyasının önceki eklemenin altına eklemelisin:</p> - -<pre class="brush: css notranslate">/* typography */ - -html { - font-family: 'helvetica neue', helvetica, arial, sans-serif; -} - -thead th, tfoot th { - font-family: 'Rock Salt', cursive; -} - -th { - letter-spacing: 2px; -} - -td { - letter-spacing: 1px; -} - -tbody td { - text-align: center; -} - -tfoot th { - text-align: right; -}</pre> - -<p>Bu son tanımda tablolara özgü birşey yok; genelde yazı tipi stilini okumayı kolaylaştırmak için değiştiriyoruz.</p> - -<ul> - <li>Genel bir sans-serif yazı tipi kümesi belirledik; bu tamamen biçimsel bir seçimdir. Ayrıca hoş bir eski/serseri bir görünüm için özel yazı tipimizi {{htmlelement("thead")}} ve {{htmlelement("tfoot")}} etiketleri içindeki başlıklara tanımladım.</li> - <li>{{cssxref("letter-spacing")}} niteliğimizi okunabilirliliğe yardımcı olduğunu düşündüğüm için başlıklara ve hücrelere tanımladım. Bu da stilistik bir seçim.</li> - <li>Tablodaki {{htmlelement("tbody")}} etiketi içerisindeki hücrelerin içeriklerini, başlıklarla aynı hizaya gelecek şekilde ortaladım. Varsayılan olarak hücrelerin {{cssxref("text-align")}} nitelik değeri <code>left</code> olarak gelir. Ancak başlıkların varsayılan değerleri <code>center</code> olarak gelmektedir. Genellikle hizalamaların her ikisi için de aynı olması daha iyi görünür. Başlık yazı tiplerindeki varsayılan kalınlık görünümlerinin farklılaştırmak için yeterlidir. Bunun için ayrı bir tanım yapma ihtiyacımız bu örnek için bulunmamakta.</li> - <li>{{htmlelement("tfoot")}} etiketimizdeki veri hücresiyle başlığın daha iyi ilişkilendirilmesi için başlığı sağa hizaladım. Veri hücresi varsayılan olarak zaten sola dayalı.</li> -</ul> - -<p>Sonuç biraz daha düzgün görünüyor:</p> - - - -<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> - -<h3 id="Grafikler_ve_renler">Grafikler ve renler</h3> - -<p>Sıra grafikler ve renkler de! Tablomuz serseri bir tavırla dolu olduğu için, ona uyması için parlak, heybetli bir stil vermemiz gerekiyor. Endişelenmeyin, tablolarını bu kadar gürültülü yapmak zorunda değilsin — daha sade ve zevkli bir tasarım tercik edebilirsin.</p> - -<p>Aşağıdaki CSS'i <code>style.css</code> dosyanıza eklemelisin:</p> - -<pre class="brush: css notranslate">/* graphics and colors */ - -thead, tfoot { - background: url(leopardskin.jpg); - color: white; - text-shadow: 1px 1px 1px black; -} - -thead th, tfoot th, tfoot td { - background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); - border: 3px solid purple; -} -</pre> - -<p>Burada da tablolara özgü bir tanım yok, ancak birkaç noktayı not etmeye değer.</p> - -<p>{{htmlelement("thead")}} ve {{htmlelement("tfoot")}} özelerimize, {{cssxref("background-image")}} niteliği ile bir arka plan resmi ekledim, ayrıca okunabilirliliğin daha iyi olması için üst ve alt bilgi alanlarındaki tüm metinlerin rengini beyaz yapıp, {{cssxref("text-shadow")}} ile gölgelendirme verdim ({{cssxref("text-shadow")}}. Metninizin her zaman arka planla kontrastı iyi olduğundan emin olmalısınki okunabilsin.</p> - -<h4 id="Zebra_çizgisi">Zebra çizgisi</h4> - -<p><strong>Zebra çizgilerinin</strong> nasıl oluşturulup uygulanacağını göstermek için ayrı bir bölüm ayırmak istedim — tablonuzdaki farklı veri satırlarının ayrıştırılmasını ve okunmasını kolaylaştıran alternatif renk satırları. Aşağıdaki CSS'i <code>sytle.css</code> dosyasına eklemelisin:</p> - -<pre class="brush: css notranslate">/* zebra striping */ - -tbody tr:nth-child(odd) { - background-color: #ff33cc; -} - -tbody tr:nth-child(even) { - background-color: #e495e4; -} - -tbody tr { - background-image: url(noise.png); -} - -table { - background-color: #ff33cc; -}</pre> - -<ul> - <li>Daha önce, {{cssxref(":nth-child")}} seçicinin belirli alt öğeleri seçmek için kullanıldığını gördün. Parametre olarak bir formül de verilerek bir dizi öğe seçebilir. Formül <code>2n-1</code> ile tüm tek sayılı çocukları (1, 3, 5, vb), <code>2n</code> formülü ilede tüm çift sayılı çocukları (2, 4, 6, vb) seçer. Fakat kodumuzda <code>odd</code>(tek) ve <code>even</code>(çift) anahtar kelimelerini kullandık, yukarıda belirtilen formüllerle aynı işlemi yaparak, tek ve çift sıralara farklı renkler veriyoruz.</li> - <li>Ayrıca, tüm gövde sıralarına tekrar eden bir arka plan döşemesi ekledim, bu şekilde tablomuza yarı saydam bir doku kazandırmış oldum.</li> - <li>Son olarak, tüm tabloya düz bir arka plan rengi verdim ki <code>:nth-child</code> seçicisini desteklemeyen tarayıcılarda tablomuzun halen bir arka plan rengi olabilsin.</li> -</ul> - -<p>Bu renk cümbüşü aşağıdaki görünüme neden olur:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> - -<p>Bu biraz abartılı gelebilir ve zevkine göre olmayabilir. Ama burada değinmeye çalıştığımız nokta, tabloların sıkıcı ve akademik olmak zorunda olmadığıdır.</p> - -<h3 id="Başlığın_stilini_ayarlamak">Başlığın stilini ayarlamak</h3> - -<p>Tablomuzda yapmamız gereken son bir şey daha var — başlık stili vermek. Bunu yapmak için aşağıdakileri <code>style.css</code> dosyasına eklemelisin.</p> - -<pre class="brush: css notranslate">/* caption */ - -caption { - font-family: 'Rock Salt', cursive; - padding: 20px; - font-style: italic; - caption-side: bottom; - color: #666; - text-align: right; - letter-spacing: 1px; -}</pre> - -<p>Burada <code>bottom</code> değeri verilen {{cssxref("caption-side")}} niteliği başlığın tablonun nesinde olacağını tanımlamamıza yardımcı olur. Bu bildirim, başlığın tablonun altına yerleştirilmesine neden olur ve bu da diğer bildirimlerle birlikte bize bu son görünümü verir(<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> görmek için bakın):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> - -<h2 id="Tablo_şekillendirme_için_hızlı_ipuçları">Tablo şekillendirme için hızlı ipuçları</h2> - -<p>Devam etmeden önce, size yukarıda gösterilen en yarlı noktaların hızlı bir listesini vermem gerektiğini düşümdüm:</p> - -<ul> - <li>Tablo işaretlemeni olabildiğince basit hale getirmelisin; örneğin yüzdeleri kullanarak işleri esnek tutmalısın, böylece tasarımın daha duyarlı olsun.</li> - <li>{{cssxref("table-layout")}}<code>: fixed;</code> bildirimini kullanarak sütun genişliklerini({{cssxref("width")}}) başlıklarının({{htmlelement("th")}}) genişliğine ayarlanmasını sağlayarak daha tahmin edilebilir bir tablo düzeni oluşturabilirsin.</li> - <li>{{cssxref("border-collapse")}}<code>: collapse;</code> kullanarak daha sāde kenarlıklar eklemelisin.</li> - <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}}, ve {{htmlelement("tfoot")}} etiketlerini kullanarak ve böylece mantıksal alanlara bölerek oluşturduğun tablo üzerinde daha fazla CSS uygulamak için imkan sağlamış olursun.</li> - <li>Satırların birbirinden ayrılıp daha rahat okunabilemesi için zebra çizgisini kullanın.</li> - <li>{{htmlelement("th")}} and {{htmlelement("td")}} öğelerinde takip etmeyi kolaylaştırmak için {{cssxref("text-align")}} niteliğini kullanmaktan çekinmemelisin.</li> -</ul> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/en-US/docs/Learn/CSS/Building_blocks/Tables_tasks">Becerilerini test et: Tablolar</a>.</p> - -<h2 id="Sıradaki">Sıradaki</h2> - -<p>Artık tabloları şekillendirmeyi de öğrenmişken, zamanımızı işga ledecek başka bir şeye ihtiyacımız var. Sonraki dersimizde, CSS'de hata ayıtlamayı araştırıyor olacağız — olması gerektiği gibi görünmeyen düzenler veya olması gerektiğini düşündüğünüzde uygulanmayan özellikler gibi sorunların nasıl çözüleceği. Bu, sorunlarınıza çözüm bulmak için tarayıcı DevTools'u kullanma hakkındaki bilgileri içerir.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'inizi düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html b/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html deleted file mode 100644 index 94fca5a5ce..0000000000 --- a/files/tr/learn/css/building_blocks/test_your_skills_backgrounds_and_borders/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Arka Planlar ve Kenarlıklar' -slug: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -tags: - - Arka Plan - - Assessment - - Başlangıç - - Beginner - - Değerlendirme - - Eğitim - - Kenarlık - - Learn - - Skill test - - backgrounds - - beceri testi - - borders -translation_of: Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders -original_slug: Öğren/CSS/CSS_yapi_taslari/Test_your_skills_backgrounds_and_borders ---- -<p>Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için <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 bir araç kullanılması yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve daha fazla yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Arka_Planlar_ve_Kenarlıklar_1">Arka Planlar ve Kenarlıklar 1</h2> - -<p>Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:</p> - -<ol> - <li>Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.</li> - <li>Bir arka plan resmi ekleyin (<code>balloons.jpg</code>'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.</li> - <li><code><h2></code> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.</li> -</ol> - -<p>Bitmiş örnek aşağıdaki gibi görünmelidir.</p> - -<p><img alt="Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background." src="https://mdn.mozillademos.org/files/16946/backgrounds-task1.png" style="height: 236px; width: 911px;"></p> - -<p>Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds1.html", '100%', 700)}}</p> - -<div class="blockIndicator note"> -<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds1-download.html">kaynak kodunu</a> indirin.</p> -</div> - -<h2 id="Arka_Planlar_ve_Kenarlıklar_2">Arka Planlar ve Kenarlıklar 2</h2> - -<p>Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:</p> - -<ul> - <li>Kutuya 5 piksellik açık mavi bir kenarlık verin ve sol üst köşesyi 20 piksel ve sağ alt köşeyi 40 piksel yuvarlayın.</li> - <li>Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak <code>star.png</code> kullanın.</li> - <li>Başlık metninin resmin üzerine gelmediğinden ve ortalanmış olduğundan emin olun — bunları yapabilmek için önceki derslerde kullandığınız teknikleri kullanmanız gerekecektir.</li> -</ul> - -<p>İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:</p> - -<p><img alt="Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars." src="https://mdn.mozillademos.org/files/16947/backgrounds-task2.png" style="height: 300px; width: 534px;"></p> - -<p>Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/backgrounds/backgrounds2.html", '100%', 700)}}</p> - -<div class="blockIndicator note"> -<p>Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/backgrounds/backgrounds2-download.html"> Kaynak kodunu </a>indirin.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</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üzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</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> diff --git a/files/tr/learn/css/building_blocks/the_box_model/index.html b/files/tr/learn/css/building_blocks/the_box_model/index.html deleted file mode 100644 index 38ac0e3b37..0000000000 --- a/files/tr/learn/css/building_blocks/the_box_model/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Kutu Modeli -slug: Learn/CSS/Building_blocks/The_box_model -tags: - - Başlangıç - - Beginner - - CSS - - Dolgu - - Eğitim - - Gorüntü - - Kenar payı - - Kutu Modeli - - Learn - - Sınır - - border - - box model - - display - - margin - - padding -translation_of: Learn/CSS/Building_blocks/The_box_model -original_slug: Öğren/CSS/CSS_yapi_taslari/The_box_model ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS'deki her nesnenin etrafında bir kutu vardır ve kutuları anlamak, CSS ile mizanpajlar oluşturabilmenin veya öğeleri diğer öğelerle hizalamanın anahtarıdır. Bu derste, <em>CSS Kutu Modeline</em> giriş yapacağız, böylece nasıl çalıştığı ve bununla ilgili terminolojiyi anlayarak daha karmaşık düzen görevleri oluşturabilirsin.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS Kutu Modeli hakkında bilgi edinmek için, kutu modelini oluşturan unsurlar ve alternatif model geçileceği ile ilgili bilgi sahibi olmak.</td> - </tr> - </tbody> -</table> - -<h2 id="Blok_ve_satır_içi_kutular">Blok ve satır içi kutular</h2> - -<p>CSS'de genel olarak iki tür kutuya sahibiz — <strong>blok kutular</strong> ve <strong>satır içi kurular</strong>. Bu ayrım kutunun sayfa akışı açısından ve sayfadaki diğer kutularla ilişkili olarak nasıl davranacağını ifade etmek için yapılır.</p> - -<p>Bir kutunun türü blok(<code>block</code>) olarak tanımlanmışsa, aşağıdaki şekilde davranacaktır:</p> - -<ul> - <li>Kutu yeni bir satıra geçer.</li> - <li>Kutu, içinde bulunduğu satırın genişliği kadar uzar. Bu kutunun satırdaki mevcut alanın %100'ünü dolduracağı anlamına gelir.</li> - <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olacaktır.</li> - <li>Dolgu (<code>padding</code>), kenar boşluğu (<code>margin</code>) ve kenarlık (<code>border</code>) diğer öğelerin kutudan uzağa itilmesine neden olur. Kendisinden sonraki öğelerin konumları etkilenir, önceki öğelere göre kendi konumunu belirler.</li> -</ul> - -<p>Görüntü türünü satır içi olarak değiştirmez isek, başlıklar ve paragraflar varsayılan görüntüleme türü blok(<code>block</code>) olan öğelere örnektir.</p> - -<p>Eğer kutunun görüntüleme türü satır içi(<code>inline</code>) olacak şekilde tanımlanmışsa:</p> - -<ul> - <li>Kutu yeni bir satıra geçmeyecektir.</li> - <li>{{cssxref("width")}} ve {{cssxref("height")}} özellikleri geçerli olmayacaktır.</li> - <li>Dikey yöndeki; dolgu, kenar boşlukları ve kenarlıklar uygulanacak ve diğer kutuların kutudan uzaklaşmasına neden <strong><u>olmayacaktır</u></strong>.</li> - <li>Yatay yöndeki, dolgu, kenar boşlukları ve kenarlıkları uygulanacak ve diğer satır içi kutuların kutudan uzaklaşmasına neden <strong><u>olacaktır</u></strong>.</li> -</ul> - -<p>Bağlantılar için kullanılan <code><a></code> öğesi, <code><span></code>, <code><em></code> ve <code><strong></code> varsayılan tür olarak satır içi(<code>inline</code>) görüntülenecek öğelere örnektir.</p> - -<p>Bir öğenin kutu türünü tanımlayabilmek için {{cssxref("display")}} niteliğine <code>block</code> ve <code>inline</code> değerleri kullanılır.</p> - -<h2 id="Ayrıca_İç_ve_dış_görüntüleme_türleri">Ayrıca: İç ve dış görüntüleme türleri</h2> - -<p>Bu noktada <strong>iç</strong> ve <strong>dış</strong> gösterim türlerini de açıklamamız yerinde olur. Yukarıda belirtildiği gibi, CSS'deki kutular, kutunun blok mu satır içi mi olduğunu ayrıntılarıyla anlatan bir <em>dış</em> gösterim türüne sahiptir.</p> - -<p>Kutular ayrıca, bu kutunun içindeki öğeleri nasıl yerleştirileceğini belirleyen bir <em>iç</em> gösterim türünede sahiptir. Varsayılan olarak, bir kutunun içindeki öğeler <strong><a href="/tr/docs/Learn/CSS/CSS_layout/Normal_Flow">normal aşkışta</a></strong> düzenlenir, bu da diğer tüm öğelerin blok ve satır içi öğeler gibi davrandıkları anlamına gelir (yukarıda açıklandığı gibi).</p> - -<p>Bu özellikler sayesinde, bir öğenin <code>display</code> niteliğine <code>flex</code> değerini tanımlayarak iç ekran türünü değiştirebiliriz. Öğeyi <code>display: flex</code> şeklinde tanımlarsak, öğenin dış görünümü <code>block</code> olur, fakat öğenin içindeki diğer öğelerin görüntüleme türü <code>flex</code> olarak değişir. Böylece bu tanım, kutunun alt öğelerini esnek öğeler haline getirir ve iç öğeler daha sonra ele alacağımız <a href="/tr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> özelliklerinde belirtilen kurallara göre düzenlenir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Görüntüleme değerleri ve kutuların blok ve satır içi düzende nasıl çalıştığı hakkında daha fazla bilgi edinmek için, MDN kılavuzundaki <a href="/tr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Blok ve Satır İçi Düzen'e</a> bir göz at.</p> -</div> - -<p>CSS Mizanpajı hakkında daha ayrıntılı bilgi edinmeye devam ettiğinde, <code>flex</code>'siyi ve kutularının sahip olabileceği çeşitli değerlerle karşılaşaksınn. Örneğin <code><a href="/tr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> - -<p>Blok ve satır için görüntülüme türleri, HTML'deki öğelerin varsayılan davranış şeklidir — yukarıda da dillendirdiğimiz gibi <em>normal akış</em> olarak anılır, çünkü başka bir talimat olmadan, kutularımız varsayılan blok veya satır içi değerlerine göre düzenlenirler.</p> - -<h2 id="Farklı_görüntüleme_türlerine_örnekler">Farklı görüntüleme türlerine örnekler</h2> - -<p>Konumuza devam edelim ve bazı örneklere bir göz atalım. Aşağıda, hepsinin dış görüntüleme türü <code>block</code> olan öğenelerimiz var. İlki CSS'le eklenmiş bir kenarlığa sahip olan paragraftır. Tarayıcı bunu bir blok kutu olarak işler, böylece paragraf yeni bir satırda başlar ve mevcut tüm genişliğe sahip olur.</p> - -<p>İkincisi, görüntüleme türü olarak <code>display: flex</code> tanımlanmış bir listemiz var. Bu, <code>ul</code> etiketi içindeki öğeler için esnek bir düzen oluşturur, ancak listenin kendisi bir blok kutudur ve blok kutu gibi davranır — paragraf gibi. Yeni bir satırda başlar ve satırın sahip olduğu genişliğe kadar genişler.</p> - -<p>Bununda altında, içinde iki adet <code><span></code> öğe bulunan blok türünde bir paragrafımız var. Ancak bu iki öğe normalde <code>inline</code> türüne sahipler, içlerinden bir tanesini <code>.block</code> sınıfına dahil edip görüntü türünü <code>display: block</code> olarak tanımlıyoruz ve <code>inline</code> türüne sahip bir öğe <code>block</code> türüne sahip bir öğe gibi davranmaya başlıyor.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> - -<p>Bir sonraki örnekte, <code>inline</code> görüntüleme türüne sahip öğelerin nasıl davrandığını görebilirsin. ilk paragrafın içindeki <code><span></code> öğeleri varsayılan olarak satır içi görüntüleme türüne sahip oldukları için bir önceki örnekte olduğu gibi yeni bir satır için tasarımı zorlamaz.</p> - -<p>Bir de <code><ul></code> öğemiz var. Bu öğemisin görüntüleme türünü <code>display:inline-flex</code> tanımı ile; öğemizin içindeki öğelere esnek bir tasarım ve kendisine de satır içi kutu gibi davranmasını söylemiş oluruz.</p> - -<p>Son olarak, iki adet paragrafımız var. Bu paragraflarımızın görüntüleme türünü <code>display: inline</code> olarak tanımladığımızda, sahip oldukları varsıyalan tür olan blok kutu gibi değil de satır içi kutu gibi davranmaya başlarlar ve aşağıdaki örnekte de görüldüğü gibi iki paragrafımız normal davranışları olan yeni bir satırdan başlamak yerine aynı satırda diğer öğelerle birlikte görüntülenmeye başlarlar.</p> - -<p><strong>Değiştirin! sizde farklılıkları daha iyi görebilmek için <code>display: inline</code></strong> <strong>tanımı</strong><strong>nı <code>display: block</code> ve <code>display: inline-flex</code> tanımını da <code>display: flex</code> olarak değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> - -<p>İlerleyen derslerde esnek düzen gibi kavramlarla karşılaşacaksın; şimdilik hatırlanması gereken en önemli şey, <code>display</code> niteliğinin değerinin değiştirilmesi, bir kutunun dış görüntüleme türünün blok mu yoksa satır içi mi olduğunu belirlediğini ve bunun da mizanpajdaki diğer öğelerle birlikte nasıl görüntüleneceğini tanımlamasıdır.</p> - -<p>Dersin geri kalanında, dış ekran türüne odaklanacağız.</p> - -<h2 id="CSS_kutu_modeli_nedir">CSS kutu modeli nedir?</h2> - -<p>CSS kutu modelleri tanımlarının tümü sadece blok kutular için geçerlidir. Satır içi kutular kutu modelinde tanımlanan davranışların bir kısmını kullanır. Model, bir kutunun farklı bölümlerinin (Kenar boşluğu, kenarlık, dolgu ve içerik) kutuyu oluştururken birlikte nasıl çalıştırklarını tanımlar. Biraz daha karmaşıklık ekleyecek ama bir standart, birde alternatif olmak üzere iki adet kutu modeli vardır.</p> - -<h3 id="Bir_kutunun_parçaları">Bir kutunun parçaları</h3> - -<p>Bir blok kutu oluşturabilmek için, CSS'in bize verdikleri:</p> - -<ul> - <li><strong>İçerik(<em>Content</em>)</strong>: İçeriğin görüntülendiği alandır. {{cssxref("width")}} ve {{cssxref("height")}} gibi nitelikler kullanılarak boyutlandırılabilir.</li> - <li><strong>Dolgu(<em>Padding</em>)</strong>: İçeriği saran bir boşluktur. boyutu {{cssxref("padding")}} ve ilişkili niteliklerle belirlenir.</li> - <li><strong>Kenarlık(<em>Border</em>)</strong>: İçeriği ve dolguyu sarar. Boyutu ve stili {{cssxref("border")}} ve ilişkili niteliklerle belirlenir.</li> - <li><strong>Kenar boşluğu(<em>Margin</em>)</strong>: İçeriği, dolguyu ve kenarlığı saran, ayrıca diğer öğeler ile arasına mesafe koyan en dış katmandır. {{cssxref("margin")}} ve ilişkili niteliklerle belirlenir.</li> -</ul> - -<p>Aşağıdaki şema bu katmanları göstermektedir:</p> - -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> - -<h3 id="Standart_CSS_kutu_modeli">Standart CSS kutu modeli</h3> - -<p>Standart kutu modelinde, bir kutuya <code>width</code> ve <code>height</code> niteliklerine değer verirsen, bu <u><em>içeriğin</em></u> genişliğini ve yüksekliğini tanımlar. Kutunun kapladığı toplam boyutu elde etmek için daha sonra bu genişliğe ve yüksekliğe, eğer varsa dolgu ve kenarlık eklenir. Hesaplama aşağıda gösterilmiştir.</p> - -<p>Aşağıda bir kutunun modelini tanımlayan <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> niteliklerini CSS kodu bulunmakta:</p> - -<pre class="brush: css notranslate">.box { - width: 350px; - height: 150px; - margin: 10px; - padding: 25px; - border: 5px solid black; -} -</pre> - -<p>Standart kutu modelini kullanan kutumuzun kapladığı gerçek alan, dolgu ve kenarlıkta hesaba katıldığında, genişliği 410px(350 + 25 + 25 + 5 + 5) ve yüksekliği 210px(150 + 25 + 25 + 5 + 5) olacaktır.</p> - -<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Kenar boşluğu, kutunun gerçek boyutuna dahil edilmez. Elbette kutunun sayfada kaplayacağı alanı etkileyecektir fakat yalnızca kutunun dışındaki alanı etkiler. Kutunun alanı kenarlıkta durur, kenar boşluğuna uzamaz. Daha iyi anlaşılabilmesi için: Bir odaya koyacağımız 35cm genişliğinde ve 15cm uzunluğunda kolilerimizin olduğunu düşünelim. Bu kolileri odanın zeminine sıralarken aralarında 1mt mesafe bıraktığımızı düşünelim. Kolilerin arasında bıraktığımız 1mt'lik boşluk kolimizin genişliğini ve uzunluğunu etkilemez fakat odanın alacağı koli adedini etkiler.</p> -</div> - -<h3 id="Alternatif_CSS_kutu_modeli">Alternatif CSS kutu modeli</h3> - -<p>Kutunun gerçek boyutunu elde etmek için dolgu ve kenarlığı eklemenin oldukça sakıncalı olduğunu düşünebilirsin ve bunda da haklısın! Bu nedenle CSS, standart kutu modelinden bir süre sonra alternatif bir kutu modeli tanıttı. Bu modeli kullandığında, kutunun genişlik ve yüksekliği sayfada görünür kutunun genişliği ve yüksekliğidir. Bu nedenle içerik alanının genişliği ve yüksekliği, dolgu ve kenarlık ölçülerinin belirtilen değerden çıkartılmasıyla hesaplanır.Yukarıda kullanılan CSS, aşağıdaki sonucu verecektir. (Genişlik: 350px, yükseklik=150px)</p> - -<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> - -<p>Varsayılan olarak, tarayıcılar standart kutu modelini kullanır. Bir öğeye alternatif modeli tanımlayabilmen için <code>box-sizing: border-box</code> tanımını yapman gerekmektedir. Bu sayede tarayıcıya, belirlediğin herhangi bir boyut için, kenarlığı dikkate almasını söylemiş olursun.</p> - -<pre class="brush: css notranslate"><code>.box { - box-sizing: border-box; -} </code></pre> - -<p>Tüm öğelerinin alternatif kutu modelini kullanmasını istiyorsan <code>box-sizing</code> özelliğini <code><html></code> öğesinin üzerinde tanımlayın, ardından aşağıdaki önernekteki gibi tüm diğer öğelerin bu değeri miras alacak şekilde ayarlayın. Bunun arkasındaki püf noktasını anlayabilmen için,<a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">CSS'de Kutu Boyutlandırma Hakkındaki Püf Noktalar'a</a> bakın.</p> - -<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Geçmişten ilginç bir bilgi — Internet Explorer varsayılan olarak alternatif kutu modelini kullanıyordu ve geçiş için herhangi bir mekanizması mevcut değildi.</p> -</div> - -<h2 id="Kutu_modelleriyle_oynamak">Kutu modelleriyle oynamak</h2> - -<p>Aşağıda iki kutu görüyorsun. Bu kutular aynı <code>.box</code> sınıfına dahiller ve bu sınıf ikisinede aynı <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, ve <code>padding</code> özelliklerin atamasını yapar. Tek fark, ikinci kutu aynı zamanda alternatif kutu modelini kullanacak şekilde ayarlanmış olmasıdır.</p> - -<p><strong>İkinci kutunun boyutunu(<code>.alternate</code> sınıfına ekleyerek) ilk kutuyla eşleşecek şekilde değiştirebilir misin?</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">Burada</a>, bu görev için bir çözüm bulabilirsin..</p> -</div> - -<h3 id="Kutu_modelini_görüntüleyebilmek_için_tarayıcı_DevToolsu_kullanın">Kutu modelini görüntüleyebilmek için tarayıcı DevTools'u kullanın</h3> - -<p><a href="/tr/docs/Learn/Common_questions/What_are_browser_developer_tools">Tarayıcı geliştirme araçlarıyla(developer tools)</a> kutu modelini daha rahat anlayabilirsin. Firefox'un geliştirme araçlarında bir öğeyi incelersen, öğenin boyutunun yanı sıra, kenar boşluğunun, dolgusunun, kenarlığınında özelliklerini görebilirsin. Bir öğeyi bu şekilde incelemek, kutunun gerçekten düşündüğün boyutta olup olmadığını görmenin harika bir yoludur.</p> - -<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> - -<h2 id="Kenar_boşluğu_dolgu_ve_kenarlıklar">Kenar boşluğu, dolgu ve kenarlıklar</h2> - -<p>Yukarıda zaten {{cssxref("margin")}}, {{cssxref("padding")}}, ve {{cssxref("border")}}'ın ne şekilde kullanıldıklarını gördün. Bu örneklerde kullanılan nitelikler <strong>kısayollardır</strong> ve kutunun dört kenarını da aynı anda ayarlamana olanak sağlar. Bu kısayolların aynı zamanda, kutunun farklı tarafları üzerinde ayrı ayrı kontrol sağlayan eşdeğer nitelikleri de vardır.</p> - -<p>Şimdi bu nitelikleri daha detaylı inceleyelim.</p> - -<h3 id="Kenar_boşluğumargin">Kenar boşluğu(margin)</h3> - -<p>Kenar boşluğu, kutunun etrafındaki görünmez bir alandır. Diğer öğeleri kutudan uzaklaştırır. Kenar boşluklarının pozitif ve negatif değerleri olabilir. Kutunun bir tarafına, negatif bir kenar boşluğu ayarlamak, kutunun sayfadaki diğer öğelerle çakışmasına neden olabilir. İster standart ister alternatif kutu modelini kullanıyor olun, kenar boşluğu her zaman görünür kutunun boyutu hesaplandıktan sonra eklenir.</p> - -<p>{{cssxref("margin")}} niteliğini kullanarak bir öğenin tüm kenar boşluklarını tek seferde veya eşdeğer nitelikleri kullanarak her bir tarafı tek tek de kontrol edebilirsin:</p> - -<ul> - <li>{{cssxref("margin-top")}}</li> - <li>{{cssxref("margin-right")}}</li> - <li>{{cssxref("margin-bottom")}}</li> - <li>{{cssxref("margin-left")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte, İçerideki kutunun sahip olduğu kenar boşlukları üzerinde ki negatif değerlerin ne şekilde etki ettiğini, kutunun ne şekilde itildiğini ve dışarıdaki kutuyu nasıl etkilediğini görebilmek için kenar boşluğu değerlerini değiştirin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> - -<h4 id="Kenar_boşluğunun_daralması">Kenar boşluğunun daralması</h4> - -<p>Kenar boşlukları hakkında anlaşılması gereken önemli bir konu daha vardır, kenar boşluğunun daralma kavramı. Kenar boşlukları birbirine temas eden iki öğen varsa ve her iki kenar boşluğu da pozitif ise, bu kenar boşlukları birleşerek, en büyük kenar boşluğuna sahip öğenin kenar boşluğu kadar birbirlerinden uzaklaşırlar. Kenar boşluklarından biri veya ikisi de negatifse, negatif değer, sayısal değeri büyük olan değerden çıkartılarak çıkan sonuç kenar boşluğu olarak belirlenir.</p> - -<p>Aşağıdaki örnekte iki paragrafımız var. Üst paragrafta <code>margin-bottom: 50px</code> olarak tanımlanmış. İkinci paragraf ise <code>margin-top: 30px</code> olarak tanımlanmıştır. Kenar boşluğu daralması gerçekleşmiş ve ikisi arasında iki değerin toplamı kadar değilde en büyük değer olan <strong>50px</strong> kadar boşluk oluşmuştur.</p> - -<p><strong><code>margin-top</code> niteliğine 0 değerini atayarakta bunu test edebilirsin. Bu tür bir tanımlamada iki paragraf arasındaki görünür kenar boşluğu değişmez. Birinci paragrafta tanımlanan <code>bottom-margin: 50px</code> değeri korunur. Eğer <code>margin-top: -10px</code> olarak tanımlarsan aradaki boşluğun 40px olduğunu görürsün. 50px - 10px = 40px.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> - -<p>Kenar boşluklarının ne zaman azalacağını ve ne zaman kapanmayacağını belirleyen birkaç kural vardır. Daha fazla bilgi için, <a href="/tr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">kenar boşluğu daraltmayla</a> ilgili sayfaya bakın. Şimdilik hatırlaman gereken en önemli şey, kenar daralmasının gerçekleşen bir durum olduğudur. Kenar boşluklu alan yaratıyorsan ve beklediğin alanı alamıyorsan, muhtemelen olan budur.</p> - -<div class="blockIndicator note"> -<p><strong>Not:</strong> Aslında bu mantıksız bir davranış değildir. Daha önce kenar boşluğunun kutunun boyutuna dahil edilmediğinden bahsetmiştik. Pozitif bir kenar boşluğu verdiğimizde, tarayıcıya bu kutu ile diğer kutular arasında en az bu kadar boşluk olacak diyoruz. Yukarıdaki örnekte ikinci kutunun diğer kutudan 30piksel uzakta olması gerekiyor fakat ilk kutu zaten 50piksel bir mesafe koymuş. Bu yüzden ikinci kutunun sahip olması gereken mesafe fazlasıyla sağlandığından bir işlem yapılması gerekmiyor.</p> -</div> - -<h3 id="Kenarlık">Kenarlık</h3> - -<p>Kenarlık, kenar boşluğu ile kutunun dolgusu arasına çizilir. Standart kutu modelini kullanıyorsan, sınırın boyutu kutunun <code>width</code> ve <code>heigh</code> niteliklerinin değerlerine eklenir. Alternatif kutu modelini kullanıyorsan, kenarlığın boyutu, mevcut alanın bir kısmını kapladığı için içerik kısmını küçültür.</p> - -<p>Kenarlıkları şekillendirmek için çok sayıda özellik vardır — dört kenarlık vardır ve her kenarlığın üzerinde değişiklik yapmak isteyebileceğin stil, renk ve genişlik özellikleri vardır.</p> - -<p>{{cssxref("border")}} niteliği ile bu dört kenarlığın stilini, rengi ve genişliğini aynı anda ayarlayabilirsin.</p> - -<p>Her bir kenarın özelliklerini ayrı ayrı tanımlamak için şunları kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-left")}}</li> -</ul> - -<p>Her kenarın stilini, rengini ve genişliğini ayarlamak için şunları kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-color")}}</li> -</ul> - -<p>Her bir kenarın stil, renk ve genişlik ayarlarını ayrı ayrı yapmak istediğinde aşağıdaki nitelikleri kullanabilirsin:</p> - -<ul> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-color")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte, çeşitli kenarlıklar oluşturabilmek için kenarlık özelliğinin çeşitli niteliklerinden bazılarını kullandık. Nasıl çalıştıklarını daha iyi anlayabilmek için bazı niteliklerin değerlerini değiştirin yada yeni nitelikler ekleyin. Kenarlık özellikleri için MDN sayfaları, aralarında seçim yapabileceğin farklı kenarlık stilleri hakkında bilgi verir.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> - -<h3 id="Dolgu">Dolgu</h3> - -<p>Dolgu, Kenarlık ve içerik arasında bulur. Kenar boşluklarının aksine, negatif değer alamazlar. bu nedenle değri 0 yada pozitif bir değer olmalıdır. Öğene uygulanan herhengi bir arka plan, dolgunun arkasında görüntülenir ve genellikle içeriği sınırdan uzaklaştırmak için kullanır.</p> - -<p>{{cssxref("padding")}} niteliği ile bir öğenin dolgusunu bir seferde tanımlayabilirsin yada her tarafın dolgusunu ayrı ayrı tanımlamak için aşağıdaki nitelikleri kullanabilirsin.</p> - -<ul> - <li>{{cssxref("padding-top")}}</li> - <li>{{cssxref("padding-right")}}</li> - <li>{{cssxref("padding-bottom")}}</li> - <li>{{cssxref("padding-left")}}</li> -</ul> - -<p><strong>Aşağıdaki örnekte bulunan <code>.box</code> sınıfındaki dolgu niteliklerinin değerlerini değiştirerek içerideki kutunun içindeki metnin kutuya göre yerleşimindeki değişimleri gözlemleyebilirsin.</strong></p> - -<p><strong>Ayrıca <code>.container</code> sınıfı ile, birinci kutu ile ikinci kutu arasındaki bulunan boşluğu değiştirebilirsin. Dolgu herhangi bir öğe üzerinde uygulanabilir ve kenarlık ile içerik kısmında ne varsa onunla arasına mesafe bırakılmasını sağlar.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> - -<h2 id="Kutu_modeli_ve_satır_içi_kutular">Kutu modeli ve satır içi kutular</h2> - -<p>Yukarıdakilerin tümü tamamen blok kutuları için geçerlidir. <code><span></code> gibi bazı satır içi kutulara sahip öğelere de kutu modeli uygulanabilir.</p> - -<p>Aşağıdaki örnekte, paragraf içerisinde bir adet <code><span></code> var. Bu satır içi kutuya <code>width</code><font><font>,<span> </span></font></font><code>height</code><font><font>,<span> </span></font></font><code>margin</code><font><font>,<span> </span></font></font><code>border</code><font><font>, ve<span> </span></font></font><code>padding</code> uyguladık. Genişlik ve yüksekliğin göz ardı edildiğini görebilirsin. Dikey; kenar boşlukları, dolgu ve kenarlıklar uygulanır, ancak bunlar diğer içeriğin satır içi kutumuzla ilişkisini değiştirmez ve bu nedenle dolgu ve kenarlık, paragraftaki diğer kelimelerle çakışır. Yatay; dolgu, kenar boşlukları ve kenarlıklara uyulur ve içeriğin kutudan uzakşamasına neden olur.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> - -<div class="blockIndicator note"> -<p>Satır içi kutular içinde bulundukları satırı etkileyebilirler. Kendilerinden önceki veya sonraki satırları ve satırların içeriğini etkileyemezler.</p> -</div> - -<h2 id="display_inline-block_kullanımı">display: inline-block kullanımı</h2> - -<p><code>display</code> niteliğinin özel bir değeri vardır. Bu değer, bir öğenin yeni bir satıra geçmesini istemediğimiz, ayrıca yukarıdaki örnekte olduğu gibi bir çakışmanın da olmasını istemediğimiz durumlarda kullanışlıdır.</p> - -<p><code>display: inline-block</code> bir öğeye zaten bildiğimiz blok kutuların davranışlarından bazılarını kazandırır:</p> - -<ul> - <li><code>width</code> ve <code>height</code> nitelikleri uygulanır.</li> - <li><code>padding</code>, <code>margin</code>, ve <code>border</code> nitelikleri diğer öğelerin kutudan uzağa itilmesine neden olur.</li> -</ul> - -<p>Bunlarla birlikte, yeni bir satıra bölünmez ve sadece, <code>width</code> ve <code>height</code> nitelikleri belirtilirse içeriğinden daha büyük hale gelir.</p> - -<p><strong>Bu sonraki örnekte, <code><span></code> öğesine eklediğimiz <code>display: inline-block</code> komutunu <code>display: block</code> olarak değiştirmeyi veya satırı tamamen kaldırmayı deneyin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> - -<p>Bunun yararının görülebileceği bir örnek vermek gerekirse; <code>padding</code> uygulayarak daha büyük isabet alanına sahip bağlantı öğeleri eklemek isteyebiliriz. oysa <code><a></code> öğesi <code><span></code> gibi bir satır içi öğesidir ve <code>padding</code> istediğimiz gibi davranmayacaktır. Bunun için, <code>display: inline-block</code> tanımını kullanarak dolgunun diğer öğelerle daha iyi izalanmasını izin vererek kullanıcının bağlantıya tıklamasını kolaylaştırırız.</p> - -<p>Bunu gezinme çubuklarında oldukça sık görüyorsun. Aşağıdaki navigasyonda flexbox kullanılarak bağlantıların yatay görüntülenmesini sağladık. <code><a></code> bağlantı öğesinin isabet alanını genişletmek için dolgu ve görünebilir olması için öğemize bir arkaplan rengi tanımladık. Örneğimizde de görebileceğin gibi <u>dolgu</u>, <code><ul></code> öğesinin üzerindeki kenarlık ile çakışıyor. Bunun nedeni, <code><a></code>'nın bir satır içi öğe olmasıdır.</p> - -<p><strong><code>.links-list a</code></strong> <strong>seçicisine <code>display: inline-block</code> kuralını eklediğin de, dolgunun diğer öğeler tarafından dikkate alındığını ve bu sorunun giderildiğini göreceksin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu dersimizde çok şey ela aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testler hazırladım — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Becerilerini test et: Kutu Modeli</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Kutu modeli hakkında bilmen gerekenlerin çoğu bu. İleride çok fazla kutu ile çalışmaya başladığında kafan karışırsa, bu derse geri dönmek isteyebilirisn.</p> - -<p>Bir sonraki derste, düz kutularının daha ilginç görünmesini sağlama için <a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">arka planların ve kenarlıkların</a> nasıl kullanılabileceğine bir göz atacağız.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/values_and_units/index.html b/files/tr/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 50ce4de9f7..0000000000 --- a/files/tr/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: CSS değerleri ve birimleri -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - Acemi - - Beginner - - CSS - - Durum - - Eğitim - - Function - - Image - - Learn - - Number - - Position - - Renk - - Resim - - birimler - - color - - değerler - - fonksiyon - - length - - numara - - percentage - - units - - uzunluk - - values - - yüzde -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_and_units ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p>CSS'de kullanılan her niteliğin, o nitelik için izin verilen değer kümesini tanımlayan bir değer türü vardır. Bu derste en sık kullanılan değer türlerinden bazılarına ve bunların en yaygın değerlerine ve birimlerine bir göz atacağız. Ayrıca MDN'deki nitelik sayfalarındaki açıklamalara göz atman, belirli bir nitelik için geçerli olan değer türüyle ilişkili değerleri anlamana yardımcı olacaktır.</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/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/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/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> - </tr> - <tr> - <th scope="row">Amaç:</th> - <td>CSS niteliklerinde kullanılan farklı değer ve birimler hakkında bilgi edinmek</td> - </tr> - </tbody> -</table> - -<h2 id="CSS_değeri_nedir">CSS değeri nedir?</h2> - -<p>CSS eğitiminde ve MDN'deki nitelik sayfalarında, değer türlerini açılı parantezlerle çevrili olarak göreceksin, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> veya <code><a href="/tr/docs/Web/CSS/length"><length></a></code> gibi. <code><color></code> veri türünün herhangi bir nitelik için kullanılabilir olduğunu gördüğünüzde; <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> referans sayfasında listelenen değerin, bu niteliğe uygulanabilir olduğu anlamına gelir.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: <em>Veri türleri</em> olarak adlandırılan CSS değerlerini de görürsünüz. Terimler temelde birbirinin yerine kullanılabilir. CSS'de veri türü olarak adlandırılan bir terim gördüğünüzde, bu değer türünü söylemenin süslü bir yoludur. Veri türü kullanılmak istenilen, değer türü tarafından desteklenen herhangi bir ifade anlamına gelir.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Evet, CSS değer türleri ile CSS niteliklerini (örn. {{cssxref("color")}} nitelik, <a href="/tr/docs/Web/CSS/color_value"><color></a> değer türü). ayırt edebilmek için genellikle açılı parantezler kullanılarak gösterilir. HTML öğeleri ile CSS değer türlerinin ikiside açılı parantezler kullanılarak gösterildiklerinden, kafan karışabilir ancak işlev olarak aynı değillerdir — çok farklı kavramlar için kullanılırlar.</p> -</div> - -<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak başlığımızın ve arka plan rengimizi <code>rgb()</code> fonksiyonunu kullanarak ayarladık:</p> - -<pre class="brush: css notranslate"><code>h1 { - color: black; - background-color: rgb(197,93,161); -} </code> -</pre> - -<p>CSS'de bir öğeye değer türüyle, izin verilen değerler kümesinin içinden değer atamanın tek yoludur. <code><color></code> renk değer türünün farklı şekillerde kullanıldığını gördüğünde telaşlanmana gerek yok — Anahtar kelimeler, onaltılık(hex) değerler, <code>rgb()</code> fonksiyounu, gibi. Ayrıca tarayıcılar tarafından desteklenen tüm <code><color></code> değerlerini kullanabilirsin. İstersen her değer için MDN sayfasında tarayıcı desteği hakkında bilgi edinebilirsin. Örn, <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> sayfasına bakarsan tarayıcı uyumluluğu bölümünün, farklı renk veri türlerinin listelediğini ve bunların hangi sürümler tarafından desteklendiği hakkında bilgi verdiğini göreceksin(rgba(), hsla(),vb).</p> - -<p>Sıklıkla karşılaşabileceğin bazı değer ve birim türlerine örneklerle birlikte bir göz atalım, böylece farklı olası değerleri deneyebilirisin.</p> - -<h2 id="Sayılar_uzunluklar_ve_yüzdeler">Sayılar, uzunluklar ve yüzdeler</h2> - -<p>CSS'de, kullanabileceğin çeşitli sayısal değer türleri vardır. Aşağıdakilerin tümü sayısal olarak sınıflandırılmıştır:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Veri tipi</th> - <th scope="col">Açıklama</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/tr/docs/Web/CSS/integer"><integer></a></code></td> - <td><code><integer></code> bir tamsayıyı temsil eder, <code>1024</code> veya <code>-55</code> gibi.</td> - </tr> - <tr> - <td><code><a href="/tr/docs/Web/CSS/number"><number></a></code></td> - <td><code><number></code> ondalıklı bir sayıyı temsil eder — kesirli bileşeni olan bir ondalık basamağa sahip olabilir veya olmayabilir. Örn, <code>0.255</code>, <code>128</code> veya <code>-1.2</code>.</td> - </tr> - <tr> - <td><code><a href="https://developer.mozilla.org/tr/docs/Web/CSS/dimension"><dimension></a></code></td> - <td> <code><dimension></code> bir birime bağlı olan <code><number></code> tipinde bir sayıdır. Örn., <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code>; <code><a href="/tr/docs/Web/CSS/length"><length></a></code>, <code><a href="/tr/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/tr/docs/Web/CSS/time"><time></a></code>, ve <code><a href="/tr/docs/Web/CSS/resolution"><resolution></a></code> değer türlerini içeren bir kapsayıcı kategoridir<a href="/tr/docs/Web/CSS/resolution">.</a></td> - </tr> - <tr> - <td><code><a href="/tr/docs/Web/CSS/percentage"><percentage></a></code></td> - <td><code><percentage></code> başka bir değerin bir kısmını temsil eder. Örn., <code>50%</code>. Yüzde değeri her zaman başka bir miktara bağlıdır. Örn., bir öğenin uzunluğunun, üst değerin uzunluğuna bağlı olması gibi.</td> - </tr> - </tbody> -</table> - -<h3 id="Uzunluklar">Uzunluklar</h3> - -<p>En sık karşılaşacağın sayısal tür <code><length></code>'dir. Örn. <code>10px</code> (pixels) veya <code>30em</code>. CSS'de kullanılan iki tür uzunluk vardır — bağıl ve mutlak. işlerin ne kadar karışabileceğini anlamak için farkı bilmek önemlidir.</p> - -<h4 id="Mutlak_uzunluk_birimleri">Mutlak uzunluk birimleri</h4> - -<p>Aşağıdakilerin tümü <strong>mutlak</strong> uzunluk birimleridir — başka hiçbir şeye bağlı değildirler ve genellikle her zaman aynı boyutta kabul edilirler.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Birim</th> - <th scope="col">İsim</th> - <th scope="col">Eşittir</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Santimetre</td> - <td>1cm = 96px/2.54</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Milimetre</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Çeyrek milimetre</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>İnç</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/6th of 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Point</td> - <td>1pt = 1/72th of 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Piksel</td> - <td>1px = 1/96th of 1in</td> - </tr> - </tbody> -</table> - -<p>Bu birimlerin çoğu, ekran yerine baskı için kullanıldığında daha kullanışlıdır. Örn., genellike ekranda<code>cm</code>(santimetre) kullanmayız. Yaygın olarak kullanacağın tek değer <code>px</code>(piksel)'dir.</p> - -<h4 id="Bağıl_uzunluk_birimleri">Bağıl uzunluk birimleri</h4> - -<p>Bağıl uzunluk birimleri başka bir şeye, belki de ana öğenin yazı tipinin boyutuna veya görünüm alanının boyutuna bağlıdır. Bağıl birimleri kullanmanın yararı, dikkatli bir planlama ile, metnin veya diğer öğelerin boyutunu sayfadaki diğer her şeye göre ölçeklenmesini sağlabilmendir.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Birim</th> - <th scope="col">Bağıl</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Öğenin veya ebeveyninin yazı tipi boyutuna.</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>mevcut yazı tipinin x harfinin yüksekliğine.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>Öğenin yazı tipinin "0"(sıfır) karakterinin ilerleme ölçüsü(genişliği).</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>Kök(root) öğenin yazı tipi boyutu.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>Öğenin satır yüksekliği.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>Görüntü alanı genişliğinin %1'i.</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>Görüntü alanı yüksekliğinin %1'i.</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>Görüntü alanında küçük olan değerin %1'i.</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>Görüntü alanının büyük olan değerin %1!i</td> - </tr> - </tbody> -</table> - -<h4 id="Bir_örnekle_keşfedelim">Bir örnekle keşfedelim</h4> - -<p>Aşağıdaki örnekte, bazı göreli ve mutlak uzunluk birimlerinin nasıl davrandığını görebilirsin. İlk kutunun {{cssxref("width")}} niteliği piksel cinsinden bir değeri vardır. Mutlak bir birim olarak, bu genişlik başka ne değişirse değişsin aynı kalacaktır.</p> - -<p>İkinci kutu, <code>vw</code>(görüntü alanı genişliği) birimlerinde ayarlanmış bir genişliğe sahiptir. Bu değer, görüntü alanı genişliğine bağlıdır ve bu nedenle 10vw, görüntü alanının genişliğinin yüzde 10'udur. Tarayıcı pencerenin genişliğini değiştirirsen, kutunun boyutu değişmelidir. Ancak bu örnek, bir <code><iframe></code> kullanılarak sayfaya gömüldüğü için tarayıcının genişliğinin değiştirilmesi işe yaramaz. Bunu çalışır bir şekilde görebilmek için, <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">örneği kendi tarayıcı sekmesinde açtıktan sonra denemen gerekir</a>.</p> - -<p>Üçücü kutu <code>em</code> birimi kullanır. Bunlar yazı tipi boyutuna bağlıdır. <code>.wrapper</code> sınıfının yazı tipi boyutunu <code>1em</code> olarak ayarladım. Bu değeri değiştirdiğinde tüm öğelerin yazı tipi boyutunun değiştiğini göreceksin, ancak genişliği yazı tipi boyutuna bağlı olan sadece son öğe olduğu için birtek onun genişliği değişecektir.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> - -<h4 id="ems_ve_rems">ems ve rems</h4> - -<p><code>em</code> ve <code>rem</code> kutulardan metne kadar herhangi bir öğeyi boyutlandırırken en sık karşılaşacağın iki göreceli uzunluktur. Bunların nasıl çalıştıklarını ve aralarındaki farkları anlamak önemlidir, özellikle de <a href="/tr/docs/Learn/CSS/Styling_text">stil metni</a> veya <a href="/tr/docs/Learn/CSS/CSS_layout">CSS düzeni</a> gibi daha karmaşık konulara geçmeye başladığında. Aşağıdaki örnek anlayabilmen için bir sunum sunar.</p> - -<p>HTML, iç içe geçmiş bir dizi listeden oluşur — Toplamda üç listemiz var ve her iki örnekte de aynı HTML kodları mevcut. Tek fark, ilkinin bir <em>ems</em> sınıfına ve ikicinin bir <em>rems</em> sınıfına sahip olmasıdır.</p> - -<p>Başlangıç olarak, <code><html></code> öğenin yazı tipi boyutu olarak 16px ayarladık.</p> - -<p><strong>Özetlemek gerekirse</strong>, tipografi durumunda <strong>em birimi "ana öğenin yazı tipi boyutu" anlamına gelir</strong>. {{htmlelement("li")}} İçindeki {{htmlelement("ul")}} öğeleri <code>ems</code> sınıfına dahil olan ebeveynlerinden boyutlandırma alır. Böylece, her bir ardışık iç içe geçme düzeyi giderek büyür, çünkü her birinin yazı tiği boyutu <code>1.3</code><code>em</code>'dir, ebeveyninin yazı tiği boyutunun 1,3 katıdır.</p> - -<p><strong>Özetlemek gerekirse, rem birimi "Kök(root) öğenin yazı tipi boyutu" anlamına gelir</strong> (rem "kök em" anlamına gelir). {{htmlelement("li")}} öğesinin içindeki {{htmlelement("ul")}} öğeleri, boyutlarını <code>rems</code> sınıfındaki <code>rem</code> tanımından dolayı kök öğenin<code><html></code> yazı tipi boyutundan alır. Birbirini izleyen her yuvada, kök öğenin yazı tipi değişmediğinden, bu öğelerdeki yazı tipi boyutlarıda sabit kalır.</p> - -<p>Bununla birlikte, <code><html></code> öğesinin <code>font-size</code> niteliğini CSS'de değiştirirsen, diğer her şeyin ona göre değiştiğini göreceksin — hem <code>rem</code>, hemde <code>em</code> buyutlu metinler.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> - -<h3 id="Yüzdeler">Yüzdeler</h3> - -<p>Çoğu durumda, bir yüzde, uzunlukla aynı şekilde ele alınır. Yüzde olan değer, her zaman başka bir değere göre ayarlanmış olmaktadır. Örneğin, bir öğeyi <code>font-size</code> yüzde olarak ayarlarsan, bu öğenin üst öğesinin <code>font-size</code> nitelik değerinin bir yüzdesi olacaktır. Bir <code>width</code> değer için yüzde kullanırsan, üst öğenin <code>width</code> nitelik değerinin yüzdesi olacaktır.</p> - -<p>Aşağıdaki örnekte, yüzde boyutlu iki kutu ve iki piksel boyutlu kutu aynı sınıf adlarına sahiptir. Her iki set de sırasıyla 200 piksel ve %40 genişliğindedir.</p> - -<p>Aradaki fark, iki kutudan oluşan ikinci setin 400 piksel genişliğinde bir çerçevenin içinde olmasıdır. İkinci 200 piksel genişliğindeki kutu birincisi ile aynı genişliktedir. ancak ikinci %40'lık kutu şimdi 400 pikselin %40'na sahip olduğundan ilkinden daha dardır!</p> - -<p><strong>Bunun nasıl çalıştığını görmek için çerçevenin genişliğini veya yüzde değerini değiştirmeyi dene.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> - -<p>Sonraki örnekte yazı tipi boyutları yüzde olarak belirlenmiştir. <code><li></code> öğesinin <code>font-size</code> nitelik değeri %80'lik bir paya sahip olduğu ve iç içe yerleştirilmiş liste öğelerinin, boyutlarını üstlerinden devraldığından her bir basamakta giderek küçülür.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> - -<p>Birçok değer türü bir uzunluk veya yüzdeyi kabul ederken, yalnızca uzunluğu kabul eden değer türlerinin de olduğunu unutmayın. MDN nitelik referans sayfalarında hangi değerlerin kabul edilip/edilmediğini öğrenebilirsin. İzin verilen değerler <code><a href="/tr/docs/Web/CSS/length-percentage"><length-percentage></a></code>'ri içeriyorsa, bir uzunluk veya yüzde kullanılabilir. izin verilen değer yalnızca <code><length></code> içeriyorsa, yüzde kullanmak mümkün değildir.</p> - -<h3 id="Sayılar">Sayılar</h3> - -<p>Bazı değer türleri, herhangi bir birim eklenmeden sayıları kabul eder. Birimsiz bir sayıyı kabul eden bir niteliğe örnek, <code>opacity</code> bir öğenin opaklığını(ne kadar şeffaf olduğunu) kontrol eden özelliktir. Bu özellik <code>0</code>(tamamen şeffaf) ve <code>1</code>(şeffaflık yok) arasında bir sayıyı kabul eder.</p> - -<p><strong>Aşağıdaki örnekte, <code>opacity</code> değerini değiştirmeyi deneyin. <code>0</code> ve <code>1</code> arasında çeşitli ondalık değerler vererek kutunun şeffaflığının nasıl değiştiğine dikkat edin.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>:CSS'de değer olarak bir sayı kullandığında, bu sayı tırnak içine <u>alınmamalıdır</u>.</p> -</div> - -<h2 id="Renk">Renk</h2> - -<p>CSS'de rengi belirlemenin birçok yolu vardır ve bunlardan bazıları yeni yeni desteklenmeye başlamıştır. Metin rengini, arka plan rengini veya başka herhangi bir öğeyi belirtirken aynı rengi kullanabilirsin.</p> - -<p>Modern bilgisayarlarda bulunan standart renk sistemi 24bit olup, kanal başına 256 farklı değerde kırmızı, yeşil ve mavi kombinasyonu aracılığıyla yaklaşık 16,7 milyon farklı rengin görüntülenmesini sağlar (256 x 256 x 256 = 16.777.216.) CSS'de renkleri belirlemenin bazı yollarına bir göz atalım.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bu eğitimde, iyi bir tarayıcı desteğine sahip olan renkleri belirlemenin yaygın yöntemlerine bakacağız, başkaları da var ama anlatacaklarım kadar iyi desteğe sahip değiller ve daha az yaygınlardır.</p> -</div> - -<h3 id="Anahtar_kelime_renkleri">Anahtar kelime renkleri</h3> - -<p>Renk belirtmenin basit ve anlaşılır bir yolu oldukları için, buradaki ve MDN'nin başka bir yerindeki örneklerde sıklıkla kullanıldıklarını göreceksin. Bu anahtar kelimelerinin bazıları oldukça eğlenceli isimlere sahip! <code><a href="/tr/docs/Web/CSS/color_value"><color></a></code> değer türü için sayfada tam bir liste görebilirsin.</p> - -<p><strong>Nasıl çalıştıklarını hakkında daha fazla fikir edinmek için aşağıdaki canlı örneklerde farklı renk değerleriyle oynamayı deneyebilirsin.</strong></p> - -<h3 id="Onaltılık_RGB_değerleri">Onaltılık RGB değerleri</h3> - -<p>Karşılaşacağın sonraki renk veri türü değeri onaltılık kodlardır. Her bir onaltılık değer, bir karma/pound sembolünden(#) ve ardından altı onaltılık sayıdan oluşur; bunların her biri 0 ile f(15'şi temsil eder) arasında 16 değerden birini alabilir. yani <code>0123456789abcdef</code>. Her bir değer çifti, kanallardan birini (kırmızı, yeşil ve mavi) temsil eder ve her biri için mevcut 256 değerden herhangi birini belirlememize olanak tanır (16 x 16 = 256).</p> - -<p>Bu değerler biraz daha karmaşık ve anlaşılması daha zordur, ancak anahtar kelimelerden çok daha yönlüdürler — renk düzeninde kullanmak istediğin herhangi bir rengi temsil etmek için onaltılık değerleri kullanabilirsin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> - -<p><strong>Renklerin nasıl değiştiğini görmek için değerleri değiştirmeyi deneyin.</strong></p> - -<h3 id="RGB_ve_RGBA_deperleri">RGB ve RGBA deperleri</h3> - -<p>Burada bahsedeceğimiz üçüncü şema RGB'dir. RGB değeri, kırmızı, yeşil ve mavi renklerinin kanal değerlerini, onaltılık değerlerle hemen hemen aynı şekilde temsil eden üç parametre verilen bir fonsiyondur — <code>rgb()</code>. onaltılık sistemle arasındaki fark, her kanalın iki onaltılık rakamla değil, 0 ile 255 arasında bir sayıyla temsil edilmesidir — anlaşılması biraz daha kolaydır.</p> - -<p>RGB renklerini kullanmak için son örneğimizi yeniden yazalım:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> - -<p>Ayrıca RGBA veri türünü de kullanabilirsin — bunlar RGB renkleriyle tamamen aynı şekilde çalışır ve herhangi bir RGB değerini kullanabilirsin. Sadece, şeffaflığı kontrol eden rengin alfa kanalını temsil eden dördüncü bir değeri vardır. Bu değeri <code>0</code> olarak ayarlarsan rengi tamamen şeffaf hale getirir, <code>1</code> olarak ayarlarsan tamamen opak hale getirir. Ara değerler farklı şeffaflık düzeyi verir.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Bir renk üzerinde bir alfa kanalı ayarlamanın, daha önce baktığımız {{cssxref("opacity")}} niteliğini kullanmaktan önemli bir farkı vardır. Opaklığı kullandığında, öğeyi ve içindeki her şeyi opak yaparsın, RGBA renklerini kullanmak ise yalnızca belirttiğin rengi opak yapar.</p> -</div> - -<p>Aşağıdaki örnekte, renkli kutularımızın bulunduğu bloğa bir arka plan resmi ekledim. Daha sonra kutuları farklı opaklık değerlerine sahip olacak şekilde ayarladım — alfa kanalı değeri daha küçük olduğunda arka planın nasıl daha fazla göründüğüne dikkat edin.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> - -<p><strong>Bu örnekte, renk çıktısını nasıl etkilediğini görmek için alfa kanalı değerlerini değiştirmeyi deneyin. </strong></p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code>rgba()</code> ile <code>rgb()</code> ve <code>hsl()</code> ile <code>hsla()</code>(aşağıya bakın) birbirinden saf takma ad ile ayrılan ve aynı şekilde hareket edecek şekilde tarayıcılar tarafından güncellendi. Yani, örneğin hem <code>rgba()</code>, hemde <code>rgb()</code> ile alfa kanalı değerleri olmadan renkleri oluşturabiliyoruz. Yukarıdaki örneğin <code>rgba()</code> fonksiyonunu <code>rgb()</code> olarak değiştirin ve renklerin hala çalışıp çalışmadığını görün! Hangi stili kullanacağın size bağlıdır, ancak farklı işlevleri kullanmak, şeffaf olmayan ve şeffaf olan renk tanımlarını ayırmak için daha iyi tarayıcı desteği sağlar ve kodunuzda şeffaf renklerin nerede tanımlandığının görsel bir göstergesi olarak işlev görebilir.</p> -</div> - -<h3 id="HSL_ve_HSLA_değeri">HSL ve HSLA değeri</h3> - -<p>RGB'den biraz daha az desteklenen HSL renk modelidir(IE'nin eski sürümlerinde desteklenmez) ve tasarımcıların büyük ilgisinden sonra uygulanmıştır. <code>hsl()</code> fonksiyonu, kırmızı, yeşil ve mavi değerleri yerine 16,7 milyon rengi ayırt etmek için kullanılan ton, doygunluk ve açıklık değerlerini kabul eder, ancak farklı bir şekilde:</p> - -<ul> - <li><strong>Ton</strong>: Rengin temel tonudur. Bu, renk tekerleği etrafındaki açıları temsil eden, 0 ile 360 arasında bir değer alır.</li> - <li><strong>Doygunluk</strong>: Renk ne kadar doygun? Bu, 0'ın renk olmadığı (gri gölgesi olarak görünecektir) ve %100'ün tam renk doygunluğu olduğu %0 ile %100 arasında bir değer alır.</li> - <li><strong>Hafiflik</strong>: Renk ne kadar açık veya parlak? Bu, 0'ın ışık olmadığı (tamamen siyah görünür) ve %100'ü tam ışık olduğu(tamamen beyaz görünür) %0 ile %100 arasında bir değer alır</li> -</ul> - -<p>HSL renklerini şu şekilde kullanmak için RGB örneğini güncelleyebiliriz:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> - -<p>RGB'nin RGBA'ya sahip olması gibi, HSL'nin de bir HSLA tipinde bir eşdeğeri vardır, bu da alfa kanalını belirtmen için size aynı yeteneği verir. Bunu aşağıda RGBA örneğimi HSLA renklerini kullanacak şekilde değiştirerek gösterdim.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> - -<p>Bu renk değerlerinden herhangi birini projelerinde kullanabilirsin. Çoğu proje için bir renk paletine karar vermen ve ardından bu renkleri — ve seçtiğin rengi belirleme yöntemini — tüm proje boyunca aynı modeli kullanman muhtemeldir. Renk modellerini karıştırıp kullanabilirsin, ancak tutarlılık için genellikle en iyisi projenin bütününde, aynı modeli kullanmandır!</p> - -<h2 id="Görüntüler">Görüntüler</h2> - -<p><code><a href="/tr/docs/Web/CSS/image"><image></a></code> değer türü kullanıldığı herhangi bir yerde geçerli bir görüntü değeri taşır. Bu, bir <code>url()</code> fonksiyonu ile işaret edilen gerçek bir görüntü dosyası veya bir gradyan olabilir.</p> - -<p>Aşağıdaki örnekte, CSS <code>background-image</code> niteliğine tanımlanan bir görüntü ve gradyanı gösterdik.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: <code><image></code> için olası başka veri türleri de vardır, ancak bunlar daha yenidir ve şu anda daha az tarayıcı desteğine sahiptir. Daha fazla bilgi edinmek istiyorsan, MDN'deki <code><a href="/tr/docs/Web/CSS/image"><image></a></code> sayfasına bakabilirsin.</p> -</div> - -<h2 id="Konum">Konum</h2> - -<p><code><a href="/tr/docs/Web/CSS/position_value"><position></a></code> değer türü, arka plan görüntüsünü, 2 Boyutlu koordinat sistemine göre öğeye konumlandırmak(<code><a href="/tr/docs/Web/CSS/background-position">background-position</a></code> üzerinden) için kullanılan bir değerdir. Değer türü, <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, ve <code>center</code> gibi anahtar kelimeleri alabilir, kutunun üst ve sol kenarından uzaklıkları temsil eden 2 boyutlu bir koordinatlamayı da kullanabilir.</p> - -<p>Tipik bir konum değeri iki değerden oluşur — birincisi konumu yatay, ikincisi dikey olarak ayarlar. Yalnızca bir eksen için değerler belirtirsen, diğeri varsayılan olacaktır: <code>center</code>.</p> - -<p>Aşağıdaki örnekte, bir anahtar kelime kullanarak kabın üstünden 40 piksel uzaklıkta, sağ tarafa dayalı bir arka plan yerleştirdik:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> - -<p><strong>Görüntünün nasıl hareket ettirebileceğini görebilmek içn bu değerlerle oynayabilirsin.</strong></p> - -<h2 id="Dizeler_ve_tanımlayıcılar">Dizeler ve tanımlayıcılar</h2> - -<p>Daha önceki örneklerde, anahtar kelimelerin nerede ve nasıl kullanıldıklarını gördük(Örn., <code><color></code> değer türünde kullandığımız <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, ve <code>goldenrod</code> anahtar kelimeleri gibi). Bu anahtar kelimeler, <em>tanımlayıcılar</em> olarak ifade edilir ve CSS'de onların özel değer olduklarını anlar. Bu nedenle, <a title="Tırnak içine alınmamış.">alıntı</a> yapılmaz — dizeler olarak değerlendirilmezler.</p> - -<p>CSS'de dizeleri kullandığımız yerler de var. örneğin <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">oluşturulan içeriği belirtirken</a>. Bu durumda, değer bir dizge olduğunu göstemek için tırnak içine alınır. Aşağıdaki örnekte, tırnak içinde oluşturulmuş bir içerik dizesi ile birlikte <a title="Tırnak içine alınmamış.">alıntılanmamış</a> renk anahtar sözcükleri kullanıyoruz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> - -<h2 id="Fonksiyonlar">Fonksiyonlar</h2> - -<p>Bakacağımız son değer türü, fonksiyonlar olarak bilinen değerler grubudur. Programlamada, bir fonksiyon, hem geliştirici hem de bilgisayar tarafından minimum çabayla tekrar eden bir görevi tamamlamak için birden çok kez çalıştırılabilen ve yeniden kullanılabilir olan kod bölümüdür. Fonksiyonlar genellikle JavaScript, Python veya C++ gibi dillerle ilişkilendirilir, ancak nitelik değerleri olarak CSS'de de bulunurlar. Zaten renkler bölümünde eylem fonksiyonlarını gördük — <code>rgb()</code>, <code>hsl()</code> ve bir dosyadan görüntüyü döndürmek için kullanılan <code>url()</code> gibi.</p> - -<p><code>calc()</code> geneneksel bir programlama dilinde bulabileceğin fonksiyonlara benzeyen bir CSS fonksiyonudur. Bu fonksiyon, basit hesaplamalar yapabilmeni sağlar. Projen için CSS'i yazarken tanımlayamadığın değerleri hesaplamak istiyorsan ve tarayıcının çalışma zamanında sizin için hesaplama yapmasını istediğin durumlarda yararlıdır.</p> - -<p>Örneğin, aşağıda <code>calc()</code> fonksiyonunu kutunun genişliğini <code>%20 + 100px</code> yapmak için kullanıyoruz. %20, ebeveyn öğesinin genişliğinden hesaplanır. <code>.wrapper</code> sınıfında tanımlanan genişlik değeri değişirse oğul öğenin genişliğide değişir. Bu hesaplamayı önceden yapamayız çünkü ebeveynin %20'sinin ne olacağını bilmiyoruz, bu yüzden <code>calc()</code> fonksiyonunu kullanarak tarayıcıya bunu bizim için yapmasını söyleyebiliriz.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> - -<h2 id="Becerilerini_test_et!">Becerilerini test et!</h2> - -<p>Bu derste birçok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musunuz? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı testler hazırladım. — bkz. <a href="/tr/docs/Learn/CSS/Building_blocks/Values_tasks">Becerilerini test et: Değerler ve birimler</a>.</p> - -<h2 id="Özet">Özet</h2> - -<p>Bu, karşlaşabileceğin en yaygın değer ve birim türlerinin hızlı bir şekilde gözden geçerilmesi olmuştur. <a href="/tr/docs/Web/CSS/CSS_Values_and_Units">CSS Değerleri ve birimleri</a> referans sayfasındaki tüm farklı türlere göz atabilirsin; bu derslerde çalışırken bunların çoğuyla karşılaşacaksın.</p> - -<p>Unutulmaması gereken en önemli konu, her özelliğin izin verilen değer türlerinin tanımlanmış bir listesine sahip olması ve her değer türünün değelerinin ne olduğunu açıklayan bir tanıma sahip olmasıdır. Daha sonra MDN'de ayrıntılara bakabilirsin.</p> - -<p>Örneğin <code><a href="/tr/docs/Web/CSS/image"><image></a></code> bir renk gradyanı oluşturmana da izin veren yaklaşımı yararlıdır, ancak yazılışından bu yaklaşıma sahip olduğunun anlaşılması zordur.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Bu_kısımda">Bu kısımda</h2> - -<ol> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> - <ul> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde elemanlar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> - </ul> - </li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de elemanların boyutları</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> - <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> -</ol> diff --git a/files/tr/learn/css/building_blocks/values_tasks/index.html b/files/tr/learn/css/building_blocks/values_tasks/index.html deleted file mode 100644 index 50d9bac560..0000000000 --- a/files/tr/learn/css/building_blocks/values_tasks/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'Becerilerinizi test edin: değerler ve birimler' -slug: Learn/CSS/Building_blocks/Values_tasks -tags: - - Acemi - - Beginner - - CSS - - Example - - Örnek -translation_of: Learn/CSS/Building_blocks/Values_tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Values_tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS Değerleri ve Birimleri</a> dersinde incelediğimiz bazı değerler ve birimler hakkındaki anlayışınızı kontrol etmenize yardımcı olmaktır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <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 bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="Birinci_Görev">Birinci Görev</h2> - -<p>bu görevde, ilk liste öğesine onaltılık renk kodları kullanılarak bir arka plan rengi verilmiştir. Göreviniz, aynı rengi farklı formatlarda kullanarak CSS'i tamamlamak ve ayrıca arka planı yarı saydam yapmanız gereken son bir liste öğeniz var.</p> - -<ul> - <li>İkinci liste öğesini RGB rengini kullanmalıdır.</li> - <li>üçüncüsü HSL rengini kullanmalıdır.</li> - <li>Dördüncüsü RGB rengini kullanmalı ancak alfa kanalı 0.2 olarak ayarlanmalıdır.</li> -</ul> - -<p>Onaltılık renk için dönüşümleri <a href="https://convertingcolors.com/hex-color-86DEFA.html">Bu bağlantıda</a> bulabilirsiniz.CSS'deki değerleri nasıl kullanağınızı bulmanız gerekir.</p> - -<p><img alt="Four list items. The first three with the same background color and the last with a lighter background." src="https://mdn.mozillademos.org/files/17135/mdn-value-color.png" style="height: 535px; width: 1270px;"></p> - -<p>Bitmiş öreği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/color.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/color-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="İkinci_görev">İkinci görev</h2> - -<p>Bu görevde çeşitli metin öğelerinin boyutunu ayarlamanız gerekir.</p> - -<ul> - <li>{{HTMLElement("h1")}} 50 piksel olmalıdır.</li> - <li>{{HTMLElement("h2")}} 2em olmalıdır.</li> - <li>{{HTMLElement("p")}} 16 piksel olmalıdır.</li> - <li>{{HTMLElement("h1")}}'in ilk kardeşi olan {{HTMLElement("p")}}, {{HTMLElement("h1")}} %120'si olmalıdır.</li> -</ul> - -<p><img alt="Some text at varying sizes." src="https://mdn.mozillademos.org/files/17136/mdn-value-length.png" style="height: 845px; width: 1267px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/length.html", '100%', 1000)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/length-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Üçüncü_görev">Üçüncü görev</h2> - -<p>Bu görevde, arka plan resmini yatay olarak ortalayacak şekilde ve kutunun üstünden %20 oranında hareket ettirmeniz gerekir.</p> - -<p><img alt="A stat centered horizontally in a box and a short distance from the top of the box." src="https://mdn.mozillademos.org/files/17137/mdn-value-position.png" style="height: 383px; width: 734px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu güncellemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/values/position.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/values/position-download.html">kaynak kodlarını</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</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üzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</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> diff --git a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html b/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html deleted file mode 100644 index 63c0f98f36..0000000000 --- a/files/tr/learn/css/building_blocks/writing_modes_tasks/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Yazma Modları ve Mantıksal Özellikler' -slug: Learn/CSS/Building_blocks/Writing_Modes_Tasks -tags: - - Başlangıç - - Beginner - - CSS -translation_of: Learn/CSS/Building_blocks/Writing_Modes_Tasks -original_slug: Öğren/CSS/CSS_yapi_taslari/Writing_Modes_Tasks ---- -<div>{{LearnSidebar}}</div> - -<div></div> - -<p>Bu görevin amacı, Yazma Modları ve Mantıksal özellikler konusundaki anlayışınızı kontrol etmenize yardımcı olmaktır. Bu görevleri tamamlamak için bilmeniz gerekenler, <a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönlerini kullanma</a> dersinde ele alınmaktadır.</p> - -<div class="blockIndicator note"> -<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde kodları deneyebilirsiniz, ancak kodu indirip görevler üzerinde çalışabilmek için kullanabileceğiniz <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 bir araç kullanılması da yararlı olabilir.</p> - -<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme ve yardım")}} bölümüne bakın.</p> -</div> - -<h2 id="1._Görev">1. Görev</h2> - -<p>Örnekteki kutu, yatay bir yazma modu ile görüntülenir. Sağdan sola dikey yazma modunu kullanması için CSS satırı ekleyebilir misiniz? Öreneğiniz aşağıdaki resme benzemelidir.</p> - -<p><img alt="A box with a vertical writing mode" src="https://mdn.mozillademos.org/files/17129/mdn-writing-modes1.png" style="height: 537px; width: 1163px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/writing-mode.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/writing-mode-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="2._Görev">2. Görev</h2> - -<p>Aşağıdaki örnekte, dikey olarak döndürüldüğünde kutunun en boy oranını korumak için <code>width</code> ve <code>height</code> nitelikleri yerine mantıksal nitelikleri kullanın. Nihai sonucunuz resimdeki gibi görünmelidir.</p> - -<p><img alt="Two boxes one horizontal the other vertical" src="https://mdn.mozillademos.org/files/17130/mdn-writing-modes2.png" style="height: 994px; width: 1163px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-width-height.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-width-height-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="3._Görev">3. Görev</h2> - -<p>Kenar boşluğu, kenarlık ve dolgu özelliklerinin tanımlanması için <code>top</code>, <code>left</code>, <code>bottom</code> ve <code>right</code> yerine mantıksal sürümlerini kullanın. Bunun nasıl görünmesi gerektiğini ağaşıdaki resimde görebilirsiniz.</p> - -<p>Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.</p> - -<p><img alt="Two boxes one horizontal one vertical with different margin, border and padding" src="https://mdn.mozillademos.org/files/17131/mdn-writing-modes3.png" style="height: 704px; width: 1246px;"></p> - -<p>Örneği resimde gösterildiği gibi yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyi deneyin:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/writing-modes/logical-mbp.html", '100%', 1100)}}</p> - -<div class="blockIndicator note"> -<p>Değerlendirme ve daha ileri çalışma için bu görevin, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/writing-modes/logical-mbp-download.html">kaynak kodlarının</a> editörünüzde veya çevrimiçi düzenleyicide çalışması için indirebilirsiniz.</p> -</div> - -<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> - -<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> - -<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</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üzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> - <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: - <ul> - <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> - <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> - <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</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> |