Herkese merhabalar serinin 3. bölümünü sabırsızlıkla beklediğinizi biliyorum çünkü benim içinde heyecanlı bir haftaydı. Bu aralar biraz hastaydım ama serinin heyecanı ile haftaya bomba gibi girdim. Eğer sizde hazırsanız Css ile daha çok detaya bakalım ve neler yapabiliceğimize bir bakalım.

Screen Shot 2023-01-09 at 02.20.43.png

Şimdiye kadar yaptıklarımıza bakıcak olursak görsel açıdan çok fazla bir şey anlam ifade etmiyor. Bu yüzden Css ile tanışmamız gerekiyor. Çünkü Css bize web sayfasındaki öğeleri biçimlendirmemize yardımcı olur. Html, bir sayfadaki içeriği yapılandırmak içindir ve css, bu içeriğin daha şık görünmesini sağlamak içindir bunu unutmamalıyız. Bu tür yapılandırmaları yapmak için dizayn sayfalarını kullanıyoruz (style sheet).

Style sheet aslında farklı css kurallarının ve Html dosyalarımızı stilize etmek için kullanılan kural setlerinin tam listesidir.

div{
color:red;
margin:20px;
}

p{
font-weight:bold;
}

Yukarıda örnekte olduğu gibi bu tek bir kural kümesidir. Bu tipte kurallardan 10 , 20 , 30 belkide 40 tanesine sahip olabilirsiniz ve bunlarda bütün bir stil sayfasını oluşturucaktır. Kurallardan bahsetmişken her şeyden önce sizlere Css sözdiziminin genel termolojisinden bahsetmek istiyorum. Ne dediğimi anlamanız için görsel üzerinden gidelim.

Screen Shot 2023-01-04 at 15.49.31.png

Her şeyden önce burada seçiciler olan (selectors) şeye sahibiz. selectors bir web üzerinde hedeflemek istediğimiz şeylerdir. Örneğin div etiketlerine bir stil verecek olsaydım bu selectors kullanırdım eğer li etiketlerini değiştirmek isteseydim selectors kullanırdım. İlerde tüm bu selectorslara detaylı bir şekilde bakacağız. Div ve Li burada selectorlerdir. sonrasında bir tür kod bloğu gibi görünen bu kısımlara (”color:red; margin: 20px;”) sahibiz. ve sağ tarafta olan declarationsa (bildirimler) sahibiz.

Declarationslar sadece anahtar değerler ve özellik değer çiftlerinin bir listesidir. Div içerisinde bir property’e sahibiz. Div içerisindeki herhangi bir şeyin rengini kırmızı yapabilir ve sonunda tüm öğenin 20 px lik bir boşluk veren margin özelliğine sahibiz. Buradaki her declarations sonunda bir “;” var. Yani burada demek istediği burası söz diziminin sonu eğer bunları atlarsak Css çalışmaz. Bu yüzden bunları sonuna eklemek zorundayız.Hepsi burada tek bir kuralı oluşturuyor. Tüm yapı aslında bu termolojiye benziyor.

Div kısmında Css kurallarının bir listesi olan stil şemamız var yani anlatmak istediğim Html ‘i Css e eklemenin birden fazla yolu var

1- Doğrudan bazı stil etiketlerinin içindeki Html sayfasına eklemektedir.

2- Yalnızca Css kuralları için ayrı bir dosya olan harici stil sayfalarını kullanmak.

Her iki yoluda kullanırken göreceğiz. Fakat daha çok 2. seçeneği kullanacağız. 🙂

Şimdi kodumuza dönücek olursak 0 dan bir html sayfası oluşturalım. Burada olan çoğu şeyi önceki bölümlerde hep beraber gördük. Şimdi yapacağımız şey ise css ile biraz daha güzelleştirmek. Bir sayfaya Css eklemenin birkaç yolundan bahsetmiştim gelin beraber bu yolları deneyelim. Öncelikle yapmamız gereken head kısmına stil etiketi eklemek.

<!DOCTYPE html>
<html lang="en">
<head>
		**<style>
        h1 {
            color: orange;
        }
        p {
            color: slategray;
        }
    </style>**
    <title>Css Learning</title>
</head>
<body>
<h1>Css Learning</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.</p>

<div>
    <h1>Hakan budak</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus ornare suspendisse sed nisi lacus sed viverra. Ultrices neque ornare aenean euismod elementum nisi quis. Neque viverra justo nec ultrices dui sapien. Scelerisque in dictum non consectetur a. Donec massa sapien faucibus et. Tortor pretium viverra suspendisse potenti nullam. Mauris augue neque gravida in fermentum. Parturient montes nascetur ridiculus mus.
        Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim.
        Enim ut tellus elementum sagittis vitae.</p>
    <ul>
        <li>Hakan Budak</li>
        <li>Html</li>
        <li>Vue.js</li>
        <li>Css</li>
    </ul>
</div>
</body>
</html>

Gördüğünüz gibi style kısmında h1 ve p olan kısımların renklerini değiştirdik. Burayı kural alanı olarak da düşünebilirsiniz. Diyelim ki bu stilin başka bir sayfamızda da aynı şekilde olmasını istiyoruz. Mantıken bu kodu kopyalayıp diğer sayfamızın head kısmına yapıştırırız ve aynı. görüntüyü elde etmiş oluruz. Fakat 6 yada 7 sayfamız olduğunu varsayalım ve bir kısmı değiştirmek istediğimizde 7 sayfaya gidip değiştirmek ne kadar doğru bir yol olur ?

Bu yüzden style eklemek her zaman doğru değildir. Bunun için harici bir style sayfası oluşturup ardından tüm farklı Css kurallarını style sayfasına koyup bu kuralları kullanan her sayfaya bağlantı vermek çok daha doğru bir seçenek olacaktır. Böylece ilerde bir noktada değişiklik yapmak istiyorsak style dosyasından değiştirmek daha kolay olacaktır. Bu yüzden yukarıda yazdığım kodu silip yeni bir dosya açıyorum

Screen Shot 2023-01-05 at 12.08.42.png

Böylece Css dosyamızı istediğimiz gibi bulabiliriz.