Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

CSS NEDİR. CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz. Bununla birlikte sayfa tasarımında kullandığınız renklerden sıkıldığınızda.

Benzer bir sunumlar


... konulu sunumlar: "CSS NEDİR. CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz. Bununla birlikte sayfa tasarımında kullandığınız renklerden sıkıldığınızda."— Sunum transkripti:

1 CSS NEDİR

2 CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz. Bununla birlikte sayfa tasarımında kullandığınız renklerden sıkıldığınızda tek bir noktadan bütün sayfalardaki renkleri hızlı bir şekilde değiştirebilirsiniz. Bunun için CSS’i etkili bir şekilde kullanabilmek önemlidir.

3 CSS’İN HTML İLE İLİŞKİSİ YEREL CSS KULLANIMI GENEL CSS KULLANIMI HARİCİ CSS KULLANIMI NOT: CSS KULLANIM ŞEKİLLLERİNDEN 3 Ü DE KULLANILMIŞSA BROWSER TARAFINDAN ÖNCELİK TERCİH SIRASI ŞÖYLEDİR: YEREL-GENEL-HARİCİ

4 YEREL CSS(INLINE) Yerel CSS Deneme Deneme Deneme This is a paragraph.

5 GENEL CSS(INTERNAL) Genel CSS Deneme Deneme Deneme

6 HARİCİ(EXTERNAL) CSS h1 {font-size:15; color:teal} h2 {font-size:25; color:silver} h3 {font-size:35; color:red} YUKARIDAKİ KODA HARİCİ OLARAK stilim1.css olarak kaydedilir.

7 CSS YAZIM KURALI(SYNTAX)

8 CSS YORUM SATIR(/*……..*/) /*BURASI YORUM SATIRI*/ p { text-align:center; /*BURASI DA BAŞKA BİR YORUM SATIRI*/ color:black; font-family:arial; }

9 SEÇİCİLER(SELECTORS) CSS DE SEÇİCİLER ID VE CLASS SEÇİCİLERDİR. ID VE CLASS seçiciler ile html etiketlerinin stilleri değiştirilebilir.

10 İd ve class kullanım örneği İd örneği(# ile baslar) #deneme1 {text-align:center;color:red;} Merhaba dünyalı yine karşımızda burası etkilenmedi Class örneği(. İle başlar).center {text-align:center;} Center-aligned heading Center-aligned paragraph.

11 CSS-background background-color background-image background-repeat background-attachment background-position

12 Background örn 1 body { background- image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; }

13 background div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:right center; } div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:50% 50%; } div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:10px 200px; } left top left center left bottom right top right center right bottom center top center center center bottom İnherit(kalıtımla alır bir üst element neyse onun özelliğini alır)

14 Background örnekleri body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } Note: opera ve firefox için "fixed“ yazılmalı. body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } Note: opera ve firefox için "fixed“ yazılmalı

15 TEXT(METİN) ÖZELLİKLERİ body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} BAŞLIK ÖRNEĞİ1 PARAGRAFIN NORMAL RENGİ KIRMIZI BELİRLENDİ PARAGRAFIN AYARI SINIF OLARAK class="ex“ İSMİNİ KULLANIYOR BURASI İSE MAVİ RENK OLACAK> h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} CSS text-align Example May, 2009 BUARSI MAİN ALANININ RENGİNİ KULLANIYOR Not: PENCEREYİ BÜYÜT KÜÇÜLT JUSTİFY DURUMUNU GÖREBİLİRSİN

16 TEXT ÖZELLİKLERİ ALDIĞI DEĞERLER 1

17 TEXT ÖZELLİKLERİ ALDIĞI DEĞERLER 2

18 TEXT(METİN) ÖZELLİKLERİ – text-align: Yatay hizalama left: Sola hizalama right: Sağa hizalama center: Ortaya hizalama line-height: Satır yüksekliğinin pixel değeri line-indent: Sol kenardan uzaklığın piksel değeri – text-transform: Metni büyük veya küçük harflerle görüntüleme uppercase: Metni büyük harflerle yazar lowercase: Metni küçük harflerle yazar. – text-decoration: underline: Alt çizgili yazar overline: Üst çizgili yazar line-trough: Yazının üstünü çizer. none: Herhangi bir çizgi olmaksızın yazar. Text özellikleri deneme

19 FONT ÖZELLİKLERİ – font-size: Yazı büyüklüğünün piksel cinsinen değerini bildirir. – color: Yazının rengini bildirir. – font-family: Yazının tipini belirler(Times New Roman,vedana vs.) – font-style: Yazının italik olup olmamasını belirler. italic: Yazıyı eğik yapar normal: Yazıyı bir değişiklik yapmadan yazar. – font-weight: Yazının bold olup olmamasını belirler. bold: Yazıyı koyu yazar. normal: Yazıyı bir değişiklik yapmaksızın yazar. Css ve Fontlar Deneme


"CSS NEDİR. CSS’i kullanarak sayfalarınızı daha estetik hale getirebilirsiniz. Bununla birlikte sayfa tasarımında kullandığınız renklerden sıkıldığınızda." indir ppt

Benzer bir sunumlar


Google Reklamları