Konular

CSS’i Web Sayfalarına Eklemek

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value)
XML de Seçiciler HTML elementleri dışında yeni oluşturulan elementlerde olabilir.

div  { color: #ff0000; background: yellow }

www.dijitalders.comTüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır.

Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır.

Özellik ve değerler birbirinden ” : ” iki nokta üstüste ile ayrılır.

h1 {font: medium Arial;}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir. İleride bu konuya daha ayrıntılı gireceğiz. Ayrıca sadece font etiketine özel ” / ” kullanımı vardır örnek aşağıda:

h1 {font: medium/120% Arial;}

Burada ” / ” Seçicinin font boyutunu ve satır yüksekliğini gösterir.(font_boyutu/satir_yuksekliği)

Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gördük, Birden fazla HTML elementine de atama yapabilirz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

img, p, div, h3 { font-family: Arial; }

Not

CSS2 ile birlikte Evrensel Seçici(universal selector) Seçiciler arasına katılmıştır, " * " ile gösterilir.

* { color: red; }

tüm elementleri kırmızı yapar. Bir anlamda gruplama yapar. Ayrıntılı bilgi için W3

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar.

Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3
{
font-family: Arial;
font-size:2;
font-weight: bold;

}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicisi(Class Selector)

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya { text-align: right }

p.ortala { text-align: center }

Bu Seçicileri sayfamızda uygulamak için;

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>

<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Birde önemli bir tanımlama yapacağınızı düşünün, ancak sadece bir HTML elementine değilde istediğiniz sayıda HTML elementinde bunu kullanmak isterseniz;

.ortala { text-align: center }

Bu tanımlamayı yaptıktan sonra istedğimiz her HTML elementine bu sınıfı uygulayabiliriz.

<span class="ortala"> Burada birşeyler yazar </span>

<p class="ortala">Burada da başka bişeyler yazar</p>

Çoklu sınıflar, birden fazla sınıfı bir HTML elementine uygulamak için kullanılır.

Örnekte görüldüğü gibi bir uyari Sınıfımız birde onemli Sınıfımız mevcut. Bazı metinlerin önemli uyarı olacağı düşüncesi ile böyle bir atama yapılabilir. Bunun için kullanıcığımız kod;

        <p class="onemli uyari">Ülkemizde meydana gelen trafik kazalarının yaklaşık % 90'ı insanların hataları sonucu eydana gelmektedir.</p>

.onemli { font-weight: bold; }
.uyari { font-style: italic; }
.onemli.uyari { background: silver; }

onemli metinler için kalın, uyari için italiktik atmalar yapıyoruz. Birde her ikisine birden de atama yapabiliyoruz. Dikkat ederseniz class=”onemli uyari” olarak atama yaparken CSS Seçicisinde .onemli.uyari şeklinde yazıyoruz.

Id Seçecileri

Id Seçicisi Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.


#mavi
{
background:blue;
}
#kirmizi
{
background:red;
}

<p id="mavi">Bu yazının arkafon rengi mavi</p>

<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>
Class mı? Id mi?

Yukarıda Id Seçicisi için her nekadar da bir sayfada sadece bir defa kullanılır desekte tasarımcının sayfada bir çok yerde kullanmasına tarayıcılar ses çıkarmaz, yani hata mesajı vermez. Ancak Bu elementleri DOM scriptlerinde kullanırken Id atamasını bir kaç yerde yaptığımızda hata alacağızdır. Bu nedenle her nekadar tarayıcılar izin versede Id Seçicisini bir kez kullanmalıyız. Birden fazla kullanacağımız elementler için Sınıf Seçicisini kullanmalıyız.

Bu kodumuzu daha kullanışlı ve temiz yapacaktır.

Sınıf ve Id Seçicileri küçük-büyük harfe karşı duyarlıdır;

    p.onemliBilgi {font-weight: bold;}

ve kullanımıda;

    <p class="onemlibilgi">Uygulama olmaz .</p>

Yukarıdaki kod uygulanmayacaktır çünkü ” B ” bir yerde büyük birde küçük kullanılmıştır. Bazı eski tarayıcılar bu kuralın dışında kalabilir.

CSS’de yorum eklemek çok kolaydır.
/* Genel Stiller */
body {
font-size: 67.5%; /* genel font tanımı */
}
/*
Birden fazla satır içeren
kodları bu şekilde kullanabilriz.
*/

 Alt Eleman İçin Kullanımı


#menu1 li { background-color:#FF0066; } .menu2 li { background-color:#CC0066 }
<ul id="menu1"> 

<li> Menu 1 </li>

<li> Menu 2 </li>
	<li> Menu 3 </li>

<li> Menu 4 </li>

</ul>
<ul class="menu1"> 

<li> Menu 1 </li>

<li> Menu 2 </li>
	<li> Menu 3 </li>

<li> Menu 4 </li>

</ul>


1- Kod içinde (In-line)

Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak.

<div style="color:red">Deneme yazımız</div>

Tüm CSS komutlarını kodların içine direk uygulamak önerilen bir kodlama şekli değildir. Ancak özel durumlarda kullanılabilir.

2- style Elementi kullanılarak

<head> kısmında <style> elementi içinde CSS kodumuzu yazarak uygulamak.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  5. <title>CSS’i Uygulamak </title>
  6. <style type="text/css">
  7. div{
  8. color:red;
  9. }
  10. </style>
  11. </head>

Birinci yönteme göre avantajı (X)HTML kod ile CSS bir birinden ayrıştırılmış olmasıdır.

3- Harici Stil şablonu Kullanımı

Bu metod da CSS kodlarımzı .css uzantılı bir dosyaya kaydederiz. ornek.css

p {
color: red;
}
a {
color: blue;
}

Daha sonra bu kodu gereken sayfalarımıza uygularız.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
  5. <title>CSS’i Uygulamak</title>
  6. <link rel="stylesheet" type="text/css" href="ornek.css" />
  7. </head>

Bu yöntemin diğerlerine göre en büyük avantajı bir kere yazılan kod lazım olan tüm sayfalara eklenebilmesidir. Bu sayede harici eklenen css kodu bir kere yüklendikten sonra diğer kullandığımız sayfalarda tekrar yüklenemeyerek bize hız kazandıracaktır.

4- @import ile eklemek

üncü yöntem ile kullanımı benzerdir.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak</title>
<style type="text/css">
@import "ornek.css";
</style>

</head>

Bu yöntemle eklenen harici css dosyası eski web tarayıcıları tarafından görüntülenemeyecektir.(Örn: NN4)

@import ile eklenen kod link ile eklenen kodlamadan önce yorumlanır web tarayıcıları tarafından. Ayrıca css dosyalarımızda @import özelliğini kullanarak devamlı kullandığmız kodları css dosyamıza harici olarak ekleyebilriz böylelikle tekrarlardan kurtulmuş oluruz. (11.10.2006 güncellendi )

Sonuç olarak burada dört adet CSS uygulama metodu gördük ancak bu metodlardan dördüncüsü avantajları bakımından önerilen bir yöntemdir.

Ayrıca içeriği büyük olan sitelerde css kodunun parçalara ayrılması ve kullanılan sayfa CSS’inde hangi parçalar gerekli ise onların import edilmesi önerilir. Bu sayfade kodun bir kısmında yaptığımız değişiklik için tüm css kodu incelenip değiştirlmesi gerekmez ve kod yönetimi kolaylaşır.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CSS’i Uygulamak</title>
<style type="text/css">
@import "urunler.css";
</style>
</head>

Ürünler bölümü için bir css dosyası ekleyelim sonra parçalara ayırdığımız css kodlarının ürünlere lazım olanlarını urunler.css içine ekleyelim.

urunler.css

  1. @import url(/css/iskelet.css);
  2. @import url(/css/fontlar.css);
  3. @import url(/css/renkler.css);
  4. @import url(/css/urunlereozel.css);
Kaynak www.fatihhayrioglu.com/

Yorumunuzu Ekleyin
CSS’i Web Sayfalarına Eklemek Yorumları +1 Yorum
  • hasan
    1
    hasan
    BENDE WEB SAYFSI İTİYRUM
    26 Haziran 2010 11:08:37, Cumartesi
CSS ile Web Sayfası Oluşturma

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.

59,896 Okunma 3 Yorum 11/07/2007 16:49:40 31/05/2014 16:50:32

Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

51,606 Okunma 0 Yorum 10/07/2007 19:48:11 29/12/2013 15:02:02

CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

23,500 Okunma 0 Yorum 27/01/2010 04:22:34

CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.

22,565 Okunma 0 Yorum 09/07/2007 18:20:40 29/12/2013 14:47:24

CSS Seçicileri

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

21,069 Okunma 0 Yorum 05/09/2007 23:01:25

Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

20,016 Okunma 0 Yorum 17/02/2010 01:08:14

CSS ile yazıcı çıktı işlemleri

Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır

19,074 Okunma 0 Yorum 11/07/2007 00:05:06

CSS te kullanılan kısaltmalar

CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz

17,299 Okunma 0 Yorum 11/07/2007 00:16:08

Pseudo-sınıfları ve Pseudo-elementleri

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )

16,539 Okunma 0 Yorum 12/07/2007 19:42:06

Şerit Halindeki Resimden Bölümler Almak

Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale

16,365 Okunma 1 Yorum 22/02/2008 09:18:59

(X)HTML Döküman Hiyerarşisini Anlamak

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

16,353 Okunma 0 Yorum 09/07/2007 00:11:42

CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

16,316 Okunma 0 Yorum 05/09/2007 01:49:34

Özellik Seçicileri(Attribute Selectors)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri

15,413 Okunma 0 Yorum 09/07/2007 14:20:52

Yükleniyor...