Sunuyu indir
Sunum yükleniyor. Lütfen bekleyiniz
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?
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');
Benzer bir sunumlar
