Giriş » GRAFİK TASARIM » Nedir Bu CSS? [Örneklerle CSS]

Nedir Bu CSS? [Örneklerle CSS]

30 Aralık 2008 | Kategori: GRAFİK TASARIM | Yazar:

CSS
(Cascading Style Sheets – Basamaklı Stil
Sayfaları)

Günümüz internet sitelerinde dikkat çeken
en önemli özelliklerin başında sitenin genel görüntüsü gelmektedir. Herhangi
bir internet sitesi kullanıcılar tarafından ziyaret edildiğinde ilk dikkat
çeken noktaların başında sitenin kullanım kolaylığı, içeriği ve genel görüntüsü
gelir. Sitemize şekil verirken yararlanacağımız en temel bileşenler CSS’lerdir.
CSS ile sayfalarımıza, paragraflarımıza, cümlelerimize, kelimelerimize ve hatta
harflere noktalara kadar ayrı bir stil tanımlaması yapabiliriz.

Yazımızın
devamında sayfamızda oluşturabileceğimiz stiller hakkında giriş düzeyinde bilgi
verilmektedir.

Nedir
Bu CSS?

CSS
(Cascading Style Sheets – Basamaklı Stil
Sayfaları)

Web
sitesi oluştururken çeşitli etmenler göz önünde bulundurularak web sitesinin
genel bir renk şemasını oluşturmamız gerekmektedir. Siteye hakim olacak genel
renk belirlendikten sonra CSS ile sitemizdeki bölümlerin genel stil
tanımlamalarını yapmaya başlayabiliriz. Arka plan rengi veya resmi, sitenin
geneline hakim olacak renkler, yazıların ve başlıkların renkleri, fontları,
resimlerin çerçeve özellikleri, genel hizalamalar, site içindeki bağlantıların
özellikleri… Özellikle harici stil tanımlamasından yararlanarak sitemizin
tümünde kullanacağımız genel stil özelliklerini bir stil dosyasında
toplayabiliriz. Ve ilerde sitemizin genel görüntüsünü değiştirmek istediğimizde
önceden hazırladığımız bu stil dosyasındaki stil tanımlamalarını değiştirmemiz
yeterli olacaktır.

Yazımızın
devamında sayfamızda oluşturabileceğimiz stiller hakkında giriş düzeyinde bilgi
verilmektedir.

Yazımızda anlatılan örnekleri indirmek için tıklayınız….

Stil tanımlama
yöntemleri

I.

Özel Stil Tanımlama

1.

Yerel Stil Tanımlamaları

2.

Dahili Stil Tanımlamaları

3.

Harici Stil Tanımlamaları

II.

Etiketler için stil
tanımlama

1.

Tek bir etiket için stil tanımlaması

2.

Etiket kombinasyonları için stil tanımlama:

A) Özel Stil Tanımlama Yöntemleri

1. Yerel Stil tanımlamaları: Sayfamız içerisinde
bulunan metinler için yapılan tanımlamadır. BODY bloğu içinde kullanılır. Her
defasında yeniden tüm özellikler yazılır ve tanımlanan belge içinde ve başka
bir sayfada kullanılmak istenirse stilin tüm özelliklerini yeniden yazmak
gerekmektedir. Yerel-tanimlama.html sayfasında örnek uygulama gösterilmiştir.

Burada yer alan yazılarlar yerel stil
tanımlamasına göre renklendirilmiştir.

</p>

2. Dahili Stil Tanımlamaları:

Sayfamızda HEAD bloğunda
STYLE bloğu içinde tanımlarız. Her bir stil grubu için verilen ismi sayfa
içinde defalarca kullanabiliriz ancak HEAD bloğunda tanımlanan bu stil harici
bir sayfadan kullanılmaz. Genel kullanımı şöyledir:

<!–

.birincistil { özellikbir; özellik2; özellikN;}

.ikincistil

{

özellikbir;

Özellik2;

özellikN

}

–>

</style>

</head></html>

Yukarıda tanımladığımız 2
stili sayfamız içerisinde etiketlere class=”birincistil” şeklinde çağrarak
kullanabiliriz. Örneğin <p class=”birincistil”> yazi </p> şeklinde
bir tanımlamada <p> etiketi içerisindeki yazi <head> bloğu içinde
tanımlanan “birincistil” isimli stilin özelliklerine bürünecektir.
Dahili-tanimlama.html sayfasında örnek uygulama gösterilmiştir.

3. Harici Stil
Tanımlamaları:
Stil tanımlamaları boş bir sayfada tanımlanıp .css uzantısıyla kaydedilerek
oluşturulur. Stil tanımlamalarının kullanılacağı her sayfanın <head>
kısmına aşağıdaki kodu yazarak harici stil sayfamızda oluşturduğumuz stilleri
kullanabilir:

Stil-adi.css isimli stil
dosyamızda tanımladığımız tüm stilleri Dahili stil tanımlamasında olduğu gibi
class=”stiladi” şeklinde istediğimiz etiketlere çağırarak kullanabiliriz.
Harici-tanimlama.html sayfasında örnek uygulama gösterilmiştir.

B) Etiketler İçin Stil
Tanımlama Yöntemleri

1. Tek bir etiket için
stil tanımlama:

HTML
içinde bulunan etiketler için yapılan tanımlamadır (p,table,td,h1,a,form,div…).
Etiketler için yapılan tanımlamalarda Özel Stil Tanımlama Yöntemlerinde
anlattığımız isimlendirmenin aksine söz konusu stil isminin başına . işareti
koymayız, doğrudan etiket ismini yazıp genel stil özelliklerini yazarız. Örnek
olarak <P> paragraf etiketi için tanımlanan stil özellikleri sayfa içinde
kullanılan tüm <P> etiketleri için tanımlanmış olacaktır ve tüm <P>
etiketleri stilin özelliklerini gösterecektir. etiket-tanimlama.html sayfasında örnek
uygulama gösterilmiştir.

2.Etiket kombinasyonları
için stil tanımlama:

Sayfamızda
kullandığımız etiketleri kombinasyon halinde kullanıldığımızda özel tanımlama
yapma gereği duyabiliriz. Örneğin sayfamızda DIV etiketi içindeki yazıları mavi
renkte, P etiketi içindeki yazıları sarı renkte kullanmak istiyoruz.

Div
{color:blue;}

P{color:yellow}
şeklindeki stil tanımlaması bizim işimize yarayacaktır. Ancak DIV etiketi
içinde kullanılan P etiketleri için yazının kırmızı olmasını isteyebiliriz. Bu
durumda yararlanacağımız stil tanımlaması şu şekilde yapılmalıdır.

Div
p {color:red}

Yukarıda
tanımladığımız div,p, ve div p isimli stil tanımlamalarını sayfamızda
kullanabiliriz. Sayfamızdaki DIV etiketleri Mavi,P etiketleri Sarı ve DIV
etiketi içindeki P etiketleri Kırmızı olacaktır.

<body>

<div>Burası
DIV etiketi içindeki bir kısım olduğu için yazımız mavi olacaktır. </div>

<p>
Burası P etiketi içindeki bir kısım olduğu için yazımız sarı olacaktır.
</p>

<div>
<p> Burası DIV etiketi ve P etiketi içinde olduğu için yazımız Kırmızı
olacaktır. </p> </div>

</body>

etiket-tanimlama2.html sayfasında örnek uygulama gösterilmiştir.

GENEL STİL
TANIMLAMALARINDA KULLANILAN ÖZELLİKLER

Stillerde tanımlama yaparken dikkat etmemiz gereken genel
özellikler:

§

Stil
ismini nokta ile başlatarak istediğimiz etikette kullanabiliriz. Stil
isimlerine isim verirken genel programlamada dikkat edilen etmenler göz önünde
bulundurulmalıdır (Türkçe karakter, özel karakterler ve boşluk kullanılmaz).

§

.isim
şeklinde başlayan stil tanımlamamız parantez içinde yapılır { }.

§

Her
bir özellikten sonra ; işareti kullanılır.

§

Özellikler
yan yana yazılabileceği gibi her bir özellik bir alt satıra da yazılabilir ki
önereceğimiz kullanım şekli de budur.

§

Her
bir özelliğin değerini yazarken araya : işareti konur. Örneğin color:red; gibi.

§

<style
type”text/css”> satırından sonra kullanılan <!- – ile başlayıp stil bloğunun
sonunda - – > ile biten kodun anlamı
CSS tanımayan tarayıcıların (web browser yani Explorer ve firefox gibi) bu kodu
atlamasını sağlamaktır.

Örnek Stil Tanımlama

Stil-ozellikleri.html
kısmında örnek uygulama gösterilmiştir.

font-family:Arial,
Helvetica, sans-serif; /*Yazı fontu*/

font-size:12px;
/*Yazının büyüklüğü*/

font-weight:bold;
/*Yazının Kalınlığı*/

color:white;
/*Yazının rengi*/

background-color:#006600;
/*Arka plan rengi*/

cursor:help;
/*Mouse imlecinin tipini belirler, burada imleci soru işareti şeklinde
tanımladık.*/

text-decoration:underline;
/*Yazının altının çizgili olması*/

text-align:justify;
/*Yazının genel hizalamasını iki yana yasla şeklinde tanımladık*/

border:dotted;
/* BORDER: Yazıyı çerçeve içinde yazmamızı sağlayan kısımdır. dotted yerine
solid yazarak tek bir çizgi halinde çerçeve oluşturabiliriz. */

border:red;
/*Çerçeve rengi*/

border:3px;
/*Çerçeve Kalınlığı*/

border-bottom:5px
solid #FF0000; /*çerçevenin her bir parçasını istediğimi şekilde
düzenleyebiliriz. Burada çerçevenin alt birimini 5 px kalınlığında solid ve
turuncu renkli yapık.*/

line-height:25px;
/*Satır Yüksekliği*/

letter-spacing:1px;
/*harfler Arası Boşluk*/

word-spacing:10px;
/*Kelimeler arası boşluk*/

margin:5px;
/*Margin yazının dışıyla olan uzaklığı.*/

margin-right:100px;

padding:10px;
/*yazının çerçeveyle olan uzaklığıdır.*/

padding-left:50px;
/*margin ve padding’in left-right-top ve bottom olmak üzere dört yönü vardır ve
her brim için ayrı bir tanımlama yapabiliriz.*/

text-indent:100px;
/*Paragrafın içerden ne kadar başlayacağını belirtir.*/

Yazımızda anlatılan örnekleri indirmek için tıklayınız….

_____________________
ramazan.dr@hotmail.com

—————————-

Arama Terimleri:

bir sitenin renk şemasını çıkartmak, div tag nedir

Benzer Konular:

CSS Nedir? CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML’e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile...
HTML Nedir? HTML (Hyper Text Markup Language) web sayfalarının hazırlanmasında kullanılan dildir. Bir web sayfası resim gibi değildir. Sayfanın arkasında ilk bakışta...
Javascript Nedir? Javascript, bir Web scripting dilidir. Netscape ve IE’nin desteklediği client (kullanıcı) taraflı, yani kullanıcının bilgisayarında işlem gören bir dildir…Javascript, bir...

Yazar - 30 Aralık 2008. Kategori GRAFİK TASARIM. Bu yazıya yazılan yazıları RSS üzerinden takip edebilirsiniz RSS 2.0. Yorum yazabilir veya geri izlemede bulunabilirsiniz.