Her dilin kendine özgü özellikleri olduğu gibi Css dilinin de kendi yazımı ve kuralları var. Güzel haber; bir kere mantığını anladıktan sonra sizi uğraştırmayacak derecede kolay bir dil. Bu dilin zorlayan tek bir yanı var; o da çapraz platform tarayıcılarına gelişmiş arayüz tasarımları yapmak. Sadece bir işletim sisteminin internet tarayıcısına göre tasarım gerçekleştirirseniz, yine kolay... Lakin başarılı bir Front-End yazılımcısı, oluşturmuş olduğu tasarımı tüm tarayıcılara göre tasarlamak durumundadır. Çünkü tasarımınızı kullanacak olan kullanıcılar (ziyaretçiler) kendi zevklerine göre her türlü çözünürlükte ve cihazdan bağlanacaklardır. Hele ki mobil cihazlar için, responsive tasarımlar üzerine fazlasıyla kafa patlatmamız gerekiyor.
Her neyse bunlar ileri ki aşamalarda dert etmeniz gereken şeyler... Biz konumuza geri dönelim.
Üstte ki görsel de bir css tanımı görmektesiniz. Örnek olarak h1 etikini kullandım. Gelin sırasıyla bunları inceleyelim.
Seçici: Burada h1 etiketi aslında bir seçicidir. Html'de herhangi bir elemente stil tanımlamak için öncelikle seçilmesi gerekir. Ardından süslü parantezler açılır ve stili belirleyecek ifade(ler) yazılır.
İfadeler: Süslü parantezlerin içerisinde tanımlanan ve elementlere çeşitli özellikler verebildiğimiz özellik ve değerler içeren tanımlara denir. Her ifade sonunda noktalı virgül (;) kullanılarak, o ifadenin tamamlandığı ifade edilir. İfade sayısı ve uzunluğuna göre tek satır veya çok satırlı olarak tanımlanabilir. Aşağıda ki "main.css" dosyasında bunu gözlemleyebilirsiniz. Şimdilik özelliklere ve alabileceği değerleri kafanıza takmayın. Zamanla bunları öğreneceğiz.
Css Yorum Satırları
Css ve her programlama dilinde olduğu gibi dosyalarımızda notlar tutabileceğimiz yorum satırları mevcuttur. Bu yorum satırları, son kullanıcının açısından önemsiz ve doğrudan göremediği, fakat kodlayıcı için kullanışlı olan satırlardır. Özellikle şirkette takım halinde çalıştığınız çalışma arkadaşlarınız için açıklayıcı satırlardır diyebiliriz.Örnek Kullanım;
/*Örnekte görüldüğü üzere bir yorum satırı /* ifadesi ile başlar, araya yorum yazılır ve kesinlikle */ ifadesi ile bitirilir. Bu şekil de css çalışmalarımızı, işe yarar açıklamalar ile daha da kolaylaştırabiliriz.
#slide - Slider boyut bilgileri
*/
#slide {
width: 780px;
height: 300px;
}
Uygulama
Öncelikle Html dosyamız da kullanacağımız bir css dosyası oluşturalım. Bunun için herhangi bir not editörü kullanabilirsiniz. Şu sıralar Microsoft'un geliştirdiği ve ücretsiz kullanımına sunduğu VSCode uygulamasını kullanıyorum ve gerçekten tavsiye ederim.Main.css Dosyası
/* Basit Css Yapısı */index.html dosyası
/* Yorum Satırı */
/* Etiket Seçici */
body{
background-color: #EEEEEE;
}
/* ID Seçici */
#card {
background-color: rgba(100, 253, 86, 0.466);
border: 2px solid rgb(251, 255, 0);
padding: 10px;
}
/* Class Seçici */
.yazi {
background-color: rgb(245, 246, 248);
padding: 1px 10px;
border-radius: 10px;
}
/* Alt Seçici */
.yazi > h2 {
font-size: 18px;
margin: 5px 0;
}
/* Alternatif Alt Seçici */
.yazi p { color:red; }
/* Group halinde seçici kullanmak */
#card, .yazi, a { color: black; }
<!DOCTYPE html>Sonuç
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Css Syntax</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<h1>Css Dersleri</h1>
<p>Msoguz.com</p>
<div id="card">
<span style="background-color: yellow">Bu bir span yazısıdır.</span>
<div class="yazi">
<h2>Örnek</h2>
<p>Tek bir dosya ile tüm html sayfasını renklendirebilirsiniz.</p>
</div>
</div>
</body>
</html>
Bu sayfada ki kodlara Github adresinden ulaşabilirsiniz...
Merhaba, ben Mustafa OĞUZ. Bilgi İşlem uzmanlığının yanında Yazılım ve Webmaster işleri ile haşır neşirim. Bu işlerden arta kalan zamanda amatör olarak Grafik tasarım ve blog yazarlığı yapmaktayım...
Hiç yorum yok:
Yorum Gönder