Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
1
CASSCADING STYLE SHEETS
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 <p>, <div>, <h1>, <a>, <font>, <li> gibi birçok kod için kullanılabilir: <p style="text-align:left; font-size:12pt; color:red">...</p> Yukarıda HTML derslerinden tanıdığımız, paragraf oluşturan <p> 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
<html> <head> <title>Css</title> </head> <body> <h2>CSS Kullanımı</h2><br> <h2 style=“font-size:20pt; color:blue”>CSS Kullanımı</h2> <h2 style=“font-size:20pt; text-align:center color:red”>CSS </body> </html>
6
<html> <head> <title>yerel css ile</title> </head> <body> <h1>INTERNET EXPLORER 9 REKOR KIRDI</h1> <p>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ı. </p> <h4>Metin Kaçan</h4> </body> </html> Ekran görüntüsü
7
Ekran görüntüsü
8
Nesne Özelliklerini Genelleştirme
Sayfa tasarımında CSSden yararlanacaksak style="..." parametresini kullanmamız şart değil,sayfa özelliklerini <style>...</style> kodları arasında da tanımlayabiliriz.<style>...</style> kodları <head>...<head> bölümünde; bir fonksiyonmuşcasına yer alır. (Fonksiyonları
9
Genel Stil Şablonları (genel css)
Selektor Bildirim alanı Bildirim Alanı H1 {font-size:18pt ; color:#336699} Değer özellik Değer özellik
11
Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:
13
NE YAPTIK? İlk uygulamada <p>, <h1> ve <h4> kodlarını style="..." parametresi ile bu kodlara bazı özellikler atandı. Örneğin <p>...</p> 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 ;<head>...</head> bölümünde, <style>...</style> 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 <p> 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 <head>...</head> kısmına aşağıdaki kodlarla .css uzantılı dosyanızla bağlantı kurun; mesela dosyanın ismi tarz.css olsun: <html> <head> <title>Dış dosya yolu ile...</title> <link rel="stylesheet" type="text/css" href="tarz.css"> </head> <body> …………… </body> </html>
16
Önce tarz.css dosyasını oluşturalım
19
Bölüm 2- Örnekler ve ID-Class seçiciler
Css Bölüm 2- Örnekler ve ID-Class seçiciler
20
En Çok Kullanılan bildirimler
Font-size:….px Text-align:left Color:#005533 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 <html> <head> <style type="text/css">
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} </style> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <p><b>Not:</b> "blink" özelliği IE de çalışmaz. Chrome veya Safari tarayıcılarını kullanınız..</p> </body> </html>
25
SEÇİCİLER - SELECTORS ID TİPİ SEÇİCİLER 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
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
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. 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. 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 http://www.cssornekleri.com/ www.w3schools.com/css/
Benzer bir sunumlar
