IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası
  sohbet

Yeni Konu aç Cevapla
 
LinkBack Seçenekler Stil
Alt 14 Şubat 2007, 21:47   #1
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
CSS (Cascading Style Sheets)




CSS Nedir?



Css’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 Html’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 Şablon’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 :

Stil Şablon Çeşitleri

Css’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.

HTML Etiketleri İle CSS

Bu dersimizde Html’deki font, background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.

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.

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 Css’i kullanırken kendinize nasıl bir yön izleyeceğinize karar vereceksiniz.

zamanım oldukça,genel derslerini eklemeye Çalışırım.

 
Alıntı ile Cevapla

IRCForumlari.NET Reklamlar
sohbet odaları sohbet odaları Benimmekan Mobil Sohbet
Alt 17 Mart 2007, 00:32   #2
Çevrimdışı
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Sayısı: (0)
IF Ticaret Yüzdesi:(%)
Cevap: CSS (Cascading Style Sheets)




CSS Dersleri - Genel kullanımı
Css’i Html &#252;zerinde kullanmak i&#231;in 3 y&#246;ntem (yerel-global-bağlantılı) olduğunu daha &#246;nce belirtmiştik. Şimdi ise komple bir css dosyasını Html &#252;zerinde nasıl kullanacağımız g&#246;relim. Fakat &#246;ncelikle Html’deki <a> etiketinin diğer etiketlerden farklı olarak bir kullanım tarzı bulunmakta. İlk &#246;nce ona değinelim.

(A) Etiketinin CSS İle Kullanımı

Bildiğiniz &#252;zere <a> etiketi Html’e &#231;ok b&#252;y&#252;k bir &#246;zellik katan link etiketidir. Bu etiket ile diğer bir web sayfasına veya bir mail adresine g&#246;nderme yapabiliriz. Bu etiketin belli durumlarda aldığı değişik değerler vardır. Yani link tıklandığında etiket artık visited (ziyaret edilmiş) pozisyonuna ge&#231;ecektir. Biz Css yardımıyla <a> etiketinin aldığı posizyonlara istediğimiz bi&#231;imi verebiliriz. Şimdi <a> etiketinin aldığı pozisyonları g&#246;relim :

İlk poziyon linke herhangi bir tıklama olmadığındadır. Bu değer linkin sayfada g&#246;r&#252;lecek ilk halidir.
Visited : Bu pozisyon link tıklandığından sonra etiketin aldığı değerdir. Active : Bu pozisyon linkin aktif olduğu durumdur. Yani imle&#231; linkin tıklandığı andaki durumdur. Hover : Bu pozisyon Linkin &#252;zerine gelindiği durumdur. Yani linkin &#252;zerine gelindiğinde nasıl bir bi&#231;imde olması isteniyorsa stil o şekilde verilir.
Şimdi <a> etiketi i&#231;in bir stil dosyası yapalım.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Şimdi <a> etiketinin &#246;zel durumunu da g&#246;rd&#252;kten sonra esaslı bir css kullanma tekniğini g&#246;relim. Bu &#246;rneğimizde <div>, <table>, <span>, <h1>...<h6>, <p>, <a> gibi Html etiketlerini kullanırken nasıl bir y&#246;ntem izlememiz gerektiğini g&#246;receğiz.

İlk &#246;ncelikle stillerimiz hem bağlantılı hem global hem de yerel kullanacağız. Bunu belirteyim. B&#246;ylelikle sizde nasıl bir yol izlemenize karar verin.

Şimdi bağlantılı css dosyamızı hazırlayalım. Hatırlayacağınız &#252;zere bu dosyanın uzantısı css olmalı. Bu css dosyasını Html dosyamızın i&#231;erisinde &#231;ağıracağız. Aşağıdaki kodları stil.css adıyla kaydedelim
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]

Aşağıdaki kodları da css.html adıyla kaydedelim. (Dikkat ! html uzantlı kaydedin )

Kod:


<html>


<head>
<title>Css</title>
<style type="text/css">
<!--
.onemli {font-weight:bold;}
h4 {color:blue;
position : relative;
visibility : visible;
left : 25pt;
font-size:large;
.solic { color:brown;
font-family:"Verdana,Arial,Helvetica";
position : relative;
visibility : visible;
left : 20pt;
font-weight:bold; }
li { list-style-type : circle;
list-style-position : inside;
list-style : decimal;}
; -->
</style>
<link rel=stylesheet href="stil.css" type="text/css">
</head>
<body>
<table width="500" align="center">
<tr><td> <!-- Global -->
<h4>Bilgisayar;<a name="bsl">&nbsp;&nbsp;</a></h4>
<!-- Eğer koordinatları tam olarak ayarlamak istiyorsanız (MSIE ve NN icin) Global Stil Şablonu Kullanmalısınız. -->
<!-- Bağlantılı -->
<p id="sol">
Aldığı komutlar uyarınca, veri işleyerek problem &#231;&#246;zen otomatik elektronik aygıtların ortak adı. Bu t&#252;r aygıtlar, &#231;alışma ilkeleri,donanım tasarımları ve uygulama alanları bakımından &#246;rneksel, sayısal ve karma bilgisayarlar olarak <font class="onemli">&#252;&#231;e</font> ayrılır.</p>
<p id="sol">
<ul>
<li><a href="css.html#orneksel">&#214;rneksel (analog) bilgisayarlar</a>
<li><a href="css.html#sayisal">Sayısal bilgisayarlar</a>
<li><a href="css.html#karma">Karma bilgisayarlar</a>
</ul>
</p> <p class="solic">
&#214;rneksel (analog) bilgisayarlar<a name="orneksel">&nbsp;&nbsp;</a></p>
<p id="sol">A&#231;ısal konum ya da gerilim gibi değişken nicelikleri temsil eden veriler &#252;zerinde işlem yapar ve &#231;&#246;z&#252;lmesi istenen matematiksel problemin fiziksel bir &#246;rneğini oluştururlar. Sıradan diferensiyel denklemleri &#231;&#246;zebilen &#246;rneksel bilgisayarlar, sistem m&#252;hendisliğinde, &#246;zellikle bazı s&#252;re ve donatımların ger&#231;ek zamanlı benzetim modellerinin oluşturulmasına &#231;ok elverişlidirler. Bu bilgisayarların bir başka yaygın kullanım alanı da elektrik dağıtım sistemi gibi şebekelerin analizidir.<br>
<a href="css.html#bsl">Başa D&#246;n</a>
</p>
<p class="solic">Sayısal bilgisayarlar,<a name="sayisal">&nbsp;&nbsp;</a></p>
<p id="sol">&#199;eşitli &#252;retim s&#252;re&#231;lerine, takım tezgahlarına , karmaşık laboratuvar ve hastane aygıtlarına kumanda etmekte kullanılırlar. Aynı &#246;zellikten, u&#231;akların ve uzay ara&#231;larının karmaşık iletişim sistemlerinin otomatizasyonunda da yararlanılır. Sayısal bilgisayarlar ayrıca, eğitimde yardımcı olarak (&#246;rn. temel dil ve matematik becerilerinin kazandırılmasında) , bilimsel araştırmalarda ise verilerin analizi ve matematiksel modellerin geliştirilmesi amacıyla kullanılır.
<br> <a href="css.html#bsl">Başa D&#246;n</a> </p>
<p class="solic">Karma bilgisayarlar,<a name="karma">&nbsp;&nbsp;</a></p>
<p id="sol">&#214;rneksel ve sayısal bilgisayarların &#246;zelliklerine ve yararlarını birleştirirler; &#246;rneksel bilgisayarlara oranla daha fazla kesinlik, sayısal bilgisayarlara oranla daha fazla deneteleme sağlarlar.
<br><a href="css.html#bsl">Başa D&#246;n</a>
</p> </td> </tr> </table>
</body>
</html>


Burada birka&#231; konuya a&#231;ıklık getirelim.

Bazı stil &#246;zelliklerinin sonunda g&#246;rd&#252;ğ&#252;n&#252;z !important ifadesi ile ziyaret&#231;i kendi bilgisayarındaki tarayıcı &#246;zelliklerini değiştirmiş olsa dahi bu değerleri kullanmamasının bizim belirttiğimiz değerleri kullanmasını s&#246;ylemiş oluyoruz. Font &#246;zelliklerinde &#231;oğu zaman birden &#231;ok font ismi kullandık. Bunun nedeni eğer ziyaret&#231;inin makinasında ilk font yoksa ikincisi o da yoksa &#252;&#231;&#252;nc&#252; font kullanılır. Şayet o fontta yoksa tarayıcının kendi banko fontu kullanılır. B&#246;ylelikle bizde değişik ziyaret&#231;i makinalarında sayfamızın nasıl g&#246;r&#252;nebileceğini &#246;ncelikle kontrol altına almış oluruz.

Şimdi bu kodların &#231;alıştığı sayfaya gitmek i&#231;in l&#252;tfen [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...].

Not: Bu css ve html dosyaların i&#231;in fon.gif , fon2.gif dosyalarına ihtiya&#231; vardır.

dersler devam edicek.

 
Alıntı ile Cevapla

Cevapla

Etiketler
sheets, style, cascading, css


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Kapalı
Pingbacks are Açık
Refbacks are Açık


Benzer Konular
Konu Konuyu Başlatan Forum Cevaplar Son Mesaj
Between the Sheets (Küfelik) Desmont İçkiler İçecekler 0 08 Kasım 2014 18:50