Web Geliştirme Eğitimi Dersleri, 004

CSS Selektörleri

Nokta

• class’ları ifade için kullanılır.

1. .box { } /* class’ı box olan elementler */
2. div.news { } /* class’ı news olan divler */

Diyez

• id’leri ifade için kullanılır.

1. #box { } /* id’si box olan element */
2. div#box { } /* id’si box olan div */

HTML TAG

• Tag’i modifiye etmek içindir.

1. body { background-color: red; }
2. div { overflow: hidden; } /* tüm div elementleri etkilenir. */
3. p { text-decoration: underline; } /* tüm p elementleri etkilenir. */

CSS 2.1 Selektörleri

*	Universal Selector
div	Tag ( Element ) ile ifade.
div p	div’in içindeki p’ler ** aynı	Descendant selectors
div > p	div’in child’ı olan p’ler ** aynı	Child Selectors
p:first-child	p’nin içinde olduğu elemana göre, p eğer first-child ise	The :first-child pseudo-class
a:link a:visited	anchor ( a yada link ) için geçerlidir
E:active E:hover E:focus	Farklı olaylar ve elementler için geçerlidir.
E:lang(c)	Henüz tam desteklenmiyor.
h1 + p	p’den önce h1 olursa ( p’yi takip eden h1 )	Adjacent sibling selectors
input[maxlength]	attribute’ları içinde, maxlength olan input’lar.	Attribute selectors
input[type="submit"]	input’lar içinde, attribute’u type olan ve type’ın value’su submit olanlar.	Attribute selectors
input[class~="warning"]	class attribute’u bulunan input’un, eğer class="warning text hede" ise, içlerinden en azından warning olanı yakalar. class tanımlarken, bir elemente birden fazla class verebiliriz. class="c1 c2 c3" gibi.
E[lang|="en"]	Henüz tam desteklenmiyor.
div.warning	class’ı warning olan div’ler
div#myid	id’si myid olan div.

Shorthand’lere Devam

font:

• font-style:
• font-variant:
• font-weight:
• font-size:
• line-height:
• font-family:

margin:

Saat yönünde çalışır : YUKARI ( margin-top: ) , SAĞA ( margin-right: ) , AŞŞAĞI ( margin-bottom: ) , SOLA ( margin-left: )

1 ile 4 arasında parametre alır.

1. .box
2. {
3.  margin: 0px auto;
4.  /* top = 0px , right = auto , bottom = 0px , left = auto */
5.  /* sol ve sağ ( left - right ) auto demek; elementi center etmektir. */
6. }

padding:

Saat yönünde çalışır : YUKARI ( padding-top: ) , SAĞA ( padding-right: ) , AŞŞAĞI ( padding-bottom: ) , SOLA ( padding-left: )

Aynen margin: gibi çalışır.

Sayı Sistemleri

10’lu Sistem

0-9 sayılardan oluşan günlük hayatta kullandığımız sistem.

2’li Sistem ( Binary )

Bilgisayar’ın çalıştığı en temel sistemdir. 1 ve 0’lardan oluşur.

Binary : 100
         |||_ 0 * ( 2^0 ) =  0
         ||__ 0 * ( 2^1 ) =  0
         |___ 1 * ( 2^2 ) =  4
                           +---
                             4 ( Bildiğimiz 10’lu sistemdeki karşılığı )

16’lı Sistem ( Hexdecimal )

Bilgisayar dünyası için önemli bir sistemdir. Sayılar 0 - F arasından oluşur.

0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

Önce gerekli değeri buluruz. FF ise sayımız, Her F aslında 15’dir bizim için.

Hex : FF
      ||_ 15 * ( 16^0 ) =   15
      |__ 15 * ( 16^1 ) =  240
                          +--- 
                           255 ( Bildiğimiz 10’lu sistemdeki karşılığı )