CSS
CASSCADING STYLE
SHEETS
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.
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.
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.
<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
Kullanımı</h2>
</body>
</html>
<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ü
Ekran görüntüsü
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ı
Genel Stil Şablonları (genel css)
Selektor

Bildirim alanı
Bildirim Alanı
H1 {font-size:18pt ; color:#336699}
özellik
Değer
özellik
Değer
Bu uygulamanın aynısını <style> koduyla aşağıdaki şekilde yapabiliriz:
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.

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
}
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>

Önce
tarz.css
dosyasını
oluşturalım
Css
Bölüm 2- Örnekler ve ID-Class seçiciler
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.
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.
ÖRNEK
Ö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>
SEÇİCİLER - SELECTORS
1.
2.
•
•
•
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 {..............;}
ID SEÇİCİLER
CSS dosyasında bir idye etki edecek kodu
yazmak için başa diyez (#) işareti koyulur.
 ÖRNEK

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
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

Devamı Eklenecek
KAYNAK SİTELER
http://www.cssornekleri.com/
 www.w3schools.com/css/
 http://www.fatihhayrioglu.com/css-dersleri/

Download

CSS