CSS Hakkında Temel Bilgi

STİL Şablonu CSS Nedir?

CSS’in açılımı Cascading Style Sheet’dir. Türkçe karşılığı ise Basamaklı Stil Sayfası anlamına gelmektedir.

CSS, HTML ögelerine yazı, paragraf, renk, kenar çizgisi resim ve bağlantı gibi işlerinde kolay ve basit bir şekilde düzenlememizi sağlar. CSS basit ve kullanışlı bir stil düzenleme programıdır. Web sayfalarımızı biçimlendirmek için kullanabileceğimiz basit bir işaretleme dilidir.

Html ile biçimlendirme sayfasını ayırır ve yüzlerce sayfadan web sitemizin biçimlendirmesini tek bir sayfa halinde yazabiliriz. Bu bize hız açısından büyük önem sağlayacaktır. Html’de tablolar oluşturarak daha çok vakit kaybetmek yerine CSS ile bunun önüne geçerek tablosuz tasarımlar yapabilirsiniz. CSS günümüzde web programcıların olmazsa olmazı haline gelmiştir.

Şimdi gelin bu CSS kodlarına bir Göz atalım.

CSS’yi Html kodlarında kullanacaksak stil dosyamızın html sayfamıza bağlantısı olması gerekir bunun içinse gerekli olan kod şudur.

<link rel="stylesheet" type="text/css" href="stildosyamızınadı.css ">

Bu kodu Html kısmına yerleştiriyoruz. Örnekteki gibi;

<!DOCTYPE html>
<html>
<head>
<title>Site Başlığımız</title>
<link rel="stylesheet" type="text/css" href="stildosyamızınadı.css">
</head>
<body>
</body>
</html>

  1. Basit bir kutu oluşturalım;

Burda ilk olarak Html’de bir sınıf oluşturuyoruz.

Örnek;


<!DOCTYPE html>
<html>
<head>
<title>Örnek</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="kutu"></div>
</body>
</html>

Burda oluşturduğumuz div’e verdiğimiz isim önemlidir. CSS de bu isim biçimlendirmek istediğimiz kısmı temsil edecektir. Div’den sonra gelen id kısmı ise css’de “#” temsil eder. İd değilde class’ı da kullanabiliriz. Css’de class kısmıda “.” Temsil eder.

#kutu{

Width:900px;

Height:50px;

Background-color:red;

}

Bur da menü için genişliği 900 pixel, yüksekliği ise 50 pixel olan basit bir kutucuk oluşturup renk verdik.

2.Sitemizdeki yazılarımızı biçimlendirelim;

İşte Sitemizdeki bütün yazıları örneğin Ana sayfada ki, İletişimde ki, Hakkımızda ki bütün yazıların aynı olmasını istiyorsak. Div’den sonra burda class’ı kullanabiliriz. Örneğin;

.paragraf{

Color:pink;

Font-size:18pt;

font-weight:bold;

font-family:Calibri;

}

Birkaç örnekle de anlayacağınız üzere CSS işimizi oldukça kolaylaştırarak performans açısından da istediğimiz verimi verebilmektedir.

Birde işinizi daha da kolaylaştıracak CSS Framework vardır. Framework CSS Kodlarının hazır bulunduğu bir kütüphanedir. Onlarca CSS kodlarını yazmak yerine bu kütüphaneden yararlanarak web sitenizin daha çabuk bitmesini ve zamandan tasarruf etmenizi sağlar.

Bu CSS Framework’lere örnek verecek olursak;

1.Bootstrap

2.Semantic UI

3.Pure.css

4.Material UI

  • İleti Yönetim Sistemi İYS

    İleti Yönetim Sistemi İYS

    İçindekilerTicari Elektronik İleti Yönetim Sistemi (İYS) Nedir?Ticari elektronik il…
  • E-ticaret Gtin Ean Mpn Upc Kodları Nedir

    E-ticarette GTIN MPN EAN UPC Kodları Nedir?

    Elektronik ticarete yeni başlayanların en çok merak ettikleri GTIN, MPN, EAN, UPC kodları …
  • Raid Nedir

    Raid Nedir?

    İçindekilerRAID Nedir?13 adet Raid yapısı vardır bunlar;Raid 0Raid 0+1Raid 1Raid 5 …
Bu kategoride daha fazla yazı Nedir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

İlginizi Çekebilir

İleti Yönetim Sistemi İYS

İçindekilerTicari Elektronik İleti Yönetim Sistemi (İYS) Nedir?Ticari elektronik il…