Merhaba.

CSS Eğitimlerimize Attribute Selectors yani özellik seçici özelliği ile devam ediyoruz.

Bir HTML elementinin özelliklerini işaret edecek o elemente özel tasarımlar, stiller oluşturabiliriz.

1.Basit Özellik Seçici

Belirli bir etiketin mesela a etiketinin href özelliğine göre yada target özelliğine göre stil oluşturabiliriz.

Bunu şu şekilde yaparız.

Hemen bir örnek ile olayı kavramaya çalışalı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>

a[href]{

    color: rgb(147, 20, 220);
    border: 1px solid red;
    font-size: 20px;
    text-decoration: none;
}

    </style>

</head>
<body>
       

            <a href="https://www.industryolog.com">Industryolog Akademi</a>
     
</body>
</html>

Örneklerimizi artırabiliriz. Bu durumun bize temel özelliklerin dışında kullanım sağlayarak istediğimiz elementlere özellik vermek için çok kullanışlıdır. Örneğin a etiketinin sadece target özelliği olanlara bir özellik atasaydık. Sayfada pek çok a elementi varken sadece target özelliğine sahip olanlara bu özelliği uygulardı.

2. Özellik Değeri Seçici

Şimdi işi biraz daha özelleştirme vakti. Bir özelliğe atadığımız değere göre stiller oluşturabiliriz.

<!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>

a[href]{

    color: rgb(147, 20, 220);
    border: 1px solid red;
    font-size: 20px;
    text-decoration: none;
}

input[type="text"]{

    border: 2px solid black;
    border-radius: 5px;
}


    </style>

</head>
<body>
       

            <a href="https://www.industryolog.com">Industryolog Akademi</a>

            <p>Adınız: <input type="text" name="isim"></p>
            <p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek">Erkek
            <input type="radio" name="cinsiyet" id="kadın">Kadın</p>
     
</body>
</html>
input[type="text"]{

    border: 2px solid black;
    border-radius: 5px;
}

3. Kısmi Özellik Değeri Seçici

Bir etiketin özellik değerindeki boşluklarla ayrılmış kısımlarına göre tanımlama yapmamızı sağlar.

<!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>

a[href]{

    color: rgb(147, 20, 220);
    border: 1px solid red;
    font-size: 20px;
    text-decoration: none;
}

input[type="text"]{

    border: 2px solid black;
    border-radius: 5px;
}

a[title~="Industryolog"] {
text-decoration:overline;
}

    </style>

</head>
<body>
       

            <a href="https://www.industryolog.com">Industryolog Akademi</a>

            <a href="https://www.industryolog.com" title="Industryolog Akademi">Industryolog Akademi</a>

            <p>Adınız: <input type="text" name="isim"></p>
            <p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek">Erkek
            <input type="radio" name="cinsiyet" id="kadın">Kadın</p>
     
</body>
</html>
a[title~="Industryolog"] {
text-decoration:overline;
}
 <a href="https://www.industryolog.com" title="Industryolog Akademi">Industryolog Akademi</a>

4. Dikkate Değer Özellik Seçici

Bazı etiketlerin özellikler – ile ayrılan değerlere sahiptir. Buradaki tireden önce ayrılan değere göre stil atamaları yapabiliriz.

<!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>

a[href]{

    color: rgb(147, 20, 220);
    border: 1px solid red;
    font-size: 20px;
    text-decoration: none;
}

input[type="text"]{

    border: 2px solid black;
    border-radius: 5px;
}

a[title~="Industryolog"] {
text-decoration:overline;
}

*[lang|="en"]{
    color:blueviolet;
}

    </style>

</head>
<body>
       
    <h1 lang="en-us">Project Zeta</h1>

            <a href="https://www.industryolog.com">Industryolog Akademi</a> <br><br>


            <a href="https://www.industryolog.com" title="Industryolog Akademi">Industryolog Akademi</a>

            <p>Adınız: <input type="text" name="isim"></p>
            <p>Cinsiyetiniz: <input type="radio" name="cinsiyet" id="erkek">Erkek
            <input type="radio" name="cinsiyet" id="kadın">Kadın</p>
     
</body>
</html>
*[lang|="en"]{
    color:blueviolet;
}
<h1 lang="en-us">Project Zeta</h1>

Bugünlük bu kadardı bir sonraki yazımda görüşmek üzere.

 


muratbilginer