Css anlatım
CSS KODLAMA
CSS KISALTMALAR
CSS WEB SAYFASINA EKLEME
CSS ANLATIMI
Tanım
CSS (Cascading Style Sheets)’nin Türkçe karşılığı stil şablonları anlamındadır. CSS, HTML üzerinde yer alan çıktıları biçimlendirme fırsatı veren bir teknolojidir.
- Bağlantı çeşitleri
Aktif olarak sayılabilir 3 çeşit bağlantı metodu vardır;
- Import medotu <style type=text/css media=screen>@import url(dosyaadi.css);</style>
- Link medotu <link href=”dosyaadi.css” rel=stylesheet type=text/css />
- HeadTag medotu sayfada direkt olarak <style type=text/css>…</style> arasına yazılır.
Ayrıca bunlara ek olarak sayfada o anki elemente <p style=”…”></p> ile de stil verebilirsiniz ama bu tercih etmediğimiz yöntemdir.
- Tablosuz tasarım
- Tüm alanları bünyesinde barındıracak #ana alanı,
- Header görevini üstlenecek #ust alanı,
- Content görevini üstlenecek #orta alanı,
- Sağ ve Sol içeriğimizi yönetebileceğimiz #sag ve #sol alanları,
- Son olarak Footer görevini üstlenecek #alt alanı.
Sırayla bu alanlarımızı şekillendireceğiz
#ana {
width: 600px; /* Alanın genişliğini ayarla */
margin: auto; /* Alanın dışa bağlı boşluğu ayarla. Auto değeri alanı ortalı gösterecektir */
}
#ana #ust {
height: 100px; /* Alanın yüksekliğini ayarla */
background: #aaa; /* Arkaplan rengini ayarla */
border: 1px solid #888; /* 1px genişliğinde ve #888 renginde düz hat çerçeve oluştur */
margin: 0 0 5px; /* margin özelliği top right bottom left olarak 4 değer alır. Biz şuan top ve left’i 0 bottom’u 5 verdik. Eğer left ile right eşit olmasaydı left’i tanımlamamız gerekekti ama şuan left değeride 0 olacaktır. */
}
#ana #orta {
background: #fff;
margin: auto;
}
#ana #orta #sol {
float: left; /* Sola hizala */
width: 400px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #orta #sag {
float: right; /* Sağa hizala */
width: 195px;
height: 350px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
#ana #alt {
clear: both; /* Float alanlarını temizle (Bu özellik kullanılmaması halinde float’ın altında kalan alanlar browser uyuşmazlığı yaşayarak kaymalar doğurabilir */
height: 100px;
background: #aaa;
border: 1px solid #888;
margin-top: 5px;
}
Ve stil dosyamızı oluşturduk. Yukarıdaki kodlarımızı yazdığımız sayfamızı stil.css adıyla kaydedelim. Şimdi ise bu dosyamızı html sayfamıza ekleyerek sayfamızı tamamlayalım;
<html>
<head>
<title>Tablosuz tasarım giriş</title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”stil.css” _fcksavedurl=”"stil.css”" _fcksavedurl=”"stil.css”" />
</head>
<body>
<div id=”ana”>
<div id=”ust”>Header</div>
<div id=”orta”>
<div id=”sol”>Sol alan</div>
<div id=”sag”>Sağ alan</div>
</div>
<div id=”alt”>Footer</div>
</div>
</body>
</html>
Ve şimdi tamam. Sayfa kullanıma hazırdır.
CSS ANLATIM
CSS KODLAMA
CSS KISALTMALAR
CSS WEB SAYFASINA EKLEME
Dizayn (design) ***
Başlık (header_oben) ***
Menü (nav_container)
İçerik (content)
Sağ yan kısım (side_containbar)
Sayfa altlığı (feld_unten) ***