CSS Nedir ve Nasıl Kullanılır?

24 Haziran | 2019

1240 0

İçindekiler

CSS programı, HTML 4.0 sürümüyle ortaya çıkmıştır. CSS nedir sorusuna cevap olarak; HTML kodlarının kullanılmasıyla meydana gelen web sitelerin görüntülerinin şekillendirilmesini sağlayan programdır denilebilir. CSS kullanımı için HTML dilinin bilinmesi gerekmektedir.

CSS Ne İşe Yarar?

CSS programının görevleri şu şekilde belirtilmektedir:

Web sitelerinin arka planını düzenlemek,
Web sitelerinin arka ekranında yer alan ara yüzü tasarlayıp şekillendirmek, renklendirmek, boyutlandırmak ve konumlandırmak.

CSS programının kullanılmasıyla, web siteleriyle alakalı bütün görüntü düzenlemelerini yapmak mümkündür.

Teklif Al

Demo Site

Bilgi Al

CSS İle Neler Yapılabilir?

CSS programının işlevlerinin kullanılmasıyla yapılacaklar şu şekilde sıralanmaktadır:

Arka planların renklendirilmesi yapılmaktadır.
Web sitesinde kullanılan nesnelere kenarlıklar yapılabilir.
Eklenen kenarlıkları renklendirmek mümkündür.
Sitede yer alan yazıları renklendirip, boyutlarında değişiklik yapmak mümkündür.
Web sitesinde dikey ve normal menüler yapılabilir.
Resimlerin en ve boylarında değişiklikler yapmak mümkündür.
Sitede yer alan butonlar hazırlanabilir.
Sitede yer alan nesne ve yazılar üzerinde çeşitli oynamalar yapılabilir.
Yazının seçilmesi durumunda, arka plan renkleri değiştirilebilir.
Yazı başlıklarının altının çizilmesi sağlanmaktadır.
Resimlerin köşelerinde oynama yapılıp, ovallik katılabilir.
Sitede yer alan yazılara gölgelendirme yapılabilir.
Yazıların ve sitenin ortalanması sağlanır.

CSS Kodu Nasıl Olmalıdır?

CSS kodunun oluşturulması için belirlenmiş bir kalıp mevcuttur ve şu şekilde belirtilmiştir:

Firmajans Blog Yazılarını Takip Etmek İster Misiniz? Ücretsiz Abone Olmak İçin Tıklayın.

Seçilen_nesne { özellik:değer;özellik:değer;özellik:değer; }

CSS kodunun kullanım alanları 1.yöntem, 2.yöntem ve 3.yöntem olarak gruplara ayrılır. 2 ve 3.yöntemlerde süslü parantezler kullanılırken, 1.yöntemde süslü parantez kullanılmaz.

CSS Nasıl Kullanılır?

CSS kullanımı için belirlenmiş 3 ayrı yol bulunmaktadır. CSS nasıl kullanılır sorusunun cevabı olarak belirlenen modeller şu şekilde sıralanmaktadır:

Inline Styles: Html taglarının iç kısmında sytyle:”” özelliğine bağlı olan değerlerle beraber kullanılmaktadır. Diğer iki yöntem arasında en fazla farka sahip olan model Inline Styles’dir. Bu modelin kullanılması için yapılacaklar şu şekilde sıralanmaktadır:

Özellik atanması istenen nesne belirlenmelidir.
Nesnenin içerisine style=”” etiketi eklenir.
CSS özelliklerinin tamamı, style=”” etiketinin içine yazılır.

Interal Style Sheet: Html kodlarının içine eklense de site kodlarının üst kısmındaki head kodlarının istenilen bölümüne eklenebilmektedir. CSS kullanımında belirlenen kodun eklenmesi için izlenen adımlar şu şekildedir:

HTML kodlarının en üst kısmına çıkılır.
<head></head> kodlarının içine girilir.
<style></style> kodları eklenir.
Style kodlarının iç kısmına CSS kodları eklenir.

External Style Sheet: En fazla kullanılan CSS yöntemidir. İkinci yöntemle arasındaki tek fark; html kodlarının yer aldığı dosyanın dış kısmında “dosya_ismi.css” adında bir dosya açılması ve css kodlarının bu dosyanın içerisine yerleştirilmesidir. Hazırlanan dosyanın içine ekstradan <style> kodlarını eklemek gerekmez. Direkt olarak css kodları eklenebilir. Hazırlanan dosyanın adında yer alan “dosya_ismi” kısmına istenilen isim yazılabilir. CSS External Style Sheet modelini oluşturmak için izlenecek adımlar şu şekildedir:

css adlı bir dosya oluşturulur.
css dosyasının iç kısmına css kodları girilmelidir.
Head kodunun arasında style.css çağırılmalıdır.

CSS Link Özellikleri

CSS linklerinin kullanımı için belirlenen kodlar bulunmaktadır. Web tasarımında css kullanımı için belirlenen linklerin özellikleri şu şekildedir:

a: Sayfa açıldığı zaman linkin, herhangi bir tıklanma almadığında büründüğü durumdur.
a:hover: İmleç üstüne getirilen linkin büründüğü durumdur.
a:active: Linkin tıklanması durumunda aldığı haldir.
a:visited: Linke tıklanmasının ardından görülen durumdur.
Color: Linklerin renklerinden sorumludur.
Background-color: Linkin zemin renklerinin belirlenmesini sağlar.
Background-image: Linkin zemin kısmına resim eklenmesini sağlar.
Text-decoration: Linkin alt ve üst kısmında çizgi olup olmayacağını belirler.
Font-weight: Linkte yer alan yazıların kalın ya da ince olmasını belirler.
Border: Linkin etrafında kenarlıkların oluşmasını sağlar.
Display: Linkin yer aldığı hücre ve satır gibi alanların belirlenmesine yardım eder.

CSS Nedir ve Nasıl Kullanılır?

Gönderiliyor

Ziyaretçi Oyları

0 (0 Oy)

Yazar: Firmajans
Kategori: Web Tasarım
24 Haziran | 2019

Yorum Gönder