Fatih Hayrioğlu'nun not defteri » link http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 CSS ile Basit Şekilde Fare Üzerine Gelince(Rollover) Resim Değişimi Yapmak http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/ http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/#comments Mon, 10 Nov 2008 08:48:42 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=758 Daha önce bu konuya Resimli Menüler kısmında anlatmıştım, ama orada yapı daha karışık olduğu için anlaşılması ve basit uygulamalara uyarlanması konusunda sıkıntılar oluyordu. Bu işi daha basit bir örnek yardımı ile yapıp daha anlaşılır yapmak için beraber bir örnek yapalım.

Tek resimde işi halletmemiz, resmin sayfa yüklenmesinden önce yüklenmesi sebebiyle fare üzerine geldiğinde herhangi bir resim yükleme işlemini beklemediğimiz için daha akıcı olduğu gibi avantajlarını olduğunu daha önce anlatmıştık.

İlk olarak fare imlecinin üzerine geldiğinde değişecek resmin her iki hali yanyana gelecek şekilde yan yana veya alt alta gelecek şekilde tek resim olarak hazırlıyoruz(aradaki çizgiyi iki resim arasındaki ayrımı göstermek için koydum, normal resimde bu olmayacak)

anasayfaya dön

Xhtml kodumuzu yazalım

<a class="anasayfayaDon" href="anasayfa.htm">Ana Sayfaya Dön</a>

CSS kodumuzu yazalım

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}

a:hover.anasayfayaDon {
    background-position: -80px 0;
}

Yöntemi daha önce anlattığımız gibi ardalan kaydırmaca yöntemidir. Hazırladığımız ardalan resminin ilk olarak istediğimiz kısmını gösteriyoruz. Fare imleci üzerine geldiğinde ise yatayda aynı eksende bulunan başlangıçta görünmeyen resmi eksi konum vererek gösteriyoruz.

Örnek sayfayı görmek için tıklayınız

]]> http://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/feed/ 23 CSS ile Menü Yapmak II – Yatay Menüler http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-ii/ http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-ii/#comments Mon, 06 Nov 2006 09:47:43 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=211 Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmıştık. şimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.

Kaldığımız yerden devam edersek. Linkleri yatay olarak dizmek için display:inline özelliğini kullanıyoruz:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
	display: inline;
}

Linklerin altındaki çizgileri kaldırıyoruz:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
	display: inline;
}
ul.menu li a {
	text-decoration: none;
}

Linkler arasına biraz boşluk veriyoruz: 

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
	display: inline;
}
ul.menu li a {
    text-decoration: none;
    padding: .2em 1em;
}

Menüyü biraz renklendiriyoruz: 

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
	display: inline;
}
ul.menu li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #1B1B1B;
  background-color: #E2E2E2;
}

Son olarakta rollover efekti vermek için a:hover özelliğine renk atıyoruz:

ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu li {
	display: inline;
}
ul.menu li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #1B1B1B;
    background-color: #E2E2E2;
}
ul.menu li a:hover
{
background-color: #999;
}

Sonuç işte:

Biz burada temel menü örnekleri verdik. Mesele işin yapılışını öğrenmek. Daha ayrıntılı ve güzel örnekler internette bir çok yerde mevcut. Gerek aşağıda verdiğimiz Kaynaklar kısmında ve gerekse İnternette aratarak bir çok menüye ulaşabilrisiniz.

Kaynaklar
]]> http://www.fatihhayrioglu.com/css-ile-menu-olusturmak-ii/feed/ 63 CSS’i Web Sayfalarına Eklemek http://www.fatihhayrioglu.com/cssi-web-sayfalarina-eklemek/ http://www.fatihhayrioglu.com/cssi-web-sayfalarina-eklemek/#comments Sun, 23 Jul 2006 18:47:36 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=91 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. 

<!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">
div{
color:red;
}
</style>
</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.

<!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>
<link rel="stylesheet" type="text/css" href="ornek.css" />
</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 "ornek.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 

@import url(/css/iskelet.css);
@import url(/css/fontlar.css);
@import url(/css/renkler.css);
@import url(/css/urunlereozel.css);
]]> http://www.fatihhayrioglu.com/cssi-web-sayfalarina-eklemek/feed/ 37 Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements) http://www.fatihhayrioglu.com/pseudo-siniflari-ve-pseudo-elementleri/ http://www.fatihhayrioglu.com/pseudo-siniflari-ve-pseudo-elementleri/#comments Sat, 22 Jul 2006 17:36:01 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=86 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.)

Pseudo sınıfına örnek:

a:visited {
	color: red;
}

Pseudo elementine örnek:

p:first-line  {
	font-weight: bold;
}

Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.

a.disariyalinkller:link, a.disariyalinkller:visited {
	color: maroon;
}

Aynı şekilde id seçicileri ile birlikte de kullanılabilirler

a#altkisim:link{
	font-weight: bold;
}

Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları

Link Pseudo sınıfı

Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited

:link – Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.

:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.

a:link {
	color: blue;
}
a:visited {
	color: red;
}

Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır

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

Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.

Tarayıcı Uyumu:
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+

Dinamik Pseudo Sınıfları

Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover

Not

Pseudo sınıflarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active,” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-
focus-hover-active.” sıralaması yapılmalıdır.

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken

:active – Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için

Linkler için genel kullanım

a:link {
	color: navy;
}
a:visited {
	color: gray;
}
a:hover {
	color: red;
}
a:active {
	color: yellow;
}

:focus için bir örnek verecek olursak

input:focus {
	background: silver;
    font-weight: bold;
}
Tarayıcı Uyumu:
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+

İlk Çocuk Elementi seçmek

Diğer bir pseudo sınıfımız :first-child‘dır.

first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

p:first-child {
	font-weight: bold;
}
li:first-child {
	color:#f00;
}

<div>
    <p>Bu paragraf ilk çocuk elementidir ve sonuç olarak kalın olacaktır</p>
    <ul>
        <li>Bu liste ilk çocuk elementidir ve font rengi kırmızı olacak</li>
        <li>Bu <strong>çocuk element </strong>değil</li>
        <li>Bu da değil</li>
    </ul>
    <p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>
Tarayıcı Uyumu:
Internet Explorer 7.0+
Firefox+
Chrome+
Safari+
Opera+

:lang Pseudo Sınıfı

Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.

Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.

<html>
<head>
<title>lang test</title>
<style type="text/css">
p:lang(fr) {
	color: red;
}
</style>
</head><body>
<p lang="fr">Bonjour le monde!</p>
</body>
</html>
Tarayıcı Uyumu:
Internet Explorer 8.0+
Firefox+
Chrome+
Safari+
Opera+

Pseudo Sınıflarını birleştirmek

CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek

a:link:hover {
	color: red;
}
a:visited:hover {
	color: pink;
}

Sıralama önemli değildir.

Tarayıcı Uyumu:
Internet Explorer 8.0+
Firefox+
Chrome+
Safari+
Opera+

Pseudo Element Seçicileri

Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after

first-letter (ilk harf)

Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :

h1:first-letter {
	font-size: 200%;
}

<h1>Bu büyük bir başlık</h1>
Tarayıcı Uyumu:
Internet Explorer 7.0+
Firefox+
Chrome+
Safari+
Opera+

first-line (ilk satır)

Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.

p:first-line {
	color: red;
}
Browser Uyumu:
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+

before ve after elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

Notlarımızın başına otomatik oalrak Not yazmak için

P.not:before {
	content: "Not."
}

kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek

body:after {
	content: "  Bitti.";
}

yeterlidir.

Browser Uyumu:
Internet Explorer 8.0+
Firefox+
Chrome+
Safari+
Opera+
]]> http://www.fatihhayrioglu.com/pseudo-siniflari-ve-pseudo-elementleri/feed/ 46