Css İle Çalışma

Css(Cascading Style Sheet) html sayfalarının görünümünü şekillendirmeye yarayan stil dilidir.Bu web teknolojisi internet sayfamızın harflerin rengini, boyutunu, genişliğini, büyüklüğünü vb. özelliklerini değiştirmek için kullanılır.Bu teknik esneklik bakımından css 3.0 daha ileriye ulaşmıştır.Biz sitemize css dosyalarımızı iki yolla sitemize ekleyebiliriz.
Birinci yolumuz css direk html sayfamızın içine ekleme ikinci yol ise dışardan ayrı bir dosya olarak sayfaya çekmektir.Genelde kullanılan dışardan ayrı bir dosya olarak çağırmaktır.Birinci yolun azalıp bırakılmasının sebebi günümüz teknolojilerinin gelişimiyle ortaya çıkan seonun yarattığı etki nedeniyle bu kullanım şekli istenmektedir.Ben yine de iki yolunda anlatımını yapacağım.

CSS Direk Html Sayfasına Ekleme

Bunu yapabilmek için html sayfamızda bulunan head taglarını bulup buraya style tagları eklemektir.Bu style tagların arasına css kodlarımızı yazıyoruz.Style taglarının bir örneği yapalım;

Şimdi bunu bir html sayfasına örnekle gerçekleştirelim.Bu html sayfasının adını index.html yapalım.Aşağıdaki kodlar ekleyelim;

Ekran Çıktımız:

css-direk-ekleme

Görüldüğü head tagları arasına style tagları ekledik ve css kodlarımızı ekledik.Gördüğünüz gibi h1 elementi rengi gri, p elementinin kahverengi ve link renkleri mavidir.

CSS Dışardan Html Sayfasına Ekleme

Css dışardan çağırmak için yapmamız gelene.Yine önceden yaptığımız gibi head taglarını buluyoruz ve oraya aşağıdaki gibi dosyanın bulunduğunu dizine göre düzenliyoruz.Eklememiz gereken kodlar;

href kısmını dediğim gibi resim yolunu kendi göre düzenlemeyi unutmayın.Önceden yaptığımız index.html sayfasındaki style taglarını kaldırıp yerine yukarıdaki link kodunu ekliyoruz.Aşağıdaki örnek koda ulaşıyoruz;

Bu koda ait ekran görüntümüz;

css-dosyadan-ekleme

bu şekilde oluyor paragraf rengi kırmızı linklerimizin rengi yeşil oluyor.Bu sayede css ile çalışmaya hazırız.

CSS Kod Yazma Kuralları

css-yazma-kurali
Css kodlarını yazmak için çok fazla yok.Dikkat etmeniz ufak tefek nüanslar var o kadar gözde büyütmeye gerek yok.Öncelik bir element seçelim.Ben paragraf elementi olan p seçtim.p nin rengini mor ve kalın olmasını istiyorum.Burada dikkat etmeniz gereken birincisi elementi yazıyoruz ve süslü parantezlerimizi({}) açıyoruz yazmak istediğimiz özelliği yazıp iki nokta üst üstte(:) koyarak değerini yazarak noktalı virgülle kapatıyoruz.Birden fazla özellik eklemek istediğimizde kesinlikle noktalı virgül koymalıyız.Yukarıdaki verdiğim paragraf elementinin css kodlarını yazarsak;

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Free Web Hosting