Merhaba.

CSS3 Eğitimlerimize 3. gününde devam ediyoruz.

Dün kodladığımız kısma bir bakalım sonrada günün konularına devam edelim.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>
    
    h1,h2,h3,h4{
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 30px;
        border: 1px solid red;
        background-color: black;
    }

    p.sagda{

        text-align: right;
        color: red;

    }

    p.ortala{

        text-align: center;
        color: blue;
    }

    p.solda{

        text-align: left;
        color: brown;

    }

    
    </style>

</head>
<body>

    <h1>
        Project Zeta
    </h1>

   <p class="sagda">

    Project Zeta ile 16 Derslik HTML Eğitimlerini Tamamladık.

   </p>

   <p class="ortala">

    Şimdi Sıra 2 hafta sürecek CSS3 Eğitimlerinde.

   </p>

   <p class="solda">

    CSS3 Öğrendikten sonra site tasarımı yapmak daha anlamlı ve zevkli hale gelecek.

   </p>

</body>
</html>

Sınıf Seçiciler

Bir önceki yazımızda bir kısmını anlatmıştık şimdi konumuza devam edeceğiz. 

Bir etikete ait farklı tasarımlar istiyorsak etiket ismiyle beraber sınıf seçicisini kullanarak bunu yapabileceğimizi söylemiştik.

Peki sadece bir etikete ait olmayacak ama aynı özelliklere sahip alanlar yaratmak isteseydik ne yapacaktık. Bunun için yapmamız gereken sadece sınıf seçiciyi kullanmak olacak. Başına herhangi bir etiket belirteci koymadan. Sadece sınıf ismini .sınıfismi şeklinde yazarak bunu halledebiliriz.

Gelin yapalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>
    
    h1,h2,h3,h4{
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 30px;
        border: 1px solid red;
        background-color: black;
    }

    p.sagda{

        text-align: right;
        color: red;

    }

    p.ortala{

        text-align: center;
        color: blue;
    }

    p.solda{

        text-align: left;
        color: brown;

    }

    .ortala2{

        text-align: center;
        color: blueviolet;
        border: 1px solid black;
    }

    
    </style>

</head>
<body>

    <h1>
        Project Zeta
    </h1>

   <p class="sagda">

    Project Zeta ile 16 Derslik HTML Eğitimlerini Tamamladık.

   </p>

   <p class="ortala">

    Şimdi Sıra 2 hafta sürecek CSS3 Eğitimlerinde.

   </p>

   <p class="solda">

    CSS3 Öğrendikten sonra site tasarımı yapmak daha anlamlı ve zevkli hale gelecek.

   </p>

   

   <h3 class="ortala2">Üretme Bilinci Oluşturalım</h3>

   <p class="ortala2">

    Üretmek Yapabileceğimiz En Üst Seviye İştir.

   </p>

   <p class="ortala2">

    Gelişmiş Bir Ülke Olmakla Olmamak Arasındaki Fark Üretmekle Tüketmek Arasındaki Farkı Kavrayabilmekte.


   </p>

</body>
</html>
   <h3 class="ortala2">Üretme Bilinci Oluşturalım</h3>

   <p class="ortala2">

    Üretmek Yapabileceğimiz En Üst Seviye İştir.

   </p>

   <p class="ortala2">

    Gelişmiş Bir Ülke Olmakla Olmamak Arasındaki Fark Üretmekle Tüketmek Arasındaki Farkı Kavrayabilmekte.


   </p>
   .ortala2{

        text-align: center;
        color: blueviolet;
        border: 1px solid black;
    }

Çoklu Sınıflar

Bazen birden fazla sınıfı tek bir HTML elementine uygulamak isteyebiliriz. Bunun içinde şöyle bir şey yaparız.

.onemli {
	font-weight: bold;
}
.uyari {
	font-style: italic;
}
.onemli.uyari {
	background: silver;
}

İki farklı sınıf ismini nokta ile birleştirip onlara ait özellikleri tek bir element üzerinde uygulayabiliriz.

Yapalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>
    
    h1,h2,h3,h4{
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 30px;
        border: 1px solid red;
        background-color: black;
    }

    p.sagda{

        text-align: right;
        color: red;

    }

    p.ortala{

        text-align: center;
        color: blue;
    }

    p.solda{

        text-align: left;
        color: brown;

    }

    .ortala2{

        text-align: center;
        color: blueviolet;
        border: 1px solid black;
    }

.onemli{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.uyarı{

    font-size: 30px;
}
    .onemli.uyarı{

        color:darkgreen;
    }

    </style>

</head>
<body>

    <p class="onemli uyarı">Size Sizin İçin Zulmedecek Birilerini Bulun</p>

   <!-- <h1>
        Project Zeta
    </h1>

   <p class="sagda">

    Project Zeta ile 16 Derslik HTML Eğitimlerini Tamamladık.

   </p>

   <p class="ortala">

    Şimdi Sıra 2 hafta sürecek CSS3 Eğitimlerinde.

   </p>

   <p class="solda">

    CSS3 Öğrendikten sonra site tasarımı yapmak daha anlamlı ve zevkli hale gelecek.

   </p>

   <h3 class="ortala2">Üretme Bilinci Oluşturalım</h3>

   <p class="ortala2">

    Üretmek Yapabileceğimiz En Üst Seviye İştir.

   </p>

   <p class="ortala2">

    Gelişmiş Bir Ülke Olmakla Olmamak Arasındaki Fark Üretmekle Tüketmek Arasındaki Farkı Kavrayabilmekte.


   </p> -->

</body>
</html>
 <p class="onemli uyarı">Size Sizin İçin Zulmedecek Birilerini Bulun</p>
.onemli{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.uyarı{

    font-size: 30px;
}
    .onemli.uyarı{

        color:darkgreen;
    }

Dikkat etmeniz gereken şey sınıf ismini yazarken onemli uyarı diye yazarken bu sınıf belirtecini css kısmında .onemli.uyarı şeklinde yazdığımızdır.

ID Seçicileri

ID seçicileri sınıf seçicilerden biraz farklıdır. Çünkü her elemente ait ıd tekildir. Sadece o elemente özel bir isimlendirme yapılır. Id verilmesinin nedeni zaten o etiketi özelliştirmektir. ID seçici ile yazılmış bir css sadece tek elemente etki edecektir.

CSS kısmında

#isim{ 

Değerler;

}

şeklinde tanımlanırlar.

Bir örnek yapalım.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Project Zeta</title>

    <style>
    
    h1,h2,h3,h4{
        color: white;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 30px;
        border: 1px solid red;
        background-color: yellow;
    }

    p.sagda{

        text-align: right;
        color: red;

    }

    p.ortala{

        text-align: center;
        color: blue;
    }

    p.solda{

        text-align: left;
        color: brown;

    }

    .ortala2{

        text-align: center;
        color: blueviolet;
        border: 1px solid black;
    }

.onemli{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.uyarı{

    font-size: 30px;
}
    .onemli.uyarı{

        color:darkgreen;
    }

    #MaviRenk{

        color: blue;
    }

    </style>

</head>
<body>

    <p class="onemli uyarı">Size Sizin İçin Zulmedecek Birilerini Bulun</p>

    <h1 id="MaviRenk">Industryolog Akademi Project Team</h1>

   <!-- <h1>
        Project Zeta
    </h1>

   <p class="sagda">

    Project Zeta ile 16 Derslik HTML Eğitimlerini Tamamladık.

   </p>

   <p class="ortala">

    Şimdi Sıra 2 hafta sürecek CSS3 Eğitimlerinde.

   </p>

   <p class="solda">

    CSS3 Öğrendikten sonra site tasarımı yapmak daha anlamlı ve zevkli hale gelecek.

   </p>

   <h3 class="ortala2">Üretme Bilinci Oluşturalım</h3>

   <p class="ortala2">

    Üretmek Yapabileceğimiz En Üst Seviye İştir.

   </p>

   <p class="ortala2">

    Gelişmiş Bir Ülke Olmakla Olmamak Arasındaki Fark Üretmekle Tüketmek Arasındaki Farkı Kavrayabilmekte.


   </p> -->

</body>
</html>
  <h1 id="MaviRenk">Industryolog Akademi Project Team</h1>
    #MaviRenk{

        color: blue;
    }

#MaviRenk belirteciden mavi rengi aldı. Ancak Border ve arka plan rengini nereden aldı diye düşünebiliriz. Daha önce tanımladığımız h1 etiketinin özelliklerinden aldığını görebiliriz.

Küçük bir dipnotla yazımı bitireyim. CSS tanımlayıcıları büyük küçük harf duyarlıdır buna dikkat etmek gerekir.

Bir sonraki yazımda görüşmek üzere .


muratbilginer