mobile-logo
Top

ornek Tag

  • All
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

CSS Border Özelliği

CSS border özelliği bir elementin dış hatlarının rengini ve stilini belirlemeye olanak sağlar.

Border Style

border-style özelliği nasıl bir kenarlığın gösterileceğini tanımlamamızı sağlar.

Not;  border-style özelliğini belirtmediğiniz sürece hiçbir border tanımlaması işe yaramaz!

border-style değerleri:

none: Çerçevesiz hal

dotted: Noktalı bir çerçeve

dashed: Tirelenmiş kenarlık

solid: Sade, tek renk ve tek çizgi halinde olan kenarlık

double: Çift kenarlık. border-width değerindeki genişlik değeri ile aynı değere sahip iki çerçeve de.

groove: 3 boyutlu oluklu kenarlık. Efektler border-color değerine bağlıdır.

ridge:3D kabarık çizgi. border-color değerine bağlı.

inset: 3d ilave kenar. border-color değerine bağlı.

outset: 3d ilave kenar. border-color değerine bağlı.

Kendiniz deneyin: Kenarın değerini ayarlama

Kenar genişliği

border-width kenarların genişliğini ayarlamak için kullanılır.

Genişlik piksel olarak veya thin, medium ve thick olarak 3 tanımlı kenar genişliğini kullanabilirsiniz.

Not: The “border-width”tek başına kullanıldığında çalışmaz. “border-style” özelliği ile kenarlar ayarlanmalı ilk önce.

Örnek

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Kendiniz deneyin »

 

Kenar rengi

border-color kenarlara renk vermek için kullanılır. Renkler de:

  • name -belirli bir renk adı ile,mesela “red”
  • RGB – belirli bir rgb değeri ile, mesela “rgb(255,0,0)”
  • Hex – belirli bir hex değeri ile,mesela “#ff0000”

Kenar renklerini transparan/”transparent” da yapabilirsiniz.

Continue reading
by

Temamın tablo stilleri uygun olmadığı için göstermek istediğim tablo biçimini şuradan görebilirsiniz buraya tıklayarak.

Ek açıklama da; bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…

Table Borders(tablo kenarları)

border özelliği kullanılarak tablo kenarları css ile biçimlendirilir.

Aşağıdaki örnek siyah bir kenar oluşturur table, th ve td elementleri için:

Örnek

table, th, td
 {
 border: 1px solid black;
 }
 Kendiniz deneyin! »

Örnekteki tablonun kenarlarının çift olduğuna dikkat edin. Bu table ve th/td elementlerinin ayrı olarak kenar özelliğine sahip olduğunun göstergesidir.

Tablo kenarında tek bir çizgi göstermek için border-collapse özelliğini kullanın.

Continue reading
by

Css’in liste özelliği size şunları verir:

  • Sıralı liste elemanları için farklı işaretler,
  • Sırasız liste elemanları için farklı işaretler,
  • liste elemanı işareti için resim atama

 

List

HTML’de iki tip listeleme vardır:

  • sırasız listeler- dairelerle işaretlenmişlerdir tıpkı soldakiler gibi
  • sıralı listeler – sayılar ile işaretlenmişlerdir.

CSS’le, listeler de şekillendirilebilir ve resimler de liste işaretçilerinin yerine kullanılabilir.

Farklı liste elemanı işaretçileri

list-style-type özelliği ile işaretçinin tanımlanması:

Örnek

ul.a {list-style-type: circle;}
 ul.b {list-style-type: square;}ol.c {list-style-type: upper-roman;}
 ol.d {list-style-type: lower-alpha;}
 Kendiniz deneyin! »

Bir kısmı sırasız liste için bir kısmı sıralı liste için.

Liste elemanı işareti olarak resimler

Bunun için list-style-image özelliği kullanılır:

Örnek

ul
 {
 list-style-image: url('sqpurple.gif');
 }
 Kendiniz deneyin »

Yukarıdaki örnek tüm tarayıcılarda düzgün gözükmemekte. IE ve Opera; Firefox, Chrome ve Safari’dekilerden biraz daha büyük gösterecektir resmi.

Tüm tarayıcılarda düzgün gözükmesini istiyorsanız aşağıdaki çözümü uygulamanız gerekmekte.

Continue reading
by

Bir vefa borcu ve alıştırma/uygulama yapmak için HTML Örnekleri w3schools.com üzerindeki editörler aracılığı ile, buraya tıklayarak ulaşabilirsiniz.HTML Referansları da burada yer almaktadır.Şimdiye kadar anlatmış olduklarım ile HTML sayesinde kendi web sitelerinizi yapabilirsiniz. HTML evrensel işaretleme dilidir WEB üzerinde. Text biçimlendirme, grafik ekleme, bağlar oluşturma yani linkler,...

by