Pir Zöhre Ana Forum - CSS (Cascading Style Sheets)

Web Tasarımınızı CSS3 ile Geleceğe Taşıyın !

Thu, 05 May 2011 08:18:29 +0300

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS’nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması‘nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS’nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması‘nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler. Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.
Ayrıca bakınız:

2. Border Image

border-image
Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.
border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;
{border: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.
Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.
border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image
Bu özellik Firefox 3.1, Safari ve Chrome’de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.
Ayrıca bakınız:

3. Kutu ve Metin Gölgeleri

box-shadow
Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doğru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Şimdi, CSS3 ile birlikte gölge efekti oluşturmak için Photoshop’a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliği sitelerinde kullanmaya cesaret edenler ortaya fena işler çıkarmadılar. Özelliğin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya başlayan 24 Ways websitesi gösterilebilir.
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.
Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.
text-shadow: 2px 2px 5px #ccc;
Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.
Ayrıca bakınız:

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity
Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.
rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* ya da */
color: rgba(200, 54, 54, 0.5);
İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.
Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:
color: #000;
opacity: #0.5;
Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.
Ayrıca bakınız:

5. @font-face İle Özel Web Yazıtipleri

@font-face
Web üzerinde daima güvenle kullanabileceğiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm… vs. Şimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çağrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceğinden şimdilik kullanabileceğiniz sadece birkaç yazıtipi bulunmakta.
Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:
@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}
Ardından font-family’nin geriye kalan öğeleri de günümüzde kullanıldığı şekilde kullanılmaya devam edecektir.
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }
Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eğer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face’i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliği kullanan bir web sitesi olarak TapTapTap gösterilebilir.
Ayrıca bakınız:

Her ne kadar CSS3 halen geliştirme aşamasında olmasına rağmen burada listelenen kurallar daha şimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari‘nin bu yeni özellikler için tam desteği bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına rağmen Safari’nin kullanıcı sayısı halen çok değil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından şimdilik pek mantıklı bir çözüm değil. Ancak Apple’ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari’nin de kullanım oranı önemli ölçüde artacaktır.
Firefox da öte yandan İnternet kullanıcılarının %20′den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliğini de destekliyor. Firefox kullanıcılarının pek çoğunun tarayıcılarını güncelleyeceğini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.
Google Chrome ise bu yıl içerisinde yayımlandı. WebKit işleme motorunu kullanan Chrome, aynı işleme motorunu kullanan Safari ile aşağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome’nin de piyasaya giriş yapması ile Windows kullanıcıları arasında popülerlik kazanmaya başlıyor.
Yüzde bazında W3′ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2′si Firefox, %3.1′i Chrome, %2.7′si ise Safari kullanıyor. Bunun diğer anlamı ise bu yeni özellikleri İnternet kullanıcılarının %50′sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteğine sahip tarayıcıların kullanım oranı %73.6‘ya kadar çıkıyor (Blog.SoonGraphics‘e göre).
6. Kötü yanları
Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

Internet Explorer: İnternet kullanıcılarının %46′sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. İkincil tercihlerin de CSS kodunuz üzerinde oluşturulmuş olmasına dikkat edin.
Doğrulanmamış Stil Şablonları: Bu CSS3 özellikleri henüz son hallerine ulaşmış değiller. Şimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil şablonunuzun doğrulanmaması ile sonuçlanabilir.
Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha şimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliği ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

Kaynak: Bildirgec - Smashing Magazine

CSS ile Site Dışı Bağlantılara İkon Eklemek

Sun, 21 Nov 2010 00:50:07 +0200

Vikipedi sitesindeki makalelerde dış bağlantılar kısmında bağlantının vikipedi’nin dışına gideceğini ifade eden external ikonunu () görmüşsünüzdür.

Bunu CSS ile kendi sitemize de uygulayabiliriz. Hem de linkler için hiçbir .class kullanmadan, otomatik bir şekilde yapabiliriz.

Daha önce eburhan’ın Bildirgeç’te anlattığı ‘CSS ile linkleri simgeleştirmek‘ (iconize textlinks with css) konu başlığını esas alarak başlayalım işe. Orada anlatılan, bir CSS dosyasını siteye entegre ederek, site içerisindeki çeşitli bağlantı türlerine özel resimler atamak (.rar için minik arşiv ikonu, .jpg için minik resim ikonu). Ancak bunun tek eksik yanı, sitedeki harici (external links), yani site dışına çıkan bağlantılara özel resimler atamanın gösterilmemiş olması. Bunun nasıl yapılacağı konusunda küçük bir ‘google araştırması’ yaptım; ancak işe yarar bir şeye rastlamadım.
Bunun üzerine bunun nasıl yapılacağını buldum.

Öncelikle yukarıda bahsettiğim ‘iconize textlinks with css‘ için gerekli dosyaları şuradan indirelim.

Sitemizdeki ve kodları arasına aşağıdaki kodu ekleyerek, indirdiğimiz iconize.css dosyasını siteye entegre edelim.
?

Böylelikle sitemizdeki linklerin yanına bağlantı türlerine göre (.jpg .doc .zip. vs… ikonlar eklenmiş oldu:

Site Dışı Linklere (External Links) İkon Eklemek

Asıl meselemize geldik. Hemen iconize.css dosyamızı bir editör yardımıyla açıyoruz.
?

entry a[href *="sinerjik.org/"] {
background:none;
padding:0;
}

.entry a {
background: url(icons/icon_external.gif) no-repeat center right;
padding:5px 12px 0 0;
}

kodlarını iconize.css dosyası içerisindeki kodların en altına ekliyoruz. Şimdi entry sınıfı içerisindeki sinerjik.org/ ifadesiyle başlayan tüm linklerin background ve padding değerlerini iptal ettik (sinerjik.org/ yerine siteisminiz.com/ gelecek.). Bunu yapınca aynı zamanda diğer bağlantı türlerindeki ikonları da görünmez yapmış olduk. Bunu engellemek için diğer kodların hepsine !important ekleyerek sadece onlara öncelik tanımak.
İşte bir örnek:
?
1
2
3
4
a[href$='.doc'], a[href$='.rtf'] {
padding: 5px 20px 5px 0 !important;
background: transparent url(icons/icon_doc.gif) no-repeat center right !important;
}

Böylelikle siteye hem tüm bağlantı türlerine özel ikonlar ekledik, hem de sitedışı (external) linklere ikon ekleyerek, ziyaretçiyi uyarmış olduk.

kaynak:Sinerjik Günlük | internet kültürü, popüler kültür, web programlama, tasarım

Bütün tarayıcılar için CSS hackleri hileleri

Thu, 28 Oct 2010 01:22:43 +0300

Tarayıcılar arası farklılıkların hepimizi çıldırması konumuzun sadece minik bir bölümü. Asıl bahsetmek istediğim; tüm popüler tarayıcılar için, sadece kullanılan tarayıcıda geçerli sayılacak CSS kodları.

Yani, kullanıcınız Opera kullanıyorsa, sadece Opera tarayıcısı için bir div'in gizlenmesi veya Firefox 1 kullanıyosa, sadece Firefox 1 kullananların görebileceği bir öğenin yüksekliğinin daha fazla olması gibi hacklerden bahsediyor.

Daha iyi anlamak için şöyle bir HTML yapısı kuralım:

Opera 7.2 - 9.5

Safari

Firefox

Firefox 1 - 2

IE 7

IE 6

Daha sonra tüm tarayıcılarda bu elementleri gizleyelim:

Şimdi ise her bir tarayıcı için bu divleri nasıl göstereceğimize geçelim.
Internet Explorer

IE için 2 yöntem bulunuyor, ki bunu IE ızdırabı çeken herkes ezbere biliyordur. Birinci yol, IF cümleleri:

If cümleleri arasına yazılan her türlü HTML kodu sadece IE tarafından görünebilecek ve çalıştırılabilecektir. Ancak bu işlem dışarıdan bağlanmış .css dosyalarına etki etmediği için onlarda şöyle bir method kullanıyoruz:

/* IE 7 */
html > body #ie7
{
*display: block;
}
/* IE 6 */
body #ie6
{
_display: block;
}

Firefox

Genellikle IE dışında bir tarayıcı için bu tür hacklere ihtiyaç duymacak olsak da her ihtimale karşı bahsetmekte fayda var.

/* Firefox 1 - 2 */
body:empty #firefox12
{
display: block;
}
/* Firefox */
@-moz-******** url-prefix()
{
#firefox { display: block; }
}

Kodları yukarıdaki paragrafları FF sürümlerine göre gizli olmaktan çıkaracaktır.
Safari

Safari motoru olan Webkit için geçerli hackler ise şöyle:

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#safari { display: block; }
}

Opera

Opera fanatikleri eminim bu listede Opera'yı görmeselerdi üzüleceklerdi. İşte Opera için geçerli hack. Ancak burada bir sorun var ki, Opera'nın hackinde geçen -min-device-pixel- kodu, bu özelliğin desteklendiği tüm tarayıcılarda görünecek. Yani sadece Opera'ya has olmaktan çıkacak.

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #opera { display: block; }
}

Üşengeçlere tüm kodlar

<**** http-e****="*******-Type" *******="text/html; charset=utf-8">
CSS Browser Hacks

Opera 7.2 - 9.5

Safari

Firefox

Firefox 1 - 2

IE 7

IE 6

Söz konusu hacklerin hepsi [url=http://www.nealgrosskopf.com/tech/thread.asp?pid=20Neal Grosskopf[/url] tarafından toplanmıştır, ben sadece sizlerle payşalan bir aracı oluyorum. Afiyet olsun.

En Çok Aranan CSS Uygulamaları

Wed, 29 Sep 2010 05:04:59 +0300

Web sitelerinde en çok aranan CSS uygulamalarını en basit şekliyle bir araya getiren bu yazı çok işinize yarayacak )

Most used CSS tricks | StylizedWeb.com

Harika Tasarım Örnekleri

Wed, 29 Sep 2010 04:31:43 +0300

Tüm Dünya üzerindeki başarılı tasarımcıların çalışmalarını yayınlayan bu sitede, birbirinden güzel Logo Tasarımları, Karvizit Tasarımları, Flash Web Siteleri ve CSS Web Sitelerini görebilirsiniz.

http://www.faveup.com/

CSS Link Etrafındaki Çerçeveleri İptal Etmek

Tue, 21 Sep 2010 20:15:50 +0300

Herhangi bir linki tıkladığınızda etrafında bir çerçeve (link focus outline) belirdiğini görürsünüz özellikle frame kullanan uygulamalar tasarlıyorsanız yada kullandıysanız bunu kesin fark etmişsinizdir.
Örneğin aşağıdaki gibi:

[URL="http://www.anatasarim.com/wp-*******/uploads/2010/09/css1.png"]
[/URL]
Bunu önlemek için :
a:focus {
outline: none;
}
Yukarıdaki css kodunu sayfanıza ekleyebilirsiniz. Yeni hali de aşağıdaki gibi olacaktır.

CSS kodlamada dikkat edilecek hususlar

Fri, 30 Jul 2010 00:10:24 +0300

Yeni bir proje için bir site hazırlayacaksınız diyelim. İşin kaliteli olmasını istediğiniz için tasarımını bir grafikere çizdirdiniz ve PSD veya PNG olarak grafikerden çalışmayı aldınız. Sırada resim halindeki bu tasarımı kodlamak var. Kodlamak derken öyle veritabanı, PHP / ASP programlamasından bahsetmiyorum. Sadece grafikerden almış olduğunuz resim halindeki tasarımı, web standartlarına (W3C) uygun, tüm tarayıcılarda aynı görünen bir HTML dosyası yapacaksınız. Nelere ihtiyaç duyarsınız, sorunlarla nasıl başedersiniz? Sizin için bu konuda bir harita çıkartayım istedim. Böylece daha projenin başında ihtiyacınız olanları derler ve çalışmanız sırasında arayışa düşmeden, dikkatiniz dağılmadan siteyi tamamlayabilirsiniz.

Gördüğünüz gibi tek bir index.html dosyamız var. Sitenin anasayfasının tüm unsurlarını (başlık, gövde ve alt) aynı dosyada oluşturacağız. Bu tasarımı biçimlendirmemizi sağlayacak yardımcı elemanlar yani resimler, stil dosyaları (CSS), javascript kütüphaneleri ve flash nesneleri resimde görmüş olduğunuz klasörlerde bulunacaklar. Peki neler bulunabilir bu klasörlerde?
CSS

Sitenizin yeni teknolojilere göre kodlanması artık bu zamanda şart oldu. Bu konuda da ilk adım CSS ile kodlamadır. Fakat CSS’in şöyle bir sorunu vardır. Her tarayıcıda aynı göstermek için biraz çaba sarfetmek zorundasınız. Kimisi bunun çok zor olduğunu düşünür fakat aksine temel bazı şeyleri bildikten sonra hiç de öyle korkulacak bir durum değildir.

Öncelikle CSS sıfırlama (reset) ne demek bilmelisiniz.Bunun için şuradan bilgi alabilirsiniz. Kısaca söylemek gerekirse tüm CSS seçicilerinin varsayılan değerlerini sıfırlıyoruz ki tarayıcılar başlangıçta kendi kafalarına göre yorumlamasınlar.

CSS konusunda bilmeniz gereken diğer bir husus clearfix gibi en çok bilinen CSS hileleri hakkında bilgi sahibi olmak. Bu konuyu da işin duayeninden öğrenebilirsiniz: En çok kullandığım CSS Hileleri(Hack).

Son olarak transparan özellikli resimlerin tarayıcılarda çıkardığı sorunları gidermeniz lazım. Bunun da oldukça basit ve etkili bir çözümünü PNG ve IE Transparanlık Sorunu adlı makalede bulabilirsiniz.

35 farklı tooltips

Thu, 29 Jul 2010 04:31:38 +0300

Site tasarlarken görselliğinin yanında sitenin işlevsel olması da çok önemlidir.

Ben bu durumu restaurantlardaki yemeklere benzetiyorum. Dışardan bakıldığında yemek harika görünür ancak yemeği taddığınızda yüzünüzün ekşidiği olur kimi zaman.Bir usta için hiç te istenilen bir durum değildir.

O zaman tadı ve görüntüsü iyi yemekler veya tasarımı ve işlevselliği iyi olan siteler yapmak için bu adrese tıklayın.

CSS Menüler

Fri, 30 Apr 2010 14:08:10 +0300

Jquery, CSS, MooTools ve JS ile hazırlanmış, tasarımlarınızda kolayca kullanabileceğiniz veya modifiye ederek yeni stiller ortaya çıkarabileceğiniz navigasyon örnekleri.

Aşağıdaki web adresinden daha fazlasına erişebilirsiniz...

300+ Jquery, CSS, MooTools and JS navigation menus | Graphic and Web Design Blog

CSS Galerileri

Wed, 21 Jan 2009 03:18:18 +0200

Günümüzde CSS’in geçerliliği artık tartışılmaz hale geldi. Bu sebeple de CSS’e verilen önem arttı ve insanlar sitelerini artık CSS tabanına oturtarak kodlamaya başladılar. Bunun sonucunda ne mi oldu? Çok kaliteli ve görsel olarak zengin websiteleri ortaya çıktı. Bu websitelerini internette tek tek arayıp bulmaya gerek de kalmadı. Çünkü bizim yerimize bunları biraraya toplayarak galeri şeklinde bize sunan siteler mevcut.

İşte size ilham alabileceğiniz (ingilizcede böyle geçiyor yani inspiration) sitelerin bulunduğu galeriler.

Kaynak: http://www.tonyyoo.com/protolize/

CSS'te Tekil Seçiciler

Wed, 29 Oct 2008 23:24:25 +0200

Tekil Seçiciler(Id Selector)

Tekil Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemana atanırken Tekil Seçicisi sadece bir tane elemana atanır. Tekil seçiciler tanımlanırken adının basına #(diyez) isareti konulur.

Örnek yapalım:

[html] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
CSS'in yapısı

Bu yazının Artalan rengi mavi

Bu yazının Artalan rengi kırmızı

[/html]

Sınıf(Çogul) mı? Tekil mi?

Yukarıda Tekil Seçicisi için her ne kadar da bir sayfada sadece bir defa kullanılır diye tanımlasak de kodlamacının sayfada birçok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez.

Ancak Bu elemanları DOM(Belge Nesne Modeli) betiklerinde kullanırken id atamasını bir kaç yerde yaptıgımızda hata meydana gelecektir. Bu nedenle her ne kadar tarayıcılar izin verse de Tekil Seçicicilerini sayfalarımızda bir kez kullanmalıyız. Birden fazla kullanacagımız elemanlar için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanıslı ve temiz yapacaktır.Sınıf ve Tekil Seçicileri küçük-büyük harfe karsı duyarlıdır;

[html]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8" />
CSS'in yapısı

Uygulama olmaz .

[/html]

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıstır. Bazı eski tarayıcılar bu kuralın dısında kalabilir.

CSS'te Seçiciler !!! Lütfen okuyunuz...

Wed, 29 Oct 2008 23:07:32 +0200

Seçiciler Sınıf Seçicisi ve Tekil Seçicisi olarak ikiye ayrılır. CSS ile kod yazmaya baslarken bir plan yaparak hangi etikete Sınıf Seçicisi veya Tekil Seçicisi olacagını planlamalıyız. Zamanla bu ayrımı kodu yazarken yapmaya alısacagız.

Sınıf Seçicisi(Class Selector)

Aynı HTML elemanına farklı özellikler atamak için Sınıf Seçicisini kullanırız.

Şekil ; Sınıf seçicilerin yapısı

Bir örnek verecek olursak; hazırlayacagımız dokümanda iki adet paragraf
tanımlaması yapacagımızı planlıyoruz. Bunlardan biri saga dayalı, digeri
ise ortalı olmasını istiyoruz.

[B]Örnek:[/B]

[html] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8" />
CSS'in yapısı

Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nunc posuere odio at mi. Sed vel massa vitae massa eleifend pulvinar.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Quisque gravida odio ut nulla. Mauris tincidunt adipiscing
3. Seçiciler 26
tellus. Nullam porta, nunc in suscipit ultrices, erat odio vehicula ligula, ut
pellentesque velit sapien in dolor. Vestibulum convallis sapien eget dolor.
Duis eget massa et nisi blandit sagittis. Curabitur pretium erat volutpat
lacus. Phasellus consequat. Nulla bibendum laoreet libero.

Curabitur luctus pellentesque lacus. Proin nisl lorem,
vestibulum a, varius auctor, condimentum non, arcu. Sed at purus. Nullam
volutpat libero ac enim. Vestibulum luctus neque ut eros. Proin vulputate.
Mauris id lectus. Nunc ut diam ut tellus lacinia pulvinar. Maecenas
commodo nisi vitae arcu. Vivamus ac metus sodales lorem sollicitudin
fringilla. Phasellus sodales. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.

[/html]

Birde önemli bir tanımlama yapacagınızı düsünün, ancak sadece bir HTML elemanına degil istediginiz sayıda HTML elemanında bunu kullanmak istersek;

[html]
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8" />
3. Seçiciler 27
CSS'in yapısı

Burada bir seyler yazar

Burada da baska bir seyler yazar

[/html]

Bu tanımlamayı yaptıktan sonra istedigimiz her HTML elemanına bu sınıfı uygulayabiliriz.

Çoklu sınıflar , birden fazla sınıfı bir HTML elemanına uygulamak için kullanılır.

[B]Örnek;[/B]

[html] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
3. Seçiciler 28
/>
CSS'in yapısı

Dikkat:

Ülkemizde meydana gelen trafik kazalarının
yaklasık % 90'ı insanların hataları sonucu meydana gelmektedir.

[/html]

Yukarıdaki örnekte görüldügü gibi bir uyari sınıfımız birde onemli sınıfımız mevcut. Bazı metinlerin önemli uyarı olacagı düsüncesi ile böyle bir atama yapılabilir.

onemli metinler için kalın, uyari için yazının seklini egik olarak belirliyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS seçicisinde “.onemli .uyari” seklinde yazıyoruz.

CSSâi Web Dokümanlarına Eklemek

Wed, 29 Oct 2008 22:41:19 +0200

CSS’i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.

1.4.1. Kod içinde (In-line)

Direk olarak (X)HTML elemanın içine style özelligi kullanılarak uygulamak.

Deneme yazımız

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama
sekli degildir. Ancak özel durumlarda kullanılabilir.

1.4.2.
[/html]Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

1.4.3. Harici CSS Dosyası Kullanımı

Bu metot da CSS kodlarımızı .css uzantılı bir dosyaya kaydederiz.
[COLOR=Green]
ornek.css

[html]p {
color: red;
}
a {
color: blue;
}[/html]Daha sonra bu kodu gereken sayfalarımıza uygularız.

[html] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
CSS’i Uygulamak

[/html]Bu yöntemin digerlerine göre en büyük avantajı bir kere yazılan kod lazım
olan tüm sayfalara eklenebilmesidir.Bu sayede harici eklenen css kodu bir
kere yüklendikten sonra diger kullandıgımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.

1.4.4. @import ile Eklemek

3üncü yöntem ile kullanımı benzerdir.

[html] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<**** http-e****="*******-Type" *******="text/html; charset=utf-8"
/>
CSS’i Uygulamak

[/html]Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından
görüntülenemeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca CSS dosyalarımızda @import özelligini kullanarak devamlı kullandıgımız kodları css dosyamıza harici olarak ekleyebiliriz böylelikle tekrarlardan kurtulmus oluruz.

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metotlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.Ayrıca içerigi büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfada kodun bir kısmında yaptıgımız degisiklik için tüm css kodu incelenip degistirtmesi gerekmez ve kod yönetimi kolaylasır.

CSS Editörleri

Wed, 29 Oct 2008 22:32:23 +0200

HTML yazarken ihtiyacımız oldugu gibi CSS yazarken de bir yazım aracına,editöre ihtiyacımız olacaktır. Burada sizlere basit editörlerden profesyonel editörlere bir liste sunacagız.Eger ben bu is için ayrıca bir program kurmak istemiyorum. Zaten o kadar da kullanmıyorum. Ayrıca böyle hızlı oluyor diyorsanız. İste size CSS yazabileceginiz editörler.

Â· Windows için NotePad veya WordPad
Â· MacOs için TextEdit
Â· Linux için vi, vim veya emacs

Ancak sunu da belirtmeliyim ki bu editörlerden fazla bir özellik ve
islevsellik beklemeyin.

İsin aslı birçok kullanıcı CSS yazmak için bu editörleri tercih etmektedir.
Web kodlamacıları için gereken tüm araçları içermeleri, CSS kodlama da
yardımcı özellikleri, kod düzeltme gibi birçok özelligi barındırmalarından
dolayı çogu web kodlamacısı bu editörleri tercih etmektedir.

Windows için Microsoft FrontPage
http://www.microsoft.com/frontpage/

Windows ve Mac OS X Macromedia Dreamweaver
http://www.macromedia.com/software/dreamweaver/

Windows için CoffeeCup HTML Editor
http://www.coffeecup.com/editor/

Mac OS X için BBEdit
http://www.barebones.com/products/bbedit/

Son olarak Microsft’un yeni gözdesi MicrosoftÂ® Expression
http://www.microsoft.com/products/expression/

Ben Adobe Dreamweaver CS3 kullanıyorum...

Ayrıca Crimson Editor, Notepad 2, Aptana, Notepad++, e-texteditor diger
öneriler.

FireBug: Editörlerden daha önemli bir aracı sizlere siddetle öneriyorum.
Firefox, Safari ve Internet Explorer’a eklenebilen çok mükemmel bir araç
FireBug(http://www.getfirebug.com/).

Araç size sitelerinize tarayıcı üzerinden tam hâkimiyet saglıyor. Anlık olarak degisiklik yapıp degisikliginizi sonucu görebiliyorsunuz.

Gelismis Javascript hata ayıklama özelligi, site bilesenlerinin performansa etkisi ve birçok özelligi ile web kodlamacısı olacak her kesin mutlaka kullanması gereken bir araç.

CSSâin Yapısı

Sun, 17 Aug 2008 03:12:20 +0300

CSS’in Yapısı

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Not
XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.
Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden
” : ” iki nokta üstüste ile ayrılır.

h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)
Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {font-family: Arial;}

Not
CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır,
” * ” ile gösterilir.
* {color: red;}
tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.
Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.
Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {text-align: right}
p.ortala {text-align: center}

Bu Seçicileri sayfamızda uygulamak için;

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.
Yukarıdaki bilgiyi dikkatlice okumalısınız

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

.ortala {text-align: center}

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

Burada birşeyler yazar
Burada da başka bişeyler yazar

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

Ã?lkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.

Yukarıdaki örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

.onemli {font-weight: bold;}
.uyari {font-style: italic;}
.onemli.uyari {background: silver;}

onemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.
Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

…
#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}
…
Bu yazının arkafon rengi mavi
Bu yazının arkafon rengi kırmızı

Sınıf mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.
Bu kodumuzu daha kullanışlı ve temiz yapacaktır.
Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

p.onemliBilgi {font-weight: bold;}

ve kullanımıda;

Uygulama olmaz .

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.