IE6-9 için linear-gradient Renk Tanımlama Sorunu

Bildiğiniz gibi css3 ile birlikte linear-gradient özelliği geldi. Ancak css3 özelliği olduğundan IE6-9 için kullanabilmek adına filterözelliğine başvuruyoruz.. Ve burada ise ilginç şekilde bir renk tanımlama sorunu oluşuyor..

Sorun: Renk tanımlamalarında kısa renk tanımı kullanamıyoruz.. Örneğin #333333 olan renk kodunu #333 şeklinde yaptığımızda da aynı mantığa geliyor ancak bunu filter için uygulayamıyoruz, aksi taktirde başka bir renk ortaya çıkıyor..

Örnek;

<style type="text/css">
a {
	text-decoration: none;
	font: 14px Arial;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	border-radius: 3px;
	border: 2px solid #444;
	background: #333; /* eski tarayıcılar için */
	background: -moz-linear-gradient(top, #333 0%, #9999 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #999)); 
	background: -webkit-linear-gradient(top, #333 0%, #999 100%);
	background: -o-linear-gradient(top, #333 0%, #999 100%);
	background: -ms-linear-gradient(top, #333 0%, #999 100%);
	background: linear-gradient(to bottom, #333 0%, #999 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );
}
</style>
<a href="#">erbilen.net</a>

Burada #333 ve #999 renk değerlerinin her ikisinide kısa tanım olarak kullandık.. Örneğin chrome’da şöyle gözükmekte;

Normal şartlarda da olması gereken görüntü bu.. Ancak birde buna IE6-9 arasında bakalım.. Sonuç;

Çözüm: yapmamız gereken #333 ve #999 değerlerini uzun haliyle yazmak.. Ancak sadece filter için;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#999',GradientType=0 );

yerine;

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#999999',GradientType=0 );

yazmak olacak  Şimdilik bu sorununda üstesinden gelmiş olduk.

 

CSS Charset Tanımında Internet Explorer 8 Hatası

Bugün bir kez daha internet explorer tarayıcısının ne denli ilginç olduğuna şahit oldum.. Olayımız şöyle.. Bildiğiniz gibi css’de karakter tanımlamasını şöyle yapıyoruz;

@charset "utf8";

/* diğer css kodları */

Ancak ilginç bir şekilde IE8′de bu şekilde bir tanımda css dosyası okunmuyor.. Sebebi ise çift tırnak kullanmış olmamız.. Yani şöyle yazarsak bir sorun yok;

@charset 'utf8';

/* diğer css kodları */

Ancak diğer türlü css okunmuyor.. Aslında biraz kurcaladıktan sonra daha da ilginç bir şey gördüm.. Buda eğer çift tırnak yazmakta ısrarcıysanız öncesine bir açıklama satırı eklemeniz olacak.. Eğer açıklama satırı var ise çift tırnaklı olsa bile css’i okumaya devam ediyor.. Yani;

/* ah IE ah */
@charset "utf8";

/* diğer css kodları */

bu şekilde de sorun olmadan css’i okuyor. Evet, böyle bir ilginçlik ile karşılaşırsanız buna bakmayı ihmal etmeyin!

 

CSS ile Yazı Seçimini Engellemek (user-select)

Eğer touch ekranlar için CSS kodlaması yapıyorsanız, böyle bir sorunla karşılaşabilirsiniz.. Özellikle makinalar dandik ve kullanan kişilerde bu işi bilmeyenlerden ise gereksiz tıklamalar ile nesne içerisindeki değerleri seçeceklerdir.. Bunun olmasını önlemek için CSS imdadımıza yetişiyor.. Tüm modern tarayıcılarda ve IE10 olmak üzere ön ekler ile birlikte kullanıldığında herhangi bir sorunla karşılaşmıyorsunuz.. Bu işlem için user-select değerini none yapmamız yeterli.

Tüm elemanlara uygulamak için gerekli CSS kodu;

*:not(input):not(textarea) {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

Ya da bazı belli başlı elemanlara uygulamak için onlara unselectable adında bir sınıf atayabilir ve bu sınıf için bu kod tanımlamalarını yapabilirsiniz;

.unselectable {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none
}

IE9 ve Altı İçin Çözüm

CSS ile bir çözümünü bulamadım.. Ancak html niteliği ve javascript ile çözümleri mevcut.. Seçilemez olmasını istediğiniz nesneye unselectable=”on” eklemeniz yeterli olacaktır.

<div unselectable="on">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>

Ya da javascript ile yapmak istersek setAttribute() ile niteliği ekleyebiliriz.

<div id="nesne">
bu yazı artık ie9 ve altı için seçilemez hale geldi!
</div>
<script type="text/javascript">
document.getElementById("nesne").setAttribute("unselectable", "on");
</script>

Evet işte bu kadar, artık nesneler içerisindeki yazılar seçilemez oldu 

Demo

http://www.uzmancevap.org/preview.php?rand=bc9e0|onizleme

 

IE7′de Overflow Hidden Sorunu

Bu sorunla bir çok kez karşılaştım.. Hep bir şekilde çözdüm ancak sorunun tam olarak neden kaynaklandığını ve nasıl çözdüğümü bir türlü bulamıyordum.. Neyse ki bu gece buna bir son verdim ve adam akıllı sorunu anladım, çözdüm ve mutluyum Şimdi bu sorun nasıl oluşuyor önce ondan bahseseyim..

Sorun nasıl oluşuyor?

Normal şartlarda kapsayıcı nesneye overflow: hidden verdiğinizde belirlediğimiz genişlik ve yükseklikten taşan her şeyi gizlemesi gerekir.. Bir yere kadar bu şekilde gizleniyor.. Ancak kapsayıcı nesne içindeki nesnelerden herhangi bir tanesine position tanımı yapılırsa.. İşte o zaman işin rengi değişiyor! O zaman taşınca gizlemesi gereken ie, gizlemekten vazgeçiyor.. Bu sorun IE7 ve muhtemelen alt sürümleri için geçerli.. IE8‘de böyle bir sorun yok.

Çözümü nedir?

Çözümü basit, overflow: hidden verdiğimiz kapsayıcı dive birde position: relative tanımı yapmamız yeterli.. Böylece taşan position tanımlı bir nesne bile olsa gizlenecektir. Kısaca şöyle bir kod yapımız olduğunu düşünürsek;

<div>
    <div></div>
</div>

Bunun ie7 ve alt sürümlerinde gizlenmeyen css kodları şöyledir;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve çözümü ise .box_container’a position: relative tanımını yapmaktır. Yani;

.box_container {
    width: 300px;
    height: 100px;
    overflow: hidden;
    border: 1px solid green;
    position: relative
}
.box {
    width: 100px;
    height: 200px;
    border: 1px solid red
}

Ve işte hepsi bu kadar! ie7 ve alt sürümlerinde çalışan demosuna aşağıdan ulaşabilirsiniz..

 

IE7′de Display Inline-Block Hatası

Eğer ie7 uyumlu tasarımlar döktüyseniz bazen blok seviyesinden elemanları float yerine display özelliğini inline-block yaparak yan yana getirmek istemişsinizdir.. Ancak fark edeceğiniz üzere ne yazık ki doğrudan display: inline-block; ie7′de işlevini yerine getirmiyor.. Ancak bu sorunu aşmanın kolay bir yolu var.. Kısaca eğer inline-block uygulayacaksanız ie7 uyumlu hali şöyledir;

ul.tab li {
    display: inline-block;
    *display: inline;
    zoom: 1
}

Ve işte hepsi bu kadar, artık ie7 uyumlu hale geldi.

 

CSS: Seçiciler (31 ~ 41)

 

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

 

31) X:focus
32) X:active
33) X:lang(Y)
34) :root
35) X:empty
36) X:target
37) X:enabled
38) X:disabled
39) X:valid
40) X:invalid
41) ::selection

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(21~30) Seçicilerine ulaşmak için tıklayın.

31) X:focus

Seçilen X nesnesine odaklandığında işlem yapmak için kullanılır.

/*
 * Input nesnesine odaklandığında
 * arkaplan regini sarı yapar
 */
input:focus {
    background-color: yellow
}

Tarayıcı Desteği

 

IE8+, Firefox, Chrome, Safari, Opera

 

32) X:active

Aktif olan X nesnelerini seçmek için kullanılır.

/*
 * Linkle tıklandığında
 * arkaplan regini sarı yapar
 */
a:active {
    background-color: yellow
}

Tarayıcı Desteği

 

IE5+, Firefox, Chrome, Safari, Opera

Not: IE5-IE7 sürümlerinde çalışıyor ancak sadece link nesnesi için çalışıyor.

33) X:lang(Y)

X nesnelerinde lang niteliği Y ile başlayanları seçmek için kullanılır.

/*
 * p nesnelerinde lang niteliği tr ile başlayanları
 * seçer ve arkaplan rengini kırmızı yapar
 */
p:lang(tr) {
    background-color: red
}

Tarayıcı Desteği

 

IE8+, Firefox, Chrome, Safari, Opera

 

34) :root

Bu seçici &lthtml> etiketi üzerinde işlem yapmamızı sağlar. Kısaca ana nesneyi seçmek için kullanılır.

/*
 * sayfanın arkaplan rengini
 * kırmızı yapar
 */
:root {
    background-color: red
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

35) X:empty

Hiçbir nesne ve karakter bulundurmayan X nesnelerini seçmek için kullanılır.

/*
 * İçerisinde hiçbir nesne, karakter olmayan
 * divleri seçer ve yükseklik vererek
 * arkplan rengini sarı yapar
 */
div:empty {
    height: 30px;
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

36) X:target

Hedef olan X nesnelerini seçmek için kullanılır.

/*
 * id'si test olan div nesnesi hedeflendiğinde
 * arkplan rengini sarı renk yapar
 */
#test:target {
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

37) X:enabled

X form nesnelerinde seçilebilir/yazılabilir olanları seçmek için kullanılır.

/*
 * input nesnelerinde seçilebilir olanların
 * sonrasında gelen labellere arkaplan uygular
 */
input:enabled + label {
    background-color: #eee
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

38) X:disabled

X form nesnelerinde pasif (işlem yapılamaz) olanları seçmek için kullanılır.

/*
 * Pasif olan input nesnelerinden sonra gelen label
 * nesnelerini seçer ve arkaplan rengini kırmızı yapar
 */
input:disabled + label {
    background-color: red
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

39) X:valid

X nesnelerinde istenilen formata uyan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçerli formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:valid {
    background-color: green
}

Tarayıcı Desteği

 

IE10+, Firefox, Chrome, Safari, Opera

 

40) X:invalid

X nesnelerinde istenilen formata uymayan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)

/*
 * Geçersiz formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:invalid {
    background-color: red
}

Tarayıcı Desteği

 

IE10+, Firefox, Chrome, Safari, Opera

 

41) ::selection

Seçilen ifadelerin (arkplan ve yazı renginde) değişiklik yapmak için kullanılır.

/*
 * p nesnelerinde seçilen yazıların
 * arkaplan rengini değiştirir
 */
p::selection {
    background-color: yellow
}
/* firefox için (-moz) ön eki gereklidir */
p::-moz-selection {
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox (-moz), Chrome, Safari, Opera

 

CSS: Seçiciler (21 ~ 30)

 

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

 

21) X:nth-child(n)
22) X:nth-last-child(n)
23) X:nth-of-type(n)
24) X:nth-last-of-type(n)
25) X:only-child
26) X:only-of-type
27) X:first-child
28) X:last-child
29) X:first-of-type
30) X:last-of-type

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

21) X:nth-child(n)

X nesneleri içerisinde N.yi seçer.

/*
 * Li nesneleri içinde ikincisini
 * seçer ve regini kırmızı yapar
 */
ul li:nth-child(2) {
    color: red
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5+, Chrome, Safari, Opera

 

22) X:nth-last-child(n)

X nesneleri içerisinde sondan N.yi seçer.

/*
 * Li nesneleri içinde sondan 1.yi
 * seçer ve regini mavi yapar
 */
ul li:nth-last-child(2) {
    color: blue
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5+, Chrome, Safari, Opera

 

23) X:nth-of-type(n)

X nesnelerinde n.yi seçmek için kullanılır. :nth-child’dan farkını öğrenmek için videoya göz atın.

/*
 * Div içerisindeki 2. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-of-type(2){
    color: red
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5+, Chrome, Safari, Opera

 

24) X:nth-last-of-type(n)

:nth-of-type ile aynıdır.. Tek farkı sondan başlayarak nesneleri seçmesidir..

/*
 * Div içerisindeki sondan 1. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-last-of-type(2){
    color: red
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5+, Chrome, Safari, Opera

 

25) X:only-child

X nesnesi sadece bir tane olanları seçer.. Ancak onun dışında farklı bir nesne bile olmaması gerekir.. Yoksa seçmeyecektir.

/*
 * div içinde bir tane p etiketi (tek nesne) var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-child {
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

26) X:only-of-type

 nly-child seçicisinin aksine, X nesnesi sadece bir tane olan nesneleri seçer.. Farklı nesnelerin olması bu durumu etkilemez..

/*
 * div içinde bir tane p etiketi var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-of-type {
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5+, Chrome, Safari, Opera

 

27) X:first-child

İlk X nesnesini seçmek için kullanılır.

/*
 * İlk li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:first-child {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

28) X:last-child

Son X nesnesini seçmek için kullanılır.

/*
 * Son li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:last-child {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

29) X:first-of-type

İlk X nesnesini seçmek için kullanılır. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesneyi seçer.

/*
 * Divler içinde ilk p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:first-of-type {
    color: red
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5, Chrome, Safari, Opera

 

30) X:last-of-type

Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farklı olarak, tipi eşleşen son nesneyi seçer.

/*
 * Divler içinde son p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:last-of-type {
    color: red
}

Tarayıcı Desteği

 

IE9+, Firefox 3.5, Chrome, Safari, Opera

 

CSS: Seçiciler (11 ~ 20)

 

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

 

11) X[Y=’Z’]
12) X[Y*=’Z’]
13) X[Y^=’Z’]
14) X[Y$=’Z’]
15) X[Y~=’Z’]
16) X:checked
17) X::before ve X::after
18) X:hover
19) X:not(Y)
20) X::first-letter ve X::first-line

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.

/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.

/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.

/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.

/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.

/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

Tarayıcı Desteği

 

IE8+, Firefox, Chrome, Safari, Opera

 

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.

/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

Tarayıcı Desteği

 

IE9+, Firefox, Chrome, Safari, Opera

 

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.

/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

CSS: Seçiciler (1 ~ 10)

 

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

 

1) * (Evrensel Seçici)
2) #X (ID “Tekil” Seçici)
3) .X (Sınıf Seçici)
4) X Y (Torun Seçici)
5) X (Basit Seçici)
6) X:link ve X:visited (Sözde Sınıf Seçicileri)
7) X + Y (Bitişik Seçici)
8) X > Y (Çocuk Seçici)
9) X ~ Y
10) X[Y] (Nitelik Seçici)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır.

/*
 * tüm nesneleri seçer ve rengini kırmızı yapar
 */
* {
     color: red
}

.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..

/*
 * divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.erbilen * {
     text-decoration: underline
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#erbilen {
     color: red
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
 */
a.erbilen {
     color: blue
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.

/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

Tarayıcı Desteği

 

IE6+, Firefox, Chrome, Safari, Opera

 

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visited seçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.

/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.

/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.

/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

Tarayıcı Desteği

 

IE7+, Firefox, Chrome, Safari, Opera

 

CSS: Giriş

 

İlk CSS derslerimi 2011 yılında 14 bölümlük bir seri halinde hazırlamıştım.. Ancak aradan uzun bir zaman geçti ve bir çok şey gelişti, değişti.. Bu sebepten dolayı dersleri yeniden çekmeye karar verdim.. Bu ilk dersimizde ise aşağıdaki sorulara cevap bulacağız;

 

CSS Nedir?
CSS Dosyası Nasıl Oluşturulur?
CSS Dosyası HTML Sayfasına Nasıl Çağrılır?
HTML Sayfasında Inline CSS Nasıl Yazılır?
CSS’in Genel Yapısı
CSS’de Açıklama Satırı
CSS Hataları Hakkında

CSS Nedir?

Cascading Style Sheets’in baş harflerinden oluşan CSS, stil şablonları olarak tanımlanabilir. Kısaca html sayfamızda düzeni sağlamak için kullanabileceğimiz bir teknolojidir.

CSS Dosyası Nasıl Oluşturulur?

Css dosyalarının uzantıları .css olmak zorundadır.. Adının herhangi bir önemi yoktur, önemli olan uzantısıdır.. Herhangi bir metin editörü yardımı ile kolayca bir css dosyası oluşturulabilir. Ya da elle oluşturmak isterseniz bir metin belgesi oluşturup adınıstyle.css olarak değiştirmeniz yeterlidir.

CSS Dosyası HTML Sayfasına Nasıl Çağrılır?

Oluşturduğumuz CSS dosyalarını HTML sayfamıza çağırmanın 2 farklı yolu vardır.. 1. yol link etiketini kullanmak, 2. yol ise style etiketini kullanarak import ile çağırmaktır.

Link ile Çağırma

Head etiketleri arasında aşağıdaki gibi tanımlanır;

<link rel="stylesheet" type="text/css" href="style.css" />

href : stil dosyasının yoludur.

@import ile Çağırma

Head ya da body etikerleri arasında aşağıdaki gibi tanımlanır ve çağırılır;

<style type="text/css">
@import "style.css";
@import url("style2.css");
</style>

Not: @import işleminden önce herhangi bir CSS kodu olmamalıdır aksi halde import işlemi çalışmaz.

HTML Sayfasında Inline CSS Nasıl Yazılır?

Bunun içinde ya style etiketi kullanılır ya da style niteliği kullanılır.. Genel kapsamda stil kodu yazmak için etiketi, sadece bir nesneye uygulamak için ise niteliği kullanabiliriz.

<style type="text/css">
h1 { color: red }
</style>

ya da ..

<h1 style="color: blue">erbilen.net</h1>

CSS’in Genel Yapısı

Bunu daha iyi anlayabilmeniz için bir görsel hazırladım.. Resim zaten her şeyi basitçe açıklamaktadır.. Daha ayrıntılı bilgi için videoya göz atabilirsiniz;

CSS’de Açıklama Satırı

Ve tabi ki CSS’te de açıklama satırı mevcuttur  Tarayıcı bunu dikkate almaz, sadece sizin için bir önemi vardır.. Ve aşağıdaki şekilde tanımlanır;

/*
   bu bir açıklama satırıdır
   http://www.erbilen.net
*/