CSS(CASCADING STYLE SHEETS) CSS NEDİR NE İŞE YARAR? Sıralı Sitil Şablonları olarak bilinen CSS Web sayfalarının biçimsel özelliklerini düzenlediğimiz ve yönettiğimiz kodlar bütünüdür. CSS kodları ile sayfamızdaki nesnelerin biçimsel özelliklerini düzenleriz.örneğin bir yazının rengini,boyutunu ve farklı bir çok özelliğini css yazarak yönetebiliriz.sayfamızdaki görünüm tutarlılığını sağlarız.bir çok sayfada benzer görünümler olsun istediğimizde nesneleri tek tek biçimlendirmek yerine birkez css stilleri yazıp o stilleri ilgili nesnelere atamamız yeterli olacaktır. CSS KULLANMANIN FAYDALARI? CSS kullanarak sayfamızdaki görünümleri daha smart bir hale getiririz.böylelikle internet kullanıcısına tutarlı ve daha düzenli bir web sayfası sunmuş oluruz.web sayfalarında tasarımla birlikte bu tasarımın doğru şekilde internet ortamına aktarılması ve çalışması CSS kodları yardımı ile olacaktır. CSS YAZIM ŞEKİLLERİ 1.Html Kodu içinde style tagı ile nesneye ekleyerek kullanabiliriz. 2.Head Tagı arasına css klaslarını ve seçicilerini yazarak kullanabiliriz. 3.Dışarıdan bir css dökümanını html sayfamıza <link> elementi ile ekleyebiliriz. EN ÇOK TERCİH EDİLEN YÖNTEM 3.YÖNTEMDİR SEBEBİ: Html Koduna dışarıdan bir dosya ile css dokümanı ekleyerek kodu daha düzenli ve daha anlaşılır bir hale getiririz.html Kodu ne kadar uzun ve karışıksa sayfada o kadar yavaş açılır
Büyük projelerde her bir satır ciddi önem taşır. Ayrıca performansta da ciddi faydaları vardır.sayfanın yüklenme hızı artar. HTML DOSYASINA CSS DOSYASI EKLEME? Html kodumuzun head etiketleri arasına; <head> <link rel="stylesheet" type="text/css" href="ornek.css"> </head> kodunu ekleyerek dışarıdan bir css dosyasını html sayfamıza ekleyebiliriz.görüldüğü gibi link elementi ile dışarıdan bir css dökümanını dökümanın bulunduğu adresi "href" kodu ile ekledik.artık bu html dosyamız için geçerli stilleri ornek.css dosyası içerisine yazabiliriz. CSS KOD YAPISI Css temel olarak seçicilerden oluşan bir sitiller bütünüdür.seçiciler yardımı ile hani elemente biçimlendirme atayacağımızı denetleyebiliriz.genel olarak tüm htm elementleri birer seçicidir. Örn:"body,h1,a,p,ol,ul," elementleri CSS içerisinde doğal birer seçicidir. SEÇİCİLER(SELECTORS): Html içerisindeki seçicileri kullanabildiğimiz gibi kendi seçicilerimizi de oluşturabiliriz.kendi seçicilerimizi oluştururken dikkat etmemiz gereken ilk durum oluşturacağımız seçicinin kullanım durumudur. SINIF SEÇİCİLERİ(CLASS): Eğer seçimizi oluşturup biçimlendirmelerini atadıktan sonra bu seçicimizi birden fazla nesne için kullanacaksak bu seçiciyi bir sınıf(class) olarak tanımlamamız gerekir.sınıf (Class) seçicileri bir kez tanımlandıktan sonra birden fazla elemente atanabilir. Sınıf seçicilerini(class) şu şekilde tanımlarız: ".ornek { " ornek adında bir sınıf tanımladık. ID SEÇİCİLERİ Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında" #" işareti olan Seçiciler Id Seçicisidir. ID seçicileri şu şekilde tanımlarız: " #ornek { " ornek adında bir id seçici tanımladı bu seçiciyi yalnızca bir elemente bir kez kullanmalıyız. HTML ELEMENTLERİNİ BİÇİMLENDİRME
BODY ELEMENTİ:Body elementi sayfanın genel yapısının yani gövdesinin bulunduğu alandır.bu element içerisinde sayfanın genelinde yani heryerinde görebileceğimiz biçimlendirmeleri yazabiliriz. BODY ELEMENTİ İÇİNDE YAPABİLCEĞMİZ BİÇİMLENDİRMELER: bacground-color:arka Plan rengini belirleriz background-image:arka Plan resmi ekleyebiliriz. background-repeat:eklediğimiz arkaplan resminin tekrar edip etmeyeceğini yada "x" yönündemi "y" yönündemi tekrar edeceğini denetleriz. background-attachment:arkaplanın sabit kalmasını sadece içeriğin hareket etmesini sağlayabiliriz. YUKARIDAKİ KODLARI TEK TEK YAZABİLDİĞİMİZ GİBİ TEK SATIRDADA YAZABİLİRİZ! "background:url(../images/bg-image.jpg) no-repeat #FFF right bottom fixed;" MARGIN VE PADDING DEĞERLERİ:Margin ve padding değerleri ile sayfamızın ve içerisindeki nesnelerin boşluklarını veya kendi aralarındaki boşluklarını denetleyebiliriz. Margin:Kenar Dıs Boslugu,Nesnenin dış kenara olan uzaklığı, Padding:Kenar iç boslugu,nesnenin iç kenarına olan boşluğu olarak adlandırılabilir. MARGIN VE PADING KULLANIMI: "margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px;" şeklinde yazılabildiği gibi, "margin: 0px 0px 0px 0px;" yada "margin:0px" şekillerinde de yazılabilir. Padding değeride yine aynı şekillerde yazılabilir.örn: "padding:0px" gibi. TEXT ELEMENTLERİNİ BİÇİMLENDİRME: CSS kodları yardımı ile metin nesnelerimizi de yine çeşitli stillerde biçimlendirebiliriz TEXT ELEMENTLERİ İÇİN YAPABİLCEĞMİZ BİÇİMLENDİRMELER: text-decoration:underline;yazıya alt çizgi vermek için kullanılır. text-decoration:none; yazıdaki alt çizgiyi kaldırmak için kullanılır. color:yazı rengini verdiğmiz bölüm. text-align:yazının yönünü berittiğimiz alandır.text-align için kullanabileceğimiz değerler:"left, right, center, justify" text-transform:lowercase veya uppercase değerleri verebiliriz.text nesnemizin büyük küçük harf olma durumunu denetleriz. text-indent: belirtilen piksel değeri kadar metin nesnemiz içeri girecektir. örnk "text-indent:10px;" FONT ELEMENTİ İLE METİN BİÇİMLENDİRME: Metinsel ifadelerimizin yazı tipi yazı büyüklüğü rengi ve kalınlığı gibi değerleri yönettiğimiz stilleridir. Font aşağıdaki gibi çeşitli özellikleri belirtir: font-family:yazı tipini ve yazı tipinin dahil olduğu font ailesini belirleriz.buarada amaç belirttiğimiz fontu veya o aileden herhangi bir font değerinin alınmasını sağlamaktır. Örnek:"font-family:"Comic sans MS", Helvetica, sans-serif;"
font-size:0.875em; veya font-size:12px;:yazının boyutunu belirlediğimiz bölümdür.burada dikkat ederseniz piksel değerinin dışında birde em değeri kullanılmıştır em değerini tüm tarayıcılar tanıyabilir dolayısıyla px değeri yerine em değeri vermek daha doğru olacaktır. Piksel ve em arasındaki rakamsal ilişki ise 16px = 1em şeklindedir. font-style:normal:yazının eğik (italik) veya normal sitilde görünmesini denetleriz. font-weight:bold; Yazının kalınlık ve incelik durumunu denetleyebildiğimiz alandır.piksel olarak ayarlayabildiğimiz gibi bold,bolder,normal,light gibi değerlerde verebiliriz. LINK ELEMENTLERİNİ (a) BİÇİMLENDİRME: Bildiğimiz gibi linkler Html yazımında "a" olarak adlandırılır.daha öncede belirtildiği gibi linkler yani a elementi css için de bir seçici olarak çalışır ve a elementinin çeşitli durumları ve özellikleri vardır. Bu durumlar: a:link: Ziyaret edilmemiş link a:visited:ziyaret edilmiş olan link durumu a:hover:mause ile üzerine gelinmiş olan link durumu a:active: mause ile tıklandığı anki link durumu Yukarıdaki yazım şekli ile sayfamızdaki linkleri biçimlendirebiliriz.yazacağımız bu kodlar sayfamızdaki tüm linkler için geçerli olacaktır.aynı sayfa içerisinde birbirinden farklı link görünümleri oluşturmak istersek bunun için bir class nesnesi tanımlamalı ve bu nesnemizi linklere atamalıyız örnek olarak; a.kirmizi{ font-family:verdana, Geneva, sans-serif; font-weight:bold; font-style:normal; font-size:12px; a.kirmizi:link{text-decoration:none; color:#f00; a.kirmizi:visited{text-decoration:underline; a.kirmizi:hover{background-color:#000; color:#fff; a.kirmizi:active{background-color:#609; color:#fff; Yukarıda görüldüğü gibi a nesnesi içerisinde bir class tanımladık ve bu klas içerisindeki linklerin durumlarını biçimlendirdik. LİSTE ELEMENTLERİNİ (ol,ul) BİÇİMLENDİRME: ol,ve ul elementleri html sayfalarda sıralı ve sırasız listeler oluşturmak için kullandığımız elementlerdir.aynı şekilde ol ve ul elementler ide CSS için doğal birer seçicidir. CSS'de sıralı ve sırasız listeleri yatay ve dikey menuler yapmak için kullanırız. ul:sırasız listeler,ol:sıralı listeler olarak adlandırılır. Örnek: ul li{font-family:verdana, Geneva, sans-serif; font-size:0.75em; color:#900; ol li{font-family:verdana, Geneva, sans-serif; font-size:0.75em; color:#333; Kodunu yazdığımızda sayfamızdaki tüm sıralı ve sırasız liste nesnelerini biçimlendirmiş olduk.görüldüğü gibi font,size ve color özelliklerini de belirtilen şekillerde kullandık. list-style-type:liste nesnesinin tipini belirler.
background:liste nesnesinin arka plan resmini belirler. list-style-image:sıralı listelere ikonlar eklemek için kullanılır. Listeleri kullanarak bir menu yapmak istersek sıralı listelere "list-style-image" özelliği ile çeşitli ikonlar atayabilir ve resimli menuler oluşturabiliriz.bunun için aşağıdaki kodu yazmamız ve listemiz yanında görünmesini istediğimiz resmin adresini vermemiz yeterlidir.örnek: Örnek: ol{list-style-image:url(../images/1303199789_tick-circle.png); LİSTELERE ARKA PLAN RESMİ UYGULAMA: Liste nesnelerine bir arka plan resmi vererek te menu görünümü oluşturabiliriz. ul nesnesinin li öğesine aşağıdaki kodu yazarak bir arka plan resmi atayabiliriz. ul li{ width:201px; height::31px; background:url(../images/link.jpg) no-repeat; LİSTELER İLE DİKEY MENU YAPMA: Listeleri kullanarak dikey bir menu yapabiliriz.bunun için oluşturduğumuz listenin nesnelerini yatay konuma yerleştirmemiz lazım.ol ve ul nesneleri dikey olarak sıralanan listelerdir.bu listeleri yatay hale getirmek için "FLOAT" yüzdürme özelliğini kullanırız.listenir her bir öğresini float ettirdiğimiz zaman bir liste menusu yerleştikten sonra gelen menu öğesi artık float özelliğinde olduğu için alt satıra değilde diğer nesnenin yanına gelecektir.kulanımı için aşağıdaki örneği inceleyiniz. ul{ list-style-type:none; margin:0px; padding:0px; Listemizi tanımladıktan sonra liste öğelerimizide tanımlayıp biçimlendiriyoruz. ul li{ font-family:tahoma, Geneva, sans-serif; font-size:0.75em; witdh:100px; height:24px; background-color:#ccc; text-align:center; line-height:24px; float:left;