CSS – Stil Şablonları (Cascading style Sheet)
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
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.
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>
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>
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>
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
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
CSS YAPISI Öğr.Gör. Aslı Yazağan
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>
Metin için bazı CSS etiketleri Font-size http://www.w3schools.com/css/css_font.asp 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
Typography
Hangisi Daha Güvenilir gözüküyor?
Uygulama P { font : 0.9em Georgia; color:#000; }
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: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position Background-attachment: fixed, scroll Kaynak: http://www.w3schools.com/css/css_background.asp
Linkler için CSS özellikleri A:link A:visited A:hover A:active http://www.w3schools.com/css/css_link.asp
Listeler için CSS özellikleri List-style-type: circle, square list-style-image: url(‘imgname.gif'); http://www.w3schools.com/css/css_list.asp