CSS' e Giriş Dersi / Uygulamalı Anlatım

blueden · 16 Haz 2009

Önce Css' yi tanımlayalım. Diyelim ki geniş kapsamlı bir site yapacaksınız ve binlerce başlık var. Aynı başlıklara aynı etiket ve özellik eklemeniz çok büyük bir zaman kaybına neden olacaktır. Css ile oluşturdugunuz stilleri tüm sitede kullanabilirsiniz.

Öncelikle html kodlarını tanımanız; en azından göz aşınası olmanız gerekmektedir.
Örnek:

<h1><font color="pink">Sitenin Baslıgı</font></h1>

(Başlıgın(h1) font rengi: pembe)

Css stili olarak:

h1 {color: pink}
h1, h2, h3 {color: pink}
şeklinde de kullanılabilir.

CSS i, HTML sayfalarınıza eklemenin yöntemleri vardır. Aşağıda bir kaç kolay yönteme göz atalım

<Head> etiketi arasına ekleme:
----------

<head>
<title>Grafikerler.net</title>
<style type="text/css">
div{
color:pink;
}
</style>
</head>

2.Yöntem:

".html" formatında kaydettiğimiz gibi; ".css" formatında da kaydedebiliriz.
Html sayfamıza aşağıdaki gibi bir kod ekleriz.

"blueden.css"
<link rel="stylesheet" type="text/css" href="blueden.css" />

Süslü parantezle bildirim blogu { } açılır ve kapanır. Bildirimler arasında
; noktalı virgül kullanılır. Özellik ve degerler : iki nokta
üst üste ile ayrılır.

Uzunluk degerleri, yüzde degerleri,
renk degerleri ve URL degerleri...şeklinde dört gruba ayıracagımız değerler bulunur.

RENKLER:
Renkler tırnak içinde kullanılmaz.

p{
color: pink;
}

UZUNLUK:

em: Elemanın yazı tipinin yüksekligidir.
Diyelim ki font büyüklüğü 10 pixel ise 1 em - 10 pixel dir.

ex: Elemanın "x" harfinin yüksekligidir. Atanmıs olan yazıtipinin küçük "x"
degeri yüksekligidir.

px: Piksel degeridir.

Gerçek hayatta kullandıfımız; kesin değerler vardır.

in-cm-mm-pt(point) v.s...
Yüzde değerleri:

Yüzdeler nesnelerin boyutuna göre orantılı olarak değişir.

Örnek:

h1 { line-height: 150% }

(Font büyüklüğünün: yüzde 150' si)

CSS de RENK DEĞERLERİ:

#RRGGBB
RR - Red
GG - Green
BB - Blue

Kısaltması #RGB ' dir.

Renk kodları

URL DEĞERLERİ:

url("https://www.grafikerler.net/ımages/blueden.gif")

Örnek Uygulamalar:

<title>Grafikerler.net</title>
<style type="text/css">
.ortala {
text-align: center;
}
</style>
</head>
<body>
<h1 class="ortala"> Blueden </h1>
<p class="ortala">Blueden</p> </body>
</html>

Önizleme:

Blueden

Blueden

Çoklu sınıf uygulamaları örneği:

<html>
<head>
<title>Grafikerler.net</title>
<style type="text/css">
.onemli {
font-weight : bold;
}
.uyari {
font-style: italic;
}
.onemli .uyari{
background-color: silver;
}
</style>
</head>
<body>
<p class="onemli">Not:</p>
<p class="onemli uyari">Bu tanımlamayı yaptıktan sonra istedigimiz her HTML elemanına bu sınıfı
uygulayabiliriz.</p>
</body>
</html>

Önizlemesi:

Not:

Bu tanımlamayı yaptıktan sonra istedigimiz her HTML elemanına bu sınıfı
uygulayabiliriz.

(Zeminin arka planı gri olur)

Önemli metinler için kalın; eğik metinler için uyari etiketi kullanıyoruz.
class=onemli uyari şeklinde her ikisinide atayabiliriz.

Tekil Seçiçi örnekleri:

<html>
<head>

<title>Grafikerler.net</title>
<style type="text/css">
#nesne1{
background-color: yellow;
}
#nesne2{
background-color: blue;
}
</style>
</head>
<body>
<p id="nesne1">yazının zemin rengi sarı</p>
<p id="nesne2">yazının zemin rengi mavi</p>
</body>
</html>

Önizleme:

Sözde Link Sınıfı

Sadece linklere uygulanan iki Sözde Link sınıfı vardır.

:link ve

:visited

:link - Ziyaret edilmemis sayfanın linkine stil tanımlaması yapmak için
kullanılır. Ancak birçok web tarayıcısı yapılan stil tanımlarını ziyaret edilmis
sayfa linklerine de uygular.

:visited - Ziyaret edilmis sayfa linklerine stil tanımlaması yapmak için
kullanılır.
Örnek

a:link {color: blue}
a:visited {color: green}

Lingin rengi mavi(blue), tıklandıgında yeşil(green) olacaktır.
Linke stillerde ekleyebilrisiniz.

Örnek uygulama:

....
<style type="text/css">
a {
color: blue;
}
a:visited {
color: red;
text-decoration: line-through;

}
</style>
</head>
<body>
<p><a href="https://www.grafikerler.net" title="">Grafiker </a>
</p>
<p><a href="https://www.grafikerler.net" title="">Grafikerler.net </a>
</p>
<p><a href="https://www.grafikerler.net/blueden" title="deniz">deniz </a>
</p>
</body>
</html>

Önizlemesi:

Şimdilik bu kadar.
Kolay gelsin.

Hazırlayan: Blueden

filizdmr · 16 Haz 2009

Canım ne diyeyimki ben sana çok teşekkür ederim.

Benim kafayı yememe dayanamadın tabi

Bu arada hiçte çaktırmadan hazırlayıp linki atman süpriz oldu birtanesin Emeklerine o güzel yüreğine sağlık. :angel::kiss1:

C3ng0 · 16 Haz 2009

teşekkürler denizcik faydalı bilgiler için ....

blueden · 16 Haz 2009

C3ng0' Alıntı:
teşekkürler denizcik faydalı bilgiler için ....

Sağol Cengizcik

filizdmr' Alıntı:
Canım ne diyeyimki ben sana çok teşekkür ederim.
Benim kafayı yememe dayanamadın tabi
Bu arada hiçte çaktırmadan hazırlayıp linki atman süpriz oldu birtanesin Emeklerine o güzel yüreğine sağlık. :angel::kiss1:

CSS' i kafana takmana seyirci mi kalıcaktım canım benimm

Beğenmene sevindim, senin yüreğine sağlık

:kiss1:

wwaslıww · 17 Haz 2009

aspden sonra çokta zor gelmedi

emeğine sağlık canım benim çok güzel bir ders olmuş

lovies · 17 Haz 2009

Teşekkürler deniz faydalı bilgiler sunmuşun

blueden · 17 Haz 2009

wwaslıww' Alıntı:
aspden sonra çokta zor gelmedi

emeğine sağlık canım benim çok güzel bir ders olmuş

Zaten asp ve asp.net kendi başına ayrı bir dünya...CSS' inde kendine göre zorlukları var; ama html tabanlı oldugundan bunları gören birisi için daha kolay geliyor

Ben teşekkür ederim Aslı' cım.

lovies' Alıntı:
Teşekkürler deniz faydalı bilgiler sunmuşun

Teşekkür ederim.

Yunus PARLAR · 17 Haz 2009

Eline emegine sağlık canım. Çok faydalı bir başlanğıç olmuş.:artipuan:

Baterist · 17 Haz 2009

Tekrardan pekiştirmiş olduk sağolun.

blueden · 17 Haz 2009

Yunus PARLAR' Alıntı:
Eline emegine sağlık canım. Çok faydalı bir başlanğıç olmuş.:artipuan:

Sağol Yunus' cum.

Baterist' Alıntı:
Tekrardan pekiştirmiş olduk sağolun.

Teşekkür ederim.

el_chancho · 18 Haz 2009

Devamının Gelmesi Dilegi ile

blueden · 18 Haz 2009

el_chancho' Alıntı:
Devamının Gelmesi Dilegi ile

Teşekkürler...

BATMANCU · 12 Eyl 2009

paylaşım için tşk. ederim bilmediğim bikaç birşey varmış.

Ali Emre · 12 Eyl 2009

Teşekkürler Deniz..

blueden · 12 Eyl 2009

BATMANCU' Alıntı:
paylaşım için tşk. ederim bilmediğim bikaç birşey varmış.

Ali Emre' Alıntı:
Teşekkürler Deniz..

Rica ederim

ѕαнιη · 18 Eyl 2009

tşkler gerçekten faydalı bilgiler yeni başlayanlar için

blueden · 21 Eyl 2009

ѕαнιη;597188' Alıntı:
tşkler gerçekten faydalı bilgiler yeni başlayanlar için

Ben teşekkür ederim.

	Benzer konular	Forum			Tarih
Y	Photoshop'ta tasarlayıp, css'e dökebilecek tecrübede webmaster - Bursa	İş Veren İlanları	1	717	16 Ağu 2015
S	Photoshop Çalışmlarını CSS'e Aktaramıyorum ! ( YARDIM)	Photoshop	0	784	28 Ara 2013
F	Komplike tasarımları CSS'e aktarmak. (PSD to CSS - Yardım!)	Web Tasarımı	2	1K	19 Ağu 2013
B	PSD'den Html - CSS'e Dökme İşlemi - İstanbul	İş Veren İlanları	1	2K	14 May 2013
M	Reklam ajansına bir grafiker birde css'ci alınacaktır - Konya	İş Veren İlanları	3	709	18 Ara 2012
W	CSS'ye Dair Aradığınız Herşeyi Bulabileceğiniz E-Kitaplar	Css	9	3K	21 Ocak 2012
D	CSS'e Göre Şablon çizme	Temel Tasarım İlkeleri	1	1K	7 Eki 2011
	Css'de Yazıyı Kutunun En üstüne hizalama	Dreamweaver	8	16K	7 Ocak 2011

Ara

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

CSS' e Giriş Dersi / Uygulamalı Anlatım

blueden

Kreatif Stratejist

Benzer konular

filizdmr

C3ng0

blueden

Kreatif Stratejist

wwaslıww

lovies

blueden

Kreatif Stratejist

Yunus PARLAR

Baterist

blueden

Kreatif Stratejist

el_chancho

blueden

Kreatif Stratejist

BATMANCU

Ali Emre

blueden

Kreatif Stratejist

ѕαнιη

blueden

Kreatif Stratejist