Top

element Tag

Not: Bu içerik ve içerikler dizisi, Css’in doğru kaynaklardan öğrenilmesi ve Türkçe kaynak sıkınıtısının giderilmesi adına w3schools’tan çevirilmiştir. Online yani çevrimiçi editör de w3schools’a aittir. Herhangi bir sorunuz için aşağıya yazabilirsiniz! Grup Seçiciler Stil dosyasında aynı stile sahip elementler mevcut olabilir. h1 { color:green; } h2 { color:green; } p { color:green; } Kodu kısaltmak için,seçicileri gruplayabilirsiniz. Herbir seçiciyi virgül ile...

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.

Text Color (Yazı rengi)

Renk özelliği yazının rengini değiştirebilmek için kullanılır.

CSS ile bir renk;

  • Bir hex değeri “#ff0000”
  • Bir rgb değeri “rgb(255,0,0)”
  • Bir renk ismi “red” ile tanımlanır.

CSS renk değerlerine ait referans Css derslerinin bitiminde verilecektir.

Sayfanın varsayılan rengi body seçicisinde tanımlanır. Misal;

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

W3C’nin css bildirisine göre; Color özelliğini verdiyseniz, background-color özelliğini de vermek zorundasınız.

Text Alignment (Yazı hizalama)

text-align özelliği yazının yatay hizalamasının ayarını tanımlar.

Yazı merkeze alınabilir veya sağa/sola hizalanabilir ve yahut iki tarafa hizalanabilir.

text-align, justify olarak belirlendiğinde ,her satır genişler iki yana yaslanmak için satır genişliğince ve sol ve sağ margin düz olur dergilerdeki ve gazetelerdeki gibi.

Text Decoration

text-decoration özelliği ile yazı süslemelerinin ekleyebilir ya da kaldırabilirsiniz.

ID ve Class Seçicileri

HTML elementlerini biçimlendirmenin ötesinde CSS kendi seçicilerinizi id ve class olarak oluşturmanızı sağlar.

ID Seçici

ID seçici yegane tek bir element için stillendirme yapar.

HTML elementinin id özelliğinin değeri kullanılır ve css dosyasında ‘#’ değeri kullanılarak tanımlama yapılır ve biçimlendirilir css’te.

Örnek; menu id’sine sahip element için css yazımı;

#menu
{
text-align:center;
color:red;
}

ID’yi sayıyla başlatmayın Firefox’ta çalışmaz çünkü.

Class Seçici

Class seçici, html elementler grubunu biçimlendirmek için kullanılır. ID seçicisinin haricinde, class seçici birçok kez kullanılabilir.

Bu da sayılar ile başlamamalı çünkü Internet Explorer desteklememekte.

Aynı class ile belirli birçok HTML elementini şekillendirebilirsiniz.

HTML’nin class özelliğini kullanarak ve css’te başına nokta koyarak tanımlarsınız bu seçiciyi.

Örnekte merkez class’ına sahip bir css stilini göreceksiniz;

.merkez{text-align:center;}

Şunu da yapabilirsiniz class ile; sadece belirlediğiniz HTML elementlerinin class tarafından etkilenmesini sağlayabilirsiniz.

Mesela tüm p etiketlerine merkez class’ı uygulanır bu da hepsini merkeze alır tanımdan yola çıktığımızda.

p.center {text-align:center;}