Kısa Bilgiler Örnekler - İsmail KIRBAŞ ile Web Sitesi Tasarımı
İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | CSS | Kısa Bilgiler Örnekler

Diğer Yazılar
CSS Nedir?
CSS-P Konumlandırma
CSS ile Background
CSS 2
CSS ve XHTML ile Temel Sayfa Tasarımı


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:3679Güvenlik Kodu:3679Güvenlik Kodu:3679Güvenlik Kodu:3679




En Son Okunan 10 Makale
  1. İletişim Türleri
  2. Paralel Port LPT Test XP
  3. Başarısız Yönetici
  4. Toplantıdan Zaferle Çıkmanın Yolları
  5. Projelerimiz
  6. Başarı Yolunda 70 Altın Kural
  7. Müşteri İle Aynı Dili Konuşmak
  8. ISO 18001-14001
  9. Renklerin Dili - Kahverengi
  10. CE İşareti ve ISO Belgesi
 
Kısa Bilgiler Örnekler>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

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 <head> </head> etiketleri içine yazmak. Örn;
<html>
<head>
<title>CSS Etiketleri</title>
<style type="text/css">
body{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
color : #000000;
}
</style>

</head>
<body>
CSS Etiketlerini inceliyoruz..
</body>
</html>

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 <head></head> 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 <head></head> etiketleri arasına aşağıdaki kodu ekleyin;

<link rel="stylesheet" href="style.css" type="text/css">

Örn;

<html>
<head>
<title>CSS Etiketleri</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
CSS Etiketlerini inceliyoruz..
</body>
</html>

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 <body></body> 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;

<input class=buton type=submit value="Tamam">

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 <body></body> 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;

<input class="alan" size=15 name="">

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;

<html>
<head>
<title>CSS Etiketleri</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
CSS Etiketlerini inceliyoruz..<br>


<form method="get" action="">
<input class=alan size=15 name="">
<input class=buton type=submit value="Tamam">
</form>
</body>
</html>



Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : AEYStudio
Son Güncelleme : 23 Mayıs 2005, Pazartesi
Sayfa Sürümü : 1
Okunma Adedi : 25,806
Son Okunma : 2017-11-24 05:53:41
Kaynaklar : http://www.aeystudio.com/forums/index.php?showtutorial=134

CSS Nedir?Kısa Bilgiler ÖrneklerCSS-P Konumlandırma
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 6 kişi çevirimiçi | Bugün =62 | Dün =252 | Bu Ay=5,598 | Günlük En Fazla=1,109 tekil ziyaretçi