Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

CSS CASSCADING STYLE SHEETS. css STİL ŞABLONLARI Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği.

Benzer bir sunumlar


... konulu sunumlar: "CSS CASSCADING STYLE SHEETS. css STİL ŞABLONLARI Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği."— Sunum transkripti:

1 CSS CASSCADING STYLE SHEETS

2 css STİL ŞABLONLARI Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliğidir. Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz. Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

3 Css kullanım Şekilleri Yerel css :Yerel stil şablonları HTML belgesinin body bölümüne yazılır. Sadece bir kereliğine, yazıldıkları yerde etkili olur. Genel css : HTML belgesinin head bölümüne yazılır ve belgenin tümünü etkiler. Harici css : Ayrı bir kod sayfası olarak yazılır kaydedilir ve kullanılacağı sayfaya eklenir.

4 YEREL CSS... HTML derslerinde geçen ama üzerinde pek durmadığımız style parametresi üzerinde açıklama yapmam gerekiyor. style parametresi,,,,, gibi birçok kod için kullanılabilir:... Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan koduna style parametresi atanmıştır. Böylece paragrafın sola yaslanmasını, 12pt (point: nokta) font büyüklüğündeki harflerden oluşmasını, harflerin renginin kırmızı olmasını sağlıyoruz. style parametresinde birden fazla özellik tanımlanacaksa, örnekte olduğu gibi her özellikler arasına ";" işareti konur.

5 Css CSS Kullanımı CSS Kullanımı CSS Kullanımı

6 yerel css ile INTERNET EXPLORER 9 REKOR KIRDI Merakla beklenen ve tarayıcı savaşlarını kökünden etkileyeceği düşünülen Internet Explorer 9un beta sürümü 2 haftada çok büyük ilgi gördü. Microsoftun açıklamasına göre, Internet Explorer 9 beta iki hafta içinde 6 milyon defa indirildi. 15 Eylülde yayınlanan Internet Explorer 9 beta, IE 8in beta sürümünü de 2.5 katına katladı. IE 9da HTML 5e büyük destek veren Microsoft, tarayıcısına W3C İnternet Standartları testini uyguladı. Metin Kaçan Ekran görüntüsü

7

8 Nesne Özelliklerini Genelleştirme Sayfa tasarımında CSSden yararlanacaksak style="..." parametresini kullanmamız şart değil,sayfa özelliklerini... kodları arasında da tanımlayabiliriz.... kodları... bölümünde; bir fonksiyonmuşcasına yer alır. (Fonksiyonları

9 Genel Stil Şablonları (genel css) H1 {font-size:18pt ; color:#336699} Selektor Değer özellikDeğerözellik Bildirim Alanı Bildirim alanı

10

11 Bu uygulamanın aynısını koduyla aşağıdaki şekilde yapabiliriz:

12

13 NE YAPTIK? İlk uygulamada, ve kodlarını style="..." parametresi ile bu kodlara bazı özellikler atandı. Örneğin... arasındaki metinin sayfanın iki yanına yaslanması, renginin bordo olması ve font büyüklüğünün 12pt olması sağlandı. İkinci uygulamada ise her koda style="..." parametresi atamak yerine, tüm stil özellikleri kodların başında ;... bölümünde,... kodları arasında kod kod tanımlanmıştır. Bu iki uygulama ile aynı sonuca ulaşıyoruz. İlk uygulamanın daha kısa sürdüğü görünüyor, ancak bunun nedeni stil özellikleri tanımlanan kodların birer tane olması. Mesela sayfada kodu çok sayıda yeralsaydı, CSS ile kod sayfası çok daha kısa olacaktı. Bununla birlikte, stil özelliklerini değiştirmek istediğimizde hiç zorlanmayacağız. Ayrıca hata yapma olasılığımız CSS genelleştirmesi ile azalacaktır.

14 KOD { ÖZELLİK1:değer1; ÖZELLİK2:değer2; ÖZELLİK3:değer3 } Ayrıca aynı stil özelliklerini taşıyacak olan kodları gruplayabilirsiniz: KOD1, KOD2, KOD3, KOD4, KOD5 { ÖZELLİK1:değer1; ÖZELLİK2:değer2; ÖZELLİK3:değer3 }

15 CSSyi Dış Dosya ile Tanımlama Web sayfamızın... kısmına aşağıdaki kodlarla.css uzantılı dosyanızla bağlantı kurun; mesela dosyanın ismi tarz.css olsun: Dış dosya yolu ile... ……………

16 Önce tarz.css dosyasını oluşturalım

17

18

19 Css Bölüm 2- Örnekler ve ID-Class seçiciler

20 En Çok Kullanılan bildirimler Font-size:….px Text-align:left Color:# font-family:arial; background-color:#b0c4de; font-weigh:bold => Fontun kalınlık incelik durumunu belirler. bold: Fontu kalın yapar. normal: Fontun normal halde olmasını sağlar.

21 En Çok Kullanılan bildirimler font-style:italic => Fontun stilini belirler. text-transform :lowercase =>küçük harf text-transform :uppercase =>büyük harf text-decoration : underline => Yazının altının çizili olmasını sağlar. text-decoration : overline =>Yazının üstünün çizili olmasını sağlar. text-decoration : none => Yazının herhangi bir yerine çizgi çekilmemesini sağlar.

22 ÖRNEK

23 ÖRNEK2 h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} This is heading 1 This is heading 2 This is heading 3 This is heading 4 Not: "blink" özelliği IE de çalışmaz. Chrome veya Safari tarayıcılarını kullanınız..

24

25 SEÇİCİLER - SELECTORS 1. ID TİPİ SEÇİCİLER 2. CLASS TİPİ SEÇİCİLER CSS dosyalarındaki stillerin etki edeceği elemanlar, HTML'deki "element"ler, "classlar" veya "id"lerdir. Elementler, tanımlı HTML kodlarıdır. Örneğin a, h1, body, div, p... Bu elementlere etki edecek CSS kodları ise şu şekilde tanımlanır: h1 { ;} p { ;} body { ;}

26 ID SEÇİCİLER CSS dosyasında bir idye etki edecek kodu yazmak için başa diyez (#) işareti koyulur. ÖRNEK

27

28 Class seçiciler Bu seçiciyi sayfanızdaki h1 gibi etiketlerin tümünün aynı olmasını istemediğiniz durumlarda kullanabilirsiniz. Böylelikle genel bazı özellikleri koruyarak farklı özellikleri değiştirebilirsiniz. Sınıf seçicisinin iki türü vardır. Class seçiciler. İle başlar

29

30

31 Div Nedir? HTML' de tasarımlarımızı sağa, sola hizalamak, nesneleri ve yazıları dilediğimiz koordinatlara yerleştirmek için kullanılan ve az kod ihtiva etmesi ve Google tarafından tavsiye edilmesi ve sevilmesi nedeniyle son zamanlarda gündeme gelen bir kodlama biçimidir. HTMLtasarımlarımızıkod CSS dediğimiz stil kodlamasıyla tam uyumlu olması nedeniyle de table yani hücre sistemlerinin yerini hızla almakta olan alternatif bir tag' dir. CSStabletag Kullanımı eski tip table kullanımına göre daha fazla bilgi ve tecrübe gerektirmesi nedeniyle çoğu web tasarımcılara zor geldiğinden div kullanımı çok fazla yaygınlaşamamaktadır

32 Devamı Eklenecek

33 KAYNAK SİTELER


"CSS CASSCADING STYLE SHEETS. css STİL ŞABLONLARI Stil şablonları (CSS-Cascading Style Sheets) sayfalarınız için global şablonlar hazırlama olanağı verdiği." indir ppt

Benzer bir sunumlar


Google Reklamları