CSS3 ve HTML Dersleri | CSS’e Giriş

CSS'e Giriş

CSS’e Giriş

CSS açılım olarak Cascading Style Sheet (Basamaklı/Katman Katman/Biçimlendirilmiş Sitil Sayfası) olarak ifade edilir. Genel olarak bir örnekle ifade etmek gerekirse CSS’i bir moda tasarımcısı, HTML’i ise bu tasarımcının HTML’in belirli özelliklerine göre tasarladığı kıyafetleri giyen ve gösteren bir model olarak düşüne bilirsiniz.

HTML ile CSS daima birlikte anılırlar, CSS’in kendine özgü bir kod yazılım şekli bulunmakla beraber HTML etiketlerini ve bu etiket içindeki özelliklerine verilen değerlere istinaden seçiciler ile hedefe odaklı sitil vermek için kullanılırlar.  HTML’in geçmişine bakıldığında tasarımları ve sayfa düzenleri borderları bulunmayan tablolar ile gerçekleştirilmekteydi. HTML’e stil tanımlama özellikleri kısıtlıydı. CSS ile bu sorunlar ortadan kaldırılarak çok daha modern internet siteleri tasarlanabilmektedir.

Javascript, java gibi dillerde HTML içinde stil belirleyebilirler, CSS yazım dilini diğer dillerden ayırt eden en önemli özelliği CSS’in sadece biçimlendirme dili olmasıdır. Tek başına biçimlendirme, stil atama haricinde herhangi bir işlevselliği bulunmaz.

XHTML ve sonrasında HTML5 ile CSS’teki tarayıcı farklılıklarına göre biçimlerin farklı gözükmesi veya tanımaması gibi sorunlar büyük ölçüde standartlaştırılmış olsa da halen tarayıcılar için farklılıklar gösterebilir. Ayrıca XHTML ve HTML5 CSS kullanılmasını tavsiye eder.

Yazım Şekli

css syntax yazım şekli

CSS bir seçici ile birlikte (seçiciler ayrıca anlatılacak geniş bir konudur) bu seçicinin sınırlarını belirleyen {  } süslü parantezler içine yazılan özellikler ve değerleri ile oluşur. Özellikler sonunda “:” işareti alır, deklarasyon içindeki özelliğe atanmış değerler “;” işareti ile sonlandırılır. Deklarasyon içine birçok özellik ve değer atanabilir.

body {color:red; text-align: justify;}
veya
body {
color:red;
text-align: justify;
}

Yukarıda örneğe bakıldığında genel bir seçici olan body etiketi kullanılmış sonrasında süslü parantezler içinde sitil özellikleri ve değerleri atanmıştır. Yine yukarıdaki örnek farklı şekilde iki kez yazılmış olup buradan anlaşılan boşluklar herhangi birşey ifade etmiyor ve yok sayılıyor. Genel olarak görünümü kolaylaştırdığı için ikinci yöntem tercih edilir.

CSS Komutlarının HTML Sayfası İçinde Kullanılması

CSS komutaları HTML sayfaları içinde 3 yöntemle kullanılır.

  • Inline (html etiketleri içinde style=”CSS komutları” özelliğinin içine değer olarak yazılır)
  • Internal (html sayfasının head etiketi içine style etiketi altında tanımlanır)
  • External (başka bir dosya içinde hazırlanan .css dosyasının sayfaya ithal edilmesiyle)

En çok tercih edileni external olarak siteye ithal edilen metottur.

Inline Örneği:

<!DOCTYPE html>
<html>
<head>
<title>Inline Gösterimi</title>
</head>
<body>


Bu bir css için <a href="" style="font-style: italic;">inline</a> olarak sitil belirtilmesinin örneğidir

</body>
</html>

Yukarıdaki örnekte görüldüğü üzere stil uygulanması istenilen etiketin içine style özelliği atanarak css kodları yazılmıştır. Paragraf (<p>) etiketi içerisine style özelliği ile deklarasyon içinde font-weight özelliğine bold değeri verilerek tüm paragraf kalın, color özelliğine de red değeri verilerek kırmızı yapılmıştır. Ayrıca aynı paragraf içindeki inline kelimesine hyperlink atanmış ve içerisine style özelliği eklenerek deklarasyon içinde font-style özelliğine italic değeri belirtilmiş inline kelimesinin italik olarak gözükmesi sağlanmıştır.

Internal Örneği

<!DOCTYPE html>
<html>
<head>
<title>Internal Gösterimi</title>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Ap%7B%0Afont-weight%3A%20bold%3B%0Acolor%3A%20red%3B%0A%7D%0Ap%20a%20%7B%0Afont-style%3A%20italic%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>


Bu bir css için <a href="">inline</a> olarak sitil belirtilmesinin örneğidir

</body>
</html>

Yukarıdaki örnek incelendiğinde <head> etiketleri arasına eklenen <style> etiketine bir type özelliği atanmış, mime tipi olan text/css değeri verilmiştir. <style> etiketi ile </style> kapama etiketi arasına css kodları yazılmıştır.

External Örneği

index.html

<!DOCTYPE html>
<html>
<head>
<title>External Gösterimi</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


Bu bir css için <a href="">inline</a> olarak sitil belirtilmesinin örneğidir

</body>
</html>

style.css 

p{
font-weight: bold;
color: red;
}
p a {
font-style: italic;
}

Yukarıdaki örnekler incelendiğinde index.html dosyası ve style.css isimli iki dosya görülmekte. HTML kodlarımız doğal olarak index.html dosyasında ve adından da anlaşılacağı gibi sitil kodlarımız ise style.css dosyasının içinde. Bu iki dosyayı birbirine head etiketleri arasına yazılan <link> etiketi ile bağlıyoruz. Link etiketinin içindeki özelliklere ve değerlere baktığımızda rel, type, ve href özellikleri bulunmakta. Örnekte görüldüğü gibi rel özelliği “stylesheet” değeri alarak bir sitil sayfası olduğunu bildiriyor, type özelliğinin altığı “text/css” ile MIME tipi belirtiliyor. href özelliğine ise bağlamak istediğimiz dosyanın veri yolunu değer olarak belirtmek durumundayız.

CSS dosyası içerisine başka bir CSS dosyası ekleme

CSS dosyalarımızı bölerek çalışmamız bize sorunlara daha hızlı müdahale etmemize olanak sağlar. Örneğin HTML içerisinde birçok frame veya bloklar ayrı ayrı css dosyaları ile yaratılıp birbirine bağlanılabilir. Düşünün ki genel hatlarıyla HTML sayfaları Header (Başlık), Content (İçerik) ve Footer (AltBaşlık Bölümü) olarak tasarlanırlar. Tabiki modern web sayfalarında çok daha fazla bölüm bulunacaktır. Eğer çok uygulamanız gereken kod olduğunu düşünürseniz hatalı duruma göre az kod içinde hatayı bulmanız daha kolay olacaktır. Başka bir örnek vermemiz gerekirse CSS reset için farklı bir dosya yaratarak bu dosyayı başka bir doyaya import ederek gerçekleştirebilirsiniz.

CSS dosyası içerisine başka bir dosyayı eklemek için @import fonksiyonu kullanılır. Kendi hostunuzda bulunan ve eklenecek olan CSS dosyaları tam site adı (URL) olarak ve dizin yolu belirtilerekte eklenebilirler. @import fonksiyonu internal ekleme yönteminde de kullanılabilir.

@import url("http://siteniz.com/style.css")
/* veya */
@import "./style.css"

CSS Dosyası İçindeki Yorum Satırları

CSS içerisindeki yorum satırları ve alanı “/*” ile “*/” gösterilir. Bu işaretler arasına yazılan hiç bir satır tarayıcı tarafından yorumlanmaz. Aşağıdaki örneği inceleyiniz.

/* Sayfanın içindeki bütün paragraf etiketini hedefliyor */
p{
font-weight: bold;
color: red;
}
/* Paragraf içindeki a etiketini hedefliyor */
p a {
font-style: italic;
}

Konu Anlatımı

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com