CSS caption-side Özelliği

CSS caption-side

Örnek:

Bu örnekte mevsimler tablosu olşuturulmuştur. Ve bu tabloya caption-side özelliği uygulanarak tablo başlığı oluşturulmuştur.

caption { caption-side: top; }

CSS caption-side nedir nasıl kullanılır

Css tabloların başlığa sahip olması istenildiğinde caption-side özelliği konumlandırılır. İki farklı değer alır.

CSS caption-side CSS caption-side özellikleri  
Varsayılan Değer: top  
Kalıtsallık: var  
Animasyon Özelliği: yok  
Versiyon: CSS2  
JavaScript caption-side: object.style.captionSide="bottom"

CSS caption-side Tarayıcı Desteği

Tablodaki sayılar bu özelliğin tam olarak desteklendiği ilk tarayıcı sürümleridir.

CSS Kodu:
caption-side 1.0 8.0 1.0 1.0 4.0

CSS caption-side Değerleri

caption-side:top|bottom|initial|inherit;

CSS caption-side özelliği değerleri

CSS caption-side değerleri CSS caption-side değerleri tanımları CSS örnek uygulamalar
top Bu değer ile tablo başlığı tablonun üstüne konumlanır.
bottom Tablo başlığını tablonun altına konumlandırır.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri alır.  

Yorumlar

Yorum Gönderme

Popüler yayınlar

CSS content Özelliği

CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri   Varsayılan Değer: normal   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS2   JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıcı sürümlerini gösterir. CSS Kodu:
Devamı

CSS justify-content Özelliği

CSS justify-content Css justify-content özelliğini esnek kutu modelinde kapsayıcı kutunun elemanlarının genişliği kabı doldurmadığında değişik hizalama seçenekleri sunar. Örnek: Bu örnekte bir esnek kutu içerisinde genişlikleri kabı doldurmayan elemanlar vardır.Kapsayici kutuya justify-content özelliğinin space-between değeri verildiğindeki etkisini görmek için aşağıdaki kendiniz deneyin tuşuna tıklayınız. #anakutu { width: 300px; height: 250px; border: 2px solid black; display: -webkit-flex; -webkit-justify-content: space-between; display: flex; justify-content: space-between; } #anakutu div { width: 50px; height: 50px; } Kendiniz deneyin » CSS justify-content nedir nasıl kullanılır Esnek kutu içerisindeki elemanlar yatay eksende tüm genişliği kaplamadığı zaman justify-content özelliği elemanları hizalamak için kullanılabilir. CSS justify-content CSS justify-content özellikleri
Devamı

Javascript ile neler yapılabilir

Resim
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript  kullancı taraflı bir dildir.Öğrenilmesi en kolay  web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir. Javascript ile neler yapılır Javascript HTML elemanlarının içeriğini değiştirebilir.Aşağıda uygulmada p1 id'ye sahip bir paragrafı Js ile içeriğini değiştirebilirsiniz.Bunun için yapmanız gereken tek şey Butonu çalıştırmak.Javascript kodlarını head kısmında da kullanabiliriz ben daha çok body etiketinden önce kullanıyorum. Javascript ile Html elemanlarının içeriğini değiştirme <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile html belgesindeki bir elemanın içeriğini değiştirme.</title> </head> <body> <p id="p1">Bu paragr
Devamı

HTML strong Etiketi

<strong> Etiketi Örnek Belgede metni biçimlendirme: < strong > önemli metin < /strong > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <em>Vurgulanmış metin</em> <br /> <strong>Önemli metin</strong> <br /> <code>Bilgisayar kodları</code> <br /> <samp>Bir bilgisayar programının örnek çıktısı</samp> <br /> <kbd>Klavye girişi</kbd> <br /> <var>Değişkenler (Variables)</var> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <strong> Tanımı ve Ku
Devamı

CSS flex-basis Özelliği

CSS flex-basis Css flex-basis :Esnek kutu modelinde optimum boyutunu belirlemek için kullanılır. Eğer yeterli genişlik var ise esnek kutu verilen değer boyutunda olacaktır. Örnek: Bu örnekte anaka kutu içerisindeki bütün elemanlara başlangıç uzunluğu 40px verilmiştir.2. sıradaki elemanının genişliğini ise 90px olarak değiştirdik. #anakutu div { -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 40px; flex-grow: 0; flex-shrink: 0; flex-basis: 40px; } #anakutu div:nth-of-type(2) { -webkit-flex-basis: 90px; flex-basis: 90px; } Kendiniz deneyin » CSS flex-basis nedir nasıl kullanılır Flex-basis özelliği sayısal olarak uzunluk yani genişlik tanımlamıza yarar. CSS flex-basis CSS flex-basis özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var   Versiyon: CSS3  
Devamı

CSS top Özelliği

CSS top Css top özelliği ile durağan halde bulunmayan html elementlerinin konumları düzenlenebilir. Örnek: Bu örnekte kapsayıcısı içinde bulunan küçük kutu büyük kutuya göre 150px uzaklıktadır. div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; top: 150px; width: 100px; height: 100px; border: 2px solid blue; } Kendiniz deneyin » CSS top nedir nasıl kullanılır Css top özelliğini kullanırken dikkat edilmesi gereken elementin position değeridir.Bu değer varsayılan olarak relative dir.Yani eleman durağan haldedir.Top değeri girilse bile eleman konum değiştirmez. CSS top CSS top özellikleri &nbsp Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS2   JavaScript t
Devamı

HTML Yorumlar

Resim
« Önceki Ders Sonraki Ders » HTML Yorum Etiketleri HTML belgelerine yorum eklemek için <!-- ve --> yorum etiketleri kullanılır. Aşağıdaki örnek HTML belgesine ekleyebileceğiniz bir yorumu, açıklamayı temsil ediyor. <!-- Açıklamanızı yorum etiketleri arasına yazın --> Not: Yorum etiketlerinin açılış etiketinde ünlem işareti ( ! ) vardır, ama kapanış etiketinde yoktur. Yorumlar tarayıcılar tarafından görüntülenmezler ama özellikle fazla kaynak kodu olan HTML belgeleri için, belgenin ilgili kısımlarına notlar ya da açıklamalar eklemek oldukça faydalıdır. İleride kaynak kodlarınız üzerinde yeni düzenlemeler yapmak istediğinizde HTML yorumları düzenleme yapılacak alana kolayca ulaşabilmenize yardımcı olur. HTML Yorumları ile bildirim ve hatırlatıcılar ekleyebilirsiniz. Örnek <!-- Hakkımda sayfası içeriği --> <p>Bir paragraf.....</p> <!-- Buraya daha fazla bilgi girmeyi unutma! --> Kendiniz deneyin » HTML yorumlar
Devamı

CSS align-self özelliği

CSS align-self özelliği Css align-self özelliği ile bir esnek kutu içerisindeki seçtiğimiz elamanı istenilen değere göre hizalayabiliriz.. Örnek: Bu örneğimizde flex özelliği taşıyan kutu içindeki id'si"kırmızı" olan elemanı align-self özelliğinin center değeri ile merkezde hizalanacaktır. #kirmizi { -webkit-align-self: center; align-self: center; } Kendiniz deneyin » CSS align-self nedir nasıl kullanılır flex kutu modeli ile çalışılırken kapsayıcı bir elemanın içindeki elemanlardan seçilenleri hizalamak için kullanılır. CSS align-self CSS align-self özellikleri   Varsayılan Değer: auto   Kalıtsallık: yok   Animasyon Özelliği: yok   Versiyon: CSS3   JavaScript align-self: object.style.alignSelf="stretch" Oynat CSS align-self Tarayıcı Desteği CSS K
Devamı

HTML5 Canvas Oyun Yapımı Dersleri

Resim
Html5 canvas etiketi ve Javascript ile nasıl oyun yapılır ? Web oyunu geliştirme ve animasyon teknikleri nelerdir ? Javascript'te yılan oyunu nasıl yapılır ? Siz de kendi canvas oyununuzu geliştirmek istiyorsanız önce videoyu izleyelim . Html5 Canvas oyun yapımı ve Javascript Animasyon Dersleri  Bir web geliştiricisi ya da yazılımla uğraşıyorsanız eminim oyun yapımı ya da oyun programlama ve geliştirme ile ilgili mutlaka bir deneyiminiz  olmuştur.İşte oyun programlama ve Html5 canvas animasyon derslerimizden görüntüler.Bakalım beğenecek misiniz ? İyi seyirler.  "Bu yılan  başka yılan :)" Javascript ile kendi oyununu geliştirmeye hazır mısın ? 6 saatlik dolu dolu uygulamalı Canvas Oyun Yapımı kursuna sadece 24.99TL ye hemen kayıt yaptırabilirsiniz.Harika eğlenceli ve bilgi dolu kursu bitirip  yılan oyunu ile kendinizi ödüllendirin. Kursu içeriğini incelemek için Udemy HTML5 Canvas Animasyon Dersleri ve Javascript Oyun Yapımı   linkine tıklayın. Html5 canvas
Devamı

HTML select Etiketi

<select> Etiketi Örnek Dört seçenekli bir açılır liste: < select >     < option value= "honda"> Honda < /option >      < option   value= "toyota"> Toyota < /option >      < option   value= "ford"> Ford < /option >      < option   value= "chevrolet"> Chevrolet < /option > < /select > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html><html> <body> <select> <option value="honda">Honda</option> <option value="toyota">Toyota</option> <option value="ford">Ford</option> <option value="chevrolet">Chevro
Devamı