Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

CSS – Stil Şablonları (Cascading style Sheet)

Benzer bir sunumlar


... konulu sunumlar: "CSS – Stil Şablonları (Cascading style Sheet)"— Sunum transkripti:

1 CSS – Stil Şablonları (Cascading style Sheet)

2 CSS Nedir? Cascading Styling Sheet – Stil Şablonları
Bir web sayfası için İçerik ile biçimlendirme kısmını ayırır. Avantajları Görünüm Kolaylığı Kullanım Kolaylığı Tasarım tutarlılığı Daha az dosya Boyutu Temiz kod Öğr.Gör. Aslı Yazağan

3 Stil Şablonları Sayfa tasarımında esneklik sağlar.
Birden fazla sayfayı etkiler. Yerel (Inline Style): bir html tagı için kullanılan CSS türüdür. Genel (Header Style): tüm sayfa için, tüm html taglarının değiştirilmesinde kullanılan CSS türüdür. Harici (External Style): birden çok sayfa için kullanılan CSS türüdür. Bu CSS türü ayrı bir dosya olarak çalışmaktadır.

4 Yerel CSS <html> <head> <title>CSS Dersleri – Metin Yılmaz</title> </head> <body> <p style=”font-size:12pt; color:blue;”>Inline Style Kullanımı</p> </body> </html>

5 Genel CSS <html> <head> <title>CSS Dersleri – Metin Yılmaz</title> <style type=”text/css”> p { font-size:12pt; color:blue; } </style> </head> <body> <b>Header Style Kullanımı</b> </body> </html>

6 Harici CSS CSS HTML h1 { font-size:12pt; color:blue; } h2 { font:16pt; color:red; } h3 { font-size:18pt; color:black; } <html> <head> <title>CSS Dersleri – Metin Yılmaz</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <h1>CSS Dersleri</h1> <h2>CSS Dersleri</h2> <h3>CSS dersleri</h3> </body> </html>

7 Soru? Örnekler <div style="color:red">Deneme yazımız</div>
CSS tipi? <div style="color:red">Deneme yazımız</div> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8“ /> <title>CSS’i Uygulamak </title> <style type="text/css"> div{ color:red; } </style> </head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS’i Uygulamak</title> <link rel="stylesheet" type="text/css" href="ornek.css" /> Öğr.Gör. Aslı Yazağan

8 CSS’i Web Dökümanına Eklemek
@import <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS’i Uygulamak</title> <style type="text/css"> @import "ornek.css"; </style> </head> Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir Öğr.Gör. Aslı Yazağan

9 CSS YAPISI Öğr.Gör. Aslı Yazağan

10 Uygulama CSS HTML h1 { font-size:12pt; color:blue; } h2 { font:16pt; color:red; } h3 { font-size:18pt; color:black; } <html> <head> <title>CSS Dersleri – Metin Yılmaz</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <h1>Sonbahar</h1> <h2>Kıs</h2> <h3>ilkbahar</h3> </body> </html>

11 Metin için bazı CSS etiketleri
Font-size Font-style: italic Font-weight: bold Font-family : Georgia, Arial, Serif, Times, Helvetica Color Text-alignment: right, left, justify Text- decoration: overline,line-through-underline Text-transform: uppercase, lowercase, capitalize Text-indent

12 Typography

13 Hangisi Daha Güvenilir gözüküyor?

14

15 Uygulama P { font : 0.9em Georgia; color:#000; }

16 Arkaplan için Bazı CSS özellikleri
Background-color : color code, colorname Background-image : url(imagename) Background-repeat : repeat,no-repeat,repeat-x, repeat-y Background-position : Ex: Background-attachment: fixed, scroll Kaynak:

17 Linkler için CSS özellikleri
A:link A:visited A:hover A:active

18 Listeler için CSS özellikleri
List-style-type: circle, square list-style-image: url(‘imgname.gif');


"CSS – Stil Şablonları (Cascading style Sheet)" indir ppt