Teknoloji ve Hayata dair günceler

Okudunuz Mu?

Son Yazılar

Kategoriler

Son Yorumlar..

Copyright © Teknoloji ve Hayata dair günceler. 2024 • All rights reserved.

Cedar WordPress Theme by EckoThemes. Published with WordPress.

CSS nedir,neyin nesidir ?

Kemal İKİZOĞLUKemal İKİZOĞLU

Cascading Style Sheets (Basamaklı Stil Şablonları ya da Basamaklı Biçem Sayfaları, bilinen kısa adıyla CSS), HTML‘e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir.

İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini; yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Bu şekilde, sayfaların hafızadaki boyutu epey küçüldüğü gibi, güncelleme yapmak da kolaylaşır.

CSS kodları; HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da işlem yaptırılabilir. Türüne göre <BODY> veya <HEAD> bölümlerinde yer alabilirler. Ayrıca <link rel=”stylesheet” type=”text/css” href=”style.css” /> koduyla css dosyası çalışma sayfasına eklenebilir.

CSS kodlarının, HTML dosyasına eklenmesi temelde 4 farklı şekilde yapılabilir.

CSS?i (X)HTML sayfalarımıza eklemenin 4 yöntemi vardır.
1- Kod içinde (In-line):

Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak.

  1. <div style=”color:red”>Deneme yazımız</div>
    Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir.

2- style Elementi kullanılarak:

<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
  5. <title>CSS?i Uygulamak </title>
  6. <style type=”text/css”>
  7. div{
  8. color:red;
  9. }
  10. </style>
  11. </head>
    Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

3- Harici Stil şablonu Kullanımı

Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydederiz. ornek.css

  1. p {
  2. color: red;
  3. }
  4. a {
  5. color: blue;
  6. }

Daha sonra bu kodu gereken sayfalarımıza uygularız.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
  5. <title>CSS?i Uygulamak</title>
  6. <link rel=”stylesheet” type=”text/css” href=”ornek.css” />
  7. </head>
    Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.

4- @import ile eklemek

üncü yöntem ile kullanımı benzerdir.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
  5. <title>CSS?i Uygulamak</title>
  6. <style type=”text/css”>
  7. @import “ornek.css”;
  8. </style>
  9. </head>

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(Örn: NN4)
@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz.
Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.
Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS?inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi kolaylaşır.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″ />
  5. <title>CSS?i Uygulamak</title>
  6. <style type=”text/css”>
  7. @import “urunler.css”;
  8. </style>
  9. </head>

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.
urunler.css

  1. @import url(/css/iskelet.css);
  2. @import url(/css/fontlar.css);
  3. @import url(/css/renkler.css);
  4. @import url(/css/urunlereozel.css);

Kullanabileceğiniz Css Kaynak dosyaları :

Link : Link : Link

HTML - CSS
Kemal İKİZOĞLU
Yazar

@ikizoglukemal

Eğitim ve teknoloji haberlerini, ilginç ve önemli bilgileri, kendimi geliştirdiğim alanlardaki öğrendiğim tecrübelerimi blogumda paylaşıyorum. Öğrenmekten ve paylaşmaktan zevk alıyorum.İnandığım bir şey var ki istisnalar hariç, hiçbir şey imkansız değildir. Mucizeler için zaman gerekir! Bu benim yaşam felsefem.

Yorumlar 1
  • nurse assistant
    Posted on

    nurse assistant nurse assistant

    Yanıtla Author

    Finally, an issue that I am passionate about. I have looked for information of this caliber for the last several hours. Your site is greatly appreciated.