Birden Fazla Sinifi Tek Sinifta Göstermek

a,b ve c gibi üç ayri sinifimiz olsun. Bu üç ayri sinifi tek bir sinifta gösterebiliriz.

CSS Kodu:

.a{font-family:Arial;}

.b{color:orange;}

.c{background:black;}

 

Html Kodu:

<p class="a b c">Yazilarim hep burada</p>

 

GENEL (EVRENSEL) SEÇICILER

Tüm elementleri kapsayacak bir seçicidir. "*" karakteri ile kullanilir.

 

CSS Kodu:

<style type="text/css">

     *{color:orange;}

</style>

 

Html Kodu:

<p>Ormanda dolasanlar</p>

<h1>Aslanlar</h1>

<h2>Kaplanlar</h2>

<h3>Zebralar</h3>

<strong>Kartallar</strong>

 

GENEL KAPSAMA SEÇICISI

Tüm elementlerin özelliklerinde benzer degerlerin seçimi yapilir. "~" karakteri ile gosterilir.

 

Örnegin: Bütün elementleri önce "*" karakteri ile seçimi yapalim. Daha sonra genel kapsama seçicisini kullanarak istenilen görünüm degisikligini gerceklestirelim.

 

CSS Kodu:

<style type="text/css">

     *[title~="a"]{color:orange;}

</style>

 

Html Kodu:

<p title="a">Ankara</p>

<h1 title="a b">Istanbul</h1>

<strong title="a">Bolu</strong>

 

ELEMENT SEÇICISI

Seçici olarak bütün XHTML elementlerini kullanabiliriz. Paragraf (<p>) elementini kullanacak olursak:

CSS Kodu:

p{font-family: Arial; color:orange; font-size:small; }

 

HTML Kodu:

<p> Elementimizi de böylece seçip renklendirdik. </p>

 

ID SEÇICISI

Bir elementin id bilgisine ait isimdir. Paragraf için id isimi belirlersek:

 

HTML Kodu:

<p id="baslik"> Hucre </p> 

 

CSS Kodu:

#baslik{font-family:Arial; color:orange; font-size:small; }

 

SINIF SEÇICISI {CLASS}

Birden fazla element ile kullanilabilinir. Örnegin;

CSS Kodu:

.baslik{font-family:Arial; color:orange; }

 

HTML Kodu:

<p class="baslik"> MARS </p>

<p class="baslik"> VENÜS </p>

<p class="baslik"> URANÜS </p>

Stil dosyasini degisik yontemler ile sayfamiza dahil edebiliriz. Sayfa renklendirme ornegimiz ile bunu inceleyelim.

 

1- Element icinde stil (style) ozelligi

<p style="color:orange">Yazimda burada</p>

 

2- Html icerisinde stil (style) ozelligi

<style type="text/css">

body{background-color:black}

</style>

 

3- Stil (style) dosyalarini belgeye ithal etme

<style type="text/css">

   <--

   @import url("renk.css");

   -->

</style>

 

4- Link Elementiyle Baglama

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

    * <head></head> taglari arasina yazilmalidir

CSS'te 2 tur olculendirmeden yararlanabiliriz.

1- Mutlak Olculendirme

2- Goreceli Olculendirme

 

MUTLAK OLCULENDIRME

Mutlak olculendirmede birimlerin degerleri tam ve olculebilir degerlerdir. Sayfanin veya monitorun boyutlarina gore degismez.

in - inc (2,54cm)

cm - santimetre

mm - milimetre

pt - punto (yazi olcu birimi)

pc - pika (12 puntoluk harf olcusune pica diyoruz)

 

GORECELI OLCULENDIRME

Bulundugu ortama gore degisebilen degerlerdir. Ornegin; 800x600 cozunurlugu olan bir monitordeki goruntu, cozunurlugu 1280x800 olan monitorde tekrar olusacaktir.

 

% - Kullanimi oranti degeri ve yuzde isaretinden meydana gelir. (%100 gibi)

em - Dikey ve yatay uzunluklar icin kullanilir.

ex - Yazi tipinin x yuksekligi

px - Piksel birimi monitor ekraninin cozunurlugune bagli bir birimdir.

Cascading Style Sheets olarak bildigimiz kisaltilmisi CSS olan, stil sablonlari diye tanimlanan kodlama teknigidir. XHTML CSS ile daha iyi kullanilmaktadir. CSS in dosya uzantisi "*.css" tir. Ornegin: test.css

 

Internet sitelerinin tasarimlarinda kullanilir. Internet explorer, Firefox, Google chrome gibi farkli tarayicilar arasindaki farkli gorunme sorununu ortadan kaldirir. Tasarimlariniz tum tarayicilarda bozulmadan goruntulenir.

 

Ornek CSS Kodu:

body

{

color: blue;

}

 

Diger bir sekilde;

body{color: blue;}

Ben FikriMühim
Google Translate
Arama
  Ara
Blog Sayaç
Skype Durumum
My status