|
|
|
|
| Css'te seçiciler en çok kullanılan öğelerdendir. Örneğin h1 etiketine Css yardımıyla belli bir şablon yüklediniz. Ama sayfanızda kullanacağınız h1 etiketlerinin tümünün aynı şekilde olmasını istemiyorsunuz. Bu durumda bize seçiciler yardımcı olur.
İki çeşit seçici göreceğiz. Bunlar :
* Id Selector (Id seçicisi)
* Class Selector (Sınıf Seçicisi)
Class Selector (Sınıf Seçicisi)
Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanırız. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri özelleştirebilirsiniz. Sınıf seçicisinin iki türü vardır. ?lk önce birinci şeklini görelim. Hemen bir örnekle bu seçiciyi tanıyalım.
<html><head><title>Css</title> <style type="text/css"><!-h1.mavi {color:blue}h1.kirmizi {color:red}--></style> </head><body><h1 class=mavi> Mavi sınıf seçicisi ile </h1><br><h1 class=kirmizi> Kırmızı sınıf seçicisi ile </h1></body></html>
Burada sınıf seçicisini sadece h1 için tanımladık. Sınıf seçicisinin ikinci türü de genel bir sınıf seçicisi tanımlamaktır. Bunu da bir örnekle görelim.
<html><head><title>Css</title> <style type="text/css"><!-.mavi {color:blue}.kirmizi {color:red}--></style> </head><body><h3 class=mavi>Mavi sınıf seçicisi ile </h1><br><h4 class=kirmizi>Kırmızı sınıf seçicisi ile </h1></body></html>
Id Selector (Id Seçicisi)
Id Selector'lerini tanımlayıcı adlarının önündeki # işaretinden tanırız. Html belgesinde kendi tanımlayıcı adlarına gönderme yaparak herhangi bir Html etiketine stil vermekte kullanılırlar. Bu etiketler span'dan tutunda paragraf(p)'a kadar olabilir. Bir örnekle açıklayalım.
<html><head><title>Css</title> <style type="text/css"><!-- Eski tür tarayıcılardan kodumuzu saklayalım -->#mavi{background:blue;color:white;}#yesil{background:green;color:white;}--></style> </head><body> <span id=mavi> Bu yazının arkafon rengi mavi font rengi beyaz </span><br><br><span id=yesil> Bu yazının arkafon rengi yeşil font rengi beyaz </span> </body></html>
|
Böyyük Patron Tarafından 28-08-2007 Tarihinde Gönderilmiştir.
Bu Konuyu Yazdır
Kaynak : http://www.pc-kopat.com |
|
|
|
|
|
