Toplam 1 adet sonuctan sayfa basi 1 ile 1 arasi kadar sonuc gösteriliyor
Konu: CSS (Stil) Dosyaları
-
19.Ocak.2015, 22:42 #1
CSS (Stil) Dosyaları
Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır:
Belge içinde:
HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- (Stiller burada belirtilir) --> </style>
Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için:
HTML Kodu
<link href="stil_dosyasi.css" type="text/css" rel="stylesheet" />
Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır.
Stil Belirlemek
Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim:
HTML Kodu
.stilim { font: 12pt Tahoma, Verdana; color: #FF0000; } td.stilim { width: 100px; font: 10pt Tahoma, Verdana; color: #000000; }
Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz:
HTML Kodu
body { background-color: #EFEFEF; font: 8pt Tahoma, Verdana; color: #000000; } td { font: 10pt Tahoma, Verdana; color: #FF0000; }
Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz:
Arkaplan ile İlgili Özellikler
Özellik Açıklama background-color: renk; Arkaplan rengini belirleriz. background-image: url('dosya'); Arkaplan resmi belirleriz. background-repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade eder. background: renk url('dosya') tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık.
Yazı ile İlgili Özellikler
Özellik Açıklama font: boyut, yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri sıralanır ve aralara virgül konur. color: renk; Yazı rengini belirleriz. font-weight: bold; Kalın yazmak. font-style: italic; Sağa yatık yazmak. text-align: hiza; Metinleri hizalamak. left sola, right sağa, center ortalanmış, justify iki yana hizalar.
Boyut ile İlgili Özellikler
Özellik Açıklama width: deger; Genişliği belirtiriz. height: deger; Yüksekliği belirtiriz.
Kenar ile İlgili Özellikler
Özellik Açıklama border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık kullanmayacaksak 0px olmalıdır. border: boyut renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid = normal, dotted = çizgili) belirtilir.
Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim:
HTML Kodu
<style type="text/css" rel="stylesheet"> <!-- .ornek { font: 10pt Tahoma, Verdana, Arial; color: #0000C0; } --> </style> <div class="ornek"> Bu belirlediğimiz stille bir yazı... </div>
HTML Görünümü
Bu belirlediğimiz stille bir yazı...
Görüldüğü üzere herhangi bir koda class="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en
Konu Bilgileri
Bu Konuya Gözatan Kullanıcılar
Şu anda 1 kullanıcı bu konuyu görüntülüyor. (0 kayıtlı ve 1 misafir)
Benzer Konular
-
Retro Stil One Page WebSite PSD Teması
Konu Sahibi erkolay Forum Grafik ArşivleriCevap: 0Son Mesaj : 21.Ağustos.2015, 22:51 -
vB 3.8 WK Stil Sponsor Link
Konu Sahibi Sir.Vanity Forum vBulletinCevap: 1Son Mesaj : 11.Temmuz.2015, 19:56 -
Xinorbis ile en çok yer kaplayan dosyaları bulun
Konu Sahibi erkolay Forum YazılımCevap: 0Son Mesaj : 30.Mayıs.2015, 21:17 -
XHTML (Mantıksal kodlama) Ve CSS (Stil Dosyaları) Nelerdir?
Konu Sahibi megatron Forum MyBBCevap: 0Son Mesaj : 13.Ocak.2015, 13:37 -
Dosyaları Güvenli Şekilde Silmek
Konu Sahibi WeBMasteR Forum GüvenlikCevap: 0Son Mesaj : 13.Ocak.2014, 19:48
Shopsocks5 - Service Socks5 Cheap...
28.Nisan.2024, 14:09 in Güvenlik