aeyStudio
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Katmanlar
Fireworks Buton Yapımı
Parlak Buton Yapımı
CuteFTP
Fireworks Şekillere Yazıları Dolamak
Web Tasarımı - Tablolar
Boru - Çubuk Yapımı
Gümüş Para Yapımı
Photoshop Plug-ins
Flash ile E-mail Formu Hazırlamak

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Web Tasarımı / CSS Etiketleri / CSS - Genel Bilgi

CSS - Genel Bilgi
RSS Feed: CSS - Genel Bilgi (Dersler)
Eklenme Tarihi: 07.11.2005 - 21:47   (İzlenme: 51726)
Yorumları Oku (-)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır


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












Yazan: Yorum:
Bu ders için yorumlar yok

RSS Feed: CSS - Genel Bilgi (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar