CSS - Genel Bakış

HTML 5
Nedir şu HTML5 dedikleri?

HTML 5 Nedir?
HTML5 – HTML standartlarının bir sonraki en
büyük revizyonudur
Halen geliştirilmesine devam edilmektedir.
Son sürümünden hala çok uzakta
World Wide Web Consortium (W3C) altında
HTML 5 çalışma grubu tarafından 2007’den
itibaren geliştirilmektedir.
Özelliklerine ait ilk genel çalışma taslağı yayını
22 Ocak 2008
HTML 5’in bazı bölümleri tüm özellikler hazır
olmadan tarayıcılarda gerçekleştirilmeye
başlandı 2

HTML – Geçmiş, Şimdi, Gelecek
1991 – HTML ilk kez sözü geçiyor –Tim Berners-Lee – HTML
etiketler
1993 – HTML (ilk genel sürüm, IETF’de yayınlandı)
1993 – HTML 2 taslak
1995 – HTML 2 – W3C
1995 – HTML 3 taslak
1997 – HTML 3.2 – “Wilbur”
1997 – HTML 4 – ”Cougar” – CSS
1999 – HTML 4.01 (son)
2000 – XHTML taslak
2001 – XHTML (final)
2008 – HTML5 / XHTML5 taslak
2011 – özellikleri tamamlanmış HTML5
2022 – HTML5 – son tanımlamalar 3

HTML 5 Amaçlar
En son sürüm HTML5
Masaüstü uygulamaları gücüne sahip olması
amaçlanmıştır.
Herhangi bir platformda çalışabilir (Windows,
Linux, iPhone, Android, v.b.)
HTML, CSS, DOM ve JavaScript tabanlı yeni
özellikler
Harici eklenti ihtiyacını azaltmak
Daha iyi hata yakalama ve ayıklama
Betik (script) kod ile yer değiştirecek daha çok
işaret dili 4

Tasarımcı Bakış Açısı
Tasarımcıların bilmesi gerekenler?

Eski Etiketlerde Değişiklik
Doctype etiketi:
HTML etiketi:
Meta etiketi:
Link etiketi:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style-original.css">

Yeni Sayfa DüzeniYapısı
Daha iyi sayfa düzeni yapısı: yeni yapısal
bileşenler
<section>
<header>
<nav>
<article>
<aside>
<footer>
<header>
<footer>
<nav> <aside>
<section>
<header>
<article>
<footer>

(2)
Header veya footer gibi bileşenlerin sadece
sayfanın en üstünde ya da en altında olması
anlamına gelmez
Her bir HTML sayfanın üst bilgi ve alt bilgi
bölümleri (Header/footer)
<DIV> etiketinden çok farklı olmamakla
birlikte belge yapısı anlamsal olarak daha iyi
tanımlanmıştır

Yeni Sayfa DüzeniYapısı–
Örnek
<body>
<header>
<hgroup>
<h1>HTML 5 Sunum</h1>
<h2>Yeni Sayfa Düzeni</h2>
</hgroup>
</header>
<nav>
<ul>
Ders
</ul>
<ul>
Demo
</ul>
<ul>
Eğiticiler
</ul>
</nav>

Yeni Sayfa DüzeniYapısı–
Örnek (2)
<section>
<article>
<header>
<h1>İlk Paragraf</h1>
</header>
<section>
Lorem Ipsum Metin
</section>
</article>
</section>
<aside>
<a href="http://www.egitim.ogu.edu.tr"> daha fazla
bilgi</a>
</aside>
<footer>
CMK, (c) 2013, B.Ö.T.E
</footer>
</body>

Etiketleri
Demo

Yeni Etiketler
<article>
Harici içerik için, haber sayfalarından metin, blog,
forum, veya diğer harici kaynaklar
<aside>
İçerik ile ilgili sayfa kenarına yerleştirilmiş bilgi
<details>
Belge ile ilgili ayrıntıları veya belgenin bölümlerini
tanımlarken kullanılır
<summary>
Bir başlık, veya özet, bileşen detayı içinde

Yeni Etiketler (2)
<mark>
Vurgulanacak metinler için
<nav>
Navigasyon kısımları için
<section>
Belge bölümlerini ayırmak için (örneğin bölümler,
başlıklar, alt bilgiler)
<wbr>
Sözcük kaydırma (Word break) uzun kelime veya
cümleler bölmek için uygun yer tanımlamak amacıyla
kullanılır
Diğer etiketler
<command>, <datalist>, <details>, <progress>, vb.

Yeni Çoklu Ortam Etiketleri
Çoklu Ortam Etiğketleri (MediaTags)
<audio>
Öznitelikler: autoplay, controls, loop, src
<video>
Öznitelikler: autoplay, controls, loop,
height, width, src
<audio width="360" height="240" controls= "controls" >
<source src="someSong.mp3" type="audio/mp3">
</source>
Audio etiketi desteklenmiyor
</audio>

CSS Genel Bakış
Cascading Style Sheets
(Basamaklı Stil Şablonları)
Celal Murat KANDEMİR
ESOGÜ – Eğitim Fakültesi - BÖTE
Twitter.com/cmkandemir

İçindekiler
CSS nedir?
CSS ile biçimlendirme (CSS)
Seçiciler ve stil tanımlamaları
HTML ve CSS bağlantısı
Font ve text stilleri
Arkaplanlar
http://jsfiddle.net
16

CSS:Yeni Bir Anlayış
İçerik sunumdan ayrılır!
17
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae
neque non magna aliquam
dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.
Bold
Italics
Indent
İçerik
(HTML belge)
Sunum
(CSS Belge)

Sonuç Sayfa
18
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae neque
non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec,
interdum vel, mi. Sed nec quam nec
odio lacinia molestie. Praesent augue
tortor, convallis eget, euismod
nonummy, lacinia ut, risus.

CSS Giriş
Cascading Stylesheets İle
Biçimlendirme

CSS Giriş
Cascading Style Sheets (CSS)
Belgelerin nasıl sunulacağını tanımlamak için
kullanılır
sizes, spacing, fonts, colors, layout, vb. özellikleri
tanımlar
İçeriklerin erişilebiliriliğini arttırır.
Esnekliği arttırır.
İçerikte bağımsız sunum şeklinin tasarlanmasını
sağlar.
CSS’e bağlı olarak , tüm HTML biçim (sunum)
etiket ve özelliklerinin kullanılması
önerilmemektedir., e.g. font, center, vb. 20

CSS Giriş(2)
CSS herhangi bir XML belgeye de uygulanabilir
Sadece HTML / XHTML belgeler değil
CSS farklı ortamlar (media) için farklı stiller
sağlar
Ekran (On-screen)
Basılı (In print)
Taşınabilir cihaz, projeksiyon, vb.
… ses veya Braille-tabanlı okuyucular dahil
21

Neden “Cascading”?
Öncelik şeması, bileşene hangi stil kuralının
uygulanacağını bulur
Cascade öncelikleri veya özgüllükleri (ağırlık)
hesaplanır ve kurallara atanır
HTML DOM ağacında bulunan çocuk (alt)
bileşenler, stilleri ebeveynlerinden (üst) miras
alırlar.
Onların üzerine yeni kurallar konabilir. (override)
important kuralı üzerinden control edilir.
22

Neden “Cascading”? (3)
DOM (Document Object Model)
Belge Nesne Modeli
23

Stil Miras Alma - Inheritance
Bazı CSS stilleri miras alınabilirken bazıları da
alınamaz
Metinle ilgili (Text-related) ve listeler ile ilgili
(list-related) özellikler miras alınabilir - color,
font-size, font-family, line-height, text-
align, list-style, vb.
Kutu ile ve konumlandırma ile ilgili (Box-related
ve positioning) stiller miras alınamaz not
inherited - width, height, border, margin,
padding, position, float, vb
<a> bileşenleri color ve text-decoration miras
alamaz 25

Style Sheets Sözdizimi
Stil şablonları kurallar (rules), seçiciler (selectors),
bildirimler (declarations), özellikler (properties) ve
değerler (values) içerir
Seçiciler virgül ile ayrılır
Bildirimler noktalı virgül ile ayrılır
Özellik ve değerler iki nokta ile ayrılırlar
26
h1,h2,h3 { color: green; font-weight: bold; }
http://css.maxdesign.com.au/

HTML ve CSS Bağlantısı
HTML (içerik) ve CSS (sunum biçimi) üç yolla
bağlanabilir:
Satıriçi (Inline): CSS kuralları style özelliğinde
Seçiciye ihtiyaç yok
Gömülü (Embedded): <head> içinde <style>
etiketi
Harici (External): CSS kurallar ayrı bir doyada (en
iyi ve doğrusu)
Genellikle uzantısı .css dosyalarda
Bağlantı <link rel="stylesheet" href="
…"> etiketi ile sağlanır
@import yönergesi üzerinden gömülü CSS blok
27

HTML ve CSS Bağlantısı(2)
Harici dosya kullanımı tavsiye edilir.
HTML belgeyi sadeleştirir
CSS dosya ön belleklendiği için sayfa
yüklenmesini hızlandırır
28

Satır içi Stiller - Inline Styles
CSS kurallar bileşenlerin style özelliğinde
tanımlanır
Seçicilere ihtiyaç yoktur
Ayarlandıkları bileşen üzerinde çalışırlar
Tavsiye edilmez
İçerik ve sunum biçimleri biribiri içine karışır
CSS’teki ana fikir bu karışıklığı ortadan
kaldırmaktır
29

Inline Styles: Örnek
30
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html

Inline Styles: Örnek
31
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>

<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html

Gömülü Stiller - Embedded
Styles
HTML içinde <style> etiketi arasına gömülür.
<style> etiketi belgenin <head> bölümüne
yerleştirilir.
type özelliği MIME (Multipurpose Internet Mail
Extensions) tipi belirler
MIME içerik biçimini tanımlar
Diğer MIME tipleri text/html, image/gif,
text/javascript …
Belge-belirli (document-specific) stiller için
kullanılır 32
<style type="text/css">

Gömülü Stiller: Örnek
33
<!DOCTYPE html>
<html>
<head>
<title>Style Sheets</title>
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
embedded-stylesheets.html

Gömülü Stiller: Örnek(2)
34
…
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</article>
</body>
</html>

…
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</article>
</body>
</html>
Gömülü Stiller: Örnek(3)
35

Harici CSS Stil - External CSS
Styles
Harici bağlama
Farklı HTML sayfaların ortak stil şablonu
kullanması sağlabilir
Tek bir dosyada değişiklik yapılması tüm web sitesi
boyunca bulunan sayfalardaki stillerin değişmesini
sağlar. (bkz http://www.csszengarden.com/)
link etiketi (rel özellliği ile)
Geçerli belge ile başka bir belge arasındaki ilişkiyi
belirler ve <head> </head> etiketleri arasındadır.
36
<link rel="stylesheet" type="text/css"
href="styles.css">

Harici CSS Stil (2)
@import
Harici CSS dosyaları bağlamak için diğer bir yol
Örnek:
Eski tarayıcılar @import yönergesini tanımaz
@import ile harici dosya eklemeyi IE CSS dosya
sınırı olan 32 civarında tutmanız önerilir.
37
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

Seçiciler - Selectors
Seçiciler kuralın hangi bileşene uygulanacağını
belirlemede kullanılır:
Belli tipteki tüm bileşenler (etiket-tag)
Belirli bir özellik ile eşlenenler (id, class)
Bileşenler HTML belge ağacında nasıl iç içe
kullanıldığına göre de eşleşebilir
Örnekler:
39
.header a { color: green }
#menu>li { padding-top: 8px }

Seçiciler (2)
Üç ana seçici çeşidi:
Etiket ile (type selector):
Bileşen id ile:
Bileşen sınıf adı ile (sadece HTML için):
Seçiciler virgül ile birleştirilebilir:
Bu ifade <h1> etiketleri, elements with link
class’ına sahip bileşenleri, ve top-link id’li
bileşenler ile eşleştirilir 40
h1 { font-family: verdana,sans-serif; }
#element_id { color: #ff0000; }
.myClass {border: 1px solid red}
h1, .link, #top-link {font-weight: bold}

Seçiciler(3)
Sözde-sınıflar (Pseudo-classes), durumları
tanımlar. Bir bileşeni farklı sınıflara böler.
:hover, :visited, :active , :lang
Sözde-bileşenler (Pseudo-elements),
bileşenler için "alt bölümleri" tanımlar veya
içerik yaratmak için kullanılır
:first-line , :before, :after
41
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

Seçiciler(4)
Bileşen yerleşimine bağlı olarak eşleşir:
<p> içindeki tüm <a> tetiketleri için kullanılır
* – evrensel seçici (uzak durulmalı veya dikkatli
kullanılmalı!):
<p> bileşeninin tüm alt elemanları ile eşleşir
+ seçici – “sonraki kardeş - next sibling” için
kullanılır:
<img> etiketinden hemen sonraki link class
ismine sahip tüm kardeşler ile eşleşir
p a {text-decoration: underline}
p * {color: black}
img + .link {float:right}

Seçiciler (5)
> seçici–doğrudan alt düğümleri eşleştirir:
<p> etiketinin doğrudan alt düğümlerindeki error
sınıfına sahip tüm bileşenleri ile eşleşir.
[ ] – normal ifadeli etiket özellikleri ile eşleşir:
alt özelliğinde logo kelimesi geçen tüm etiketler ile
eşleşir.
.class1.class2 (boşluk yok) – aynı anda bu sınıfların
uygulandığı tüm bileşenlerle eşleşir
43
p > .error {font-size: 8px}
img[alt~=logo] {border: none}

CSS3 – Özellik Seçicileri
E[foo^="bar"]
E bileşeni: "foo" özelliği değeri "bar" string’i ile
başlayan
Örnek: a[src^="https://"]
E[foo$="bar"]
E bileşeni: "foo" özelliği değeri "bar" string’i ile
biten
E[foo*="bar"]
E bileşeni: "foo" özelliği değeri "bar" alt string’i
içeren
44

CSS3 – Özellik Seçiciler
Demo

CSS3 –Yapısal Sözde Sınıflar
:root
Belge kök’ü (root)
E:nth-child(n)
E, aynı seviyedeki baştan n. sıradaki bileşen
E:nth-last-child(n)
E, aynı seviyedeki sondan n. sıradaki bileşen
E:nth-of-type(n)
E, aynı seviyedeki n. aynı tipteki bileşen
46

CSS3 –Yapısal Sözde Sınıflar(2)
E:nth-last-of-type(n)
E, sondan başa doğru aynı seviyedeki ve aynı
tipteki n. eleman
E:last-child
E, aynı seviyedeki elemanların en sonuncusu
E:first-of-type
E, aynı seviyedeki ilk aynı tipteki eleman
E:last-of-type
E, aynı seviyedeki en son aynı tipteki eleman
47

CSS3 – Structural Pseudo-
classes (3)
E:only-child
E, bir ebeveyni olan ve bu ebeveynin tek çocuğu
olan eleman
E:only-of-type
E, bir ebeyni olan ve bu ebeveynin aynı etiket
adına sahip tek çocuğu olan eleman
E:empty
E, alt elemanı(çocuk) olmayan eleman
More detailed descriptions:
http://www.w3.org/TR/css3-selectors/#structural-pseudos
http://fatihhayrioglu.com/css3-secicileri/
48

CSS3 – UI Bileşen Durumları
Sözde Sınıfları
Form elemanlarının çeşitli durumlarını
seçebilmek için kullanılan sözde sınıflardır.
E:enabled
Kullanıcı arayüz bileşeni E aktif
E:disabled
Kullanıcı arayüz bileşeni E pasif
E:checked
Kullanıcı arayüz bileşeni E seçili (örneğin radio-
button veya checkbox)
Şu an için sadece Opera tarafından
destekleniyor!
http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors-1/ 49

Diğer CSS 3 Seçiciler
E:target
doküman içi linklere odaklanılmasını sağlar
E:not(s)
Olumsuzluk belirtmek için kullanılan sözde
sınıftır.
body içindeki tüm elemanlara kenar çizgisi ata, dipnot(blockquote) hariç
E ~ F
E bileşen sonrasında bir F bileşen.
http://www.w3schools.com/cssref/sel_gen_sibling.asp
50

CSS Kuralları İçinde Değerler
Renkler RGB biçiminde (ondalık veya onaltılık-hex):
Örnek: #a0a6aa = rgb(160, 166, 170)
Ön tanımlı renk isimleri mevuct: black, blue, vb.
Sayısal değerler:
Pixels, ems, vb. 12px , 1.4em
Points, inches, centimeters, millimeters
E.g. 10pt , 1in, 1cm, 1mm
Yüzdeler, e.g. 50%
Neyin Yüzdesi peki?...
Sıfır birimsiz kullanılabilir: border: 0;
51

Varsayılan-Default Tarayıcı
Stilleri
Tarayıcılar varsayılan stillere sahiptir
Belge ile ilgili CSS bulunmadığında kullanılır
Dikkat: varsayılan stiller tarayıcılarda farklılık
gösterir
E.g. margins, paddings ve font sizes çoğunlukla
farklıdır
Geliştiriciler genellikle bunları sıfırlar
52
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }

CSS Basamak (Öncelik)
Tarayıcı, kullanıcı ve yazar stil şablonları
"normal" ve "important" bildirimleri vardır
Tarayıcı stilleri (en düşük öncelik)
Normal kullanıcı stili
Normal yazar stili (harici, head, satır içi)
Important yazar stili
Important kullanıcı stili (max öncelik)
53
a { color: red !important ; }
http://www.slideshare.net/maxdesign/css-cascade-1658158

CSS Etkinliği (Specificity)
CSS etkinliği, aynı kökenli stil bildirimlerinin
önceliğini bulmada kullanılır.
CSS'de etkinliğin anlamı stil çatışması(aynı
elemente birden fazla tanım yapıldığında)
olduğunda kullanılan hangi kodun web
tarayıcıları tarafından yorumlanacağını
belirlemektir.
http://fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-
you-should-know/
http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
54

Hesaplama Kuralları
Kod içinde tanımlama yapılmışsa (inline-kod)
Stil dosyasındaki tanımlı ID'lerin sayısına
Sınıf tanımlalarının sayısına
Seçicilerin sayısına bakar
55

Etkinlik değeri 4 basamaklıdır.
Web tarayıcıları bu sayıları toplamaz, yanyana
dizer.
56

57
• 0 (kod içinde değil)
• 0 (id)
• 1 (secili sınıfı)
• 3 (ul h1 li seçicileri) = 0013
• 0 (kod içinde değil)
• 0 (id)
• 0 (secili sınıfı)
• 1 (ul h1 li seçicileri) = 0001

CSS belirlemeye göre yüksek değer alanın
özelliği uygulanır.
Her ikisinde de h1'e bir tanımlama yapılmıştır.
Tanımlama sistemleri farklıdır.
Koddaki h1 elementi mavi değil sarı (yellow)
olarak gösterilir.
Eğer değer aynı olursa (0013 = 0013) ne olur?
bu durumda son yapılan tanımlamanın özellikleri
uygulanır.
Sıralama önemli !!! 58

59
• Ayrıca öncelik için !important tanımlaması vardır.
• Eğer yukarıdaki koda !important eklenirse
• Tanımlama yukarıdaki gibi değiştirildiğinde h1
elementi mavi renkte görünür

Text İle İlgili Özellikler
60

Text İle İlgili CSS Özellikleri
color – metin rengini belirler
font-size – size of font: xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger veya sayısal değer
font-family – virgül ile ayrılmış font isimleri
Örnek: verdana, sans-serif, vb.
Tarayıcı mevcut ilkini yükler
En az bir tane genel bir font olmalıdır
font-weight, normal, bold, bolder, lighter
veya [100 … 900] aralığında sayı değerleri alabilir
61

CSS Kuralları- Fontlar İçin (2)
font-style – font stilini verir
Değerler: normal, italic, oblique
text-decoration – metni dekore eder
Değerler: none, underline, line-trough,
overline, blink
text-align – metin veya diğer içeriğin
hizalamasını tanımlar
Değerler: left, right, center, justify
62

Steno Font Özelliği
font
Steno font özelliği aynı anda çoklu font özelliği
yapılandırmasını sağlar.
aşağıdaki ifadeyle aynıdır:
63
font:italic normal bold 12px/16px verdana
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

CSS3 – Font Gömme
Font bildirimi için @font-face kullanılır
Sunucudaki font dosyasını gösterir
Font, font-family ile çağrılır
IE tarafından desteklenmiyor
Resimler yerine fony gömme kullanın
@font-face {
font-family: SketchRockwell;
src: url('SketchRockwell-Bold.ttf');
}
.my_CSS3_class {
font-family: SketchRockwell;
font-size: 3.2em;
}
65

CSS3 –Text Shadow
Metni gölgelendirir
Sözdizimi: text-shadow: <horizontal-
distance> <vertical-distance>
<blur-radius> <shadow-color>;
Kutunun boyutunu değiştirmez
66
text-shadow: 2px 2px 7px #000000;

CSS3 –Text Overflow
Metin taşıyıcı bileşeni aştığı zaman ne
yapılacağını belirler
Sözdizimi: text-overflow: <value>;
Alabileceği değerler:
ellipsis – Kırpılan metin elipslerle ifade edilir
clip –Varsayılan değer, metin kırpılır
Henüz Firefox ve IE tarafından desteklenmiyor
67

CSS3 – Sözcük Kaydırma-Word
Wrapping
Uzun cümlelerin kırılıp bir sonraki satıra
geçmesine izin verir.
Sözdizimi: word-wrap: <value>;
Alabileceği değerler:
normal
break-word
Destekleniyor
68

CSS3 –Text Girintisi
Paragrafların ilk cümlelerin soldan içeriye
kaydırılması için kullanılan bir özelliktir.
Sözdizimi: text-indent: <value>;
Alabileceği değerler: px değerleri
69

Renkler
http://html-color-codes.info/
http://www.w3schools.com/tags/ref_colorpicker.asp
Color Pickers

Saydamlık - Opacity
Bileşen için saydamlık seviyesini belirler
Sözdizimi: opacity: <value>;
Değerler: 0.0 - 1.0 (tam saydamlık)
Örnek:
71
<img src="img.jpg" style= "
opacity: 0.4;
filter: alpha(opacity=40)" />

RGBA Renkler
72
Standart RGB renkleri saydamlık değeri ile
birlikte verilebilir (alpha channel)
Sözdizmi: rgba(<red>, <green>,
<blue>, <alpha>)
red, green ve blue değerleri 0 ve 255 arası
tamsayılar
Alfa saydamlık sayısı 0.0 ve 1.0 arasında
Örnek: rgba(255, 0, 0, 0.5)

HSL Renkler
Hue renk çarkındaki açıdır
0 (veya 360) red, 120 green, 240 blue
Saturation yüzdelik değer
100% tam renk
Lightness yüzdelik değer
0% koyu (black)
100% açık (white)
50% ortalama
73

HSLA Renkler
HSLA dördüncü değer olarak bileşen için alfa
saydamlığın verilmesini sağlar.
RGBA RGB, HSLA HSL
Örnek:
hsla(0, 100%, 50%, 0.5)
Sonuç:
74

Arkaplan - Background
Özellikleri

Arkaplanlar
background-image
Arkaplan olarak kullanılacak olan resim bağlantı
yolu
background-color
Renk ve resim aynı anda kullanılır
background-repeat
repeat-x, repeat-y, repeat, no-repeat
background-attachment
fixed / scroll 76
background-image:url("back.gif");

Arkaplanlar(2)
background-position: arkaplan resmin
yatay-dikey olarak yerleşimini belirler.
Dikey-Vertical pozisyon: top, center, bottom
Yatay-Horizontal pozisyon: left, center,
right
Yüzdelik dilim veya sayısal değer olarak
tanımlanabilir
Örnekler:
77
background-position: top left;
background-position: -5px 50%;

Arkaplan Steno Özellik
background: arkaplan özellikleri için aynı anda
çoklu özellik yapılandırmak:
aşağıdaki ile eşdeğerdir:
Bazı tarayıcılar eğer steno kuralı kullanılırsa renk ve
resmi aynı anda uygulayamayabilir
78
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;

background-image veya
<img>?
Arkaplan resim tanımlamaları HTML içinde çok
fazla img etiketi kullanılmasını önler
Daha az kodlama
Daha içerik-odaklı yaklaşım
Sayfa içeriğinin parçası olmayan tüm resimler
CSS’ye taşınmalıdır.
79

CSS3 – Gradient Arkaplan
Gradientler iki veya daha fazla renk arasında
pürüzsüz geçiş sağlar
CSS gradientleri resimlerle yer değiştirerek
indirme zamanını hızlandırmak için
kullanılabilir.
Daha esnek bir yerleşim yaratır ve
yakınlaştırıldığında daha iyi görünür.
Hala deneysel aşamasında bir özelliktir.
80

CSS 3 – Gradient Backgrounds
Example
81
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg,
#FFFF00, #0000FF);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0%
100%, from(#0000FF), to(#FFFF00));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#FFFF00,
#0000FF);
/* Opera 11.10+ */
background: -o-linear-gradient(#2F2727, #0000FF);

CSS3 – Çoklu Arkaplan
CSS3 çoklu arkaplan resmi kullanılmasına izin
verir
Basitçe virgülle ayrılmış resim listesidir
Firefox (3.6+), Chrome (1.0/1.3+), Opera (10.5+)
ve Internet Explorer (9.0+)
82
background-image: url(sheep.png), url(grass.png);

CSS Referans
Tüm CSS 2.1 özellikleri için
http://www.w3.org/TR/CSS2/propidx.html
Tüm CSS3 özellikleri için
http://www.w3schools.com/css/css3_intro.asp
83

CSS - Genel Bakış

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS - Genel Bakış

Similar to CSS - Genel Bakış (20)

More from cmkandemir

More from cmkandemir (20)

CSS - Genel Bakış