İçeriğe geç

Etiket: style

CSS Dersleri Bölüm 10 – Border / Çerçeve – kenar

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.

Yorum Bırak

CSS Dersleri Bölüm 7 – Listeleri Stillendirme

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.

Yorum Bırak

CSS Dersleri Bölüm 6 – Bağlantı(Link) Stillendirme

Linkleri Biçimlendirme(Styling Links)

Linkler herhangi bir CSS özelliği ile biçimlendirilebilir, color, font-family, background gibi.

Linklerin özelliği, bulundukları duruma göre stillendirilebilmeleri. Yani; bir link normal durumda(ilk durum), ziyaret edilmiş durum, linkin üzerine gelindiği durum, linkin aktif olduğu yani o anlık tıklanma durumu diye dört halde bulunur. Ve her bir durum ayrı ayrı stillendirilir.

a:link {color:#FF0000;}      /* ziyaret edilmemiş link */
 a:visited {color:#00FF00;}  /* ziyaret edilmiş link */
 a:hover {color:#FF00FF;}  /* fare üzerinde link */
 a:active {color:#0000FF;}  /* seçilen link */

Deneme adresiniz için tıklayabilirsiniz!

Fakat farklı durumları stillendirmede birtakım kurallar mevcut;

  • a:hover, a:link ve a:visited’tan sonra gelmelidir.
  • a:active, a:hover’dan sonra gelmelidir.

Genel Link Stilleri

Yukarıdaki örnekte link, durumuna göre renk değiştirmekte.

Linkleri stillendirmenin diğer yolları da aşağıda:

Text Decoration

text-decoration özelliği linklerin altındaki çizgileri kaldırmak için kullanılır çoğunlukla. Örnek;

a:link {text-decoration:none;}
 a:visited {text-decoration:none;}
 a:hover {text-decoration:underline;}
 a:active {text-decoration:underline;}

Deneme adresiniz için tıklayabilirsiniz!

Background Color

background-color özelliği linkler için arkaplan atar: Örnek;

Yorum Bırak

CSS Dersleri Bölüm 5 – Font(Yazı Biçemi) Stillendirme

CSS font özelliği font ailesini, kalınlığını, boyunu ve yazı stilini tanımlamanızı sağlar.

Şerif ve Sans-şerif fontların arasındaki farklar;

Şerif fontu tırnaklı olur kırmızı alanlarda görüldüğü gibi. Sans-şerif ise tırnaksız olandır. Sans-şerif daha çok başlıklarda ve başlık niteliği taşıyan ciddi karakterli yazılarda kullanılır. Tırnaklı olan şerif ise, paragraf özelliği gösteren ve açıklama niteliğindeki yazılarda kullanılır, küçük fontlarda kullanımı yaygındır.

CSS Font Ailesi

CSS’te 2 tür font ailesi adı vardır;

  • generic family – Şerif veya tek aralıklı bir grup font ailesi
  • font family – Belirli bir font ailesi Times New Roman veya Arial gibi…
Generic family Font family Tanım
Serif Times New Roman
Georgia
Serif fontlar karakterlerin sona eren kısımlarında çıkıntılara sahiptir.
Sans-serif Arial
Verdana
Sans’ın anlamı onsuz, yani şerifsiz(tırnaksız/çıkıntısız) anlamındadır.
Monospace Courier New
Lucida Console
Hepsi aynı genişliğe sahip tüm tek aralıklı karakterler.

Font Family

Font ailesi bir yazıdır/yazı tipidir,  font-family özelliği ile ayarlanan.

Font-family özelliği birkaç font adını da tutmalı ki sistem kayıplarına karşı korunsun. Yani yazdığınız font kullanıcının sisteminde yoksa yedekteki font seçeneğini kullanmalı. Veya sizin yazdığınızı tarayıcı desteklemeyebilir ikinci yazdığınızı.

İstediğiniz font ile başlayın,  generic ailesi ile bitirin ve böylece tarayıcının, benzer font seçmesini sağlayın generic family’ye benzer olarak tabi eğer diğer fontlar uygun değilse.

Not: Font ailesindeki isim bir kelimeden fazla ise tırnak işaretleri arasında yer almalı, tıpkı “Times New Roman”‘da olduğu gibi.

Örnek;

p{font-family:"Times New Roman", Times, serif;}

Deneme adresiniz için tıklayınız!

Font Style

Çoğunlukla yazıyı yatık yani italik yapmak için kullanılır.

Yorum Bırak

CSS Dersleri Bölüm 3 – Arkaplanların stillendirilmesi

CSS Arkaplan

CSS arkaplan özellikleri bir elementin arkaplan efektlerini tanımlamak için kullanılır.

Arkaplan efektleri için css özellikleri;

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Arkaplan rengi

background-color özelliği bir elementin arkaplanını değiştirmek için kulanılır.

body seçicisi ile sayfanın arkaplanını değiştiririz. Misal;

body {background-color:#b0c4de;}

CSS ile; renk değiştirebilmek için değerleri,

  • Hexadecimal kodları ile
  • RGB kodları ile
  • Rengin İngilizce ismi ile girebiliriz.

Bunun üzerinde sonra tekrar duracağım.

Arkaplan resmi

background-image özelliği bir elementin arkaplan resmini değiştirmeye ya da oluşturmaya yarar.

Varsayılan olarak resim tekrar eder ve böylece tüm sayfayı kaplar.

Bir sayfanın arkaplan resmi şöyle olur;

body {background-image:url('paper.gif');}

Arkaplan resmi belirlediğinizde yazıların okunabilir olmasına dikkat edin.

Background Image – Repeat X/Y ( yatay veya dikey tekrar)

Genelde, background-image özelliği hem yatay hem de dikey olarak tekrar eder.

Yorum Bırak

Bölüm 4 (İleri seviye HTML Dersleri), Head Elementi ve taşıdıkları

Çeviriler tırnak içinde gösterilir. Çevirilerin kaynağı; w3schools.com‘dur. Çeviri haricindekiler bana aittir. Temel HTML derslerine de bakabilirsiniz bu konuya yabancıysanız. 16 Bölümdür ve ilk bölüme buradan ulaşabilirsiniz. Editör olarak; Notepad++, Dreamweaver ya da w3Schools’a ait paylaşacak olduğum online editörü kullanabilirsiniz.


HTML, Head Elementi

Tüm head elementi için bir taşıyıcıdır. <head> elementi içeriğinde; stil dosyası bağı, scriptler, meta bilgisi desteği ve daha fazlasını taşır.

HTML, Title Elementi

<title> etiketi dökümanın başlığını ifade eder.

HTML ve XHTML belgelerinde gereklidir. Title elementi;

  • Tarayıcının araç çubuğunda bir başlık gösterir,
  • Favorilere eklendiğinde sayfa başlığı sağlar,
  • Arama motorlarında sayfa için başlık görüntüler.

Misal;

<html>
<head>
<title>Title of the document</title>
</head>

HTML, Base Elementi

<base> etiketi bir sayfa üzerindeki tüm bağlantılar için bir varsayılan adres veya bir varsayılan hedef ifade eder.

Misal;

<head>
<base href=”http://www.w3schools.com/images/” />
<base target=”_blank” />
</head>

HTML, Link Elementi

<link> etiketi bir döküman ile bir harici kaynak arasındaki ilişkiyi tanımlar. En çok stil dosyasını bağlamak için kullanılır.

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

HTML, Style Elementi

Yorum Bırak