NOT : Aşağidaki yazilar css çalişirken çikardiğim notlardan oluşmaktadir ;
PART1 Css yi sayfaya eklemek için bazı yollar vardır..
** 1 ) elementin içerisinden direk kullanabilirsin..Pek önerilen bir yol olmamasına ragmen böyle bir şeyde var..mesela örnek vermek gerekirse ;
<h1 style=”” > BAŞLIK </h1>
Böylece direk css ile elemente müdahale edebiliyoruz.
** 2 ) title dan sonra genel bir css kullanabiliriz.Böylece (x)html kod ile css birbirinden ayrılır..böylece sayfadaki bütün elementlere tek element üzerinde ulaşabiliriz.
<style type="text/css">
Bu araya özellik belirtiriz.
</style>
** 3 ) Css uzantılı bir style sheet dosyası oluştururuz.Burada özellikleri belirtip html page in içine atabiliriz.Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilir.Buda bize hız kazandırır.Misal genel web isimli bir css dosyası oluşturduysak gene head içinde title dan sonra şu şekilde çağırabiliriz.
<link rel=”stylesheet” type=”text/css” href=”web.css”/>
** 4 ) @import ile eklemek.
Kullanımı 3.yönteme çok benzer..css uzantıli oluşturulan dosya import ile html page in içine eklenir.Örn:
<style type="text/css">
@import "web.css";
</style>
Bu 4 yöntemin 4. sü avantajları bakımından önerilen bir yöntemdir.içeriği büyük olan sitelerde css kodun parçalara ayrılması ve kullanılan sayfa css ‘inde hangi parçalar gerekli ise onların import edilmesi önerilir.Bu sayfada kodun bir kısmında yaptıgımız değişiklik için tüm css kodu incelenip değiştirilmesi gerekmez,yönetimi kolaylaşır.
Ürünler Bölümü için bir css dosyası ekleyelim,ondan sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.
@import url(/css/iskelet.css)
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/urunlereOzel.css);
PART2 Css’ nin yapısı nasıldır?
Css nin yapısı 2 ana kısımdan oluşur.Selector ve declaration block.Bildirim bloğu özellik ve değer olmak üzere ikiye ayrılır.
Mesela ;
P Burada P seçicidir.
{
Color:red; color:red ; kısmı bildirim bloğudur.
Bacground:yellow; background özellik yellow ise değerdir.
}
Birden fazla html elemanına atama yapılabilir buna gruplama denmektedir.Gruplama seçicilerde ve bildirim bloğunda yapılabilir.
Mesela:
P,H3
{
Font-family : Ariel;
}
Sınırsız sayıda selector gruplanabilir.Ayrıca birden fazla seçiciye birden fazla bildirimde bulunabilir..Bildirimin gruplanmasından da kasıt budur.
Birçok css özelliği anahtar kelime alabilir.Bu anahtar kelimeler Tırnak arasına alınmaz mesela :
P
{
Color:red;
}
Buradaki red tırnak içine alınmaz.
PART3 Css’ de Uzunluk değerleri nasıldır ?
Tanımlı 8 uzunluk değeri vardır.bunlardan 3 tanesi relative yani görecelidir.Kalan 5 tane absolute yani kesindir.
** Relative
Bu değerler diğer uzunluk değerlerine göre görecelidir.Sayfalarımızın ölçeğinin değiştiği yada çıktısının alındıgı durumlarda avantaj sağlar.
Bunlar em ex px
Em: Yazıtipinin yüksekliğidir.mesela font-size:14 px olarak ayarlandıysa 1 em 14 px e eşit demektir.
Px: Her monötöre göre farklı bir pixel vardır.
Ex: Elemanın ‘x’ harfinin yüksekliğidir.Atanmış olan yazıtipinin küçük ‘x’ değeri yüksekliğidir.
** Absolute
1inc 2.54 cm dir Örn : line-height: 0.5 in
Santimerte(cm) Örn : Margin : 3cm
Milimetre Örn: letter – spacing: 1mm
Pt (Point) Standart baskı birimidir. (1pt = 1/72 in ) Örn: font – size : 14pt
Pc (Pika) 1 inc in 1/6 sıdır.bir pika 12 noktaya bölünür. Örn: Font-size : 2pc
** Yüzde Değerleri
Yüzde değerleri göreceli değerlerdir.Yüzde değeri uygulandığı nesnenin boyutuna göre hareket eder…
Örn:
H4
{
Line-height : 150%;
}
Elemanın font size değerinin 150% sidir.
P
{
Text- indent : 10%;
}
PART4 Url Değerleri
Css veri dosyası ve kaynağın yerini belirtmek için Url i yani evrensel kaynak kullanılır.Stil şablonları ve artalan resmi eklemek için kullanılır..
Örn :
url ( “http: // molks.org/images / little.gif “ )
Burada tırnaklı yada tırnaksız kullanımda uygundur.
PART5 String ler
Çift yada tek tırnak arasında yazılır.String içinde çift tırnak kullanacaksan c# da oldugu gibi
\” BURADA \” KÖPEK VAR.
PART6 Yorum Eklemek
/* MERHABA TELEVOLE */ şeklinde yorum eklenir.
ÖNEMLİ NOT :
Css dökümanları içindeki resmin yolu Css dökümanının konumuna göre verilir.
PART7 Selectors
1 ) CLASS SELECTOR // Sınıf seçici
2 ) ID SELECTOR // Tekil seçici
*** CLASS SELECTOR ***
Aynı html elementine farklı özellikler atamak için sınıf seçicisi kullanılır.
Örneğin :
Hazırlayacağımız dökümanda 2 adet paragraf tanımlaması yapacağımızı planlıyoruz.Bunlardan biri sağa dayali diğeri ise ortaya dayalı olsun istiyoruz.Class içinde veya html page içinde head arasında ,, title dan sonra ;
p.sagadaya
{
Text-align : right;
}
p.ortada
{
Text-align : center;
}
P elementini açtıktan sonra class özelliğinden ulaşabiliriz.Çoklu sınıflar birden fazla “ sınıfı “ bir html elemanına uygulamak için kullanılır..
Yukarıdaki sadece paragraflarda kullanılabilir ama selector ı nokta ile başlatsaydık istediğimiz element te kullanabilirdik.
Örneğin :
.Onemli
{
Font – weight: bold;
}
.Uyari
{
Font – style : italic;
}
.Onemli .Uyari
{
background- color : silver
}
PS :
Önemli İle Uyarı Arasında nokta var.Yani hem önemli hemde Uyari class ları Kullanılıyor.Üzerinede yeni özellik ekleniyor.Html page içinde class a atama yaparkende Önemli ve uyarı seçicilerini teker teker seçip bütünleştiriyoruz yani :
<p class="Onemli Uyari"> Metin </p>
*** ID SELECTOR ***
Tekil seçici Sınıf seçicisinden farklıdır.Sınıf seçicisi sayfada birden fazla elemana atılırken Tekil seçici sadece 1 elemana atanır.
Önemli NOT:
Her ne kadar kural olarak her bi id selector sadece 1 elemana atanabiliyorsada tarayıcılar genelde sayfada birçok yerde kullanılmasına ses çıkarmaz.Ancak bu elemanı DOM yani belge nesne modeli betiklerinde kullanırken id atamasını birkaç yerde yaptıgımızda hata meydana gelecektir. Bu nedenle her ne kadar tarayıcı izin versede TekiL seçicileri sayfada sadece 1 kere kullanınız.
Tanımlanırken de başına # (diyez) işareti konulur.
# nesne1 { background : blue; }
Tekil seçiçi işareti
Tekil seçiçi Adi
Bildirim Bloğu
Örneğin head in içine title ın altına “ id selector“ lar oluşturalım..
Ve daha sonra bunlara html page in içinden ulaşalım..
<style type="text/css">
#nesne1
{
background-color:Red;
}
#nesne2
{
background-color:Olive;
}
</style>
Daha sonra sayfaya bir submit button koyup, id sini nesne1 yaparsak arka plan rengi kırmızı olacaktır.
<input id="nesne1" type="submit" value="submit" />
Veya
Yazıya bir p elementi ekletip id sini nesne2 yaparsak arkaplan rengi Olive olacaktır.
<p id = “nesne2” > Arka Plan Rengi Olive </p>
•Sınıf ve tekil seçiciler Case Sensitive dir..
Örneğin :
p.OnemliBilgi
{
Font – weight : bold ;
}
Dersek..bu selector u page in içinde p elementinin class özelliğine atarken onemlibilgi yazamayız ,doğrusu OnemliBilgi dir.
PART8 Css de hiyerarşik yapı
Css güçlüdür,çünkü css uygun stilleri ve bu still lerin nasıl uygulanacağini belirtmek için (x)html dökümanının hiyerarşik yapısını çok iyi kullanır.
Html nin Bir altında head ve body vardır.Head base ve title olmak üzere 2 dala ayrılır.Body nin altında h1 ve p etiketlerini kullandığımızı düşünelim ve paragrafın içinde em ve strong etiketlerini kullandığımızı düşünelim.Bu x(html) yapısını soy ağacı gibi düşünürsek , bir elemanın ebeveyn(anne-baba) olduğunu anlamak için altında başka eleman olup olmadığına bakarız.Yukarıdaki örnekte p bir ebeveyn dir çünkü altında em ve strong vardır ve burada em ve strong da çocuk olmaktadır.
Daha karmaşık yapılarda ise Ata (Ancestor) ve Torun (Descendant) ilişkisi vardır.
Örneğin :
Bir tane unordered list oluşturalım.Bu unordered list in içine 2 tane list item atalim. Biri ev biri araba olsun.Bu list item ların altınada ordered ve unordered birer liste ekleyelim.Ordered olanın birinci list item i Oda Sayisi ikinci list item i Balkonlu olsun.Unordered olanın birinci list item ı Saat/km ikinci list item ı ise ViresTürü olsun..
Buraya bakarsak :
Unordered list => List item => Ordered List => List İtem
İlk list item dan sonraki bütün elemanlar underdered list e göre torun elemanlardır.
NOT : Ctrl + K + D
<ul>
<li>Ev
<ol>
<li>Oda Sayisi</li><li>Balkonlu</li>
</ol>
</li>
<li>Araba
<ul>
<li>Saat/KM</li>
<li>Vires Türü</li>
</ul>
</li>
</ul>
Descendant Selectors ( Torun seçiciler)
Bu modelin avantajlarından birisi torun seçicilerdir.Torun seçicilere yapılan tanımlama sadece belirtilen elemanlara uygulanır.ve bu kuralın haricinde kalanlara uygulanmaz.
* Örneğin Atası H1 olan bütün em torun elemanlarınının rengini silver yapmak istiyorum.
H1 em
{
Color:silver;
}
Buradaki ilişkiyi belli eden işaret aradaki boşluktur.Virgüllü olanı ile karıştırma.
* Sadece 2 elemanla sınırlı değiliz.Sınırsız eleman tanımlayabiliriz.
Ul ol ul em ?_?
{
Color:grey;
}
Torun seçiciler çok kuvvetli olabilirler..html ile yapılamayacak işler yaparlar.Örneğin :
Bir dökümanda 2 adet alan oluşturdugumuzu düşünelim..Birinci alanın background u Mavi İkinci Alanın Background u Beyaz olsun ve her iki alanında içinde link ler oldugunu farzedelim..Tüm linkleri mavi olarak atamamız mümkün olmayacaktır çünkü mavi arka planın üzerinde mavi link gözükmeyecektir.
Burada çözüm torun seçicilerindedir..
Td.sidebar
{
Background : blue;
}
Td.main
{
Background : white;
}
Td.sidebar a:link
{
Color:white;
}
Td.main a:link
{
Color;blue;
}
NOT :
A:link Ziyaretten önce
A:visited Ziyaretten sonra
A:hover Mouse üzerinde gezinirken
A:active Ziyaret için tıklandığında
Örnek
<HTML>
<HEAD>
<STYLE TYPE="text/css">
A:link { color : #0000FF; text-decoration:underline; font-family:Verdana}
A:visited { color : #FF00FF }
A:hover { color : #00CCFF ; font-size:14pt}
A:active { color : #FF0000 }
</STYLE>
<BODY>
......
</BODY>
</HTML>
Direct CHILD Selectors ( Çocuk seçiciler)
Bazı durumlarda keyfi olarak, torun seçicisi kullanmaktansa daha ayrıntılı bir ayrım yapmak isteyebiliriz.Örneğin bir h1 elemanının altındaki strong elemanından sadece çocuk elemanı için tanımlamalar yapmak istersek (torun elemanları hariç) bunun için çocuk bağlayıcısını kullanırız yani büyüktür işaretini … ( >)
H1 > strong
{
Color:red;
}