Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
   
Konu: CSS yapısı ve kullanımı
WesT
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 12
Yaşam Puanı: 32 / 295
Deneyim: 83 / 100
Rep Sayısı: 1
Mesaj Sayısı: 190
Üyelik Tarihi: 17.12.2013
     
Yorum: #1
CSS yapısı ve kullanımı
04.01.2014 16:12
selam arkadaşlar hemen hemen her sitede kullanılan css stillerinin basitçe temelini anlatacağım.Elimden geldiğince anlaşılır yapmaya özen göstereceğim.

CSS nedir? ne işe yarar?:
CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil ġablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir. Stil Ģablonu HTML ögelerine (yazı, paragraf, kenar çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyişle sayfamızın içeriğinin biçimlendirilme işleminin yapıldığı kısımdır. HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur; içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa olmazlardandır.

CSS’nin Yapısı:
CSS‟nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.



- Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz.
- Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır.
- Özellik, değiştirilmek istenen stil özniteliğidir. Örnek; color, font-size vb.
- Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb.
Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır.

Sınıf (Class) Seçicisi:
Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Örneğin önemli adında bir sınıf seçicisi oluşturalım, özellik olarak da yazının renginin kırmızı ve kalın olmasını sağlayalım;



Sınıf seçici olarak belirlediğimiz ismin önüne “.” (nokta) koymamız gerekmektedir. Bu ismi herhangi bir ögenin class özniteliğine atayarak stili uygulamış oluruz. Örneğimiz için .onemli sınıf (class) seçicisi yukarıdaki gibi olacaktır.Bu stilimizi sayfamızda H1 ve p etiketlerine uygulayalım.



Kodların görünümü:


Görüldüğü üzere iki farklı öge için (p ve h1) aynı sınıf (class) seçicisini uygulamış olduk. Aynı şekilde bu stili herhangi bir ögenin sınıf (class) özniteliğine atayarak defalarca kullanabiliriz. Bu sebeple bu tür seçiciler çoğul seçici olarak da adlandırılır.

ID Seçicisi:
Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir öğeye atanır ve bir kez kullanılırlar. Örneğin “haber_baslik” adında bir stil oluşturalım, özellik olarak da yazı renginin mavi ve ortalı olmasını sağlayalım;



ID seçicisi olarak belirlediğimiz ismin önüne “#” koymamız gerekmektedir. ID‟ye verdiğimiz isim, sayfa içinde aynı isme sahip ögeye (etiket) uygulanmış olacaktır. Örneğimiz için #haber_baslik ID seçicisi yukarıdaki gibi olacaktır. Bu stilimizi p etiketine uygulayalım.

Kod:


Görüntü:



Görüldüğü üzere yalnızca tek bir ögeye (etikete) uygulanmıştır. ikinci p etiketine aynı id verilmiş olsa dahi etkilenmeyecektir. Dolayısıyla bir kez kullanılır, bu sebeple bu tür seçiciler tekil seçici olarak da adlandırılır.
Not: Gerek sınıf (class) seçici olsun, gerekse ID seçici olsun isim verirken Türkçe karakter kullanılmamalı ve isimlendirme rakamla başlamamalıdır.

Etiket (Tag ) Seçicisi:
Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir başka deyişle etiketleri kendi isteğimize göre uyarlarız. Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;

Kod:



olarak yazmamız yeterlidir. Bir başka örnek olarak sayfamızdaki paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur.

Kod:



CSS Kullanım Alanı:
Oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır:
- Yerel kullanım alanı
- Global kullanım alanı
- Bağlantılı kullanım alanı

Yerel Kullanım Alanı:
Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım Ģeklinde CSS direkt etiketin “style” özniteliği kullanılarak uygulanır. Örnek: p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım; <p style="color:red; text-align:center;">Merhaba</p> şeklinde olacaktır. şimdi bunun tüm kod içinde nasıl göründüğüne bakalım

Kod:



Not:Yerel, bir başka deyişle etiket içi CSS kullanımı, tek tek her etiketin içine yazılması gerektiği ve yönetiminin zor olması sebebiyle çok gerekmedikçe önerilmemektedir.

Global Kullanım Alanı:
Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın <head> kısmında, <style>…</style> etiketi içinde yer alır. Kısmen de olsa HTML ve CSS kodumuzu birbirinden ayırmış oluruz. Örnek:
h3 etiketine uygulanmak üzere yazı rengini kırmızı, yazı büyüklüğünü 12pt ve sola hizalı yapalım;

Kod:



Görüldüğü üzere stilimizi <style> etiketi içinde <style type=”text/css” > …CSS…</style> yer alacak şeklinde yazdık. şimdi de bunu <head>…</head> etiketleri arasına aşağıdaki gibi yerleştirmemiz gerekiyor.

Kod:



Global (dahili) olarak yerleştirdiğimiz CSS kodumuz sadece bu sayfayı etkileyecektir. Başka bir sayfada h3 etiketi normal görevini yapacaktır. Global kullanım alanına sahip olan stil şablonumuzda seçici olarak etiket seçici kullanıldığını görmekteyiz. şimdi de kullanım yerine müdahale etmeden seçici tipini değiştirelim. Seçicimizi, istediğimiz başlıkların stilini değiştirmeye yönelik bir stil şablonu olarak tasarladığımız için aynı sayfada birden çok kez kullanılma olasılığı yüksektir. Bu sebeple ID seçici değil de sınıf (class) seçici seçmemiz gerekmektedir.İsim olarak rakamla başlamayan, Türkçe karakter içermeyen ve karışıklığa yol açmaması için var olan etiket isimlerinden olmayan bir isim belirleyelim.
Örneğin;
Seçtiğimiz isim “baslik” olsun ve tabii ki bunun bir sınıf seçicisi olduğunu belirtmek için başında nokta işareti olacak şekilde “.baslik” yazmalıyız. Uygulama aşağıda görülmektedir

Kod:



Bağlantılı Kullanım:
Alanı Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi “.css” uzantılı stil şablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda <link> etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmış oluruz. Sayfalarımızın okunaklılığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir. Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil şablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak “CSS” veya “styles” isimlerini tercih edebilirsiniz. Bu klasörler içinde yer alan .css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluşturulmuş tüm stilleri sayfamıza uygulayabiliriz.



Örnek olarak stilim.css isminde harici bir stil Ģablonu (CSS) dosyası oluĢturalım.OluĢturduğumuz dosyanın içine bir önceki örnekte yaptığımız stilin kodlarını yazalım.stilim.css dosyasının içeriği;

Kod:



Bu örnekte sadece sınıf (class) seçici kullanılmıştır. Ġstenildiği takdirde her türlü seçici türünü dosya içine yazabiliriz. Önemli olan dosya içinde sadece stil şablonu formatına ait kodların yer almasıdır. şimdi bu dosyayı sayfamıza <link> etiketini kullanarak bağlayalım;

Kod:



Dikkat etmemiz gereken nokta css dosyasını çağırdığımız sayfanın bulunduğu konumdan, css dosyasının bulunduğu konuma dosya yolunun tam olarak yazılmasıdır. Örneğin, Resim 1 deki gibi bir dosya düzenimiz olduğunu ve index sayfasından style dosyasında bulunan stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır;
<link href=”styles/stilim.css” rel=”stylesheet” type=”text/css”>
Örneğin, Resim 1 deki gibi bir dosya düzenimiz olduğunu ve template dosyası içindeki bir sayfadan style dosyasında bulunun stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır;
<link href=”../styles/stilim.css” rel=”stylesheet” type=”text/css”>

Uzun oldu ama önemli bir bilgi olduğunu düşünüyorum. Hatam olmuşsa büyüklerim ve sitedeki üyelerden özür dilerim.
Alinti
DaRKNeSS
*
avatar
Binbaşı
Durum: Çevrimdışı
Seviye Puanı: 53
Yaşam Puanı: 1,315 / 1,315
Deneyim: 60 / 100
Rep Sayısı: 121
Mesaj Sayısı: 5584
Üyelik Tarihi: 11.08.2013
     
Yorum: #2
Cvp: CSS yapısı ve kullanımı
04.01.2014 16:18
Afferin Exciting


Alinti
WesT
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 12
Yaşam Puanı: 32 / 295
Deneyim: 83 / 100
Rep Sayısı:
Mesaj Sayısı: 190
Üyelik Tarihi: 17.12.2013
     
Yorum: #3
Cvp: CSS yapısı ve kullanımı
04.01.2014 16:20
afferin Exciting Exciting sağol binbaşım Exciting
Alinti
Atmosfer
*
avatar
Teğmen - Ex
Durum: Çevrimdışı
Seviye Puanı: 10
Yaşam Puanı: 19 / 247
Deneyim: 88 / 100
Rep Sayısı: 2
Mesaj Sayısı: 140
Üyelik Tarihi: 12.12.2013
     
Yorum: #4
Cvp: CSS yapısı ve kullanımı
04.01.2014 16:23
Eline sağlık kanka Exciting
Alinti
WesT
*
avatar
Teğmen
Durum: Çevrimdışı
Seviye Puanı: 12
Yaşam Puanı: 32 / 295
Deneyim: 83 / 100
Rep Sayısı:
Mesaj Sayısı: 190
Üyelik Tarihi: 17.12.2013
     
Yorum: #5
Cvp: CSS yapısı ve kullanımı
04.01.2014 16:25
eyv kankam sağolasın Smile
Alinti



1 Ziyaretçi