CSS Nedir? Kullanım Yöntemleri

HTML kullanılarak da sayfaya bazı biçim özellikleri verilebilir. Ancak bu HTML dosyasındaki kod sayısının artması ve karmaşıklaşmasına yol açacaktır. Ayrıca HTML deki biçim özellkleri CSS'e göre çok az ve sınırlı kalmaktadır.

CSS'in kullanılması ile birlikte web sayfalarında HTML => içerik bölümü, CSS => biçim bölümü olarak ayrılmıştır. Böylece genişleyen web sitelerini kontrol etmek kolaylaşır.

CSS'de HTML gibi bir işaretleme(markup) dilidir, bir programlama dili değildir. Programlama dillerinde bulunan if, for, while gibi anahtar kelimeler CSS de bulunmaz ve ayrıca CSS içinde döngü ve karar gibi yapılar da yoktur.

CSS sayfaya üç farklı şekilde uygulanır.

CSS'in kullanımı basitçe nesneyi seç ve özelliği ver şeklinde açıklanabilir.

Örnek : p {color : red; }

Yukarıdaki CSS kodunda p ile sayfadaki p elemanlarını seçeriz, (p yi seçtiğim bölüme seçici denir)
color ile seçtiğimiz nesnenin yazı özelliğini belirleriz, (color'un olduğu bölüm özellik olarak adlandırılır)
red ile de color özelliğine red değeri veririz.(red'in olduğu bölüme de değer denir.)

Bir CSS kodu SEÇİCİ(selector), ÖZELLİK(property) ve DEĞER(value) bölümlerinden oluşur.

Yukarıdaki kodun sonucu olarak sayfa içindeki tüm p elemanları seçilir ve renk değerleri red(kırmızı) yapılır.

1-Yerel CSS : 

HTML etiketi içinde style parametresi kullanılarak

Örnek: <p style="color:red;">Bu yazının rengi kırmızıdır</p>

Yerel CSS'i de zaten etiketin içine yazdığımız için yerel CSS'de seçici kullanılmaz. Sadece içine yazdığımız etiket verdiğimiz özellikten etkilenir.
Etki alanı çok dar olduğu için kullanımı zordur, yalnızca çok kısa işlemler için kullanılır.

2-Genel CSS :

HTML sayfasında (genelde head etiketlerinin arasında style etiketi açılır ve bu etiketler arasına CSS kodları yazılır.

Örnek : <head> <style> p{ color : red ; } </style> </head>

Sayfada bulunan tüm p etiketleri verilen özellikten etkilenir. Ancak diğer sayfaları etkilemez.
Etki alanı tüm sayfayı kapsar ancak diğer sayfalarda kullanmak zordur, sadece bir sayfa için kullanılacak özellik varsa tercih edilir.

3-Harici(Bağlantılı) CSS :

CSS uzantılı ayrı bir dosya oluşturulur, HTML sayfasına link etiketi kullanılarak bağlanır. Bu etiketin bağlandığı tüm sayfalarda CSS özellikleri çalışır.

Örnek : stil.css isimli dosya oluşturulur. Head etiketleri arasına

<link rel="stylesheet" type="text/css" href="stil.css"> etiketini yazar ve HTML sayfamıza CSS dosyamız bağlanmış olur.

Tıpkı genel CSS de yazdığımız şekilde (seçiçi özellik ve değer kullanılarak) CSS kodlarını yazarız.( p{ color : red ; })

En çok kullanılan yöntemdir. Hangi sayfaya bağlandı ise o sayfada bulunan tüm p etiketlerinin yazı rengini kırmızı yapar.
Web Programlama Dilleri(PHP, ASP vb.) kullanılarak tüm sayfalara kolaylıkla eklenebilir.
Kod karmaşasından kurtarır, HTML(içerik) ve CSS(biçim) tam anlamı ile ayrılmış olur.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

Son Yorumlar

İletişim

  • info@frontendokulu.com