CSS Class Yapısı ve Kullanımı
CSS class yapısı çokça kullanılan bir özelliktir. Bu yapı sayesinde istenilen HTML etiketi ve/veya etiketlerine istenilen stil özellikleri kazandırılabilir.
Aynı Html Etiketinde Class Kullanımı
Aynı HTML elemanına farklı özellikler atamak için sınıf seçicisini kullanırız.
Bir örnek verecek olursak; hazırlayacağımız dokümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
p.sagadaya {
text-align: right;
}
p.ortala {
text-align: center;
}
</style>
</head>
<body>
<p class="sagadaya">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nunc posuere odio at mi. Sed vel massa vitae massa eleifend pulvinar.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Quisque gravida odio ut nulla. Mauris tincidunt adipiscing
3. Seçiciler 26
tellus. Nullam porta, nunc in suscipit ultrices, erat odio vehicula ligula, ut
pellentesque velit sapien in dolor. Vestibulum convallis sapien eget dolor.
Duis eget massa et nisi blandit sagittis. Curabitur pretium erat volutpat
lacus. Phasellus consequat. Nulla bibendum laoreet libero. </p>
<p class="ortala">Curabitur luctus pellentesque lacus. Proin nisl lorem,
vestibulum a, varius auctor, condimentum non, arcu. Sed at purus. Nullam
volutpat libero ac enim. Vestibulum luctus neque ut eros. Proin vulputate.
Mauris id lectus. Nunc ut diam ut tellus lacinia pulvinar. Maecenas
commodo nisi vitae arcu. Vivamus ac metus sodales lorem sollicitudin
fringilla. Phasellus sodales. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. </p>
</body>
</html>
Yukarıda yazılan örnek kodlamanın ekran görüntüsü aşağıda görüldüğü gibi olacaktır.
Farklı Html Etiketlerine Class Kullanımı
Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elemanına değil istediğiniz sayıda HTML elemanında bunu kullanmak istersek;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
.ortala {
text-align: center;
}
</style>
</head>
<body>
<h1 class="ortala"> Burada bir seyler yazar </h1>
<p class="ortala">Burada da baska bir seyler yazar</p> </body>
</html>
Yukarıda yazılan örnek kodlamanın ekran görüntüsü aşağıda görüldüğü gibi olacaktır.
Bu tanımlamayı yaptıktan sonra istedigimiz her HTML elemanına bu sınıfı uygulayabiliriz.
Çoklu sınıflar, birden fazla sınıfı bir HTML elemanına uygulamak için kullanılır.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
.onemli {
font-weight : bold;
}
.uyari {
font-style: italic;
}
.onemli .uyari{
background-color: silver;
}
</style>
</head>
<body>
<p class="onemli">Dikkat:</p>
<p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının
yaklasık % 90'ı insanların hataları sonucu meydana gelmektedir.</p>
</body>
</html>
Yukarıdaki
Yukarıda yazılan örnek kodlamanın ekran görüntüsü aşağıda görüldüğü gibi olacaktır.
Yukarıdaki örnekte görüldüğü gibi bir uyari sınıfımız birde onemli sınıfımız mevcut. Bazı metinlerin önemli bazılarının ise uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. önemli metinler için kalın, uyarı için yazının şeklini eğik olarak belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS seçicisinde “.onemli .uyari” seklinde yazıyoruz.
CSS class yapısı nedir ve nasıl kullanılır gördük. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
