İ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.
