Embed Size (px)
DESCRIPTION
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. Stil Şablonları. - PowerPoint PPT Presentation
Citation preview
CSS – Stil Şablonları(Cascading style Sheet)
Öğr.Gör. Aslı Yazağan 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
Stil Şablonları
• Sayfa tasarımında esneklik sağlar.• Birden fazla sayfayı etkiler.
1. Yerel (Inline Style): bir html tagı için kullanılan CSS türüdür.
2. Genel (Header Style): tüm sayfa için, tüm html taglarının değiştirilmesinde kullanılan CSS türüdür.
3. 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 CSSCSS 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>
Öğr.Gör. Aslı Yazağan 7
Soru?Örnekler 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>
<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" /></head>
Öğ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
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
