kodaman.org - etiketler: css dersleri

CSS' nin WEB Dökümanlarına Atanma Yöntemleri

herkezim — Thu, 01 Oct 2009 06:30:00 GMT

CSS web tasarımında en çok kullanılan kodlama türüdür. Tartışmasız olarak harika şeyler çıkartabiliriz. Yeter ki nerelerde ve nasıl kullanacağımız hakkında bilgimiz olsun. Bunun yanında CSS tasarımlarımız da 4 şekilde kullanılır ve hepsinin ayrı sebepleri vardır.

1) Dahili Stillendirme
Bir HTML dökümanı içerisinde etiketinin açılışı ile kapanışı arasına açacağımız etiketi ile dökümana CSS şekillendirmesi ekleyebiliriz.
Örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*CSS kodları burada yer alacak*/
</style>
</head>
<body>.....

2) Harici Stillendirme
Bu yöntemde ayrı bir stil dökümanı hazırlanıp ".css" uzantısıyla kaydedildikten sonra bu dosya HTML dökümanına etikenin açılışı ile kapanışı arasına açılacak etiketi içinde yapılan CSS döküman yolu tanımlaması ile dahil edilir.
Örneğin:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>...

3) Import İle Stillendirme
Bu yöntem harici stillendirme ile aynı maksadı taşımakla beraber uygulama yöntemi harici stillendirmeden ufak bir farkla ayrılır. Bu teknikte dahili CSS dosyası oluşturur gibi etiketi açılır ancak içeriğine selektörler ve özellikleri girmek yerine import özelliğiyle harici CSS dosyasının yolu girilir.
Örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
<link rel="stylesheet" type="text/css" />
@import url(stil.css);
</style>
</head>
<body>...

4) Satır İçi Stillendirme
Bu yöntemde ayrı bir stil dökümanı hazırlanıp ".css" uzantısıyla kaydedildikten sonra bu dosya HTML dökümanına etiketinin açılışı ile kapanışı arasına açılacak etiketi içinde yapılan CSS döküman yolu tanımlaması ile dahil edilir.
Örnek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>...

Hangisini Kullanmalıyız
Tek bir HTML dökümanının görünüm özelliklerini biçimlemek için dahili stillendirmemiz, birden fazla HTML dökümanının ortak görünüme sahip olması için olması için tek merkezli harici stillendirme dökümanı kullanmamız, bazen de bu ikisinin yetersiz kaldığı anlık durumlarda satır içi stillendirmeyi yapmamız gerekebilir.

Tahmin edeceksiniz ki, anlık ve mecburi durumlar haricinde satır içi stillendirmeyle dolu bir HTML dökümanı hazırlamanın aslında eski karmaşık ve düzenlenmesi sıkıtnı yaratacak tasarım yapısından pek farkı kalmayacak.

Yine de sonuç itibariye atama yöntemleri tamamen sizin kişisel insiyatifinizde.

Bu yazı herkezim tarafından kodaman.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

En Çok Kullanılan CSS Sınıf (Class) İsimleri

pinkfloyd — Mon, 05 Jan 2009 07:23:00 GMT

Pek çok geliştiricinin, elementlere sınıf isimleri atarken kafası karışır ve genellikle yanlış isimler atarlar. Sınıf isimleri bir elementin nasıl göründüğünü ya da nerede konumlandırıldığını tanımlamamalı. İyi bir sınıf ismi, bir elementin neyi yansıttığını tanımlamalıdr. Bu makalede benim en çok kullandığım 10 sınıf ismini açıklamaları ile birlikte listeleyeceğim. Umarım bu makaleyi okuduktan sonra ne tür sınıf isimleri kullanmanız gerektiği konusunda net bir fikriniz olur.

class="fixed"
Bu sınıf adını her stil şablonunda, sola/sağa dayalı (float) ast (child) elementleri içeren kapsayıcılar üzerinde, içerisindeki elementleri temizlemek için şu şekilde kullanırım.

.fixed:after{
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  \*/
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

Eğer birbiri ardına sıralanmış imajların yer aldığı aşağıdaki gibi bir durumla karşı karşıya isem:

<ul>
	<li><img src='http://www.kodaman.org/images/img_01.jpg' alt="İlk Resim" /></li>
	<li><img src='http://www.kodaman.org/images/img_02.jpg' alt="İkinci Resim" /></li>
	...
</ul>

...o zaman bunu kullanırım:

<ul class="fixed">

class="alt"

Alt "alternatif"in kısaltılmışı olarak kullanılır. Bu sınıf adını bir dizi elementin belirli bir şekilde stillendirilmesi gerektiği, ancak bazılarında değişiklikler uygulanması gerektiği durumlarda kullanıyorum. Örneğin imajların sola ya da sağa dayalı olduğu durumlarda.

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}

class="selected"

Bu sınıf adını genellikle navigasyon elementlerinde seçili olan elementi tanımlarken kullanırım.

<li class="selected"><a href="/about">Hakkımızda</a></li>

Ayrıca JavaScript sekmeli içeriği kullandığımda seçili sekmeyi işaretlemek için de kullanıyorum.

<dl>
	<dt class="selected">Etiket Bulutu</dt>
	...
	...
	...
</dl>

class="first", class="last

:first-child ve :last-child sahte-sınıfları (pseudo-class) tüm tarayıcılar tarafından desteklenene kadar (tüm tarayıcılar derken, tarayıcıların en az %99.99'u, "tümü") bunu kullanmaya devam edeceğim. Bu sınıf isimlerini bir elementin ilk ve son astların seçmek için kullanıyorum. Bunu gereksiz kodlamayı önlemek için çok güzel bir yöntem olarak görüyorum. Bu konuda detaylı bilgilendirmeyi sonraki makalelerimden birinde yazacağım.

class="image"

Ben genellikle imajı etiketini kullanarak seçerim (örneğin #content img) ancak bu sınıf adı bir imaj kapsayıcsını kullanma gerektiğinde işime yarıyor (p class="image"). Diyelim bir haber listeniz bulunuyor ve bu listenin altında açıklamasını da içeren bir imajı sola dayalı olarak kullanmak ve içeriğin geri kalanını da onun sağından başlayarak takip etmek istiyorsunuz. O zaman ben şunu kullanıyorum:

<p class="image">
	<img src='http://www.kodaman.org/images/img_me.jpg' alt="benim komik yüzüm" />
	Resim açıklaması buraya
</p>
<p>
	İçeriğin geri kalanı buraya
	...
</p>

class="inner"

Ben genellikle bu sınıfı kullanırım ve bunu da özellikle sunum yapmam gerektiğinde kullandığımı söylemek zorundayım. Bu sınıf adını, fazladan stillemeye ihtiyaç duyduğum içiçe geçmiş divler kullanmak zorunda olduğum zaman kullanıyorum (örneğin çifte arkaplan gerektiğinde).

<div id="container">
	<div class="inner">
	
	</div>
</div>

class="link"

Adından da anlayacağınız üzere bu sınıf adını bağlantılar (link) üzerinde kullanıyorum. Ancak bunu genellikle kapsayıcıya, çoğunlukla da P etiketine dahil ediyorum, A etiketinin kendisine değil. Bunu en sık "yazının devamı" bağlantıları üzerinde kullanıyorum.

<p class="link"><a href="#">Yazının devamı...</a></p>

Bu sayede anchor'u P içerisinde .link üzerinden stilleyebilirken, ayrıca paragrafın kendisine de özel stilleme uygulayabilirim.

class="one", class="two", class="three"...

Bu sınıf adlarını her bir elementi ayrı ayrı hedeflemek istediğim zaman kullanıyorum. Bunun en sık kullanıldığı durum, bir navigasyon üzerinde imaj değiştirme işlemini uygulamam gerektiği zamanlar:

<ul>
	<li class="one"><a href="#">Ana Sayfa</a></li>
	<li class="two"><a href="#">Hakkında</a></li>
	...
</ul>

class="even", class="odd"

Sınf isimleri, tablolar içerisinde birbirini takip eden sıralar (rows) ya da listeler için kullanılıyor.

<ul>
	<li class="even">İçerik</li>
	<li class="odd">İçerik</li>
	<li class="even">İçerik</li>
	<li class="odd">İçerik</li>
</ul>

ya da

<table>
	<tr class="even">
		<td>İçerik</td>
		<td>İçerik</td>
	</tr>
	<tr class="odd">
		<td>İçerik</td>
		<td>İçerik</td>
	</tr>
	<tr class="even">
		<td>İçerik</td>
		<td>İçerik</td>
	</tr>
	<tr class="odd">
		<td>İçerik</td>
		<td>İçerik</td>
	</tr>
</table>

class="section"

Bu sınıf adı genel olarak "kutu" (box) olarak da bilinir. Ben bu sınıf adını içerik üzerinde özel bir stilleme uygulamamın gerektiği bazı bölümler üzerinde kullanıyorum.

1
2
3

<div class="section">
	İçerik buraya...
</div>

Çevirmenin notu: Ben makalenin orjinaline sadık kalmak için ve SEO kaygısı taşıdığımdan ötürü semantik içeriği korumak istemem gerekçesiyle sınıf (class) isimlerini İngilizce olarak bıraktım. Eğer siz Türkçe kullanmak istiyorsanız yukarıdaki sınıfların Türkçelerini aşağıda sırası ile listeledim:

class="sabit"
class="ast"
class="secili"
class="ilk", class="son"
class="resim"
class="dahili"
class="baglanti"
class="bir", class="iki", class="uc" ...
class="tek", class="cift"
class="bolge"

Bu yazı pinkfloyd tarafından kodaman.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Sizi CSS3 İle Tanıştıracak 5 Teknik

pinkfloyd — Sat, 03 Jan 2009 16:00:00 GMT

CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS'ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.

1: Genel Biçimlendirme

Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.

XHTML'miz için aşağıdaki div elementlerine ihtiyacımız olacak.

#round, CSS3 kodu ile yuvarlak köşeler oluşturmak için
#indie, her biri farklı oranlarda yuvarlak köşeler oluşturmak için
#opacity, CSS3'ün saydamlık ile nasıl başa çıktığını göstermek için
#shadow, Photoshop kullanmadan nasıl CSS3 ile gölge efekti oluşturulabileceğini göstermek için
#resize, elementlerin boyutunu CSS3 ile nasıl değiştirebileceğimizi gösterebilmek için.

Bunun için XHTML kodumuz şu şekilde olacaktır:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="round"> </div>
  <div id="indie"> </div>
  <div id="opacity"> </div>
  <div id="shadow"> </div>
  <div id="resize">
  <img src='http://www.kodaman.org/image.jpg' width="200" height="200" alt="resizable image">
  </div> 
</div>
</body>

HTML belgemizde bazı yukarıdaki IDlere sahib bazı DIV elementleri oluşturduk. Şimdi de gelin temel CSS dosyamızı oluşturalım.

body 	{	
background-color: #fff;
}

#wrapper {	
width: 100%;
height: 100%;
}

div {	
width: 300px;
height: 300px; 
margin: 10px;
float: left;
}
        
/*kodun geri kalan kısmı daha sonra buraya gelecek*/

Sizin de gördüğünüz üzere tüm div etiketlerine 300px genişlik ve yükseklik atadık. Ayrıca onların her birini kendi soluna yaslayarak (float: left), üzerindeki divlerle oynayabileceğimiz bir sayfa oluşturduk.

2: Yuvarlatılmış Köşeler (Rounded Corners)

Yuvarlatılmış köşeler oluşturmak bazen zor olabilir. İlk olarak imajları oluşturmalı, ardından o imajları arkaplan resmi olarak atayacağımız başka divler oluşturmalı vs... Gerisini biliyorsunuz.

Bu problem CSS3 ile, "border-radius" özelliği ile çözülmüş durumda. İlk olarak siyah bir div elementi oluşturacağız ve ona siyah renkli bir sınır atayacağız. Sınır atamamızın sebebi, daha sonra kullanacağımız border-radius özelliğinin işleyebilmesi için gerekli olması.

Bunu da şu şekilde yapacağız:

#round {      
background-color: #000;  
border: 1px solid #000;  
}

div'i oluşturduktan sonra sayfanızı yenileyin (refresh). Şimdi siyah renkli, kare ve yaklaşık 300px genişliğinde ve yüksekliğinde bir div görüyor olmalısınız. Gelin şimdi de yuvarlatılmış köşeler üzerinde çalışalım. CSS3 ile yuvarlatılmış köşeler sadece iki satır kodla oluşturulabilir.

#round {      
background-color: #000;  
border: 1px solid #000;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;   
}

Sizin de gördüğünüz üzere neredeyse birbirinin aynısı olan iki satır ekledik. Aralarındaki tek fark "-moz" ve "-webkit". -moz Mozilla Firefox'a, -webkit ise Safari/Google Chrome tarayıcları için gerekli.

HTML belgenizi yenileyin ve yumuşak görünümlü yuvarlatılmış köşelerin tadına varın. Şey, yumuşak görünümlü derken aslında sadece ve Firefox ve Safari'de buna ulaşabiliyorsunuz. Google Chrome'da köşelerin biraz daha keskin olduğunu göreceksiniz.

Kodumuza geri dönelim, "border-radius"'un bir değere ihtiyacı var. Bu değer köşenin keskinliğini belirtirken; daha büyük değer ise yuvarlatılmış köşeye işaret ediyor - tıpkı Photoshop'ta olduğu gibi. Bildiğim kadarı ile bu değer için herhangi bir üst sınır bulunmuyor.

3: Birbirinden Bağımsız Yuvarlatılmış Köşeler

Birbirinden bağımsız yuvarlatılmış köşeler, CSS2 ve öncesinde gününüzüm mahvolmasına sebep olabilir. Ne şans ki CSS3 bu sorunu çözüyor.

Bu özellik, yukarıdaki ile aşağı yukarı aynı. Yine border-radius değerini kullanıyor, ancak kodumuzu biraz değiştirmemiz gerekiyor:

#indie {      
background-color: #000;  
border: 1px solid #000;  
-moz-border-radius-topright: 10px;  
-moz-border-radius-bottomright: 10px;  
-webkit-border-top-left-radius: 10px;  
-webkit-border-bottom-left-radius: 10px;  
}

Kodumuza "topright" ve "bottomright" değişkenlerini dahil ettik; adından da anlaşılacağı üzere bu değerler div elementimizin sağ üst ve sol alt köşelerine işaret ediyor. Bu yeni özellikler ile sekme benzeri görünüme sahip elementler oluşturmanız mümkün.

Yukarıdaki özellikler ile birlikte ayrıca "topleft" ve "bottomleft" özelliklerini de kullanabilirsiniz.

4: CSS3 İle Saydamlığı (Opacity) Değiştirmek

Günümüzde saydamlık efektini oluşturabilmeniz için birkaç satırlık kod yazmanız gerekiyor ve bunlar da genel olarak standart CSS2'nin sunduklarının dışında özellikleri dahil etmek için bazı "hack"ler uygulamak zorunda bırakıyor bizi. Yine CSS3, bu işlemi çok basitleştiriyor.

Bu kod satırının hatırlaması çok kolay, sadece "opacity: değer;". Kolay değil mi?

Kodumuz şu şekilde olacak.

#opacity {    
background-color: #000;  
opacity: 0.3;  
}

5: CSS3 İle Gölge Efekti Oluşturmak

Photoshop üzerinde gölge efekti oluşturmak için yapmanız gerekenler incir çekirdeğini doldurmaz. Ancak bunu web uygulamalarınıza dahil etmek istediğinizde muhtemelen önce gölgeyi bir imaj olarak kaydetmek isteyecek, ardından onu arkaplan resmi olarak kullanmak isteyeceksinizdir. Daha fazlası değil! (En azından modern tarayıcılar için). Ne yazık ki şimdilik sadece Safari ve Chrome bu özelliği destekliyor.

Kod sadece bir satırdan oluşuyor, ancak biraz uzun ve 4 farklı değeri var!

-webkit-box-shadow: 3px 5px 10px #ccc;

İlk değer için, 3px kullandım. Bu değer gölge ile div elementi arasındaki yatay mesafeyi tanımlıyor. İkinci değerde ise 5px kullandım, bu da kutu ile gölge arasındaki yatay mesafeyi tanımlıyor.

Bir diğer px değeri olan 10px ise gölgenin radyanını (radius - yarıçap) belirliyor. Diğer bir deyişle gölgenin bulanıklığını (blur) ya da onun aşamalı renk değişikiğinin (gradyan - gradient) ne kadar "geniş" olacağını belirtiyor.

Son olarak kullandığımız son değer #ccc ise gölgenin rengini belirliyor. Bunun anlamı gölgemiz sadece gri olmak zorunda değil, dilersek #f00 kullanarak kırmızı renkli bir gölgemiz de olabilir.

Tüm yukarıdaki bilgiler ışığında kodumuzun son hali aşağıdaki gibi olacak.

#shadow {     
background-color: #fff;  
border: 1px solid #000;  
-webkit-box-shadow: 3px 5px 10px #ccc;  
}

Sizin de gördüğünüz üzere div elementine beyaz arkaplan rengi, siyah sınır ve açık gri gölge ekledim.

6: CSS3 İle Yeniden Boyutlandırmak

CSS'nin en son sürümü ile elementlerin boyutunu değiştirmek mümkün. Şimdilik bu özellik sadece Safari üzerinde çalışıyor.

Bu kod ile elementin sağ alt köşesinde küçük bir üçgenin belirmesini sağlamak mümkün. Daha sonra bu üçgeni sürükleyerek elementin boyutunu değiştirebilirsiniz. Kodumuz yine çok basit, sadece bir satır ve halihazırda bildiğiniz bazı elementler tarafından destekleniyor olabilir. Bu değerler "max-width", "max-height", "min-width" ve "min-height".

Kodumuz aşağıdaki şekilde olacak.

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}

Kodumuzda normal CSS'mize iki satır daha kod ekledim: "resize: both" ve "overflow: auto". Overflow içeren satır, yeniden boyutlandırmanın çalışabilmesi için gerekli ve herhangi bir tür overflow değeri içerebilir, yeter ki kodumuz orada olsun.

Kullandığımız bir diğer satır kod da "resize: both". Bu satır, elementimizin hem dikey (vertical) hem de yatay (horizontal) olarak (both) yeniden boyutlandırılabilmesinin önünü açıyor.

Sonuç

Bu makaleden ne öğrenmelisiniz? Önümüzdeki birkaç yıl içerisinde işlerimiz çok daha kolay olacak, web sayfaları çok daha hızlı yüklenecek ve ailenizle geçirebileceğiniz daha fazla zamanınız olacak! Her ne kadar şimdilik bu özelliklerin tüm tarayıcılarda doğru olarak çalışacağın beklemek doğru olmaz - ancak bir tarayıcıda yuvarlatılmış köşelerin görünmesi, diğerinde görünmemesinde yanlış olan hiçbir şey yok. Bunu bir yükseltme olarak ele alabilirsiniz.

CSS3 ile ilgili daha fazla bilgi almak için www.css3.info sitesini ziyaret edebilirsiniz.

Kaynak: nettuts

Bu yazı pinkfloyd tarafından kodaman.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage