Html ve Css Dersleri,Javascript İle Oyun Yapımı Dersleri,İnternetten Para Kazanma Yolları
HTML head Etiketi Örnek
Bağlantıyı al
Facebook
Twitter
Pinterest
E-posta
Diğer Uygulamalar
<!DOCTYPE html> <html> <head> <title>HTML Belgem</title> <meta charset="UTF-8"> </head> <body> <p>HTML head elementi meta-veri içerir.</p> <p>Meta-veri HTML belgesi ile ilgili veridir.</p> </body> </html>
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:
<section> Etiketi Örnek Belgede section etiketini açıklayan bir bölüm: < section > < h1 > Section Etiketi < /h1 > < p > Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır. < /p > < /section > 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> <section> <h1>Section Etiketi</h1> <p>Section etiketi üstbilgi (header), altbilgi (footer), içerik bölümü, menü bölümü ve sayfanın diğer bölümleri gibi bir belge içindeki bölüm olarak tanımlanır.</p> </section> </body> </html>
CSS transition-delay Css transition-delay özelliği ile css animasyonlarının gecikme süresi belirlenebilir. Örnek: Bu örnekte genişliği 90px olan bir div elemanının genişliği6 saniyede 360px olacaktır. Fakat transition-delay: 3s; değeri verildiği için 3 saniye gecikmeli başlayacaktır. div { width: 90px; height: 90px; background: yellow; border: 1px solid black; -webkit-transition-property: width; -webkit-transition-duration: 6s; -webkit-transition-delay: 3s; transition-property: width; transition-duration: 6s; transition-delay: 3s; overflow; auto; } div:hover { width: 360px; } Kendiniz deneyin » CSS transition-delay nedir nasıl kullanılır Css ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir. CSS transition-delay CSS transition-delay özellikleri   Varsayılan Değer: 0s Kalıtsallık: yok Animasyon
CSS align-items özelliği Css align-content özelliği ile bir HTML elemanının içerisindeki alt elemanlarını hizalama ve konumlandırma işlemleri için kullanabiliriz Örnek: Align-items özelliğini kullanarak esnek kutu modülü ("flex") uygulanan bir kapsayıcı div içerisindeki elemanların konumlarına center değerini uygulayalım ! div { width: 220px; height: 350px; border: 2px solid black; display: -webkit-flex; -webkit-align-items: center; display: flex; align-items: center; } Kendiniz deneyin » CSS align-items nedir nasıl kullanılır Flex ile (esnek kutu modeli) ile yapılandırılmış bir div kutusundaki elemanları hizalamak için kullanılır. CSS align-items CSS align-items özellikleri   Varsayılan Değer: stretch Kalıtsallık: yok Animasyon Özelliği: yok Ver
CSS text-justify Css text-justify ile paragrafların sayfanın sağ ve sol kenarına yaslanmasını sağlayabiliriz. Örnek: div { text-align: justify; text-justify: inter-word; } Kendiniz deneyin » CSS text-justify nedir nasıl kullanılır Bu özellik metnin hangi hizada ve hangi aralıklıolması gerektiğini düzenler. CSS text-justify CSS text-justify özellikleri   Varsayılan Değer: auto Kalıtsallık: var Animasyon Özelliği: yok Versiyon: CSS3 JavaScript text-justify: object.style.textJustify="inter-word" Oynat CSS text-justify Tarayıcı Desteği Tablodaki sayılar özelliği destekleyen ilk tarayıcı versiyonlarını belirtir. CSS Kodu: text-justify Desteklenmiyor 5.5 Desteklenmiy
CSS overflow Boyutları belirlenen bir html elemanın içeriği kutu boyutunu aştığı durumlarda css overflow özelliği ile gösterimler kontrol edilebilir.Kaydırma çubuklarının çıkıp çıkmayacağını veya çıkacaksada x yönünde mi y yönünde mi kaydırma çubuğu istiyoruz gibi sorularımızı cevaplayan ve çözen bir özelliktir. Örnek: Bu css örneğinde iki tane div elemanından bir tanesine scroll diğerine ise hidden değeri verilmiştir. div.scroll { background-color: yellow; width: 150px; height: 150px; overflow: scroll; } div.hidden { background-color: pink; width: 150px; height: 150px; overflow: hidden; } Kendiniz deneyin » CSS overflow nedir nasıl kullanılır Overflow özelliği ile birlikte içeriğin elementin boyutlarını aşması durumunda kaydırma çubuğunun gösterilip gösterilmeyeceğini kontrol edebiliriz. CSS overflow CSS overflow özellikleri Varsayılan Değer: visible
CSS text-decoration Css text-decoration : metni üstünü , altını veya tam ordasından çizgi çekerek sitil tanımlar. Örnek: Bu örnekte farklı paragraf elemanlarına farklı değerlerde text-decoration özelliği uygulanmıştır. .p1 { text-decoration: overline; } .p2 { text-decoration: line-through; } .p3 { text-decoration: underline; } p { font-size: 25px; } Kendiniz deneyin » CSS text-decoration nedir nasıl kullanılır Bu özellik: text-decoration-line, text-decoration-color, text-decoration-style özelliklerinin kısa bildirim şeklidir. Ama bu özellik her tarayıcıda çalışmamaktadır. CSS text-decoration CSS text-decoration özellikleri Varsayılan Değer: none Kalıtsallık: yok Animasyon Özelliği: yok Versiyon: CSS1, renewed in CSS3 JavaScript text-decoration: object.style.textDecoratio
CSS border-collapse Css border-collapse özelliği tabloların kenarlarını birleştirerek tek çizgi halinde görünmesini sağlar. Örnek: Bu örnekte bir tablonun satır ve sütun kenarlarını tek çizgi olarak görünmesini sağlamak için border-collapse özelliğini uyguladık. table { border-collapse: collapse; } table, td, th { border: 1px solid black; } Kendiniz deneyin » CSS border-collapse nedir nasıl kullanılır Bir html tabloya border atadığımız zaman normalde her hücrenin kendi bir kenarlığı olur, eğer ki border-collapse özelliğini uygularsak artık hücreler ortak bir kenar kullanmış olur.Daha detaylı öğrenmek için örneklerimizi inceleyiniz. CSS border-collapse CSS border-collapse özellikleri   Varsayılan Değer: separate Kalıtsallık: var Animasyon Özelliği: yok Versiyon: CSS2 JavaScript bor
Yorumlar
Yorum Gönderme