- Katılım
- 23 Ocak 2016
- Konular
- 8,370
- Mesajlar
- 18,384
- Online süresi
- 4mo 19d
- Reaksiyon Skoru
- 4,080
- Altın Konu
- 0
- Başarım Puanı
- 506
- MmoLira
- 24
- DevLira
- 0
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
1. CSS NEDİR?
CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılır.CSS çok kullanışlıdır ve kullanımıda çok kolaydır. Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum. Henüz CSS 'nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır. Bunun için burada size CSS'nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam.
Sakın CSS'nin çok kolay olduğuna aldanmayın. Kolay olmasına rağmen müthiş esnektir.Bu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedir.HTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz. Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir. Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir. Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir. Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir. CSS kullanarak daha bir çok özelliği değiştirebilirsiniz.
2. YAZIM KURALLARI
CSS'nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır. HTML'de bütün stiller <style></style> etiketleri arasında tanımlanır. Stil tanımlarken seçicileri kullanırız. Seçicilerinde çeşitleri vardır ilerede göreceğiz. Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır. Seçicilerin isimler bir rakamla başlıyamazlar. Fakat ilk harften sonra istenirse rakam kullanılabilir. Birde isim seçerken lütfen Türkçe karekter kullanmayın.
.kucukfont { font-size : small }
| | |__ deger
| |
| |__değiştirilmek istenen özellik
|
|___ seçicinin isimi
Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam. Bir köşeli parantezin içinde birden çok özellik tanımlanabilir. Fakat bu özellikleri aralarına noktalı virgül";" konularak birbirlerinden ayırmanız gerekir.
h1 { font-family : arial ; font-size : small }
Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz. şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza.
3. HTML'YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML'ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam. Stiller HTML'ye üç değişik şekilde eklenebilirler.
3.1. Local Bağlama
Local bağlamayı kullanarak yanlızca HTML'nin içinde kullanılan etiketleri (örneğin H1,A,P...) ve sadece olduğu yerde özelliklerini değiştirebiliriz. Fakat bunu fazla kullanacağınızı zannetmiyorum. Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir.
<html>
<head><title> SAU WEB GROUP - - - [ CSS ] - - - </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= "font-family : arial; color : blue"> CSS Kullanımına Örnek </h3>
</body>
</html>
CSS Kullanımına Örnek
CSS Kullanımına Örnek
Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş olduk.Bunlar font renginin mavi olması ve fontun arial olmasıydı.Yukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir. Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır. Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır.
3.2. Global Bağlama
Tanımlama HTML'nin <head> </head>başlığı içinde yapılır. Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz.
<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>
H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial'dır.
3.3. Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik. Bu bağlama şeklini kullanarak. Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor. Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz. Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz. Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak. Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz.
<style>
. baslik1{ font-size : 40px; font-family : Arial; color : #284422 }
H4. baslik {font-family:Arial;font-weight:bold;color : #284422 }
P { font-style : arial; font-size : 11pt; color : #284422; }
A { font-size : 15pt ; color : #284422 }
A:hover { font-size :15pt; color : red }
</style>
Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz. Yazdıktan sonra deneme.css ismiyle kaydedin. Bundan sonra bu#284422ı HTML sayfasına yüklenmesi gerekiyor.
<html>
<head>
<titl#284422WEB GROUP - - - [ CSS ] - - - </title>
<link rel="sty#284422" href="deneme.css">
</head >
<body#284422class="baslık" >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class="baslık1" >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html>
Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır.
4. KULLANIM ŞEKİLLERİ
4.1 HTML Etiketleri İle Kullanım
Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz. Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz. Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz.
<html>
<head>
<title> SAU WEB GROUP - Css</title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>
Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz. Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>
4.2 Seçiciler İle Kullanımı
Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz. İstediğiniz kadar çok secici tanımlayabilirsiniz. İstenirse bir still birden fazla etikete aynı anda aktarılabilir
4.2.1 Sınıf Seçiciler
Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey. Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz. Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h1 . mavi { font-family : arial; color : blue }
h1 . siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h1 class="siyah" >CSS Kullanımına Örnek </h1>
</body>
</html>
Bu birinci tipiydi.Burada önce kullanmak istediğiniz etiketi belirtiyorsunuz. Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın. daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class="stilin_adi"> o stilin adını yazıyorsun. Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız. Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
. mavi { font-family : arial; color : blue }
. siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class="siyah" >anasayfa</h3>
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h3 class="siyah" >CSS Kullanımına Örnek </h3>
</body>
</html>
Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz. Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz.
4.2.2 ID Seçiciler
Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler. Bunları çağırırken class değil id kullanılır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id="mavi" >CSS Kullanımına Örnek </span>
<span id="siyah" >CSS Kullanımına Örnek </span>
</body>
</html>
4.3 <A> Etiketi İle Kullanımı
Bu kullanım sadece A etiketi ile kullanılabilir. A etiketine ekstra özellikler kazandırırlar. Bu özellikler toplam dört tanedir.
link : Bu <a> etiketi içindeki link'in nasıl görüleceğini belirler
active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler
visit#maviikin tıklandıktan sonra yani ziyaret edildikten sonraki h#siyahbelirler
hover :Son olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirler.Bu özellik Netsacapr tarafından tanınmamaktadır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href="#">Anasayfa < /a>
<a href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
İstenirse seçicilerle birliktede kullanılabilirler
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a . menu { font-size : 20pt; font-family : arial; color : blue }
a . menu : link { font-size : 11pt; font-family : arial; color : black }
a . menu : active { font-size : 11pt; font-family : arial; color : red }
a . menu : hover { font-size : 11pt; font-family : arial; color : blue }
a . menu : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a class="menu" href="#">Anasayfa < /a>
<a class="menu" href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
5. DENETLENEBİLİR ÖZELLİKLER
Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam. Önce size kolaylık olaması için özellikleri tablo içinde veriyorum.
FONT ÖZELLİKLERİ TEXT ÖZELLİKLERİ BACKGROUND ÖZELLİKLERİ LIST ÖZELLİKLERİ
FONT-SIZE WORD-SPACING BACKGROUND-COLOR LIST-STYLE-TYPE
FONT-FAMILY LETTER-SPACING BACKGROUND-IMAGE LIST-STYLE-POSITION
FONT-WEIGHT LINE-HEIGHT BACKGROUND-REPEAT LIST-STYLE-IMAGE
FONT-STYLE TEXT-DECORATION BACKGROUND-ATTACHMENT
FONT-VARIANT TEXT-ALING BACKGROUND-POSITION
COLOR TEX-INDENT BACKGROUND
FONT
BOX ÖZELLİKLERİ
MARGIN ÖZELLİKLERİ BORDER ÖZELLİKLERİ PADDING ÖZELLİKLERİ
MARGIN-BOTTOM BORDER-BOTTOM PADDING-BOTTOM
MARGIN-TOP BORDER-TOP PADDING-TOP
MARGIN-RIGHT BORDER-RIGHT PADDING-RIGHT
MARGIN-LEFT BORDER-LEFT PADDING-LEFT
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR
5.1. FONT Özellikleri
FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium
FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font
FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal
FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal
oblique : yazının yatık olmasını sağlar
FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal
FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir. Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz. Ozamanda font.12px,arial veya font: arial,12px diyebilirsiniz. Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız. Çünkü javascript font-size ifadesini kabul etmiyor.
COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
.yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }
5.2. TEXT Özellikleri
WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none
underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar
TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none
capitalize : Yazıyı olduğu gibi bırakır.
uppercase : yazıyı büyük arfe çevirir.
lowercase : yazıyı küçük harfe çevirir.
TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left
left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar
TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0
LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
.metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }
5.2. BACKGROUND Özellikleri
BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar.
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat
repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz
BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll
scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar.
BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0
BACKGROUND : Bu özellik aynı font taki gibidir.
BODY { background-color : rgb(252,253,255) ; background-image : url ("zemin.jpg") ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }
5.4. LIST Özellikleri
LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc
disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4.. gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır
LIST-STYLE-POSITION : Listenin ikinci satırınından itbaren başlıyacağı yeri belirler
değerleri : outside | inside
ilkdeğeri : outside
outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar
LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
.list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }
5.5. BOX Özellikleri
Buaradaki özellikler genel olarak üç gruba ayrılmıştır. (margin,box,padding) Burada margin en dışta yeralır. Border ise yazının çevresine bir çizgi çizer ve margın'ın içindedir. Padding ise yazının sınırlarını belirler ve border ile margin'in içindedir.Bunları birde şekil üzerinde gösterim.
Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim. Yani yazı çizgiden birazdaha içerde başlasın.Ozaman padding-left özelliğini kullanmalıyız.
MARGIN-BOTTOM : Margin'in aşagıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-TOP : Margin'in yukarıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-LEFT : Margin'in soldan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-RIGHT : Margin'in sağdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
BORDER-STYLE : Border çizgisini değiştirmek için kullanılır.
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid
BORDER-WIDTH : Border çizgisinin kalınlığını belirler.
değerleri : thin | medium | thick | length
ilkdeğeri : medium
BORDER-BOTTOM : Border'ın alt kısmı ile margin arasında kalan kısmı ayarlar
. değerleri : px cinsinden değer
BORDER-TOP : Border'ın üst kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
BORDER-LEFT : Border'ın sol kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
BORDER-RIGHT : Border'ın sağ kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING-BOTTOM : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -TOP : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -LEFT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -RIGHT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
CSS (Cascading Style Sheets) HTML sayfasına stil eklemek için kullanılır.CSS çok kullanışlıdır ve kullanımıda çok kolaydır. Fakat şu anda browser savaşları yüzünden hakettiği yere gelemediğinide söylemek istiyorum. Henüz CSS 'nin bütün özellikleri iki browser tarafından da (explorer ve netscape popüler oldukları için sadece bu iki browserı ele alıyorum) tam olarak desteklenmemekte veya farklı etkiler yapmaktadır. Bunun için burada size CSS'nin kullanımı anlatırken her iki browser tarafından da desteklenen özelliklerini anlatacam.
Sakın CSS'nin çok kolay olduğuna aldanmayın. Kolay olmasına rağmen müthiş esnektir.Bu özelliği sayesinde cok güzel sayfa dizaynları yapılabilmektedir.HTML ile dizayn edemediğiniz veya çok uzun süren sayfa tasarımlarını CSS kullanarak çok kısa bir sürede ve çok daha kolay bir şekilde dizayn edebilirsiniz. Çünkü CSS kullanarak istenirse bir metin,bir html sayfası veya tüm sitenin HTML sayfaları aynı anda değiştirilebilir. Aslında CSS bizim ilk okulda kullandığımız ince seffaf kağıtlara benzetebilir. Adından da anlaşılacağı gibi bu stil kağıtları bilgisayarın hafızasına üst üstte yığılır ve en üsteki işletilir. Bu kağıtlarda bir metnin veya başlığın nasıl olacağı (renginin veya fontunun ne olacağı) veya sayfada nereye yerleştirileceği belirlenebilir. CSS kullanarak daha bir çok özelliği değiştirebilirsiniz.
2. YAZIM KURALLARI
CSS'nin de diğer dillerde olduğu gibi kendine ait bazı yazım kuralları vardır. HTML'de bütün stiller <style></style> etiketleri arasında tanımlanır. Stil tanımlarken seçicileri kullanırız. Seçicilerinde çeşitleri vardır ilerede göreceğiz. Bir seçici tanımlarken, Önce seçicinin adı yazılır (tabiki türüne uygun olarak ilerde göreceğiz) sonra değiştirilmek istenen özellikler ile değerleri köşeli parantez içine alınarak yazılır. Seçicilerin isimler bir rakamla başlıyamazlar. Fakat ilk harften sonra istenirse rakam kullanılabilir. Birde isim seçerken lütfen Türkçe karekter kullanmayın.
.kucukfont { font-size : small }
| | |__ deger
| |
| |__değiştirilmek istenen özellik
|
|___ seçicinin isimi
Şimdilik bazı terimlerin anlamlarını bilmiyor olabilirsiniz kafanızı fazla takmayın ilerde hepsini anlatacam. Bir köşeli parantezin içinde birden çok özellik tanımlanabilir. Fakat bu özellikleri aralarına noktalı virgül";" konularak birbirlerinden ayırmanız gerekir.
h1 { font-family : arial ; font-size : small }
Bir stil etiketi içinde istediğiniz kadar seçici tanımlayabilir ve bunları HTML sayfasında kullanabilirisiniz. şimdilik bu kadar kural yeter gelelim bunları nerede tanımlıyacağınıza ve nasıl kullanacağınıza.
3. HTML'YE BAĞLAMA ŞEKİLLERİ
Burada stilleri HTML'ye nasıl ekleyeceğinizi ve eklendiği yere göre HTML üzerinde nasıl etkiler yaptığını anlatacam. Stiller HTML'ye üç değişik şekilde eklenebilirler.
3.1. Local Bağlama
Local bağlamayı kullanarak yanlızca HTML'nin içinde kullanılan etiketleri (örneğin H1,A,P...) ve sadece olduğu yerde özelliklerini değiştirebiliriz. Fakat bunu fazla kullanacağınızı zannetmiyorum. Çünkü bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir.
<html>
<head><title> SAU WEB GROUP - - - [ CSS ] - - - </title>
</head >
<body >
<h3 > CSS Kullanımına Örnek </h3>
<h3 style= "font-family : arial; color : blue"> CSS Kullanımına Örnek </h3>
</body>
</html>
CSS Kullanımına Örnek
CSS Kullanımına Örnek
Burada stil yardımıyla H2 etiketinin bazı özelliklerini değiştirmiş olduk.Bunlar font renginin mavi olması ve fontun arial olmasıydı.Yukarıda da görüldüğü gibi iki yazınında aynı etiketi taşımasına rağmen farklı şekillerdedir. Sakın unutmayın bu değişiklik sadece birkez geçerli olacaktır. Bir daha H2 ekitini kullandığınız zaman etkili olmayacaktır.
3.2. Global Bağlama
Tanımlama HTML'nin <head> </head>başlığı içinde yapılır. Daha öncede belirttiğim gibi böylece bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz.
<html>
<head>
<title> SAU WEB GROUP - - - [ CSS ] - - - </title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz < /h3>
</body>
</html>
H3 etiketini bu şekilde değiştirdiğimiz zaman HTML sayfasının neresinde kullanırsanız kullanıın artık o etiketin rengi mavi fontuda arial'dır.
3.3. Link Bağlama
Evet geldik son bağlama şeklimize buda faydaları azımsanmıyacak kadar önemli bir özellik. Bu bağlama şeklini kullanarak. Bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyor. Mesela bütün sitedeki sayfalarda H1 etiketinin renginin kırmızı olmasını istiyorsunuz. Bütün sayfalarda mavi olmasını tek tek belirtene kadar bu bağlama şeklini kullanabilirsiniz. Daha sonra maviyi beğenmediniz kırmızı olmasınımı istiyorsunuz tek yapmanız gereken CSS dosyasına gidip blue yerine red yazmak. Önce tanımlamak istediğimiz butun seçicileri yazıyoruz ve css soyadı ile kaydediyoruz.
<style>
. baslik1{ font-size : 40px; font-family : Arial; color : #284422 }
H4. baslik {font-family:Arial;font-weight:bold;color : #284422 }
P { font-style : arial; font-size : 11pt; color : #284422; }
A { font-size : 15pt ; color : #284422 }
A:hover { font-size :15pt; color : red }
</style>
Bunları istediğiniz bir düz yazı yazma programı ile hatta notpad ile de yazabilirsiniz. Yazdıktan sonra deneme.css ismiyle kaydedin. Bundan sonra bu#284422ı HTML sayfasına yüklenmesi gerekiyor.
<html>
<head>
<titl#284422WEB GROUP - - - [ CSS ] - - - </title>
<link rel="sty#284422" href="deneme.css">
</head >
<body#284422class="baslık" >WEB Okuluna Hoşgeldiniz < /h4>
<h5 class="baslık1" >WEB Okuluna Hoşgeldiniz < /h5>
<p>CSS ilk başta zor gibi görünsede aslında çok kolaydır</p>
</body>
</html>
Bunuda yaptıkdan sonra artık bu HTML sayfasını çağırdınız zaman sanki CSS dosyası HTML sayfasının içinde tanımlanmış gibi davranacaktır.
4. KULLANIM ŞEKİLLERİ
4.1 HTML Etiketleri İle Kullanım
Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz. Hatta <BODY> için bile stil kullanarak özellikler tanımlıyabilirsiniz. Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz.
<html>
<head>
<title> SAU WEB GROUP - Css</title>
<style type="text/css">
h3 { font-family : arial; color : blue }
</style>
</head >
<body >
<h3 >WEB Okuluna Hoşgeldiniz </h3>
</body>
</html>
Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz. Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h3 , h4 , p , a { font-family : arial; color : blue }
</style>
</head >
<body >
<h4 >WEB Okuluna Hoşgeldiniz </h4>
<h3 >CSS kullanımına örnek< /h3>
</body>
</html>
4.2 Seçiciler İle Kullanımı
Seçiciler yardımı ile bir etikete birden fazla still tanımlayabilir ve kullabilirsiniz. İstediğiniz kadar çok secici tanımlayabilirsiniz. İstenirse bir still birden fazla etikete aynı anda aktarılabilir
4.2.1 Sınıf Seçiciler
Mesala <P> etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her <p> etiketinin aynı olmasını istemiyorsanız o zaman sınıf seçiçiler tam sizin aradığınız birşey. Aslında sınıf seçiciler ikiye ayrılıyor hangisini işinize yarıyorsa onu kullanabilirsiniz. Birinci tipi sadece HTML etiketine bağımlı tanımlamaktır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
h1 . mavi { font-family : arial; color : blue }
h1 . siyah { font-family : arial; color : black }
</style>
</head >
<body >
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h1 class="siyah" >CSS Kullanımına Örnek </h1>
</body>
</html>
Bu birinci tipiydi.Burada önce kullanmak istediğiniz etiketi belirtiyorsunuz. Sonra stillin adını yazıyorsunuz tabi arasına nokta koymayı unutmayın. daha sonra HTML sayfası içinde etiketi hangi stille kullanmak istiyorsan <h1 class="stilin_adi"> o stilin adını yazıyorsun. Bu tanımlamada bu özellikleri <H1> etiketi dışında kullanamazsınız. Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı;
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
. mavi { font-family : arial; color : blue }
. siyah { font-family : arial; color : black }
</style>
</head >
<body >
<a class="siyah" >anasayfa</h3>
<h1 class="mavi" >CSS Kullanımına Örnek </h1>
<h3 class="siyah" >CSS Kullanımına Örnek </h3>
</body>
</html>
Görüldüğü gibi burada stilli tanımlarken etiketin ismini koymuyoruz. Fakat noktayı koyuyoruz sonra bu stilli istediğimiz biryerde istediğimiz bir etiketle birlikte kullanabiliyoruz.
4.2.2 ID Seçiciler
Bu seçicilerde stil isminin önüne # işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler. Bunları çağırırken class değil id kullanılır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
#mavi { font-size : 20pt; font-family : arial; color : blue }
#siyah { font-size : 11pt; font-family : arial; color : black }
</style>
</head >
<body >
<span id="mavi" >CSS Kullanımına Örnek </span>
<span id="siyah" >CSS Kullanımına Örnek </span>
</body>
</html>
4.3 <A> Etiketi İle Kullanımı
Bu kullanım sadece A etiketi ile kullanılabilir. A etiketine ekstra özellikler kazandırırlar. Bu özellikler toplam dört tanedir.
link : Bu <a> etiketi içindeki link'in nasıl görüleceğini belirler
active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler
visit#maviikin tıklandıktan sonra yani ziyaret edildikten sonraki h#siyahbelirler
hover :Son olarak bu özellik imleç(fare ile) linkin üzerine gelindiği an linkin alacağı hali belirler.Bu özellik Netsacapr tarafından tanınmamaktadır.
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a { font-size : 20pt; font-family : arial; color : blue }
a : link { font-size : 11pt; font-family : arial; color : black }
a : active { font-size : 11pt; font-family : arial; color : red }
a : hover { font-size : 11pt; font-family : arial; color : blue }
a : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a href="#">Anasayfa < /a>
<a href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
İstenirse seçicilerle birliktede kullanılabilirler
<html>
<head>
<title> SAU WEB GROUP - Css </title>
<style type="text/css">
a . menu { font-size : 20pt; font-family : arial; color : blue }
a . menu : link { font-size : 11pt; font-family : arial; color : black }
a . menu : active { font-size : 11pt; font-family : arial; color : red }
a . menu : hover { font-size : 11pt; font-family : arial; color : blue }
a . menu : visited { font-size : 11pt; font-family : arial; color : red }
</style>
</head >
<body >
<a class="menu" href="#">Anasayfa < /a>
<a class="menu" href="#">CSS Kullanımına Örnek < /a>
</body>
</html>
5. DENETLENEBİLİR ÖZELLİKLER
Burada size CSS kullanarak denetliyebileceğiniz yani değiştirebileceğiniz özellikleri ve alabileceği değerleri anlatacam. Önce size kolaylık olaması için özellikleri tablo içinde veriyorum.
FONT ÖZELLİKLERİ TEXT ÖZELLİKLERİ BACKGROUND ÖZELLİKLERİ LIST ÖZELLİKLERİ
FONT-SIZE WORD-SPACING BACKGROUND-COLOR LIST-STYLE-TYPE
FONT-FAMILY LETTER-SPACING BACKGROUND-IMAGE LIST-STYLE-POSITION
FONT-WEIGHT LINE-HEIGHT BACKGROUND-REPEAT LIST-STYLE-IMAGE
FONT-STYLE TEXT-DECORATION BACKGROUND-ATTACHMENT
FONT-VARIANT TEXT-ALING BACKGROUND-POSITION
COLOR TEX-INDENT BACKGROUND
FONT
BOX ÖZELLİKLERİ
MARGIN ÖZELLİKLERİ BORDER ÖZELLİKLERİ PADDING ÖZELLİKLERİ
MARGIN-BOTTOM BORDER-BOTTOM PADDING-BOTTOM
MARGIN-TOP BORDER-TOP PADDING-TOP
MARGIN-RIGHT BORDER-RIGHT PADDING-RIGHT
MARGIN-LEFT BORDER-LEFT PADDING-LEFT
BORDER-WIDTH
BORDER-STYLE
BORDER-COLOR
5.1. FONT Özellikleri
FONT-SİZE : fontun nekadar büyüklükte olacağını belirler
değerleri : xx-large | x-large | large | medium | small | x-small | xx-small | pt cinsinden değer
ilk değer : medium
FONT-FAMILY : fontun hangi tipite olacağını belirler
değerleri : fontun ismi
ilk değer : kullanıcının seçtiği font
FONT-WEIGHT : fontun kalınlığını belirler
değerleri : normal | bold | ligher | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
ilk değer : normal
FONT-STYLE : fontun stilini belirler
değerleri : normal | italic | oblique
ilk değer : normal
oblique : yazının yatık olmasını sağlar
FONT-VARIANT : Fontun küçük harf boyunda ama büyük harf olmasını sağlar
değerleri : normal | small-cops
ilk değer : normal
FONT : Bu özellik ile yukarıdaki tüm özellikler değiştirilebilir. Mesela boyutunu değiştirmek istiyorsunuz ozaman font:12px yazmanız yeterli veya hem fontunu hemde boyunu değiştirmek istiyorsunuz. Ozamanda font.12px,arial veya font: arial,12px diyebilirsiniz. Bunu daha çok bu özellikleri javascript kullanarak değiştirmek istediğimizde kullanacağız. Çünkü javascript font-size ifadesini kabul etmiyor.
COLOR : Fontun ne renk olacağını belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
.yazi { font-size : 10pt ; font-family : arial ; font-weight : bold ; font-style : italic ; font-variant : normal ; color : black }
5.2. TEXT Özellikleri
WORD-SPACING : Kelimelerin arasına konulmak istenen boşluğu ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
LETTER-SPACING : Harfler arasındaki boşluk miktarını ayarlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
TEXT-DECORATION : Metni süslemede kullanılır
değerleri : none | underline | overline | line-through | blink
ilkdeğeri : none
underline : yazının altıçizgili olmasını sağlar
overline : yazının üstünün çizgili olmasını sağlar
line-trough : yazının ortasının çizgili olmasını sağlar
blik : yazının yanıp sönmesini sağlar
TEXT-TRANSFORM : Metnin büyük veya küçük harfe çevirmek için kullanılır
değerleri : capitalize | uppercase | lowercase | none
ilkdeğeri : none
capitalize : Yazıyı olduğu gibi bırakır.
uppercase : yazıyı büyük arfe çevirir.
lowercase : yazıyı küçük harfe çevirir.
TEXT-ALING : Metni istenilen biryere bloklamada kullanılıyor
değerleri : left | right | center
ilkdeğeri : left
left : metni sola bloklar
right : metni sağa bloklar
center: metni ortalar
TEXT-INDENT : Yazının istenilen miktarda içierden başlamasını sağlar
değerleri : pt cinsinden değer
ilkdeğeri : 0
LINE-HEIGHT : Metnin satırları arasına istenilen miktarda boşluk bırakmayı sağlar
değerleri : normal | pt cinsinden değer
ilkdeğeri : normal
.metin { word-spacing : 10pt ; letter-spacing : 9pt ; line-height : 8pt ; text-decoration : none ; text-transform : capitalize ; text-aling : left ; text-indent : 5pt }
5.2. BACKGROUND Özellikleri
BACKGROUND-COLOR : Arka zeminin alacağı zemini belirler
değerleri : ingilizce renklerin isimleri | renk kodları | RGB renk kodu
ilkdeğeri : kullanıcının seçtiği
BACKGROUND-IMAGE : Arka zemine resim yerleştirmeyi sağlar.
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
BACKGROUND-REPEAT : Arka zemindeki resmi istenilen miktarda tekrarlar
değerleri : repeat | x-repeat | y-repeat | no-repeat
ilkdeğeri : repeat
repeat : Heryönde tekrar edilmesini sağlar
x-repeat : Sadece x ekseni üzerinde tekrarlar (soldan-sağa)
y-repeat : Sadece y ekseni üzerinde tekrarlar (yukardan-aşağı)
no-repeat : Tekrarlamaz
BACKGROUND-ATTECHMENT : Arka zeminin nasıl davranacağını belirler
değerleri : scroll | fixed
ilkdeğeri : scroll
scroll : Arka zeminin scroll ile birlikte hareket etmesini sağlar
fixed : Arka zeminin sabit kalmasını sağlar.
BACKGROUND-POSITION : Arka zeminin yerini belirler
değerleri : left | center | right | top | bottom
ilkdeğeri : 0,0
BACKGROUND : Bu özellik aynı font taki gibidir.
BODY { background-color : rgb(252,253,255) ; background-image : url ("zemin.jpg") ; background-repeat : no-repeat ; background-attechment : fixed ; background-position : center ; }
5.4. LIST Özellikleri
LIST-STYLE-TYPE : Listede kullanulacak basamakların nasıl kullanılacağını belirler
değerleri : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
ilkdeğeri : disc
disc : Her basamak içi dolu dairelerle başlar
circle : Her basamak içi boş dairelerle başlar
square : her basamak kare ile başlar
decimal : Her basamak 1,2,3,4.. gibi sayılar alır
lower-roman : Her basamak i,ii,iii gibi küçük roma rakamları alır
upper-roman : Her basamak I,II,III gibi büyük roma rakamları alır
lower-alpha : Her basamak a,b,c gibi küçük harf alır
upper-alpha : Her basamak A,B,C gibi büyük harf alır
LIST-STYLE-POSITION : Listenin ikinci satırınından itbaren başlıyacağı yeri belirler
değerleri : outside | inside
ilkdeğeri : outside
outside : İkinci satır ve diğerlerinin birinci satırın hizasında olması sağlanır
inside : İkinci satır ve diğerlerinin birinci satırdan içerde başlamasını sağlar
LIST-STYLE-IMAGE : Listenin basamaklarına istenilen bir resim konulmasını sağlar
değerleri : none | url ("dosyanın_ismi")
ilkdeğeri : none
.list { list-style-type : lower-alpha ; list-style-position : inside ; list-style-image : none ; }
5.5. BOX Özellikleri
Buaradaki özellikler genel olarak üç gruba ayrılmıştır. (margin,box,padding) Burada margin en dışta yeralır. Border ise yazının çevresine bir çizgi çizer ve margın'ın içindedir. Padding ise yazının sınırlarını belirler ve border ile margin'in içindedir.Bunları birde şekil üzerinde gösterim.
Mesela web sayfası yazısını sol tarafını çizgiden (border) uzaklaştırmak istiyelim. Yani yazı çizgiden birazdaha içerde başlasın.Ozaman padding-left özelliğini kullanmalıyız.
MARGIN-BOTTOM : Margin'in aşagıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-TOP : Margin'in yukarıdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-LEFT : Margin'in soldan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
MARGIN-RIGHT : Margin'in sağdan nekadar boşluk bırakacağını belirler.
değerleri : px cinsinden değer
BORDER-STYLE : Border çizgisini değiştirmek için kullanılır.
değerleri : none | dotted | dashed | solid | double | groove | ridge | inset | outset
ilkdeğeri : solid
BORDER-WIDTH : Border çizgisinin kalınlığını belirler.
değerleri : thin | medium | thick | length
ilkdeğeri : medium
BORDER-BOTTOM : Border'ın alt kısmı ile margin arasında kalan kısmı ayarlar
. değerleri : px cinsinden değer
BORDER-TOP : Border'ın üst kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
BORDER-LEFT : Border'ın sol kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
BORDER-RIGHT : Border'ın sağ kısmı ile margin arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING-BOTTOM : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -TOP : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -LEFT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
PADDING -RIGHT : Padding'in alt kısmı ile border arasında kalan kısmı ayarlar.
değerleri : px cinsinden değer
