Ders Adı: CSS - Genel Bilgi
Kategorisi: CSS Etiketleri
Ekleyen: zebaniz - Tarih: 07.11.2005 - 21:47

CSS ler hakkında kısa bilgiler ve örnekler

Bize gelen emailler doğrultusunda bir çok web tasarımcısının gözdesi haline gelen CSS (Cascading Style Sheets) hakkındaki bazı kısa açıklamaları buraya yazma ihtiyacı doğmuştur.
Bu nedenle CSS etiketlerinin HTML etiketleri ile birlikte nasıl kullanılacağı, web sayfalarının linkleri, yazı tipleri, arkaplan resimleri, form buton ve alanlarının nasıl şekillenip renklendirileceği gibi örnekleri burada bulabilirsiniz.

Öncelikle CSS etiketlerinin HTML etiketleri içinde nasıl kullanıldığını inceleyelim;
Bunun için iki türlü uygulama yapabilirsiniz;

1. CSS etiketlerini, HTML içindeki etiketleri içine yazmak. Örn;


CSS Etiketleri



CSS Etiketlerini inceliyoruz..



Yukarıdaki kod ile web sayfamızdaki yazı özelliklerini belirlemiş olduk. Biraz daha açıklarsak;
Web sayfamızda kullanacağımız Yazı Büyüklüğü (font-size): 12pt, türü (font-family): Arial, Rengi (color): siyah ve Koyu Harfler kullanılmasını (font-weight : bold) istiyoruz. Şayet Koyu olmayan Normal Harflerin kullanılmasını istersek font-weight : normal olarak belirtmeliyiz.
Burada dikkat edilmesi gereken, özelliği mutlaka iki nokta üst üste (:) ile belirleyip, değerin sonunda da mutlaka noktalı virgül (;) kullanmalıyız.

2. CSS etiketini basit olarak, notepad içine yazıp, herhangi bir isim ile ama .css soyadı ile (örn: style.css olarak) kaydettikten sonra bu dosyaya HTML nin etiketleri arasına link vermek. Bunuda örneklersek;
Bilgisayarınızdaki notepad'i açın ve aşağıdaki kodu notepad'e yazın;

body{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
color : #000000;
}


Daha sonra Dosya>Farkı Kaydet ile açılan pencereden Bütün Dosya Türlerini seçip, style.css adında ve web siteniz ile aynı dizine kaydedin.
Web sayfanızı açın ve HTML kodlarındaki etiketleri arasına aşağıdaki kodu ekleyin;



Örn;



CSS Etiketleri



CSS Etiketlerini inceliyoruz..



Artık web sitenizin yazı özelliklerini değiştirmek için bütün sayfaları tek tek açıp değiştirmekle uğraşmaktansa tek bir bir CSS dosyasında yapacağınız küçük bir değişiklik ile çabucak sağlayabilirsiniz.
Bu ikinci yol, sayfa sayısı fazla olan web sitelerindeki değişikliğin daha kolay yapılmasını sağladığı için en çok tercih edilen uygulamadır.

Web sitenizin linlerini de değiştirebilirsiniz.
Aşağıdaki kodu örneğimizdeki style.css dosyasına eklerseniz, sitenizin linklerinin de değiştiğini görürsünüz;
Aşağıdaki örnekte linkler, yeşil renkte olacak, mouse üzerine gelince kırmızı renge dönecek ve altı çizgili olacaktır.

a.:link,
a.:visited,
a.:active
{
font-family: Arial;
font-size: 12pt;
color: #008000;
font-weight: bold;
background-color: transparent;
text-decoration: none;
}

a.:hover
{
font-family: Arial;
color: #cc0000;
font-weight: bold;
background-color: transparent;
text-decoration: underline;
font-size: 12pt;
}

Burada linkin altındaki çizgiyi sağlayan, text-decoration: underline; etiketidir. Şayet alt çizgi istemezsek bu etiketi, text-decoration: none; olarak değiştirmeliyiz.

Yazı büyüklüğü olarak pt (punto) yerine, px (pixel) de kullanabiliriz;
Örn: font-size: 12px; gibi.

Sayfalarımızda arka plan rengini değiştirip, arka planda resmi kullanacaksak aşağıdaki kodu örneğimizdeki style.css etiketi içindeki body etiketi içine ekleyiniz;

background-color :#FFFF00;
background-image : url('arkaplanresim_adi.gif');

Örn;

body{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
color : #000000;
background-color :#FFFF00;
background-image : url('arkaplanresim_adi.gif');
}

Form butonları görüntülerini değiştirmek için aşağıdaki kodu örneğimizdeki style.css etiketine ekleyiniz;

.buton {
BORDER-RIGHT: #993300 thin solid; BORDER-TOP: #ff9933 thin solid; FONT-SIZE: 11px; BORDER-LEFT: #ff9933 thin solid; CURSOR: hand; COLOR: white; font-weight: bold; BORDER-BOTTOM: #993300 thin solid; FONT-FAMILY: Verdana,sans-serif; HEIGHT: 20px; BACKGROUND-COLOR: #ff6600
}

Sayfanızın etiketleri arasındaki formdaki bulunan buton etiketine class=buton eklentisini yaparsanız, sayfanızdaki form butonlarının görünümü değişecektir. Örn;



Form alanları için bir CSS örneği verirsek;

.alan {
font-family : Tahoma, Helvetica, sans-serif;border-style: solid; border-width: 1; padding-left: 1; padding-right: 1; padding-top: 0; padding-bottom: 0;font-size: 11px;
}

Sayfanızın etiketleri arasındaki formdaki bulunan form alanı etiketine class=alan eklentisini yaparsanız, sayfanızdaki form alanlarının görünümü değişecektir. Örn;



Yukarıda bütün bu anlatılanlara göre örnek style.css etiketi kodları aşağıdaki şekilde olacaktır;

body{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
color : #000000;
background-color :#FFFF00;
background-image : url('arkaplanresim_adi.gif');
}

a.:link,
a.:visited,
a.:active
{
font-family: Arial;
font-size: 12pt;
color: #008000;
font-weight: bold;
background-color: transparent;
text-decoration: none;
}

a.:hover
{
font-family: Arial;
color: #cc0000;
font-weight: bold;
background-color: transparent;
text-decoration: underline;
font-size: 12pt;
}

.buton {
BORDER-RIGHT: #993300 thin solid; BORDER-TOP: #ff9933 thin solid; FONT-SIZE: 11px; BORDER-LEFT: #ff9933 thin solid; CURSOR: hand; COLOR: white; font-weight: bold; BORDER-BOTTOM: #993300 thin solid; FONT-FAMILY: Verdana,sans-serif; HEIGHT: 20px; BACKGROUND-COLOR: #ff6600
}

.alan {
font-family : Tahoma, Helvetica, sans-serif;border-style: solid; border-width: 1; padding-left: 1; padding-right: 1; padding-top: 0; padding-bottom: 0;font-size: 11px;
}

Örnek web sayfamızın HTML kodları da aşağıdaki gibi olacaktır;



CSS Etiketleri



CSS Etiketlerini inceliyoruz..









Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=73
Web Sitesi: http://www.aeyStudio.com