Temel Seviye CSS İşlemleri

M. Kasım Sular
September 29, 2020
1301 Görüntülenme
0 Yorum

Türkçe karşılığı Basamaklı Stil Sayfaları olan CSS, HTML’i basit bir iskelet olmaktan kurtaran metin şekillendirme dilidir. Bu nedenle büyük öneme sahiptir. Çünkü bir sitedeki görselliği dolayısıyla da kullanıcı memnuniyetini sağlayan CSS’tir. CSS, web siteleri ve tarayıcı tabanlı uygulamalar tasarlamak için yaygın olarak kullanılan programlama dilidir.

Link işlemleri dersinde CSS’e giriş yapmıştık. Be nedenle bu dersi bir önceki uygulama üzerinden anlatmaya devam edeceğim.

2 tür CSS kullanımından bahsedeceğim. Birincisi bir önceki derste kullandığım Dahili CSS kullanımı diğeri ise Harici CSS kullanımıdır. Bundan sonraki sürecin tamamında Harici CSS kullanımı üzerinden devam edeceğiz. Çünkü harici CSS kullanımında .css uzantılı harici bir CSS dosyasını web sayfamıza dahil ederek stil işlemlerini yürütmekte olacağız. Dahili CSS yapısında her HTML sayfası için ayrı bir kodlama yapmamız gerekirken Harici CSS kullanımında tüm site için tek bir CSS dosya düzenler ve kullanacağımız her sayfada bu CSS dosyasını <link> etiketiyle çağırırız. Kullanım kolaylığı, düzeltme kolaylığı ve HTML sayfasını kod fazlalığından kurtarması nedeniyle Harici CSS kullanımı tüm web geliştiriciler tarafından tercih edilmektedir. Gelin bir önceki dahili CSS kullanılan sayfamızı harici CSS kullanımına dönüştürelim.

Html dosyalarımızla aynı dizine css adında bir dizin oluşturalım ve içerisine style.css adında bir CSS dosyası oluşturalım.

index.html içerisine girip <style> etiketi içerisindeki CSS kodlarını kesip style.css dosyasına yapıştıralım ve <style> etiketini silelim.

<link rel="stylesheet" href="css/style.css">

Yukarıdaki komutu <head> içerisine yazalım ve CSS içeriği çağıralım. Diğer html sayfalarında da <style> etiketi ve içeriğini silip yukarıdaki komutu ekleyip görüntüleyelim.

CSS kodlamanın ikinci önemli olayı seçicilerdir. Bir önceki dersimizde standart HTML etiketlerine stil atamıştık bu işleme Etiket (Tag) Seçici diyoruz. Bu nedenle CSS kod yazarken seçiciye adı ile etiket adını aynı tutuyoruz.

Özel bir stil sınıfı oluşturmak ve kullanmak istersek bir Sınıf (Class) Seçici oluşturup etiket içerisinde onu class parametresi ile çağırmamız gerekmektedir. Bunu bu örnekte açıklamaya çalışalım. Örneğin aktif olan sayfadaki liste nesnesinin seçili olmasını sağlamak için <a> etiketi içerisine .active adında bir Class Seçici oluşturabiliriz. style.css dosyasına aşağıdaki kodu ekleyelim.

a .active{background-color: #f00; color:#fff }

Class Seçicisini uygulamak için;

Ana Sayfa’da isek index.html ‘de <a href=”index.html”> etiketine,

Hakkımızda sayfasında isek hakkimzda.html’de <a href=”hakkimizda.html”> etiketine,

İletişim sayfasında isek iletisim.html’de <a href=”iletisim.html”> etiketine

class=”active” parametresini ekleyelim.

Seçiciler konusunda son olarak Id (Kimlik) Seçici türü yer almaktadır. Class bir seçiciyi HTML sayfada istediğimiz kadar çağırabilirken Id Seçiciyi sadece bir yerde çağırabiliriz. JavaScript programlamada oldukça fazla kullanılan bir seçicidir. Id seçici tanımlamak için isimden önce . yerine # kullanılmaktadır. Çağırma işini de etiket içinde class yerine id=”” parametresi kullanarak gerçekleştirebiliriz.