YazılımCSS Nedir? Kapsamlı Rehber

CSS Nedir? Kapsamlı Rehber

-

İngilizce karşılığı Cascading Style Sheets olarak açılan CSS  Türkçe’ye Basamaklı Stil Şablonu olarak çevrilmektedir. Web tasarım  ve daha bir çok alanda kullanılan css dili web sitelerinin  görsel anlamda renklendirilmesi, içeriklerin konumlandırılması, çeşitli animasyonlarla geçişler verilmesi ve daha bir çok kuralıyla öğrenilmesi kolay olan bir web geliştirme dilidir. HTML olarak yazılmış web siteleri üzerinde kolayca değişiklikler yapılmasını sağlayan css, HTML kodlarına yazılmış  olan class ve id özelliklerini kullanarak web site  geliştirmeye olanak sağlar.

CSS sayesinde web sitelerindeki içeriklerin boyutları, renkleri, mizanpajları gibi unsurlar üzerinde denetim yetkisine sahip olabilirsiniz.

CSS Dilinin Önemi Nedir?

Günümüz web dünyasında kullanıcılarına en iyi içerikleri sunanlar ve bunu kullanılabilirlik çerçevesi altında yapan web geliştirici uzmanları,  hedeflerine bir adım daha yaklaşıyor. Yalnızca HTML ve Javascript dili kullanılarak yapılmış bir site kullanıcının görsel açıdan tatmin olmasına yetmez. Tam da bu noktada CSS dili devreye giriyor. Her içerik ve sayfa üzerinde güncelleme ve silme imkanı veren CSS esnek web sitesi oluşturmaya da yardımcı olmaktadır.

CSS Kodlamaya Başlamak

Css dili için kod yazmaya başlamadan önce bu kütüphaneyi kullandığınız .html tarafında tanıtmanız gerekir.  Bu işlemi yapmak için manuel olarak kod yazıyorsak not defteri aracını, web sitesi veritabanı üzerinden yazıyorsak da header.php ya da main.php kısmına girerek ekleme işlemlerini yapmalıyız. Bir CSS kütüphanesinde girdiğimiz kodların sitemizde tanınması için şu kod parçasını <head></head> taglarının arasına girmeliyiz:

  • <link rel=”stylesheet” type=”text/css” href=”/css/style.css” /> (style.css bölümünde css uzantılı dosyaya verdiğiniz ismi kod bloğuna girmelisiniz.)

Bu kodu ekledikten sonra artık style.css alanında yaptığınız tüm değişiklikler web sitenizde dinamik olarak görünecektir.

CSS dilini iki farklı alanda yazdırarak sitemizde görünmesini sağlayabiliriz. Bunlar:

  • Genellikle bir çok kullanıcının da kullandığı alanlardan birisi olan .css uzantılı dosyaların bulunduğu alandır. Bu kısımda kod yazarken kütüphaneyi html alanında tanıtmak ve daha sonrasında class ve id lerden yardım alarak css kodlanmaya başlanır.
  • Web geliştirme alanında uzman kişilerin daha fazla kullandığı alan ise html bölümünün içine bu kodları yerleştirmektir. Burada hem yazdığımız html kodlarının içine hem de <head></head> taglarının  arasına stil dosyaları yerleştirilebilir.

1.Yöntem Kodların İçine  Stil Tanımlaması

Bu yöntemde uygulanan tüm kodlar <html> </html> alanında bulunan içeriklere uygulanır. Bu bir tablo, paragraf, başlık veya resim olabilir. Örnek vermek gerekirse

<div> Ana Menü </div> yapısına sahip bir kod parçası var. Bu kod parçasının içerisinde bulunan “Ana Menü” ifadesinin yazı rengini beyaz, arkaplan rengini ise  siyah yapmak istiyoruz. Bunun için ilgili div tagının arasına şu stil dosyasını eklemeliyiz:

<div style= “background-color: black; color: white;” >Ana Menü</div>

2.Yöntem <head></head> Tagları Arasına Stil Tanımlaması

Stil dosyalarını head tagları arasına yazmanın en büyük avantajlarından birisi okumayı kolaylaştırmaktır. Üzerinde değişiklik yapılacak olan dosyalar daha kolay tespit edilebilir ve estetik bir görünüm sağlar. Head tagları arasına stil dosyası eklemek için öncelikle oluşturduğumuz ana menü div tagına bir id ya da class atamalıyız. Örnek olarak:

<div id=”AnaMenuID”> Ana Menü </div>

<div class=”AnaMenuClass”> Ana Menü </div> daha sonrasında class dosyasında id dosyası tanımlayacaksak # , class dosyası tanımlayacaksak . sembolünü kullanmalıyız. Taglar arasına  yerleşim şu şekilde yapılmalıdır:

<head>
<style type=text/css>
#AnaMenuID{
Background-color: black;
Color:White;
}
</style>
</head>
<body><div id=”AnaMenuID”>Ana Menü </div></body>

En Çok Kullanılan  CSS Kütüphaneleri

CSS kütüphaneleri genellikle manuel olarak yazdığımız kodları otomatik hale getiren yapıladır. Kütüphaneler  Birkaç satırlık bir kod parçası ile hem temiz bir kod görünümü oluşturur hem de daha hızlı ve pratik işlem yapmamızı sağlar. En çok kullanılan css kütüphaneleri şunlardır:

Bootstrap

En fazla kullanılan css kütüphanesidir. Bootstrap 4 aracılığıyla cep telefonu, tablet, masaüstü-dizüstü bilgisayarlar ile web siteleri daha esnek görüntülenebilir.  Çok fazla özelliğe sahip olan bootstrap kütüphanesi web geliştiricilerin işlerini oldukça kolaylaştırmaktadır.

Foundation

Oldukça yaygın olarak kullanılan bir diğer kütüphane ise foundation. Bootstrap kütüphanesine benzer olarak esnek ve değiştirilebilir web sitesi geliştirmek isteyenler için oldukça kullanışlıdır.

Bulma

Bulma isimli kütüphanesinin en büyük avantajlarından birisi açık kaynaklı kütüphane olmasıdır. Yani web geliştiriciler tarafından özelleştirilebilir bir yapıya sahip olması bu kütüphaneyi modern hale getiriyor.

Ulkit

Front-end developerlar tarafından çokça kullanılan bu kütüphane içerisinde bulunduğu hazır eklenti ve bileşenleriyle etkileyici kullanıcı arayüzleri oluşturmak için tercih edilen kütüphaneler arasındadır.

Semantic UI

3100’ün üzerinde  düzene ve bileşene sahip olan bu kütüphane semantik web siteleri oluşturmak için tercih edilen bir kütüphanedir.

Materyalize CSS

Google tarafından geliştirilen bu kütüphane güçlü ve duyarlı web siteleri geliştirmek için kullanılan bir kütüphanedir. Android web siteleri için de kullanılabilir özellikte olması mobil kullanılabilirliği önemli ölçüde arttırmaktadır. 

Animate CSS

Dinamik web siteleri oluşturmak isteyenler için birebirdir. İçerisinde bulunan farklı animasyonlar ile şık geçişler sağlayan bu kütüphane Jquery ve CSS ile birlikte kolay kullanıma sahiptir.

Hover CSS

Fare ile nesnelerin üzerine gelindiğinde aktifleşen hover komutu bu kütüphane ile daha etkili görünümler kazanmaktadır.   Basit ve etkili geçişler sağlayan bu kütüphane yalnızca CSS3 kodları kullanılarak tasarlanmıştır.

Magic Animations

Sitelerinde 3D animasyonlara yer vermek isteyen web geliştiriciler için geliştirilmiş bu kütüphane ile  nesnelere, simgelere ve resimlere farklı görünümler kazandırmaktadır.

CSS Loaders

Sayfalarda yükleniyor… görünümü oluşturmak css ile oldukça uğraştırıcı bir iştir. Yükleniyor sayfası oluşturmak için yüksek boyutlu .jpg ya da .gif dosyaları kullanmak yerine tamamen css teknolojisini içeren bu kütüphaneyi kullanmak web sayfalarının hızı açısından oldukça önemli bir kütüphanedir. 

CSS Dilinde Kullanılan Komutlar

Css dilinde en çok kullanılan komutlar şunlardır:

Color: Yazının rengini değiştirmeye yarar. Kullanımı şu şekildedir:

color:red; (istenilen renk girilir.)

Background-color: Yazıların arka plan rengini değiştirmek için kullanılmaktadır. Kullanımı şu şekildedir:

Background-color: black;

Font: Yazıların veya başlıkların boyutlarını değiştirmek için kullanılan komuttur. Kullanımı:

Font: 15px;

Center: Yazıları sayfa içerisinde ortalamak için kullanılan komuttur. Kullanımı:

Text-align: center;

Width: Nesnelere genişlik vermek için kullanılan koddur. Kullanımı:

Width: 50px;

Height: Nesnelere yükseklik değeri vermek için kullanılır: Kullanımı:

Height: 100px;

Height ve width değerleri 5 parametre ile birlikte kullanılabilir:

  • Auto: Hiçbir değer girilmediğinde uygulanacak olan varsayılan komuttur.
  • Length: Yükseklik ve genişlik gibi değerleri px, cm gibi ölçü birimleriyle hesaplar.
  • %: Yükseklik ve genişlik gibi değerlerin yüzdelerini almak için kullanılır.
  • İnitial: Yükseklik ve genişliği varsayılan değerine sıfırlamak için kullanılan parametredir.
  • İnherit: Yükseklik ve genişliğin bir üst değerini vermek için kullanılır.

Border:  Yazılara kenarlık vermek için kullanılan komuttur. 10 farklı stilde kenarlık verme seçeneği bulunur. Bunlar:

  • Dotted: Noktalı sınır tanımlamak için kullanılır.
  • Dashed:Kesikli kenarlık oluşturmak için kullanılır.
  • Solid: Düz kenarlık oluşturur.
  • Double: Çift kenarlık oluşturulur.
  • Groove: 3D oluklu kenar oluşturmak için kullanılır. Kenarlıklar renge göre değişkenlik gösterir.
  • Ridge: 3D çıkıntılı kenarlıklar oluşturmak için kullanılır.
  • İnset: 3D iç kenarlık oluşturulur.
  • Outset: 3D başlangıç kenarlığı oluşturmak için kullanılan terimdir.
  • None: Kenarlık oluşturulmaz. Default değerdir ve genellikle sıfırlama değerleri için kullanılır.
  • Hidden: Gizli bir kenarlık oluşturmak için kullanılır.

Verilen tüm kodlar border-style: ______ ; şeklinde kullanılmalıdır.

Margin:  Dış boşluk vermek için kullanılan terimdir. Top,left,bottom,right parametreleri ile birlikte kullanılır.

Margin-top: 10px; (Sol taraftan 10 piksellik bir dış boşluk verilir).

Padding: İç boşluk vermek için kullanılır. Top,left,bottom,right parametrelerini alır.

Padding: 30px (30 piksellik bir iç boşluk verilir).

CSS Kutu Modeli

CSS programlama dili web standartlarındaki kutu modelini kullanarak ilerleyen bir yapıya sahiptir. Bu kutu esasında HTML yapısında kullanılan  ve sayfayı çevreleyen bir kutudur. Bu kutu en dıştan içe doğru şu şekilde sıralanır:

  • Margin
  • Border
  • Padding
  • Content

Aslında CSS’te verilen tüm komutlar bu kutu çevresinde tanımlanır.

CSS Yazı Tipi Aileleri

Web sayfalarında paylaşılan tüm içerikler belirli bir yazı ailesine bağlıdır. (Font-family) 5 temel yazı ailesi bulunur:

Serif:Her harfin yan tarafında ufak gölgecikler bulunur. Yazıların görünümüne estetiklik katar.

Sans-serif: Modern yazı tipidir. Yazı kenarları sadedir ve gölge içermez.

Monospace: Tüm harfler eşit genişliğe sahiptir.

Cursive: İnsan el yazısını taklit eder biçimde kullanılan yazı tipi ailesidir.

Fanstasy: Eğlenceli ve dekoratif yazı tiplerini içerir. Diğerlerine göre okuması daha güçtür.

CSS Sayfalarına İkon Eklenmesi

Bir CSS sayfasına ikon eklemek için en basit yöntemlerden birisi Font Awesome  simge kitaplık aracını kullanmaktır.  Bu sınıfı eklemek için ilgili HTML öğresine <i> ya da <span> komutu verilmelidir.

Font Awesome kitaplığını kullanmak için fontawesome.com adresine girdikten sonra  oturum açmalısınız. Ardından  <head> alanınıza eklemek için  sayfadan script kodu almanız gerekir.  Örnek bir script kodu şu şekilde görüntülenmelidir:

<script src=https://kit.fontawesome.com/kodunuzburadaolacak.js crossorigin=”anonymous”></script> 

Size özel olarak verilen bu kodu head alanına ekledikten sonra bu site içerisinde bulunan tüm ikonları web sitenizde kolay bir şekilde kullanabileceksiniz.

CSS Bağlantı Durumları

a:link:  Tıklanmamış bir web sayfası için kullanılacak olan komuttur.

a:visited: Web sayfalarını ziyaret ettikten sonra linkin hangi renkte görüneceğine bu komut sayesinde karar verebileceksiniz.

a:hover: Fareyle nesne üzerine gelindiğinde işlem yapılmasına olanak sağlayan koddur.

a:active: Tıklanıldığı zaman bağlantı oluşturan komuttur.

CSS Liste Yapıları

CSS diline sıralı ve sırasız listeler oluşturmak için iki komut kullanılır.

<ul>  Sırasız listeleri, 
<ol> Sıralı listeleri temsil eder.  Örnek bir liste şu şekilde yapılabilir: 
ul.a {
list-style-type: circle;     (Bu komut ile içi boş bir daire  listesi oluşturulur).
}
ul.b {
list-style-type: square; (Bu komut ile içi dolu bir kare listesi oluşturulur).
}
ul.c{
list-style-type: upper-roman; (Roma rakamları kullanılarak sıralı liste oluşturulur).
}
ul.d{
list-style-type: lower-alpha; (Küçük alfabetik harfler ile sıralı liste oluşturulur (a,b,c gibi)).
}

CSS Yazı Sabitleme

CSS dilinde yazı sabitlemek için float komutu kullanılır. Örneğin bir yazıyı sağ tarafa sabitlemek için:

Float:right; komutu verilmelidir.

CSS Animasyon Kodları

CSS animasyon kodları web sitelerini daha dinamik hale getirmek için kullanılan komutlardır. Sayfa açıldığı andan itibaren verdiğiniz komutlar doğrultusunda içerikleriniz hareket haline geçer.  Animasyon özelliğinin 8 parametresi bulunur ve @keyframes özelliği ile tetiklenir.

  • Animation-name: Animasyona isim vermek için kullanılan koddur.
  • Animation-duration:Animasyonun ne kadar süreceği hakkında bilgi vermek için kullanılan komuttur.
  • Animation-delay:Animasyon başlarken ne kadarlık bir gecikme olacağını web siteleri bu kod sayesinde anlamaktadır. (saniye için s , milisaniye için ms gibi değerler alır)
  • Animation-iteration-count:Animasyonun ne kadar çalışacağını bildirmek için verilen komuttur. (Sürekli çalışması için infinite komutu verilmelidir)
  • Animation-direction: Animasyonun yönünü belirtir.
  • Animation-timing-function: Animasyonun oynatılma şeklini belirtir.
  • Animation-fill-mode: Animasyonun başlangıç hedefini belirtmek için kullanılan parametredir.
  • Animation:Tüm parametreleri tek bir kod bloğu altında yazmak için animation kodu kullanılmalıdır.

Yorum Yapabilirsiniz

Please enter your comment!
Please enter your name here

Son Makaleler

Windows 10 Kayıt Defteri Temizleme İşlemi Nasıl Yapılır?

Windows 10 kayıt defteri temizleme işlemi kullanıcılar için bazı zamanlarda oldukça önemli olabiliyor. Çünkü bu işlem sayesinde bilgisayarda oluşan...

Arduino vs Raspberry Pi: En iyi Kart hangisi?

Tek kartlı bilgisayarlar, yeni başlayanlar için geliştirme ve öğrenme sürecinde kullanılabilmeleri nedeniyle son yıllarda oldukça popüler hale geldi. Tek kartlı...

Hidrofilik polimerler Yeşil bir geleceğin anahtarı

Surrey Üniversitesi ve Bristol Üniversitesi'nden araştırmacılar, rüzgar ve güneş gibi öngörülemeyen kaynaklardan gelen karbonsuz yenilenebilir enerjiyi evcilleştirmek ve depolamak...

Ember JS Nedir, Niçin Kullanılır?

Ember js, web uygulamaları geliştirmek için kullanılan açık kaynaklı ve ücretsiz bir JavaScript çerçevesidir. Daha açık bir dille, bir...

Kuantum Fiziği Neden Önemlidir ve Olmasaydı Neler Olurdu?

Bütün fizikçilerin bildiği gibi kuantum fiziği çok karmaşık bir konudur. Çünkü bu fizik evreninde bizim bildiğimiz kurallar geçerli değildir....

Simyanın Önemi ve Simya ile Bilim İlişkisi

Yüzyıllardır inanlar simyanın uğraşları içerisine girmişlerdir. Bu uğraşların temel amaçlarına yazımı içerisinde değineceğiz. Ancak çok genel bir çerçeve ile...

Önerilen Makaleler

Windows 10 Kayıt Defteri Temizleme İşlemi Nasıl Yapılır?

Windows 10 kayıt defteri temizleme işlemi kullanıcılar için bazı...

Arduino vs Raspberry Pi: En iyi Kart hangisi?

Tek kartlı bilgisayarlar, yeni başlayanlar için geliştirme ve öğrenme...

ilgili diğer makalelerBAĞLANTILI
sizin için öneriliyor