STİL ŞABLONU ÇEŞİTLERİ
2. Genel Stil Şablonları:
Head kısmında, style etiketleri arasında oluşturulur.
Bu şekilde oluşturulan stil şablonları, tüm sayfada geçerli olur.
Genel stil şablonları ile var olan bir etikete yeni özellikler katılmış olmaktadır.
Aşağıdaki örnekte i ve body etiketleri css ile biçimlendirilmiştir. i etiketi bu sayfada kullanıldığı her yerde kalın, kırmızı, 24pt, Century Gothic özelliklerinde olacaktır.
<style type=”text/css”>
i {
font-weight:bold;
color:red;
font-size:24pt;
font-family:Century Gothic;
font-style:normal;
}
body {
background-color:#fde333;
background-image:url(resimler/bg/zzz.jpg);
background-repeat:repeat-x;
background-position:left 20px;
}
</style>
Birden fazla etikete aynı özellikler verilecek ise aşağıdaki gibi kullanılabilir:
Örnekte h1, h2 ve h3 etiketleri aynı şekilde biçimlendiriliyor.
<style type=”text/css”>
h1, h2, h3 {
font-weight:bold;
color:red;
font-size:24pt;
font-family:Century Gothic;
font-style:normal;
}
</style>
Aynı etikete birden fazla yerde biçimlendirme uygulanabilir:
<style type=”text/css”>
h1, h2, h3 {
color:blue;
font-family:Century Gothic;
}
h1 {
font-size:16pt;
}
h2 {
font-size:14pt;
}
h3 {
font-size:12pt;
}
</style>
Yukarıdaki örnekte ilk önce h1, h2 ve h3 etiketlerinin renk ve yazı tipleri belirlenmiş, ardından bu etiketlerin boyutları ayrı ayrı belirtilmiştir.
genel stil şablonları nasıl kullanılır, genel css örnekleri, css dersleri, etiketlere css uygulama, aynı etikete birden fazla stil uygulama, aynı stilleri birden fazla etikete uygulama
KONU İLE İLGİLİ ÖRNEKLER
|
Bir etikete hem genel, hem de yerel stil uygulama
|
Kendin Dene
|
Kendin Dene butonuna tıklayarak örneğe ait kodları görebilir, inceleyebilir ve değiştirebilirsin.
h1, h2, h3{
color:blue;
font-family:Century Gothic;}
h1{font-size:16pt;}
h2{font-size:14pt;}
h3{font-size:12pt;}
i{
font-weight:bold;
color:red;
font-family:Century Gothic;
font-style:normal;
}
14175 kez okundu.