.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 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.

CSS Kullanımına Örnek

CSS Kullanımına Örnek

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 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.

WEB Okuluna Hoşgeldiniz < /h3> 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. 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 dosyayı HTML sayfasına yüklenmesi gerekiyor.

WEB Okuluna Hoşgeldiniz < /h4>

WEB Okuluna Hoşgeldiniz < /h5>

CSS ilk başta zor gibi görünsede aslında çok kolaydır

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 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.

WEB Okuluna Hoşgeldiniz

Eğer isterseniz aynı anda birden çok etikete aynı stilli atıyabilirsiniz. Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur.

WEB Okuluna Hoşgeldiniz

CSS kullanımına örnek< /h3> 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

etiketi için bir still tanımladınız fakat HTML sayfanızda kullandığınız her

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.

CSS Kullanımına Örnek

CSS Kullanımına Örnek

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

o stilin adını yazıyorsun. Bu tanımlamada bu özellikleri

etiketi dışında kullanamazsınız. Fakat şimdi göstereceğim ikinci tip sınıf seçicide durum birazdaha farklı; anasayfa

CSS Kullanımına Örnek

CSS Kullanımına Örnek

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. CSS Kullanımına Örnek CSS Kullanımına Örnek 4.3 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 etiketi içindeki link'in nasıl görüleceğini belirler active :Bu ise link'in üzerine tıklandığı an alacağı şekli belirler visited :Likin tıklandıktan sonra yani ziyaret edildikten sonraki halini belirler 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. Anasayfa < /a> CSS Kullanımına Örnek < /a> İstenirse seçicilerle birliktede kullanılabilirler Anasayfa < /a> CSS Kullanımına Örnek < /a> 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 6. DIV İLE KULLANIMI HTML deki bütün unsurları (metin,table,resim,çerçeve...) bu katmanın(DIV) üstüne koyup sayfada istediğiniz bir yere taşıyabilirsiniz. Neler yapabileceğinizi veya istediğiniz bir ögeyi sayfanın istediğiniz yerine sadece kordinatlari değiştirerek koyabildiğinizi bir düşünsenize... POSITION : Katmanın HTML sayfası üzerindeki konumunun nasıl olacağını belirler. ABSOLUTE : Katmanın kendisine verilen üst ve sol kotdinatlara göre kesin olarak yerleştirir ve yeri diğer unsurlardan etkilenmez. RELATIVE : katmanın kendisine verilecek ölçüler kendinden önceki unsurun konumunun bittiği yerden başlar STATIC : Katmanın kendisine verilen ölçüler HTML sayfasında nereye geliyorsa oraya yerleştirilir. TOP : katmanın üst kısımdan nekadar aşağı olacağı belirler LEFT : katmanın sol kısımdan nekadar sağda olacağı belirler HEIGHT : katmanın boyunun uzunluğu belirler WIDTH : Katmanın eninin uzunluğunu belirler Z-INDEX : Katmanın HTML sayfası üzerinde hangi katta duracağını belirler. OVERFLOW : Katmanın belirtilen boyutlara sığmaması durumunda ne yapacağını belirler

SAU WEB GROUP

SAU WEB GROUP Burada index numarsının önemini biraz anlatmak istiyorum. Katmanlar sayfaya index numarasına göre yerleştirilirler. Aslında yan yana yerleştirilirken önemli değil ama üst üste yerleştiriliyorlarsa önemliler.Mesela iki tane katman olduğunu varsayalım. Birincisinin numarası bir diğerinin iki ise ikinci birincinin üzerinde görülecektir.

SAU WEB GROUP

SAU WEB GROUP

SAU WEB GROUP SAU WEB GROUP

Bilgisayar, Nedir? css nedİr?