Css Nedir? - Mustafa Sabri OĞUZ

Duyurular

8 Temmuz 2018 Pazar

Css Nedir?


Css (Cascading Style Sheets), günümüzde web sayfalarımızın stil şablonu olarak kullanılan web teknolojisidir. Araştırma yaptığım diğer internet sayfalarında ki gibi bu yazım da size avantajını veya dezavantajını anlatmayacağım. Çünkü karşılaştırılacak herhangi bir karşılığı yoktur. Eğer sağlam bir Front-End Developer olmak istiyorsanız, Html'den sonra Css'i mecburen öğrenmek ve kullanmak zorundasınız. Kaliteli web tasarımları oluşturabilmek için Html, Css ve Javascript bilginizin iyi oturmuş olması gerekiyor.

Css Kullanım Yöntemleri

Css öğrenirken, baktım ki farklı css kullanım yöntemleri var. Başlangıçta fazla bir tecrübeniz olmadığından bu yöntemler arasında fazlasıyla git gel yaşıyorsunuz. Bu sorunu şimdiden kaldırmak için açıklamaya çalışayım.

Html Etiket içinde Kullanımı

<p style="color: red; font-size: 14px;">
Kırmızı yazı örneği
</p>
Html etiketlerinin style özelliği içinde css stil tanımlaması gerçekleştirilebilir. Bu yöntem en çok online editör olarak tabir ettiğimiz WYSIWYG editorler aracılığı ile  oluşturulan makalelerde kullanılır. Sizde buna benzer editörler veya chat sistemleri tasarlamayı düşünmüyorsanız, pek kullanacağınız bir yöntem değildir.

Dahili Kullanımı

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dahili Css Kullanımı</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {font-size: 14px; color: red;}
</style>

</head>
<body>
<h1>Css Dersleri</h1>
<p>Msoguz.com</p>
</body>
</html>
Head etiketlerinin arasında kısa css stilleri tanımladığımız yöntemdir. Genel olarak sayfaya özgü ufak değişikler için bu yöntem kullanılır. Oluşturmuş olduğumuz stil tanımları 30 satırdan fazla ise sonra ki yöntem olan harici kullanım tavsiye edilir.

Harici Kullanımı

Günümüzde statik web sayfaları kullananların sayısını göz önünde bulundurursak, sizlere "Yüzlerce sayfayı tek bir dosya üzerinden tasarımını değiştirebilirsiniz..." klişesini kullanmayacağım, çünkü dinamik web sayfalarının oluşturulma aşamaları (Back-End) yeterince karmaşık olduğundan bütün stilleri tek bir dosyada toplamanız gerekiyor. Bu yöntem size ve Back-End Developer olarak çalışan çalışma arkadaşlarınıza kolaylık sağlayacaktır..
Örnek main.css dosyası
body {background-color : white;}
p {font-size: 14px; color: red;}
Kullanımı da oldukça basit; oluşturmuş olduğumuz stil dosyasını Html'in link etiketi ile dosyamıza dahil etmemiz gerekiyor, hepsi bu kadar...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Harici Kullanımı</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>
</body>
</html>
Özetle css'de kullanacağımız genel yöntem harici kullanımıdır. Diğer yöntemler için fazla kafa yormanıza gerek yok. Css'i öğrenip, kullandıkça zamanla kendinizde bu kararı verebileceksiniz.

Css'in kolaylıkları hakkında fazla bir şey söylemeye ihtiyaç duymuyorum. Yazımın başında söylediğim gibi Css'ten başka alternatifiniz yok. Css'i öğrendikçe, sağladığı kolaylıkları kendiniz keşfedeceksiniz.

Buraya kadar yazımı sabırla okuduğunuz için teşekkür ederim. Sonra ki yazılarım da görüşmek üzere...

Hiç yorum yok:

Yorum Gönderme