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

Php, Asp, Perl, Html - CSS' e Giriş Dersi / Uygulamalı Anlatım ...

Cevapla
CSS' e Giriş Dersi / Uygulamalı Anlatım
blueden isimli Üye şimdilik offline konumundadır

blueden

Hiç Biri / Konya

Standart
Alt 16-06-2009 #1
Sponsorlu Bağlantılar

Ö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:[COLOR="Magenta"] pembe[/COLOR])

Css stili olarak:

[COLOR="RoyalBlue"]h1 {color: [COLOR="Magenta"]pink[/COLOR]}[/COLOR]

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:[COLOR="Magenta"]pink[/COLOR];
}
</style>

</head>
2.Yöntem:

"[COLOR="darkred"].html[/COLOR]" formatında kaydettiğimiz gibi; "[COLOR="DarkRed"].css[/COLOR]" 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.

[COLOR="DarkRed"]RENKLER[/COLOR]:
Renkler tırnak içinde kullanılmaz.

p{
color: [COLOR="Magenta"]pink[/COLOR];
}

[COLOR="darkred"]UZUNLUK[/COLOR]:

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:

[COLOR="DarkOrchid"]h1[/COLOR] { [COLOR="RoyalBlue"]line-height[/COLOR]: [COLOR="Blue"]150%[/COLOR] [COLOR="DarkOrchid"]}[/COLOR]

(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.

[COLOR="Purple"]Renk kodları[/COLOR]


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

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

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

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

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

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

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

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

[COLOR="DarkRed"]URL DEĞERLERİ[/COLOR]:

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

[COLOR="red"]Örnek Uygulamalar:[/COLOR]

<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">
[COLOR="Magenta"]#nesne1{[/COLOR]
[COLOR="RoyalBlue"]background-color[/COLOR]: [COLOR="navy"]yellow[/COLOR];
}
[COLOR="magenta"]#nesne2{[/COLOR]
background-color: [COLOR="royalblue"][COLOR="Navy"]blue[/COLOR][/COLOR];
[COLOR="magenta"]}[/COLOR]
</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:
CSS' e Giriş Dersi / Uygulamalı Anlatım
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 [COLOR="DeepSkyBlue"]mavi[/COLOR](blue), tıklandıgında [COLOR="SeaGreen"]yeşil[/COLOR](green) olacaktır.
Linke stillerde ekleyebilrisiniz.

Örnek uygulama:

....
<style type="text/css">
[COLOR="Magenta"]a {[/COLOR]
[COLOR="RoyalBlue"]color[/COLOR]: [COLOR="navy"]blue[/COLOR][COLOR="Magenta"];[/COLOR]
[COLOR="magenta"]}
a:visited [/COLOR]
{
[COLOR="royalblue"]color[/COLOR][COLOR="magenta"]:[/COLOR] [COLOR="navy"]red[/COLOR][COLOR="magenta"][COLOR="magenta"];[/COLOR][/COLOR]
[COLOR="RoyalBlue"]text-decoration[/COLOR]: [COLOR="Navy"]line-through[/COLOR][COLOR="Magenta"][COLOR="magenta"];[/COLOR][/COLOR]

}
</style>

</head>
<body>
<p><a href="http://www.grafikerler.net" title="">Grafiker </a>
</p>
<p><a href="http://www.grafikerler.net" title="">Grafikerler.net </a>
</p>
<p><a href="http://www.grafikerler.net/blueden" title="deniz">deniz </a>
</p>
</body>
</html>
Önizlemesi:

CSS' e Giriş Dersi / Uygulamalı Anlatım
Şimdilik bu kadar.
Kolay gelsin.

Hazırlayan: Blueden
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

filizdmr isimli Üye şimdilik offline konumundadır

filizdmr

Ressam / Kocaeli

Standart
Alt 16-06-2009 #2
                             Sponsorlu Bağlantılar
Canım ne diyeyimki ben sana çok teşekkür ederim. CSS' e Giriş Dersi / Uygulamalı Anlatım
Benim kafayı yememe dayanamadın tabi CSS' e Giriş Dersi / Uygulamalı Anlatımp
Bu arada hiçte çaktırmadan hazırlayıp linki atman süpriz oldu [COLOR="Red"]birtanesin [/COLOR]Emeklerine o güzel yüreğine sağlık. :angel::kiss1:
Bu mesajdan alıntı yap
C3ng0 isimli Üye şimdilik offline konumundadır

C3ng0

Grafiker / Ankara

Standart
Alt 16-06-2009 #3
teşekkürler denizcik faydalı bilgiler için ....
Bu mesajdan alıntı yap
blueden isimli Üye şimdilik offline konumundadır

blueden

Hiç Biri / Konya

Standart
Alt 16-06-2009 #4
teşekkürler denizcik faydalı bilgiler için ....
Sağol Cengizcik CSS' e Giriş Dersi / Uygulamalı Anlatımp

Canım ne diyeyimki ben sana çok teşekkür ederim. CSS' e Giriş Dersi / Uygulamalı Anlatım
Benim kafayı yememe dayanamadın tabi CSS' e Giriş Dersi / Uygulamalı Anlatımp
Bu arada hiçte çaktırmadan hazırlayıp linki atman süpriz oldu [COLOR="Red"]birtanesin [/COLOR]Emeklerine o güzel yüreğine sağlık. :angel::kiss1:
CSS' i kafana takmana seyirci mi kalıcaktım canım benimm CSS' e Giriş Dersi / Uygulamalı Anlatım
Beğenmene sevindim, senin yüreğine sağlık CSS' e Giriş Dersi / Uygulamalı Anlatım:kiss1:
Bu mesajdan alıntı yap
wwaslıww isimli Üye şimdilik offline konumundadır

wwaslıww

Öğrenci (Diğer) / Çankırı

Standart
Alt 16-06-2009 #5
aspden sonra çokta zor gelmediCSS' e Giriş Dersi / Uygulamalı Anlatım

emeğine sağlık canım benim çok güzel bir ders olmuş
Bu mesajdan alıntı yap
lovies isimli Üye şimdilik offline konumundadır

lovies

Grafiker / İstanbul

Standart
Alt 16-06-2009 #6
Teşekkürler deniz faydalı bilgiler sunmuşunCSS' e Giriş Dersi / Uygulamalı Anlatım
Bu mesajdan alıntı yap
blueden isimli Üye şimdilik offline konumundadır

blueden

Hiç Biri / Konya

Standart
Alt 17-06-2009 #7
aspden sonra çokta zor gelmediCSS' e Giriş Dersi / Uygulamalı Anlatım

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 CSS' e Giriş Dersi / Uygulamalı Anlatım
Ben teşekkür ederim Aslı' cım.

Teşekkürler deniz faydalı bilgiler sunmuşunCSS' e Giriş Dersi / Uygulamalı Anlatım
Teşekkür ederim.
Bu mesajdan alıntı yap
Yunus PARLAR isimli Üye şimdilik offline konumundadır

Yunus PARLAR(31)

Grafiker / İstanbul

Standart
Alt 17-06-2009 #8
Eline emegine sağlık canım. Çok faydalı bir başlanğıç olmuş.:artipuan:
Bu mesajdan alıntı yap
Baterist isimli Üye şimdilik offline konumundadır

Baterist

Hiç Biri / İstanbul

Standart
Alt 17-06-2009 #9
Tekrardan pekiştirmiş olduk sağolun.
Bu mesajdan alıntı yap
blueden isimli Üye şimdilik offline konumundadır

blueden

Hiç Biri / Konya

Standart
Alt 17-06-2009 #10
Eline emegine sağlık canım. Çok faydalı bir başlanğıç olmuş.:artipuan:
Sağol Yunus' cum. CSS' e Giriş Dersi / Uygulamalı Anlatım

Tekrardan pekiştirmiş olduk sağolun.
Teşekkür ederim.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Uygulamalı Photoshop Dersleri 1.1 GB Mehmet Utku DİLER Photoshop Dersleri 35 24-12-2009 00:46:53
İnteraktif blend aracı ve blend efekti uygulamalı video dersi ALİ KARAKAN Corel Draw Dersleri 4 08-09-2009 12:37:35
flash da yansıma anlatım dersi: scholarx11 Flash 5 08-01-2009 17:53:00
Out of Bounds Dersi (basit anlatım) pthing Photoshop Dersleri 11 27-12-2008 01:30:40

Kapat
Şifremi Unuttum?