diff options
Diffstat (limited to 'files/tr/learn/css/styling_text/styling_links/index.html')
| -rw-r--r-- | files/tr/learn/css/styling_text/styling_links/index.html | 453 |
1 files changed, 453 insertions, 0 deletions
diff --git a/files/tr/learn/css/styling_text/styling_links/index.html b/files/tr/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..3cf6997aa5 --- /dev/null +++ b/files/tr/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,453 @@ +--- +title: Bağlantıları şekillendirmek +slug: Öğren/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Bağlantıları</a> etkili bir şekilde şekillendirmek için sözde sınıfların nasıl kullanılacağını anlamak önemlidir. Navigasyon menülerinin ve sekmelerdeki bu tarz bağlantıların ortak görünümlerinin ayarlanması bu yazımızda tüm hatlarıyla ele alacağız.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanma, HTML temelleri(<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">HTML'ye Giriş</a> bölümünü inceleyin), CSS temelleri (<a href="/tr/docs/Öğren/CSS/Introduction_to_CSS">CSS'e Giriş</a>), <a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">CSS temel metin ve yazı tipi biçimi</a>.</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Bağlantı durumlarının nasıl biçimlendirileceğini ve bağlantıların gezinme menüleri gibi yaygın kullanıcı arabirimi özelliklerinde nasıl etkili bir şekilde kullanılacağını öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Bağlantılara_bir_göz_atalım">Bağlantılara bir göz atalım</h2> + +<p>HTML'mizde <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">bağlantı oluşturma</a> konusundaki en iyi uygulamaları ve yaklaşımları inceledik. Bu derste, bu bilgileri temel alarak bağlantıların stilini belirlemek için en iyi uygulamaları ve yaklaşımları göstereceğiz.</p> + +<h3 id="Bağlantı_durumları">Bağlantı durumları</h3> + +<p>Anlaşılması gereken ilk konu, bağlantı durumları kavramıdır — bağlantıların farklı durumlarının, farklı <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">sözde sınıflar</a> ile kontrol edilebilmesidir:</p> + +<ul> + <li><strong>Bağlantı</strong>: {{cssxref(":link")}} sözde sınıfı ile hedeflenilebilen ve bir hedefi olan bir bağlantıdır (sadece adlandırılmış boş bir bağlantı olmayan).</li> + <li><strong>Ziyaret edilmiş</strong>: {{cssxref(":visited")}} sözde sınıfı kullanılarak hedeflenilebilen, tarayıcıda daha önceden ziyaret edilmiş bağlantılardır.</li> + <li><strong>Üzerinde</strong>: {{cssxref(":hover")}} sözde sınıfıyla hedeflenebilen, farenin imlecinin üzerinde durduğu bağlantıdır.</li> + <li><strong>Odak</strong>: {{cssxref(":focus")}} sözde sınıfıyla hedeflenebilen, odaklanılmış bağlantılardır (örn, klavye kullanıcısı tarafından <kbd>Tab</kbd> tuşu veya benzeri tuşlarla odaklanılmış bağlantıdır.</li> + <li><strong>Aktif</strong>: {{cssxref(":active")}} sözde sınıfıyla hedeflenebilen, etkinleştirilmiş (örn üzerine tıklanılmış) bir bağlantıdır.</li> +</ul> + +<h3 id="Varsayılan_stiller">Varsayılan stiller</h3> + +<p>Aşağıdaki örnek, bir bağlantının varsayılan olarak nasıl davranacağını göstermektedir(CSS, daha fazla öne çıkması için metni büyükmekte ve ortalamaktadır.)</p> + +<pre class="brush: html notranslate"><p><a href="#">Basit bir bağlantı</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Varsayılan_stiller', '100%', 120) }}</p> + +<div class="note"> +<p><strong>Not</strong>: Bu sayfadaki örneklerdeki tüm bağlantılar sahte bağlantılardır. Gerçek URL'nin yerine # işareti kullanılmıştır. Bunun nedeni, gerçek bağlantılar dahil edilmiş olsaydı, bunlara tıklamanız örnekleri bozacaktı.</p> +</div> + +<p>Varsayılan stilleri keşfederken birkaç şeyi fark edeceksiniz:</p> + +<ul> + <li>Bağlantıların altı çizilmiştir.</li> + <li>Ziyaret edilmeyen bağlantılar mavidir.</li> + <li>Ziyaret edilen bağlantılar mordur.</li> + <li>Bir bağlantının üzerine gelindiğinde fare imlecinin simgesi küçük bir el simgesine dönüşür.</li> + <li>Odaklanmış bağlantıların etrafında bir ana hat vardır.</li> + <li>Aktif bağlantılar kırmızıdır(Tıklama esnasında farenin düşmesini basılı tutmayı deneyin).</li> +</ul> + +<p>İlginçtir ki, bu varsayılan stiller, 1990'ların ortalarında tarayıcıların ilk günlerindeki ile neredeyse aynıdır. Bunun nedeni, kullanıcıların bu davranışı bilmesi ve beklemesidir — bağlantılar farklı şekilde tasarlanırsa birçok insanın kafası karışabilir. Tabiki bu, bağlantılara hiçbir şekilde stil vermemeniz gerektiği anlamına gelmez, sadece beklenen davranıştan çok uzaklaşmamalısınız. En azından şunları yapmalısınız:</p> + +<ul> + <li>Bağlantılar için alt çizgi kullanın, ancak başka şeyler için kullanmayın. Bağlantıların altını çizmek istemiyorsanız, en azından onları başka bir şekilde vurgulayın. Ne oldukları belli olsun kimse onların ne işe yaradığını bulmak için zaman harcamasın.</li> + <li>Üzerine gelindiklerinde/odaklanıldıklarında bir şekilde etkinleştirildiklerinde biraz farklı bir şekile girmelerini sağlayın. Sayfanıza hem hareket katmış olursunuz.</li> +</ul> + +<p>Varsayılan stiller, aşağıdaki CSS özellikleri kullanılarak kapatılabilir/değiştirilebilir:</p> + +<ul> + <li>{{cssxref("color")}} metin rengi için.</li> + <li>{{cssxref("cursor")}} fare işaretçisi stili — çok iyi bir nedeniniz yoksa bunu kapatmamalısınız.</li> + <li>{{cssxref("outline")}} Ana hat, kullanışlı bir erişilebilirlik yardımcısıdır, bu yüzden kapatmadan önce dikkatlice düşünün.</li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: Bağlantılarınızı biçmlendirmek için sadece yukarıdaki özelliklerle sınırlı değilsiniz — istediğiniz herhangi bir özelliği kullanmakta özgürsünüz. Sadece çok abartmamaya çalışın!</p> +</div> + +<h3 id="Bağlantıların_stilini_belirleme">Bağlantıların stilini belirleme</h3> + +<p>Şimdi varsayılan durumlara biraz ayrıntılı olarak baktık, tipik bir bağlantı stilleri kümesine bakalım.</p> + +<p>Başlangıç olarak boş kural kümelerimizi yazacağız:</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>Bu sıra önemlidir, çünkü bağlantı stilleri birbiri üzerine inşa edilir, örneğin ilk kuraldaki stiller sonraki tüm stillere uygulanır ve bir bağlantı etkinleştirildiğinde, genellikle üzerine de gelir. bunları yanlış sıraya koyarsanız ve her kural setinde aynı özellikleri değiştirirseniz, işler beklendiğiniz gibi çalışmayacaktır. "<strong>L</strong>a<strong>V</strong> <strong>F</strong>ena <strong>HA</strong>lde sıcak" kelimesini anımsatıcı olarak kullanabilirsiniz.</p> + +<p>Şimdi bunu doğru bir şekilde şekillendirmek için biraz daha bilgi ekleyelim:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>Ayrıca, yazdığımız CSS'i uygulamak için örnek HTML kodunu aşağıda sağlayacağım:</p> + +<pre class="brush: html notranslate"><p><a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, ve +<a href="#">Microsoft Edge</a> gibi çeşitli tarayıcılar mevcuttur.</p></pre> + +<p>İkisini bir araya getirmek bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıların_stilini_belirleme', '100%', 150) }}</p> + +<p>Peki burada ne yaptık? Bu kesinlikle varsayılan stilden farklı görünüyor, ancak yine de kullanıcıların neler olup bittiğini bilmesi için yeterince tanıdık bir deneyim sağlıyor:</p> + +<ul> + <li>İlk iki kural burada tartışmak için önemli değil.</li> + <li>Üçüncü kural <code>a</code>, metnin altındaki varsayılan çizgiden ve odak çerçevesinden kurtulmak için seçiciyi kullanır(Her halükarda tarayıcılara göre değişir) ve her bağlantıya küçük bir miktar dolgu ekler — bunların tümü daha sonra netleşecektir.</li> + <li>Daha sonra, ziyaret edilmeyen ve ziyaret edilen bağlantılarda birkaç renk varyasyonu ayarlamak için <code>a:link</code> ve <code>a:visited</code> sözde sınıf seçicilerini kullanarak her ikisi durum için de farklı ayarlamalar yapabiliriz.</li> + <li>Sonraki iki kural ile <code>a:focus</code> ve <code>a:hover</code> sözde sınıfları ile odaklanma ve üzerinde bulunma durumları için farklı alt çizgi ve arka plan renkleri ayarlıyoruz. Burada dikkat edilmesi gereken iki nokta vardır: + <ul> + <li>Alt çizgi {{cssxref("border-bottom")}} kullanılarak oluşturuldu, {{cssxref("text-decoration")}} ile değil — bazı insanlar bunu tercih ediyor çünkü birincisi ikincisinden daha iyi stil seçeneklerine sahip ve biraz daha aşağıdan çiziliyor ve bu yüzden altı çizilen kelimenin altlarını kesmiyor.</li> + <li>{{cssxref("border-bottom")}} niteliğine <code>1px solid</code> değeri renk değeri girilmeden tanımlanmıştır. Bu sayede kenarlığın öğenin metniyle aynı rengi almasını sağladık. Bu metnin farklı renkleri alacağı durumlarda oldukça faydalıdır.</li> + </ul> + </li> + <li>Son olarak <code>a:active</code> sözde sınıfı ile etkinleştirilen bağlantılara ters renk şeması vererek bir şeylerin gerçekleşmek üzere olduğunu netleştirmek için kullanışlıdır!</li> +</ul> + +<h3 id="Aktif_öğrenme_Kendi_bağlantılarınızın_stilini_belirleyin">Aktif öğrenme: Kendi bağlantılarınızın stilini belirleyin</h3> + +<p>Bu aktif öğrenme oturumunda bağlantıların gerçekten harika görünmesini sağlamak için boş kuralar setimizi almanızı ve kendi beyanlarınızı eklemenizi istiyoruz. Hayal gücünüzü kullanın, ufkunuzu aşın. Yukarıdaki örneğimiz kadar havalı ve en az işlevsel olan bir şey bulabilceğinizden eminiz.</p> + +<p>Bir hata yaparsanız, her zaman <em>Sıfırla</em> düşmesini kullanarak <em>sıfırlayabilirsiniz.</em> Zorlandığınızda yukarıda gösterdiğimiz örneği eklemek için <em>Çözümü göster</em> düşmesini kullanın.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p><a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a>, ve +<a href="#">Microsoft Edge</a> gibi tarayıcılar mevcuttur.</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Sıfırla" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Çözümü göster" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Bağlantılara_simgeler_eklemek">Bağlantılara simgeler eklemek</h2> + +<p>Yaygın bir uygulama, bağlantının ne tür içeriğe işaret ettiğine dair daha fazla gösterge sağlamak için bağlantılara simgeler eklemektir. Buna örnek; bizim kullandığımız, bir kutunun içerisinden çıkan bir ok gibi görünen bağlantı simgesidir — <a href="https://icons8.com/web-app/741/external-link">Örnek olabilecek simgeler için icons8.com</a>.</p> + +<p>Bize istediğimiz etkiyi verecek bazı HTML ve CSS'ese bakalım. İlk olarak, stil vermek için bazı basit HTML'ler:</p> + +<pre class="brush: html notranslate"><p>Hava Durumu hakkında daha fazla bilgi için <a href="#">hava durumu sayfamızı</a> ziyaret edin, +ayrıca <a href="http://#">Wikipedia'da hava durumu</a>, veya <a href="http://#">Extreme Science</a>'daki hava durumuna bakın.</p></pre> + +<p>Ardından CSS:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Bağlantılara_simgeler_eklemek', '100%', 150) }}</p> + +<p>Peki burada neler oluyor? Daha önce baktığınız bilgilerin aynısı olduğu için CSS'nin çoğunu atlayacağız. Bununla birlikte, son kural ilginçtir — burada, son makaledeki <a href="/tr/Öğren/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">liste öğelerinde özel madde işaretlerini</a> işlediğimize benzer bir şekilde harici bbağlantılara özel bir arka plan görüntüsü ekliyoruz. ancak bu sefer uzun tanımların yerine {{cssxref("background")}} kısa tanımını kullanıyoruz. Eklemek istediğimiz görüntünün yolunu belirliyoruz, <code>no-repeat</code> ile sadece bir kopyasının olmasını istediğimizi belirtip, konumunu %100 ile metinin sağ tarafında ve üstten 0 piksel olmasını sağlıyoruz.</p> + +<p>{{cssxref("background-size")}} niteliğini bağlantının yanında gösterilmesini istediğimiz simgenin boyutunu belirtmek için kullanırız. Daha büyük bir simgeyi kullanarak duyarlı web tasarımları oluşturabilmek için faydalı olacaktır. Ancak bu yalnızca IE9 ve sonraki sürümlerde çalışır, bu nedenle bu eski tarayıcıları desteklemeniz gerekiyorsa, yalnızca görüntüyü yeniden boyutlandırmanız ve olduğu gibi eklemeniz gerekir. Modern tarayıcıların işlevselliğini düşürmek iyi midir?</p> + +<p>Son olarak, {{cssxref("padding-right")}} niteliği ile arka plan resmnin görünmesi için bağlantıların sağına boşluk bıraktık böylece simgemiz sonrasında gelen metinlerle örtüşmedi.</p> + +<p>Son bir söz, sadece harici(başka sitelere olan) bağlantıları nasıl seçtik? <a href="/tr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML bağlantıları</a> yazarken sadece dış bağlantılar için mutlak URL'eleri kullanmalısınız — kendi siteniz içerisinde göreceli bağlantıları tercih etmeniz faydalı olacaktır. Bu sayede "http" metni yalnızca harici/dış bağlantılarda(ikinci ve üçüncüde olduğu gibi) tanımlanmalıdır ve bu şekilde <a href="/tr/Öğren/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">nitelik şeciciyle</a>(<code>a[href*="http"])</code> {{htmlattrxref("href","a")}} öğemizdeki "http" ile başlayan bağlantıları seçebiliriz.</p> + +<p>İşte bu kadar — yukarıdaki aktif öğrenme bölümünü tekrar gözden geçirmeyi ve bu yeni tekniği denemeyi deneyin!</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: <code>href</code> değerleri garip görünebilir — bu örneklerde hiçbir yere gitmeyen sahte bağlantılar kullandık. Bunun nedeni, gerçek bağlantılar kullanırsak <code><iframe></code> içeriğindeki canlı örnekte farklı bir siteye gideceğiniz ve örneği kaybetmiş olacağınızdandır.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Henüz <a href="/tr/docs/Öğren/CSS/Styling_boxes">arka planlar</a> ve <a href="/tr/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">duyarlı web tasarımına</a> aşina değilseniz endişelenmeyin; bu konular farklı yerlerde açıklanmıştır.</p> +</div> + +<h2 id="Bağlantıları_buton_olarak_biçimlendirmek">Bağlantıları buton olarak biçimlendirmek</h2> + +<p>Bu derste şu ana kadar keşfettiğiniz araçlar başka şekillerde de kullanılabilir. Örneğin, fareyle üzerine gelme gibi durumlar yalnızca bağlantıları değil, birçok farklı öğeyi biçimlendirmek için de kullanılabilir — parafrafların, liste öğelerinin veya diğer şeylerin fareyle üzerine gelme durumunu vurgulamak isteyebilirsiniz.</p> + +<p>Ek olarak, bağlantılar genellikle belirli durumlarda düğmeler gibi görünecek ve davranacak şekilde biçimlendirilmiştir — bir web sitesi gezinme menüsü genellikle bağlantıları içeren bir liste olarak işaretlenir ve bu bir dizi kontrol düşmesi veya sekme gibi görünecek şekilde kolayca biçimlendirilebilir. Nasıl olduğunu keşfedelim.</p> + +<p>İlk olarak, biraz HTML:</p> + +<pre class="brush: html notranslate"><ul> + <li><a href="#">Ana Sayfa</a></li><li><a href="#">Pizza</a></li><li><a href="#">Müzik</a></li><li><a href="#">Wombatlar</a></li><li><a href="#">Türkiye</a></li> +</ul></pre> + +<p>ve birazda CSS:</p> + +<pre class="brush: css notranslate">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>Bu bize şu sonucu verir:</p> + +<p>{{ EmbedLiveSample('Bağlantıları_buton_olarak_biçimlendirmek', '100%', 100) }}</p> + +<p>En ilginç kısımlara odaklanarak burada neler olduğunu açıklayalım:</p> + +<ul> + <li>İkinci kural; {{htmlelement("ul")}} öğemizin varsayılan {{cssxref("padding")}} değerini sıfırlar ve genişliğini ebeveyni olan {{htmlelement("body")}} tamamını kullanmasını söyler.</li> + <li>{{htmlelement("li")}} öğeleri normal davranışlarında blok öğeler olarak davranırlar(göz atmak için <a href="/tr/Öğren/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS kutu tipleri</a>'ne bakın), yani kendi satırlarına sahip olacak şekilde davranırlar. Fakat biz burada {{cssxref("display")}} niteliği ile {{htmlelement("li")}} öğelerimizin satır içi öğeler olacak şekilde tanımlıyoruz ve bu şekilde {{htmlelement("li")}} öğelerimiz aynı satır içerisinde yan yana durabiliyorlar.</li> + <li>Dördüncü kuralımız, {htmlelement("a")}} öğemizi biçimlendiren en karmaşık kuralımızdır. Hadi adım adım inceleyelim + <ul> + <li>Önceki örneğimizdeki gibi varsayılan {{cssxref("text-decoration")}} ve {{cssxref("outline")}} niteliklerimizi kapatıyoruz ki görünüşü bozmasınlar</li> + <li>Daha sonra {{cssxref("display")}} niteliğimize <code>inline-block</code> değerini atayarak {{htmlelement("a")}} öğemizin satır içi öğe gibi davranıp diğer kardeşleriyle aynı satırda bulunmalarını ve aynı zamanda bir blok öğe gibi davranıp boyutlandırılabilmesini sağlıyoruz.</li> + <li>Şimdi boyutlandıralım! {{htmlelement("ul")}} öğemizin tüm içeriğini doldurmak istiyoruz. Bu yüzden her düğme arasında küçük bir kanar boşluğu bırakıyoruz(ancak sağ kenarda bir boşluk bırakmayacağız) ve hepsinin aynı boyutta olmasını istediğimiz 5 adet butonumuz olduğu için her birinin genişliğini %19,5 ve sağdan kenar boşluğu olarakda %0,625 olarak tanımlıyoruz. Tüm bu genişliklerin toplamının %100,625 olduğunu farkadeceksiniz ve buda son düğmenin taşmasına neden olacaktır fakat bir sonraki kuralda son <code><a></code> öğemizin sağdaki boşluğunu sıfırladığımız için butonlarımız <code><ul></code> öğemizin içerisine tam olarak oturacaktır.</li> + <li>Son üç beyan oldukça basittir ve sadece görsel amaçlıdır. Metinleri bağlantı butonları içerisinde yatay olarak ortaladık ve {{cssxref("line-height")}} niteliğine 3 değerini tanımlayarak metinlerimizi buton içerisinde dikey olarakta hizaladık ve metin rengini siyah olarak tanımladık.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Not</strong>: HTML'deki liste öğelerinin hepsinin birbiriyle aynı satıra yerleştirildiğini fark etmiş olabilirsiniz — bu yapılır çünkü satır içi blok öğeleri arasındaki boşluklar / satır kesmeleri, sözcükler arasındaki boşluklar gibi sayfada boşluklar oluşturur ve bu tür boşluklar yatay gezinme menüsü düzenimizi bozacaktır. Bu yüzden boşlukları kaldırdık. Bu sorun(ve çözümleri) hakkında daha fazla bilgiyi <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">satır içi blok öğeleri arasındaki boşluklarla savaşma </a>bölümünde bulabilirsiniz.</p> +</div> + +<h2 id="Becerilerinizi_tes_edin!">Becerilerinizi tes edin!</h2> + +<p>Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri testleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Dersin sonunda bu bilgileri sakladığınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. <a href="/tr/docs/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfası tasarımı</a>.</p> + +<p>Bu değerlendirme, bu dersin tartışılan tüm bilgilerini test eder, bu nedenle bir sonraki makaleye geçmeden önce okumak isteyebilirsiniz.</p> + +<h2 id="Özet">Özet</h2> + +<p>Umarız bu derste, bağlantılar hakkında bilmeniz gereken her şeyi size sağlamıştır — şimdilik! til metni dersimizdeki son makale, web sitelerinizde özel yazı tiplerini veya daha iyi bilindiği şekilde web yazı tiplerini nasıl kullanacağınızı ayrınılarıyla anlatıyor.{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="Bu_ünitede">Bu ünitede</h2> + +<ul> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Fundamentals">Temel metin ve yazı tipi şekilleri</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_lists">Listeleri şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Styling_links">Bağlantıları şekillendirme</a></li> + <li><a href="/tr/docs/Öğren/CSS/Styling_text/Web_fonts">Web yazı tipleri</a></li> + <li><a href="/tr/Öğren/CSS/Styling_text/Typesetting_a_homepage">Bir topluluk okulunun ana sayfasını düzenleme</a></li> +</ul> |