GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ"

Pinar Sarıkaya
8 yıl önce
İzleme sayısı:

1 Hazırlayan: URL: Amaç: Ögr.Gör. Mehmet Emin ÖZCAN MYO öğrencileri için css dökümanı Kaynaklar. GAZİANTEP ÜNİVERSİTESİ GMYO BİLGİSAYAR BÖLÜMÜ KASIM-2009

tr/~ozcan/ders/internet1 MYO öğrencileri için

2 CSS (Cascading Style Sheets, Stil Şablonları) CSS, web dokümanlarına stil eklemek için kullanılan basit ve güçlü bir dildir. (X)Html, metin ve etiketlerden meydana gelir. <html>,<body>, <p>, <a>, <b>, <i>, <h1> gibi etiketler birer html etiketidir. Bu etiketlerin sınırlı sayıda özellikleri mevcuttur. CSS bu etiketlere, ekstra özellik eklememize olanak sağlar. Bu özellikler; doküman ın tarayıcı üzerinde nerede ve nasıl görüneceğini ile sınırlıdır. Ayrıca CSS bir tür şablon olduğu ve şablonlarında doğası gereği işi kolay ve hızlı yapmamızı sağladığı için, CSS ile yapılan büyük siteler diğerlerine nazaran daha hızlı ve ergonomiktir. Örnek 1: Harf puntosunu 40 punto yapan benimsitilim isimli bir stil şablonu oluşturun. Merhaba CSS yazısını ekrana kalın puntolarla yazın. Merhaba CSS yazısının CSS kısmını yazarken benimsitilim isimli stil şablonunu kullanın..benimsitilim { font-size:40px} <b>merhaba</b> <b class=benimsitilim >CSS</b> Örnek 1: Aşağıdaki html kodunu inceleyin. Ekran çıktısına bakarak düşüncelerinizi yazın..benimsitilim { font-size:20px} <b>merhaba</b><b class=benimsitilim>ben Nasrettin Hoca</b><br> <i>sen</i> <i class=benimsitilim>kimsin</i><br> <u>ben</u><u class=benimsitilim>keloğlan</u><br> <table border=1><tr> <td>css ye </td><td class=benimsitili >Bayılıyorum</td> <tr><table> Yukarıdaki programda, benimsitilim isimli bir CSS oluşturulmuş. Bu CSS yani stil şablonu, <b> <i> <u> <td> etiketleri içinde class=benimsitilim yazılarak çağrılmış. Ekran çıktısını incelenirse; şablonu çağıran etiketlerin hiç birinde harfin puntosunu büyütme özelliği olmadığı, fakat ekrana puntosu normalden daha büyük harflerle yazı yazdıkları görülür. Buradan çıkaracağımız sonuç; CSS nin, html etiketlerine yeni özellik eklemiş olması ve kullanımının çok basit olmasıdır. Not: Açıklama cümlesi /* ile */ arasına yazılır. Açıklama cümlesi Programın akışını etkilemez.

Bu özellikler; doküman ın tarayıcı üzerinde nerede ve nasıl görüneceğini ile sınırlıdır.

3 CSS KULLANIMI: CSS, dört farklı yöntemle kullanılabilir. 1) Etiket içinde: (Html ile Css iç içe) ead><body> Merhaba <b style= font-size:20px >Ben Nasrettin Hoca</b> 2) Sayfa içinde <STYLE> Etiketi Kullanarak (Html ile Css birbirinden ayrılmış) b{ font-size:20px} /* tüm <b> etiketleri 20 puntoluk olsun */ Veya b{font-size:20px} 3) <LINK> Etiketi ile Harici CSS Dosyası Kullanarak Css2.html Dosya.css <link rel="stylesheet" type="text/css" href="dosya.css" /> b{ font-size:20px} 4) <STYLE> Etiketi ile Harici CSS Dosyası Kullanarak Css2.html "Dosya.css"; b{ font-size:20px}

(Html ile Css birbirinden ayrılmış) b{ font-size:20px} /* tüm <b> etiketleri 20 puntoluk olsun */ Veya b{font-size:20px} 3) <LINK> Etiketi ile Harici

4 CSS YAPISI: CSS yapısı, Seçiciler ve Bildirim Bloğundan meydana gelir. Sınıf Seciciler, HTML elemanı anlamındadır. BODY, A, B, TABLE, TR, TD, H1,, birer potansiyel seçicilerdirler. Sınıf seciciler oluşturuken, etiketimsi.sınıf şeklinde aralarına nokta. konularak ayrılırlar. Secici tanımlanırken etiketimsi kullanılmasa ilgili tüm etiketler, sınıf ismi kullanılmasa ilgili tüm sınıflar bu CSS den etkilenir. Bir CSS de birden fazla secici bulunursa aralarına virgül konur. Örnekler: B { } /* tüm <B> etiketli html kodları bu CSS den etkilenir */ P, B, H1 { } /* tüm <P>, <B> ve <H1> etiketleri bu CSS den etkilenir */ B.buyuk { } /* tüm <B class=buyuk> etiketleri bu CSS den etkilenir */ P, B.kucuk { } /* tüm <P> ve <B class=kucuk> etiketleri bu CSS den etkilenir */.ortala { } /* class=ortala özellikli tüm etiketler bu CSS den etkilenir */.baslik.buyuk { } /* class= baslik buyuk özellikli tüm etiketler bu CSS den etkilenir */ Örnek: H1.benimSitilim { font-size:40px} B.benimSitilim { font-size:20px} <b class=benimsitilim >Merhaba</b> <H1 class=benimsitilim >CSS</b> Bildirim Bloğu; süslü parantez { } içinde, aralarında noktalı virgüllerle ; ayrılmış bildirimler bulunur. Bildirim, bir Özelliğe bir Değer atamaktan ibarettir ve bu işlem de Özellik:Değer şekline yazılarak yapılır. Secici Bildirim Bildirim Bloğu Bildirim Özellik Değer Özellik Değer

Secici tanımlanırken etiketimsi kullanılmasa ilgili tüm etiketler, sınıf ismi kullanılmasa ilgili tüm sınıflar bu CSS den etkilenir. Bir CSS de birden fazla secici bulunursa aralarına virgül konur.

5 <Sayı> 1. em: yazıtipinin bağıl yüksekligidir. Mesela font-size degeri 14 px olarak atanmıs ise 1em 14piksel esit demektir. 2. ex: "x" harfinin yüksekligidir. Atanmıs olan yazıtipinin küçük "x" degeri yüksekligidir. Örn: 1ex, 5ex 3. px: piksel degeri. Örn: 1px, 5px 4. in: inç. Örn: line-height:0.5in (1 inch=2,54 cm dir.) 5. cm: Santimetre. Örn: margin:2cm 6. mm: Milimetre. Örn: letter-spacing:1mm 7. pt: Point. Standart baskı birimidir.örn: font-size:14pt (1pt = 1/72in) 8. pc: Pika. Bir inç in 1/6 esit olan bir baskı ölçü birimidir. Bir pika 12 noktaya bölünür. Örnek: font-size:2pc <yüzde> <url> 50% şeklinde yazılır. url(" şeklinde yazılır. <Renk> 1. İngilizce renk isimleri. Red,gren,blue,black, Örn: Color:red 2. #RRGGBB hezadesimal renk degeri. sırayla RR kırmızı =00 ile FF, GG yeşil =00 ile FF, BB mavi =00 ile FF arası değer alır. örn: kırmızı=#ff0000, mavi=#00ff00, yeşil=#0000ff, kısaltma yapılabilir kırmızı=#ff 3. rgb(r,g,b): ondalık renk değeri. R kırmızı = 0 ile 255 G yeşil = 0 ile 255 B mavi = 0 ile 255 arası değer alır. Örn: h1{color: rgb(191,127,127);} h1 {color:rgb(75%,0%,0%);} Font: Yazıtipi Özellik: _ Anlamı. _ Alabileceği Değerler _ 1. color : Yazı rengi. İ<renk> 2. font-family : Font tipi ailesi. Arial Courier Verdana Times New Roman 3. font-size : Font boyutu. xx-large x-large large medium small x-small xx-small <sayı> 4. font-weight : Fontun kalınlığını. Normal lighter bold bolder olabilir. 5. font-style : Fontun stili. italic normal oblique (=eğik) inherit (=kalıtım) 6. font-variant: Font farklılıkları. normal small-caps inherit 7. Font Yazıtipi <font-style> <font-variant> <font-weight>]? <font-size> [ / <line-height> ]? <font-family> H1 { font-family: Verdana, Arial, Helvetica;} /* Vardana kullan, bilgisayarda yüklü değilse sıradakini kullan. */ H2 { color:#ff0000; font-size:12px; font-variant:small-caps; } H3 { font:bold italic 200%/1.2em Verdana, Helvetica, Arial, sansserif; } H4 { font-variant:small-caps; } <H1>Hiç Bilenle</H1><H2>Bilmeyen</H2><H3>Bir</H3><H4>Olurmu</H4> Text: Metin Özellik: _ Anlamı. _ Alabileceği Değerler _ 1. text-align: hizalama Left,center,right, justify, inherit 2. line-height satır yüksekliği normal <sayı> <yüzde> inherit 3. text-ident Metin Girintisi (soludaki boşluk :5px, ) <uzunluk degeri > <yüzde> inherit 4. vertical-align Dikey hizalama <yüzde> baseline sub super top text-top middle bottom text-bottom 5. word-spacing Kelime arası mesafe normal <sayı > inherit 6. letter-spacing Harfler arası mesafe normal <uzunluk degeri > inherit 7. text-transform Harf büyüklügü none capitalize (=ilk harf büyük) uppercase lowercase inherit 8. text-decoration Metin süsleme none [ underline overline line-through(=üstü çizili). blink ] inherit 9. text-shadow Metin gölgeleme 10. white-space bosluk tuşu özelliği normal pre (=boşluk birleştirmez) nowrap (=alt satıra geçmez <br> hariç) inherit 11. direction Metin yazma yönü ltr rtl inherit 12. unicode-bidi Çok yönlülük algoritması bidi-override (arapça gibi sağdan sola yazar) embed normal inherit H3.geniş { word-spacing: 20px;} <H3>Hiç bilenler bilmeyen bir olurmu?</h3> <H3>Hiç bilenler bilmeyen bir olurmu?</h3>

Örn: margin:2cm 6. mm: Milimetre. Örn: letter-spacing:1mm 7. pt: Point. Standart baskı birimidir.örn: font-size:14pt (1pt = 1/72in) 8. pc: Pika. Bir inç in 1/6 esit olan bir baskı ölçü birimidir.

6 Background: Artalan Özellik: _ Anlamı. _ Alabileceği Değerler _ 1. background-color: artalan rengi. <renk> transparent inherit 2. background-image : artalan resmi. <url> none inherit 3. background-repeat : resim tekrarı. repeat repeat-x repeat-y(=y yönünde, dikey tekrar) no-repeat 4. background-attachment: resim bağlılığı scroll (=resim kayar) fixed (=resim kaymaz) inherit 5. background-position : resim yeri [<x-yüzde> <y-yüzde>] {1,2} [top center bottom] [left center right] 6. background: artalan <background-color> <background-image> <background-repeat> <background-attachment> <background-position> body { background-image: url(artalan_resmi.gif); background-position:%50 %50;} List: Listeleme 1. list-style-type : madde imi şekli. disk, circle, square, decimal, lower-roman, upper-roman,lower-alpha, upper-alpha, none 2. list-style-position: imleç pozisyonu. inside : (ikinci satır sola), Outside ( satırlar aynı yerden başlar) inherit 3. list-style-image : imleç resmi. url ("resim.gif"); none inherit 4. list-style: Liste stili <list-style-type> <list-style-position> <url> ul{ list-style-image: url(liste_imgesi.gif); list-style-position: inside;} <ul> <li>ali</li> <li>veli</li> <li>selami</li> </ul>

$background: artalan <background-color> <background-image> <background-repeat> <background-attachment> <background-position> body { background-image: url(artalan_resmi.$

Benzer belgeler

ADOBE DREAMWEAVER CS5 CSS PANEL

CSS Cascading Style Sheets ADOBE DREAMWEAVER CS5 CSS PANEL ve CSS3 ÖZELLİKLER TYPE Font-Family : Yaz lar n alaca yaz tipini belirler Font adlar al r, Tahoma, Verdana Arial gibi. font-family: Arial, Helvetica,