CSS border-top Özelliği

CSS border-top

Css border-top özelliği bir html elementinin tüm üst kenarının sitillerini tek bir bildirimle düzenlenmesini sağlar.

Örnek:

Bu örnekte bir elemanının üst kenar özelliklerini border-top özelliği ile "ince çizft çizgili ve kırmızı renk " olarak belirlenlenmiştir.

div { border-style: solid; border-top: thin double red; margin: 30px; padding: 30px; }

CSS border-top nedir nasıl kullanılır

Css border-top özelliği html elementlerinin üst sınır özelliklerinin sitil tanımı için kullanılır.

Ayarlanabilir özellikleri sırayla şunlardır: border-top-width, border-top-style ve border-top-color.

CSS border-top CSS border-top özellikleri  
Varsayılan Değer: medium none color  
Kalıtsallık: yok  
Animasyon Özelliği: var
Versiyon: CSS1  
JavaScript border-top: object.style.borderTop="6px dotted green"

CSS border-top Tarayıcı Desteği

Tablodaki sayılar tam özelliğini destekleyen ilk tarayıcı sürümünü belirtir.

CSS Kodu:
border-top 1.0 4.0 1.0 1.0 3.5

CSS border-top Değerleri

border-top:border-width border-style border-color|initial|inherit;

CSS border-top özelliği değerleri

CSS border-top değerleri CSS border-top değerleri tanımları
border-top-width Üst kenar kelınlınğı için değer girilir.
border-top-style Üst kenar çeşidi belirlenir.
border-top-color Üst kenar rengi seçilir.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değer varsa o değeri alır.

Yorumlar

Yorum Gönder

Popüler yayınlar

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ı

CSS align-items özelliği

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 &nbsp Varsayılan Değer: stretch   Kalıtsallık: yok   Animasyon Özelliği: yok   Ver
Devamı

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ı

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 border-bottom Özelliği

CSS border-bottom Css border-bottom özelliği , html elemanının alt kenar özelliklerinin belirtilmesi için kullanılır. Örnek: Bu örnekte bir paragraf elemanın alt kenarına stil tanımlayacağız. p { border-style: solid; border-bottom: thick dashed orange; } Kendiniz deneyin » CSS border-bottom nedir nasıl kullanılır Css border-bottom özelliği html elemanının alt kenar özelliklerinin tanımlanmasını sağlayan bir özelliktir. CSS border-bottom CSS border-bottom özellikleri   Varsayılan Değer: medium none color   Kalıtsallık: yok   Animasyon Özelliği: var Oynat Versiyon: CSS1   JavaScript border-bottom: object.style.borderBottom="3px solid blue" Oynat CSS border-bottom Tarayıcı Desteği CSS Kodu:
Devamı

CSS text-align Özelliği

CSS text-align Css text-align özelliği:bir elemanın metnin yatay hizalamasını belirtir. Örnek: Bu örnekte h1- ve h6 arasındaki başlıklara farklı text-align değerleri uygulanarak özelliğin etkisinin öğrenilmesi amaçlanmıştır. h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: center; } h5 { text-align: left; } h6 { text-align: right; } Kendiniz deneyin » CSS text-align nedir nasıl kullanılır Text özelliği gösteren bir html elemanının ortalanmasını sağlamak için veya sola , sağa yaslanmasını sağlamak için kullanılan css özelliğidir. CSS text-align CSS text-align özellikleri   Varsayılan Değer: left if direction is ltr, and right if direction is rtl   Kalıtsallık: var   Animasyon Özelliği: yok   Versiyon: CSS1   JavaScript text-align:
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ı

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ı

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 text-decoration Özelliği

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
Devamı