SiteMiz KapaLıdır [BakımDa]

SiteMiz KapaLıdır [BakımDa]

Sitemiz uzun Bir aradan Sonra tekrar OnLine olcaktır.. ayrıca sitemiz 6 Nisan 2011 tarihi itibariyLe bakıma alınmıştır.. en kısa sürede tekrar hizmet vermeye calışacağız.. Sitemize yeni bilgili admiler alınakcatır..
 
AnasayfaAna sayfaKullanıcı GruplarıKayıt OlGiriş yap
Facebook HackroaRs
En son konular
» Bu sene kim şampıyon olur?
Çarş. Nis. 27, 2011 6:34 am tarafından 

» Tüm üyeLerimize duyuru..!
Cuma Nis. 08, 2011 10:44 pm tarafından 

» turkojan 4.0 (gold edition) videolu anlatımm
Perş. Mart 17, 2011 6:16 am tarafından reda

» n keylogger v12 gel hackadim
Cuma Ara. 24, 2010 8:16 pm tarafından merotova

» ProRat en iyi 20 özellikli sizi eqlendiren hacker programı!!!
Perş. Ara. 23, 2010 5:09 am tarafından iboksk23

» Not defterinden virüs yapma gel birden fazla virüs kodu var!!!!!
Perş. Ara. 23, 2010 3:55 am tarafından iboksk23

» 2011'in ilK msn hack programi!
C.tesi Kas. 13, 2010 2:23 am tarafından qnayf

» 2011'in ilK msn hack programi!
C.tesi Kas. 13, 2010 2:23 am tarafından qnayf

» İşte ÖzeL HEsapMakınası
C.tesi Haz. 05, 2010 3:43 am tarafından 

Arama
 
 

Sonuç :
 
Rechercher çıkıntı araştırma
Sosyal yer imi
Sosyal yer imi Digg  Sosyal yer imi Delicious  Sosyal yer imi Reddit  Sosyal yer imi Stumbleupon  Sosyal yer imi Slashdot  Sosyal yer imi Yahoo  Sosyal yer imi Google  Sosyal yer imi Blinklist  Sosyal yer imi Blogmarks  Sosyal yer imi Technorati  

Sosyal bookmarking sitesinde VeBaHaCKTeaMS adresi saklayın ve paylaşın

Sosyal bookmarking sitesinde SiteMiz KapaLıdır [BakımDa] adresi saklayın ve paylaşın
Istatistikler
Toplam 175 kayıtlı kullanıcımız var
Son kaydolan kullanıcımız: rechko

Kullanıcılarımız toplam 448 mesaj attılar bunda 397 konu

Paylaş | 
 

 css cascading style sheets

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
qnayf
Co Admin
Co Admin
avatar

Mesaj Sayısı : 32
Kayıt tarihi : 09/01/10

MesajKonu: css cascading style sheets   C.tesi Ocak 09, 2010 6:26 am

Css (Cascading Style Sheets)

Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil.

Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Htmlr17;e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor.

Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor.

CSS Nedir? Cascading Style Sheets
Cssr17;in açılımı ile söze başlayalım. Cascading Style Sheets. Biz kısaca konularımız dahilinde Stil Şablon olarak bahsedeceğiz. Gelelim Stil Şablonun varoluş amacına. Sizinde bildiğiniz üzere Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil. Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. Css bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Htmlr17;e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor. Ayrıca ileriki konularımızda bahsedeceğimiz üzere bağlantılı stil şablonlar aracılığı ile de birden çok sayfaya etkiyebiliyor. Bu da bize sitenin görünümün değiştirmek istediğimizde elimizdeki onlarca belki de yüzlerce sayfanın kodlarını değiştirmeden sadece css dosyasının değiştirerek bu imkanı sağlıyor.

Stil Şablonr17;un tarayıcılara eklenmesinden sonra iki versiyonu çıktı. Bunlar Css 1 ve Css 2. Ayrıca bazı konularda MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayıcıları aynı kodları kabul etmiyorlar. Biz derslerimizde her iki tarayıcıda da etkin olan veya etkin olmayıp dizaynı bozmayan (A:hover gibi) Stil Şablon özelliklerini göreceğiz. Şimdi derslerin içeriğinde neler var onları görelim :

1. Stil Şablon çeşitleri :
Cssr17;in en çok beğenilen yönü istendiğinde sadece bir öğeye etkimesi, istendiğinde tüm sayfaya etkimesi, istendiğinde site içindeki tüm html dosyalarına etkimesidir. Bunlar kısaca Stil Şablonun kullanım çeşitleridir.

2. Html etiketleri ile Css :
Bu dersimizde Htmlr17;deki font,background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.

3. Seçiciler (Selectors) :
Kimi zaman Html etiketlerinden fontu hepimiz kullanırız. Örneğin bir sayfa içerisinde font etiketine birden çok görünüm eklemek isteriz. Bu durumda seçiciler imdadımıza yetişir. Bu dersimizde de seçicilerin nasıl kullanıldığını ve yazım kurallarını öğrenceğiz.

4. Genel kullanım şekilleri :
Bu dersimizde ise A (link) etiketinin çeşitli kullanım biçimleri ile birlikte bir Stil Şablonun nasıl kullanırsak işimize daha fazla yarayacağını göreceğiz. Siz buradaki kullanım tarzına göre Cssr17;i kullanırken kendinize nasıl bir yön izleyeceğinize karar vereceksiniz.
.........................................
Css ile tekrarlanmayan arka plan resmi yapmak için öncelikle arka plana bir resim atamak gerekir. Bunu background-image : url(resmim); kodu ile yaparız.
Daha sonra bu resmin tekrarlanmasını önlemek için background-repeat-repeat komutunu vermek gerekir.
En son olarak resmi ortalamak için background-position : center komutunu vereceğiz

Şu kodda olduğu gibi :

BODY
{
BACKGROUND-IMAGE : URL(./bayrak.gif);
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-POSITION : CENTER;
}

.......................

Bunun için cursor dediğimiz dosya formatında olan ve sonu *.cur ile biten bir resim dosyasına ihtiyaçınız var ve bunları multimedia sitelerinde çok rahat bulabilirsiniz..

<style>
<!--
A { cursor:url('resim.cur); }
A:link { cursor:url('resim.cur); }
A:visited { cursor:url('resim.cur); }
A:hover { cursor:url('resim.cur); }
BODY { cursor:url('resim.cur); }
}
-->
</style>

......................

(Scroll bar) renklendire bilmeniz icin..
Web sayfanızın Head Head bölümene aşağıdaki kodu yazınız..

<style>
<!--
solid; BORDER-LEFT: #1F9FFF 0px solid; BORDER-RIGHT: #1F9FFF 0px
solid; BORDER-TOP: #1F9FFF 0px
solid; COLOR: #1F9FFF; FONT-FAMILY: Trebuschet MS; FONT-SIZE: 9pt;
FONT-WEIGHT: bold}body
{ scrollbar-face-color:#CCCCCC;
scrollbar-shadow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#CCCCCC;
; font-size: xx-small; border-top-width: thin}
-->
</style>


CSS Çeşitleri
Cssr17;in (Stil Şablonu) 3 farklı kullanım alanı vardır. Bunlar ;

Yerel, yani sayfada sadece bir kez: Yerel stil şablonlar bir html etiketi için özel olarak kullanılırlar.

Global, yani tüm sayfa için: Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.

Bağlantılı, yani birden çok sayfa için: Bağlantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.

2.1 Yerel Stil Şablonu
Başlangıçta belirttiğimiz gibi Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel) etkiler. Şimdi bir örnek verelim.

<html>
<head>
<title>Css</title>
</head>
<body>
<h2>Web Teknikleri</h2><br>
<h2 style="font-size:20pt; color:blue">Web Teknikleri</h2>
</body>
</html>

Bu örneğimizi css.htm adıyla kaydedip tarayıcı yardımıyla açtığımızda iki tane Web Teknikleri yazısıyla karşılacağız. Fakat bunların yazım tarzı farklı olacak. Çünkü biz ikinci <h2> etiketimize etkimek üzere bir stil şablon ekledik.

2.2 Global Stil Şablonu
Global Stil Şablonları bir önceki örnekte yaptığımız <h2> etiketinin tüm sayfada aynı özellikte olması istendiğinde kullanılır. Bunu için Stil Şablon özellikleri sayfanın başlangıcında (<head></head> etiketleri arasında) tanımlanmalıdır.

Örnek ile biraz daha ayrıntılı inceleyelim.

<html>
<head>
<title>Css</title>
<style type="text/css">
<!--
h2 {font-size:20pt; color:blue}
-->
</style>
</head>
<body>
<h2>Web Teknikleri</h2>
</body>
</html>

Burada ne yapmış olduk? Sayfa içerisinde kullanacağımız tüm <h2> etiketlerinin özelliklerini sabitlemiş olduk. Yani sayfa içerisinde nerede kullanırsanız kullanın <h2> etiketinin stil özellikleri hep aynı olacaktır. Yazım kurallarına biraz değinirsek, Stil Şablon tanımlamaları <head> </head> etiketleri arasında <style type="text/css"> ile başlayıp </style> ile bitmelidir. <!-- etiketi ile Cssr17;den anlamayan tarayıcıların bu kısmı geçmesini sağlıyoruz. Bu saklama işlemi --> etiketi ile son bulur.

2.3 Bağlantılı Stil Şablon
Global stil şablonu ise sitemiz içerisindeki tüm sayfalarda aynı stil özelliklerini kullanmak istediğimizde kullanırız.

Her zaman olduğu gibi stillerimizi yukarıda örneklerini verdiğimiz şekilde hazırlarız. Fakat bunu html dosyamızın içerisinde değil de boş bir sayfaya yazarız. Sonra onu kaydederken css uzantılı bir şekilde kaydederiz. Ardından da html dosyamızın içerisine yine <head> </head> etiketleri arasına
<link rel="stylesheet" type="text/css" href="dosya_ismi.css">
şeklinde ekleriz. Şimdi hemen bir örnek verelim.

h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}

Bu dosyamızı stil.css olarak kaydedelim. Şimdi de html dosyamıza gelelim. Html dosyamızın kodları da şu şekilde olmalıdır.

<html>
<head>
<title>Css</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Web Teknikleri</h2>
<h2>Web Teknikleri</h2>
<h3>Web Teknikleri</h2>
</body>
</html>

Html dosyasının kodları arasında geçen <link rel="stylesheet" type="text/css" href="stil.css"> kodu stil.css dosyasındaki stil özelliklerini kullanmamızı sağlar. Bu kodu istediğimiz diğer html dosyalarına da eklediğimizde orada da kullanabiliriz.

Böylelikle her sayfada stil özellikleri tanımlamamış, başlangıçta tanımladığımız stil özelliklerini kullanarak hem koddan tasarruf etmiş oluruz hem de paradan
Sayfa başına dön Aşağa gitmek
 
css cascading style sheets
Önceki başlık Sonraki başlık Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SiteMiz KapaLıdır [BakımDa] :: WebMaster :: Grafik ve 3DTasarım-
Buraya geçin: