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