CSS DERS 2:Seçiciler

HTML içinde bölüm oluĢturma (DIV)
DHTML‘i bir teknikler demeti olarak ele alırsak, ilk
tekniğimiz, sayfamıza ne metin, ne grafik, ne tablo ve ne
de çerçeve sayılmayan, ama içinde bunların tümüne de
yer verebileceğiniz bölüm kavramına dayanan
<DIV>..</DIV> etiketidir.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
127
<DIV>..</DIV> etiketleri arasında yer alan her Ģey, yani
yazılar, resimler, grafikler, tablolar, video vs içerikler, bu
etikete vereceğiniz yerleĢtirme ve değiĢme özelliklerine
uygun hareket ederler.
<div> etiketi ile belgede bölümler oluĢturulabilir. <div>
etiketi için herhangi bir stil özelliği belirlendiğinde
<div>..</div> arasına yazılan tüm etiketler bu stilden
etkilenir. AĢağıda oluĢturulan bölümde <div> etiketine
style="color:#FFCC66;" stili uygulandığında <div>
içindeki paragraf ve baĢlık da ilgili renkte (turuncuya
yakın bir renk) görüntülenecektir.
<div style="color:#FF0000;">
<h4>Bölüm içinde bir baĢlık</h4>
<p>Bölüm içinde herhangi bir paragraf</p></div>
CSS ve Seçici(Selector) Kavramı ve Seçici Tipleri
XHTML ve CSS kullanımında Selector kavramı önemli bir
yer tutar. Seçici (selector) demek ―stili belirlenebilen
etiket‖ demektir. 4 tipi vardır, isimlendirilmiĢ, sınıf,
karma ve Ģartlı.
ĠsimlendirilmiĢ Seçiciler
Bu tip seçicilerin kullanımında html içinde etiketten sonra
ID=‖xxx‖ kodlaması yapılır. Bu tip seçici kodlaması # ile
baĢlar.
#mavi { COLOR: blue }
#icerden { text-indent: 2cm }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
128
isimlendirilmiĢ seçicilerdir. BaĢlarındaki ―#‖ iĢareti
onların diğerlerinden farkını göstermektedir. (Bu
iĢaretten sonraki isim bölümü mutlaka harfle
baĢlamalıdır; ama içinde rakam ve kesme çizgisi
kullanılabilir.) Bu seçicilerden HTML‘de yararlanmak için,
adlarıyla çağrılması gerekir. Böylece tanımlı olan isimleri
ile kodlanmıĢ olan biçimlerin uygulanmasını sağlarlar.
<P ID=icerden>Bu paragraf diğerlerine oranla 2 sm
içerden baĢlar<-p>
<P ID=mavi>Bu paragraf mavi olarak gösterilir</p>
Bu seçiciyi kullanırken, aynı etikete iki ayrı kimlik
verilemeyeceğine dikkat edilmelidir. Bunun bize ne
getirip götüreceği konu sonunda detaylıca
anlatılacaktır.
Sınıf Seçiciler
Bunların kodlaması ise . ile baĢlar ve istenildiği takdirde
bir sınıf tanımlanıp bu sınıfın biçimlendirme özelliklerinin
birleĢtirildiği standart html etiketine de
uygulanabilmesini sağlar.
Ġstenildiği kadar Sınıf Seçici oluĢturmak mümkündür.
Örneğin ―kırmızı‖ diye bir sınıf oluĢturup, bu sınıfın font
rengini kırmızı yapıp, dikkat çekmesi gereken kelimeyi,
cümleyi veya paragrafın etiketini bu sınıfa bağlamak
mümkündür. Bu stilin komutu Ģöyle yazılır:
.kirmizi { COLOR: red }
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
129
―Kirmizi‖ kelimesinin baĢındaki nokta iĢaretine dikkat
edilmelidir. Bu iĢaret su sınıfı isimlendirilmiĢ seçicilerden
ayırmaktadır. HTML sayfasında diyelim ki bir baĢlığı
kırmızı yapmak gerekmekte olsun:
<h1 class="kirmizi">Bu baĢlık kırmızı olacak</h1>
Ya da bir paragrafın tümünü kırmızı renkte olacak
denirse:
<P class=.kirmizi>Bu paragrafın tümü kırmızı
gösterilerek, dikkati hemen çekecektir.</p>
Yukardaki kullanım sınıf seçici türünün bağımsız
kullanımına bir örnektir. Diğer bir kullanımıda bir etikete
bağlı olarak kodlandığı aĢağıdaki kullanım Ģeklidir.
h1.kirmizi { COLOR: red }
Yukardaki Ģekilde tanımlanmıĢ bir sınıf seçici görüldüğü
üzere sınırlı kullanıma sahiptir. Bu durumda ―kırmızı‖
sınıfını sadece H1 etiketi ile kullanmak mümkündür.
Sınıf seçiciler HTML içinde bir etiket için birden fazla
olmak üzere kullanılabilirler.
Karma Seçiciler (Pseude Classes)
Bunlara karma denmesinin sebebi: kendi baĢlarına sınıf
gibi göründükleri halde ancak bir etiketin belirli
durumlarına uygulanabilmeleridir. HTML dilinde buna
uygun Ģimdilik iki etiket vardır. <A> ve <P> etiketleri.
A etikeninin üç durumu olabilir ve bunları karma
seçicilere bağlamak mümkündür.
 Link (henüz ziyaret edilmemiĢ olan adres)
 Visited (daha önce ziyaret edilmiĢ adres) ve
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
130
 Active (üzeri tıklandığı anda). ġimdi bu durumlara
uygun üç CSS etiketi yazalım:
A:link { COLOR: Black }
A:active { COLOR: red }
A:visited { COLOR: Gray }
Bu durumda ziyaretçinin ekranında A etiketleri siyah
olarak gösterilecek, kullanıcı herhangi bir bağlantıyı
tıkladığında link metni kırmızı rengini alacak; daha sonra
ilgili sayfaya bir daha gelirse bu kelimeler gri olarak
gösterilecektir.
a:link {
font-family:arial;
font-size:11pt;
color:blue;
text-decoration:none;
}
Sayfamdaki linklerin Yazıtipi
arial, boyutu 11 punto, rengi
mavi olsun ve altı çizili olmasın.
a:hover{
font-family:arial;
font-size:11pt;
color:red;
text-decoration:none;
}
Üzerine gelindiğinde linklerin
Yazıtipi arial,boyutu 11 punto,
rengi kırmızı olsun ve Altı çizili
olmasın.
a:visited{
font-family: arial;
font-size:11pt;
color:grey;
Ziyaret edilen linklerin ise
Yazıtipi arial, boyutu 11 punto,
rengi gri olsun ayrıca altı çizili
olsun.
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
131
textdecoration:
underline;
}
Karma etiketin kullanılabileceği bir diğer durum ise baĢlık
veya metin gibi bir etiketin ilk satırı veya ilk kelimesinin
özelliklerini kontrol eden seçicidir. Örneğin:
P:first-line
{ font-variant: small-caps; font-weight: bold }
P:first-letter
{ font-size: 300%; float: left }
Bu seçicilerle oluĢturulan etiketlere HTML‘in içinde Ģöyle
gönderme yapılır:
<P><P:first-line><P:first-letter>B</P:firstletter>
Bir ağaçta ne kadar çok yaprak varsa o
kadar az meyve olur </P:first-line> Arap
atasözü..... </P>
ġartlı Seçiciler (Contextual Selectors )
Bir HTML etiketinin her zaman değil de belirli bir koĢulda
belirli stiller almasını istediğimizde kullandığımız
Contextual Selectors (ġartlı Seçiciler) grubudur. B (Bold)
etiketi, uygulandığı baĢlık veya paragraf gibi bir etiketi
kalın yaparak belirginleĢtirir. Fakat diyelim ki bu etiketi
paragraf etiketi ile birlikte kullandığımızda iĢaretlenen
yerin siyah, baĢlık etiketiyle kullandığımızda gri
yapmasını istiyoruz. Bunun için CSS bölümünde bu
etiketi P ve H1 bloklarında tanımlarız:
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
132
P { COLOR: black; FONT-FAMILY: 12pt; TEXT-INDENT:
1cm}
P B { COLOR: black}
H1 { COLOR: #008080; FONT-FAMILY: 26 pt serif}
H1 B { COLOR: pink }
Yukardaki tanımlamalara göre HTML kodlanırken H1
etiketi içinde B etiketi kullanılırsa iĢaretlenen kelimeler
pembe, paragraf etiketi içinde B etiketi kullanılır ise
iĢaretlenen kelimeler siyah olacaktır.
Not:
CSS kullanımında isimlendirilmiĢ seçiciler daha çok
<DIV> yada <SPAN> gibi yapılar için, sınıf seçiciler ise
biçimlendirmeler için kullanılırlar. ĠsimlendirilmiĢ
seçicileri etiket baĢına biden fazla kullanmak mümkün
olmadığından bunlarla biçimlendirme yapmak sadece
ekstra iĢ demektir. Bunu basit bir örnekle izah etmeden
farkı anlamak zordur. Biçimlendirme için koyu, italik ve
altı çizili biçimlerine ihtiyacımız olsun. Ancak yazı hem
italik hemde altı çizili olursa diye düĢününerek çok daha
fazla sınıf tanımlamak gerekecektir. Önce bunu
isimlendirilmiĢ seçiciler için düĢünelim.
1. koyu
2. italik
3. altıçizili
4. koyu italik
5. koyu altı çizili
6. italik alt çizili
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
133
7. koyu italik altı çizili
7 seçici olmadan bu iĢi yapmak zor görünüyor çünkü her
etiket için sadece bir isimlendirilmiĢ seçici kullanımına
izin verilmekte. ġimdi ĢimĢekler çaktı sanırım.
Örneği sınıf seçicilerle yapmak için ilk üçü yeterlidir.
Çünkü sınıf seçicileri bir arada kullanmak mümkündür.
Bir Alana Tanımlı Stillerin DıĢında Stil Uygulamak
Herhangi bir <div> bölümünde veya paragrafta
diğerlerinden ayrı stile sahip olması istenen herĢey
<span>...</span> etiketleri içerisine yazılabilir. Bu
etiket Basit HTML dersinde kullanılması artık
desteklenmeyen <font> etiketi yerine kullanılabilir.
<div style="color:#000000;"><h4>Rastgele bir baĢlık
</h4>
<p><span style="color:#cccccc">Bir satır.Ancak rengi
div için tanımlanandan farklı </span> </p>
</div>
CSS Blokları ve Denetlenebilir Özellikler
CSS Biçimlendirme Tablosu
fontfamily
Tahoma, Arial Yazı tipini belirler.(Arial ,
Verdana gibi.)
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
134
font-style Normal
italic
oblique
Yazının normal veya sağa
eğik olmasını sağlar.
fontvariant
Normal
small-caps
Yazının, yazıldığı gibi veya
tümünün büyük harflerden
oluĢmuĢ gibi görünmesini
sağlar. Ġkinci durumda
metnin ilk harfi de boyut
olarak büyük gözükür.
fontweight
Normal
bold
bolder
lighter
100 – 900
Yazının kalınlık-inceliğini
belirler.
font-size Absolute-size (xxsmall
| x-small |
small | medium |
large | x-large
| xx-large)
relative-size
(larger | smaller)
px , pt, %
Yazının büyüklüğünü
METĠN
Word
Spacing
normal |
<boyut:px vb.>
Sözcük aralığı
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
135
Letter
Spacing
normal |
<boyut:px vb.>
Harf aralığı
Text
Decoratio
n
None | underline |
overline | linethrough
| blink
Metin süsleme
Vertical
Alignmen
t
baseline | sub |
super | top | texttop
| middle |
bottom | textbottom
|
Yüzde:200% vb.
Dikey hizalama
Text
Transfor
mation
none | capitalize |
uppercase |
lowercase
Metin dönüĢtürme
Text
Alignmen
t
Left | right |
center | justify
Metin hizalama
Text
Indentati
on
Boyut | Yüzde Metin girintisi
Line
Height
Normal | <sayı> |
<boyut> |
<yüzde>
Satır yüksekliği
RENK VE
ARKAPLA
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
136
N
Color Renk adı veya
RGB değeri (red
veya #FF0000
gibi)
Renk
Backgrou
nd Color
Renk adı | RGB
değeri (red veya
#FF0000 gibi) |
transparent
Arka plan rengi
Backgrou
nd Image
url(images/resima
di.gif)
Arka plana yerleĢtirilecek
resmin adresi
Backgrou
nd
Repeat
repeat | repeat-x |
repeat-y | norepeat
Arka plan resminin hangi
yönde tekrarlanacağını
belirler.
Backgrou
nd
Attachme
nt
scroll | fixed Sayfa kaydırma çubuğuyla
hareket ettirildiğinde
zeminin de hareket edip
etmeyeceğini belirler.
Backgrou
nd
Position
yüzde | boyut |
top | center |
bottom| left |
center | right
Zemindeki resmin sayfa
üzerinde istenilen yere
yerleĢtirilmesini sağlar.
KUTU
ÖZELLĠK
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
137
LERĠ
Magrin Sayısal değer. Nesnenin dıĢındaki nesnelere
olan aralığını belirler.
Padding Sayısal değer. Doldurma
Border
Width
Sayısal değer. Kenarlık geniĢliği (kalınlığı)
Border
Color
Renk adı | RGB
değeri
Kenarlık rengi
Border
Style
none | dotted |
dashed | solid |
double
| groove | ridge |
inset | outset
Kenarlık stili
Border border-width |
border-style |
border-color
Kenarlık kalınlık, style ve
rengi.
Width boyut | yüzde |
auto
GeniĢlik
Height boyut | auto Yükseklik
LĠSTE
ÖZELLĠK
LERĠ
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
138
List Style
Type
disc | circle |
square | decimal |
lower-roman |
upper-roman |
lower-alpha |
upper-alpha |
none
Listenin harflerden mi yoksa
sayılardan mı oluĢacağını
belirler.
List Style
Image
adres | none (liststyle-
image:
url(images/maddei
mi.gif) gibi.)
Liste simgesi olarak resim
kullanılmasını sağlar.
List Style
Position
inside | outside Listenin ilk satırının diğer
satırlar aynı hizada olup
olmayacağını belirler.
List Style list-style-type |
list-style-position|
adres (list-style:
lower-roman
inside gibi.)
 disc (Liste biçiminin disk
(içi dolu daire) Ģeklinde
olmasını sağlar.)
 circle (Liste biçiminin
çember Ģeklinde olmasını
sağlar.)
 square (Liste biçiminin
kare olmasını sağlar.)
 decimal (Liste biçiminin
rakamlardan oluĢmasını
sağlar.)
 lower-roman (Liste
biçiminin i,ii,iii gibi küçük
http://alikoker.name.tr
HTML-CSS–PHP–MYSQL ve SQL Derleme : Ġbrahim Halil Kutluay- 2007-2013
139
roma rakamlarından
oluĢmasını sağlar.)
 upper-roman (Liste
biçiminin I,II,II gibi
büyük roma
rakamlarından oluĢmasını
sağlar.)
 lower-alpha (Liste
biçiminin a,b,c Ģeklinde
küçük harf olmasını
sağlar.)
 upper-alpha (Liste
biçiminin A,B,C Ģeklinde
büyük harf olmasını
sağlar.)
 none (Listenin simgesiz
olmasını sağlar.)