Merhaba. Bu yazımda. Css seçiciler konusunu ayrıntılı olarak ele alacağım.
Css de anlattığımız kadarıyla, kullandığımız <style> elementi ile her element için ayrı ayrı stiller tanımlıyorduk. Mesela <p> etiketi için bir stil belirliyorduk ve her <p> etiketi için bu stiller kullanılıyordu. Fakat bazı <p> elementleri için farklı stilleri kullanmak istiyorsak ne yapacağız?
Bunun için seçiciler kullanılmaktadır.2 tür seçici vardır;
1) Id Selector
2) Class Selector
Id selector kullanımında her id,bir sayfada sadece bir kez kullanıldığı için biz daha pratik olması amacıyla Class Selector kavramını anlatacağız.Böylece class’larımızı bir sayfada istediğimiz kadar kullanabileceğiz
Class selector kullanımı şu şekildedir.<head> etiketinin olduğu kısımda classlarımızı tanımlarız,her birine birer isim veririz ve içine, vereceğimiz stillerimizi yazarız
–>Class seçicisi,başına nokta (.) koyularak tanımlanır.Class seçicisine bir örnek vererek , örnek üzerinden açıklayalım;
<html>
<head>
<style type="text/css">
.deneme1
{
text-align:left;
color:green;
background-color:aqua;
}
.deneme2
{
text-align:left;
color:blue;
background-color:orange;
}
</style>
</head>
<body>
<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
<h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html> Burada .deneme1 ve .deneme adlı 2 adet class tanımladık.Bunların başına nokta koyulduğunu unutmayalım…!
Bu sınıflarımız içine { } parantezleri arasına istediğimiz stilleri yazdık.Bu classlarımızı <head> etiketinde <style> etiketi arasına yazdığımızı ve <style> etiketini kapatmayı unutmayalım…!
–> Bu hazırladığımız classları hangi element üzerinde kullanmak istiyorsak o elementin <class> özelliğine yazıyoruz.Bu verdiğimiz örnekte biz h4 ve h2 elementleri üzerinde classlarımızı kullandık
<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
Bu satırda class=” ” ile hangi classımızı kullanacaksak parantezler içine onu yazıyoruz.Biz bunun için deneme1 classını kullandık.Şimdi yukardaki kodumuzun tarayıcıda çıktısını görelim;
Selector konusunda daha geniş bir örnek yapalım.Farklı classlar kullanalım ve bunları farklı etiketler için uygulayalım;
<html>
<head>
<style type="text/css">
.deneme1
{
text-align:left;
color:green;
border-style:inset;
border-width:10px;
border-color:grey;
background-color:aqua;
}
.deneme2
{
text-align:left;
color:blue;
background-color:orange;
font-size:20px;
text-decoration:underline;
border-style:solid;
border-width:5px;
border-color:green;
height:40px;
}
</style>
</head>
<body>
<h2 class="deneme1">Deneme1 class'ı için bir örnek </h2>
<h4 class="deneme2">Deneme2 class'ı için bir örnek</h4>
</body>
</html> Burada 2 tane class (sınıf) tanımladık.Rastgele stiller uyguladık.Örneğin arkaplan rengi,çerçeve stili,çerçeve kalınlığı,font büyüklüğü gibi özellikler verdik.Artık bu özelliklerimizi istediğimiz yerde istediğimiz etikete uygulayabiliriz. Uygulamak istediğimiz etikette class = ” “ yapısıyla bu parantez içine ,kullanacağımız sınıfı ekleyerek uygulayabiliriz.
Merhaba. Firebase Events'e istatistik attığınızda not set şeklinde bir değer görüyorsanız olası çözümünü göstereceğim. (daha&helliip;) Daha Fazla Oku
Merhaba. Android cihazlar için hazırladığım Namaz Vakitleri uygulaması ile 200'e yakın ülkede tüm namaz-ezan vakitlerini… Daha Fazla Oku
Selamlar. İnsanlar için faydalı olması amacıyla geliştirdiğim Kaza Namazı ve Oruç Takip Uygulamasını sizlere tanıtmak… Daha Fazla Oku
Volley, Android uygulamalarımızda kullandığımız AsyncTask'ın alternatifi olarak ortaya çıkarılan, Google I/O 2013 sunumunda duyurulan bir… Daha Fazla Oku
Merhaba. Bu yazımda Android platformunda kullanıma sunulan, bazı kod bloklarını basitleştiren ve okunabilirliği arttıran ButterKnife… Daha Fazla Oku
Merhaba. Bu yazımda artık baş belası olmuş TikTok reklamlarını, Android uygulamalarımızdaki Admob reklamlarından nasıl kaldıracağımızı… Daha Fazla Oku