Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
CSS yapısı ve kullanımı
#1
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.

www.deccal.org

- 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;

www.deccal.org

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.

www.deccal.org

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

www.deccal.org
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;

www.deccal.org

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:
www.deccal.org

Görüntü:

www.deccal.org

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:

www.deccal.org

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:

www.deccal.org

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:

www.deccal.org

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:

www.deccal.org

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:

www.deccal.org

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:

www.deccal.org

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.

www.deccal.org

Ö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:

www.deccal.org

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:

www.deccal.org

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.
Beğenenler:
#2
Afferin kiss
Beğenenler:
#3
afferin kiss kiss sağol binbaşım kiss
Beğenenler:
#4
Eline sağlık kanka kiss
Beğenenler:
#5
eyv kankam sağolasın exciting
Beğenenler:
#6
eline sağlık exciting web tasarımcı exciting
Beğenenler:
#7
Eyv kardesim sagol exciting
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  CSS Eğitim: Kod Yapısı ve Açıklama kullanımı Dark-Capar 7 450 04-01-2016, Saat: 23:13
Son Yorum: xR4TC
  CSS yapısı ve kullanımı-2 WesT 10 2,134 05-01-2014, Saat: 12:42
Son Yorum: WesT
  html kodları ile basit tablo yapısı WesT 4 2,588 03-01-2014, Saat: 19:03
Son Yorum: WesT
  html kodları ile basit form yapısı WesT 0 507 03-01-2014, Saat: 01:38
Son Yorum: WesT
Anahtar Kelimeler

CSS yapısı ve kullanımı indir, CSS yapısı ve kullanımı Videosu, CSS yapısı ve kullanımı Online izle, CSS yapısı ve kullanımı Bedava indir, CSS yapısı ve kullanımı Yükle, CSS yapısı ve kullanımı Hakkında, CSS yapısı ve kullanımı Nedir, CSS yapısı ve kullanımı Free indir, CSS yapısı ve kullanımı Oyunu, CSS yapısı ve kullanımı Download


1 Ziyaretçi