CSS sentaksı
CSS sentaksı (sözdizimi), “bir selector” (seçim) ve bir “declaration block” (ifade blokundan) oluşur:
Selector: HTML etiketleri içerisinde seçtiğimiz, stil vermek istediğimiz, değiştirmek istediğimiz bir etikettir.
Declaration Block: Deklerasyon bloku, noktalı virgülle ayrılmış bir ya da daha çok deklerasyondan (ifadeden) oluşur: Her bir ifadenin, özellik ve değer olarak adlandırılan iki unsuru bulunmaktadır. Bu ikili her zaman birlikte kullanılır. Her özelliğin bir değeri olmak zorundadır ve bu değerler birden çok olabilir. Her ifadenin sonuna noktalı virgül konulmalıdır. Ayrıca ifade bloku yada blokları süslü parantezler içerisinde yazılmalıdır.
Aşağıdaki örnekte, HTML etiketlerinden <h1>, <p> etiketi ve <table> etiketine CSS ile nasıl stil verildiğini inceleyelim. Adım adım CSS’i HTML elemanlarına uygulayalım.
- Öncelikle aşağıdaki temel HTML etiketlerini kod editörüne yapıştıralım.
<!DOCTYPE html>
<html>
<head>
<title>SAYFA BAŞLIĞI</title>
</head>
<body>
<h1>YAZI BAŞLIĞI</h1>
<p>Paragraf...Burası paragrafın yazıldığı kısımdır. Buraya paragraf yazılmalıdır.</p>
</body>
</html
|
2. Sayfamızda sadece <h1> ve <p> etiketleri bulunmakta şu an için. Sayfayı biraz daha zenginleştirmek adına aşağıdaki tablo oluşturma etiketlerini paragraf etiketinin altına yapıştıralım.
<!DOCTYPE html>
<html>
<head>
<title>SAYFA BAŞLIĞI</title>
</head>
<body>
<h1>YAZI BAŞLIĞI</h1>
<p>Paragraf...Burası paragrafın yazıldığı kısımdır. Buraya paragraf yazılmalıdır.</p>
<table>
<tr> <td>satır1sutün1</td><td>satır1sutün2</td><td>satır1sutün3</td> </tr>
<tr> <td>satır2sutün1</td><td>satır2sutün2</td><td>satır2sutün3</td> </tr>
<tr> <td>satır3sutün1</td><td>satır3sutün2</td><td>satır3sutün3</td> </tr>
</table>
</body>
</html>
|
3. <h1>,<p> ve <tablo> etiketlerine stil vermek için <head></head> etiketleri arasında <style></style> etiketlerini açıp içerisine aşağıdaki gibi etiketleri yerleştiriyoruz.
<!DOCTYPE html>
<html>
<head>
<title>SAYFA BAŞLIĞI</title>
<style>
h1 {
color: green;
text-align: center;
}
p {
color: green;
text-align: center;
}
table{
border :3px solid #000; color: red;
}
</style>
</head>
<body>
<h1>YAZI BAŞLIĞI</h1>
<p>Paragraf...Burası paragrafın yazıldığı kısımdır. Buraya paragraf yazılmalıdır.</p>
<table>
<tr> <td>satır1sutün1</td><td>satır1sutün2</td><td>satır1sutün3</td> </tr>
<tr> <td>satır2sutün1</td><td>satır2sutün2</td><td>satır2sutün3</td> </tr>
<tr> <td>satır3sutün1</td><td>satır3sutün2</td><td>satır3sutün3</td> </tr>
</table>
</body>
</html>
|
|
|
sonuç:
YAZI BAŞLIĞI
Paragraf...Burası paragrafın yazılacağı kısımdır. Buraya paragraf yazılmalıdır.
|
Bu dersimizde selector-declaration (seçim-ifade) kavramlarını ele aldık. Seçtiğimiz bir HTML etiketinin rengi, fontu, arkaplan rengi, konumu gibi bir özelliğini değiştirmek istediğimizde bu özelliğin adını ve değerini yazarak ve bu bunları <style></style> etiketleri arasında yerleştirerek görünümlerini değiştirebiliriz.
Hiç yorum yok:
Yorum Gönder