css çeşitleri

css’nin kullanım türüne göre 3 çeşidi olduğunu daha önceki yazımda söylemiştim. şimdi bu konuyu tüm detaylarıyla inceleyelim.
css’nin çeşitlerine geçmeden önce style şablonları hakkkında bilmemiz
gereken kısa birkaç bilgiyi sizlere aktarmak isterim.
1. Stil Şablon çeşitleri :
Css’in en çok beğenilen yönü istendiğinde sadece bir öğeye etkimesi, istendiğinde tüm sayfaya etkimesi, istendiğinde site içindeki tüm html dosyalarına etkimesidir. Bunlar kısaca Stil Şablonun kullanım çeşitleridir.
2. Html etiketleri ile Css :
Bu dersimizde Html’deki font,background gibi çeşitli özelliklerin Stil Şablon tarafından nasıl belirlenebileceğini göreceğiz.
3. Seçiciler (Selectors) :
Kimi zaman Html etiketlerinden fontu hepimiz kullanırız. Örneğin bir sayfa içerisinde font etiketine birden çok görünüm eklemek isteriz. Bu durumda seçiciler imdadımıza yetişir. Bu dersimizde de seçicilerin nasıl kullanıldığını ve yazım kurallarını öğrenceğiz.
4. Genel kullanım şekilleri :
Bu yazımda ise A (link) etiketinin çeşitli kullanım biçimleri ile birlikte bir Stil Şablonun nasıl kullanırsak işimize daha fazla yarayacağını göreceğiz. Siz buradaki kullanım tarzına göre Css’i kullanırken kendinize nasıl bir yön izleyeceğinize karar verebilirsiniz.
css çeşitleri kullanım alanlarına göre 3 gruba ayrılırlar bu kullanımlar içerisinde ilk ele alacağım css çeşidi yerel kullanımdır. bu kullanım türü sadece kullanıldığı alana etki eden css komutlarıdır. yani bir html dökümanında hangi kısımda style kullanmak istersek o alanda kullanabileceğimiz css kullanım şekildir.
yukarıda bahsettiğim kullanıma bir örnek vererek kaldığımız yerden devam edelim.

<html>
<head>
<title> css </title>
</head>
body>
<h1> css çeşitleri </h1><br>
<h2 style=”font-size:20pt; color:blue”>css çeşitleri</h2>
</body>
</html>
bu örneği css.html adıyla kayıt edip tarayıcıda açtığınızda aynı 2 yazının birmirinden farklı olduğunu göreceksiniz. biz 2. yazımıza css style ekleyip sadece belirttiğimiz yazıya etikemesini istedik. işte tam olarakta yerel css kullanımı bunu içermektedir. çok satırlı kodlamalarda bu yöntem sağlıklı olmayacaktır. çünkü her yazdınız için ayrı ayrı style kodlarınıda eklemeniz gerekecektir.
global kullanım css’nin 2. çeşididir. bu kullanım tarzı ise yazdığımız sayfanın tümüne etki eden şablon türüdür. html komutlarında <head> </head> etiketleri arasında tanımlanırlar. ve yalnızca tek sayfaya etki ederler.
yine bir örneklendirme yaparak açıklağı kavuşturalım.

<html>
<head>
<title> css </title>
<style type=”text/css>
<!–
h2 {font-size:20pt; color:blue}
–>
</style>
</head>
<body>
<h2>css çeşitleri</h2>
</body>
</html>
biz burada style/style> etiketleri arasında yazdık yapmış olduğumuz tüm css tanımlamalırını bu 2 etiket arasında ve <head> </head> etiketleri arasında yazmamız gerekmektedir.
<style> etiketi burada type parametresi aldı ve bu type parametresinde türünü belirtmiş olduk. birden çok sayfalı tasarımlarda bu yöntem size zaman kaybettirecektir. çünkü yaptığınız her sayfa için farklı style tanımlamaları yapmanız gerekecektir. ayrıca kodlarınızı değiştirdiğinizde style tanımlamalarınıda el ile düzenlemeniz gerekecektir.
son olan css çeşidi ise bağlantılı style dosyasıdır işte en yaygın kullanılan css çeşididir. peki neden yaygın bir kullanımı var bu kullanım türü harici css dosyası eklemektedir. tüm sayfalarımızda etkimeye girmektedir. sadece bir satırlık kod ile istediğimiz sayfalara ekleyip css dosyamızı çağırmamız yeterli olacaktır. ben css ile ilgili tüm yazılarımda bağlantılı css kullanacağım. zaman zaman diğer kullanımlarıda ele alabilirim elbette.
not: yine <head> </head etiketleri arasına css tanımlamamız şu şekilde tanımlanmalıdır.
<link rel=”stylesheet” type=”text/css” href=”dosya_ismi.css”>
tıpkı daha öncekilerinde olduğu gibi bunuda örneklendirelim.

h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}
bu dosyamızı style.css olarak kayıt edelim.
şimdi html dosyamızı tanımlayalım.

<html>
<head>
<title> css </title>
<link rel=”stylesheet” type=”text/css” href=”stil.css”>
</head>
<body>
<h1>css çeşitleri</h1>
<h2>css çeşitleri</h2>
<h3>css çeşitleri</h3>
</body>
</html>
bu kodlarıda css.html olarak kayıt ettiğimizde html dosyamız içerisinde kullandığımız css kodları html dosyamızda çalışmış olacaktır. bu şekilde istediğimiz sayfaya css kodlarımızı çağırabiliriz.
genel olarak css kullanım çeşitlerini tek tek ele aldım ama sizlere tavsiyem son yöntemi kullanmanız size daha az zaman kazandıracaktır.

Bir önceki yazımız olan css'e giriş başlıklı makalemizde css, css çeşitleri ve css nedir hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir