<html> <head> <style> #dikeyort{ display: table; height: 400px; #position: relative; overflow: hidden; border: 1px solid green; } #yazialani{ #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; } #alan{ #position: relative; #top: -50%; […]
Kategori: CSS Uygulamaları
CSS Tablo Düzeni
Tablo sütunları ve satırları içerik için tabloda belli bir düzende yer alır.Bazı durumlarda bu düzene ek olarak yeni bir satır ya da yeni bir sütun tablodaki sütun ve satır göz önünde bulundurularak eklenebilir ya da yeniden düzenlenebilir.Bu gibi durumlar için colspar ve rowspan adlı iki özelliklen yararlanılır. Sütun Sayısı colspan tabloda belirtilen sütun sayısı kadar […]
CSS Basit Tablo Biçimi
<table>….</table> – Tablo ana elementi , tablo tanımlamasının yapıldığı gövdenin başlanğıç ve bitiş sınırlarının olduğu element <tr> – Satır direktifi ya da elementi. Hücreleri ve sütunları yerleştirmek için yeni bir tablo satırı oluşturur. <th> – Başlık direktifi ya da elementi. Bu element sütunların içeriği ile ilgili bir açıklama satırının tablo sütunlarında yer alan veriler için […]
CSS Element Görünümlerinin Kaydırılması
Merhaba BDA Takipçileri , Float özelliği ile başlayalım bu özellik, kutu modelini temsil eden elementi bulunduğu konumdan kaydırır . CSS ile sayfa sunumlarında çok sık kullanılan bir özelliktir.Sağa , sola , aşağı , yukarı kaydırma özelliğinden dolayı içerik sunumu yapmayı oldukça kolaylaştırır. Aldığı değerler: left | right | top | bottom | end | none […]
CSS Bağlantılar
Merhaba BDA Takipçileri , a:visited : Daha önce ziyaret edilmiş görünümü a:hover : Fare üzerine geldiği an görünümü a:active : Tıklanıldığı an görünüşü a:link : Link görünüşü Örnek kullanımlar a:visited {color:#00FF00;} /* daha önce ziyaret edilmiş*/ a:hover {color:#FF00FF;} /* fare üzerinde geldiğinde */ a:active {color:#0000FF;} /* tıklanıldığı an */ a:link {color:#FF0000;} /* ziyaret edilmemiş */
CSS Yazı Stili
<html> <head> <style type=”text/css”> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1>Başlık</h1> <p>Paragraf</p> <p class=”x”>Bu bir paragraf=”x”. Hemde mavi.</p> </body> </html>
CSS Resim Galerisi
<html><head><style type=?text/css?>div.img{margin:2px;border:1px solid blue;height:auto;width:auto;float:left;text-align:center;}div.img img{display:inline;margin:3px;border: 1px solid white;}div.img a:hover img {border:1px solid blue;}div.aciklama{text-align:cent;font-weight;normal;width:120px;}</style></head><body><div class=?img?><a href=?1.jpg? target=?_blank?> <img src=?1.jpg? width=?110? height=?90? /> </a><div class=?aciklama?>Buraya aciklama giriniz.</div></div><div class=?img?><a href=?2.jpg? target=?_blank?> <img src=?2.jpg? width=?110? height=?90? /> </a><div class=?aciklama?>Buraya aciklama giriniz.</div></div><div class=?img?><a href=?3.jpg? target=?_blank?> <img src=?3.jpg? width=?110? height=?90? /> </a><div class=?aciklama?>Buraya aciklama giriniz.</div></div><div class=?img?><a href=?4.jpg? target=?_blank?> <img src=?4.jpg? width=?110? […]
CSS Söz Dizimi
CSS kodların sınırlarını gösteren {} süslü parantezler arasındaki CSS özelliklerinin tümüne denir ve örnek olarak aşağıdaki gibi yazılır. body{color: red;} Bu CSS kuralının söz dizimi şu şekilde de yazılabilir. body{color: red;} Bu anlamda bir zorunluluk yoktur, fakat özellikler ve aldıkları değerlerin söz dizimlerinde belli kurallarn vardır.CSS İçin Yorum Satırı CSS kodlamalarında açıklama satırı için aşağıdaki […]
CSS Dış kenarlık
Kenarlığın dışında bir kenar daha çizebilmek için outline özelliğini kullanıyoruz. [color=#4444ff]outline-styleoutline-widthoutline-color[/color]outline-width: Kenarlık Boyutu Piksel olarak dış kenarlık boyutunu belirtmemizi sağlar. outline-color: Kenarlık RengiKenarlığın rengini belirledik.Dış kenarlığın daha kısa şekilde kullanımıYukarıda sayılan tüm özellikleri tek bir outline koduyla belirtebiliriz. [code type=css] .kutucuk1 { outline-width: 1px; outline-color: black; outline-style: solid; } .kutucuk2 { outline: 1px black solid; […]
CSS Kenarlıklar
HTML elemanının kenarlarına çizgi çekerken kullanacağınız kodlar:[code type=css]border-styleborder-widthborder-colorborder-style: Kenarlık Stili Kenarların görünüşünün nasıl olacağı ile ilgili bilgi vermemizi sağlar.Kullanabileceğiniz stiller:none – Kenarlık yokdotted – Noktalıdashed – Kesik çizgilisolid – Çizgidouble – Çift çizgigrooveridgeinsetoutset Örnek bir kullanım:[code type=css] .kutum { border-style: dotted; }[/code] border-width: Kenarlık BoyutuKenar genişliğini belirtmemizi sağlar. ÖNCELİKLE MUTLAKA border-style belirtmemiz gerekir, aksi takdirde görüntülenmeyecektir.Örnek […]