30 Kasım 2013 Cumartesi

CSS Seçiciler

 SEÇİCİLER

Seçiciler(Selectors) bize oluşturduğumuz <h1>, <h2> ... gibi etiketlerin mevuct özelliklerini aynı bırakarak onlara yeni özellikler ekleme olanağı verdiği gibi istediğimiz bir kelimeye style özellikleri atayıp istediğimiz zaman çağırmamızı da sağlarlar. İki çeşit seçici öğreneceğiz: Id seçicisi ve sınıf seçicisi.

  1. Id Selectors(Id Seçicileri)
    Sınıf seçicileri head bölümünde tanımlanırlar. Seçicinin keyfi isminin başına Sharp(#) işareti konur, ve takip eden köşeli parantezlerin arasına stil özellikleri yazılır.

    <html>
    <head>
    <title>Id seçicileri</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <style type="text/css">
    <!--
    #idSecici
    {
    background:teal;
    color:white;
    font-weight:bold;
    font-family:arial;
    }
    -->
    </style>
    </head>
    <body>
    <div id=idSecici>Deneme</div>
    </body>
    </html>

  2. Class Selectors(Sınıf Seçicileri)
    Orneğin bir <h1> etikti tanımladınız, fakat sayfanın bazı yerlerinde bu etiketin 'color' parametresinin değeri 'red' olsun, fakat geri kalanlar aynı kalsın istiyorsunuz. Bunu sınıf seçicileriyle yapabilirsiniz.
    <html>
    <head>
    <title>Sınıf seçicileri</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <style type="text/css">
    <!--
    h1 {
    background:teal;
    color:white;
    font-weight:bold;
    font-family:arial;
    }
    h1.kirmizi{color:red}
    -->
    </style>
    </head>
    <body>
    <h1>Deneme</h1>
    <h1 class="kirmizi">Deneme</h1>
    </body>
    </html>

    Sınıf seçicileri genel olarak da tanımlanabilirler
    <html>
    <head>
    <title>Genel Sınıf seçicileri</title>
    <METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
    <style type="text/css">
    <!--
    .kirmizi{color:red}
    -->
    </style>
    </head>
    <body>
    <h1>Deneme</h1>
    <h1 class="kirmizi">Deneme</h1>
    <h2 class="kirmizi">Deneme</h1>
    </body>
    </html>

5. BAĞLANTILAR VE CSS


CSS ile cansıkıcı 'mavi ve altı çizili' linkler yerine, oldukça estetik görünümlü linkler oluşturabiliriz.<A> etiketinin stilini belirlerken olası üç durumu bildiren üç ifade kullanırız. Bunlar:
  • active: Mouse'un link'in uzerine tıkladığı anki stili,
  • visited: Link en az bir kere tıklandıktan sonraki stili ,
  • hover: Mouse'un imleci link'in üzerindeyken (bir nevi onMouseOver) nasıl bir stil alacağını belirler.
Şimdi bunların kullanımını bir örnekle görelim:
<html>
<head>
<title>Linkler ve CSS</title>
<METAcontent=text/html;CHARSET=iso-8859-9 http-equiv=Content-Type>
<style type="text/css">
<!--
a:link{text-decoration:none; color:teal}
a:active{text-decoration:none; color:red}
a:visited{text-decoration:none; font-family:Times New Roman; color:green}
a:hover{background-color:teal; color:white; font-family:arial}
-->
</style>
</head>
<body>
<a href="Anasayfa.html">Anasayfa</a>
</html>
Bu örnekle CSS bölümünün sonuna geldik. Gördüğünüz gibi bu teknik stiller konusunda HTML'in eksik yönlerini tamamlıyor,ayrıca büyük sayfalar hazırlarken zamandan tasarruf etmemizi sağlıyor. Daha çok pratik yaparak CSS tekniğine iyice hakim olabilirsiniz. Fakat her zaman aklınızın bir köşesinde olsun: Stil şablonlarının Netscape tarafından desteklenmeyen özelliklerinin sayısı bir hayli fazladır.
Bu noktaya yazıları sırası ile takip edip JavaScript ve HTML bölümlerini de okuyup öğrenerek geldiyseniz veya bu uygulamaları zaten biliyor idiyseniz, kısacası bir sayfa yapmak için gerekli bilginiz olduğuna inanıyorsanız aşağıdaki linke tıklayıp tasarım konusunda öneriler bölümüne gidin. Bu bölümü okuduktan sonra webmaster kaynakları bölümünden ihtiyacınız olan programları, grafikleri ve fontları kaydedip sayfanızı yapmaya başlayabilirsiniz.

Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Sekmeli (Tab) Menü Yapımı

Sekmeli (Tab) Menü Yapımı

Sekmeli menü tasarımı kullanıcıya hızlı geçiş imkânı veren ve kullanılan alandan tasarruf sağlayan menü tasarımıdır.

Aşağıdaki resimde en çok kullanılan işletim sistemine ait bir ara yüzdeki sekmeli tasarım örneği verilmiştir.

Dikkat etmemiz gereken en önemli nokta, zeminde kendini tekrarlayacak görselimizi menü içine doğru şekilde yerleştirebilmektir. Bunun için resmimizi parçalara bölmemiz çoğu zaman sayfamıza daha esneklik ve hız
kazandıracaktır.

Menü başlıkları aşağıdaki şekilde hazırlanmıştır: 
<div id="menum">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetlerimiz</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

Aşağıdaki uygulamada madde imleri kaldırılmaktadır. “float:left” komutu kullanılarak düzensiz liste içindeki tüm ögeler sola kaydırılmaktadır. border-bottom: 1px solid gray; satırında ise en alttaki gri renkli 1px genişliğindeki çizgi eklenmektedir.






Şimdi de yukarıda verdiğimiz zemin resimlerinden, sekmelerimizin sağ kısımlarını oluşturacak olan li etiketi uygulanmaktadır. 





Görünümdeki eksiklikleri gidermek için önce sekmemizi tamamlayacak olan sol taraf resmini li a etiketi uygulanmaktadır. Daha sonra yazı tipi, rengi, büyüklüğü, satır yüksekliği ayarları ve kenar içi boşluğu mesafesi (padding) ayarlarını yapılmaktadır





Aşağıdaki uygulamada kullanıcının menü başlıkları üzerine geldiğinde belirteç olması için yazı rengimiz değiştirilmektedir.



Uygulamamızın bitmiş hali aşağıdadır;






Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



CSS Dikey Açılır Menü Yapımı

Dikey Açılır Menü Yapımı

Bazen menü elemanları alt elemanlar içerebilir. Bu durumda bu alt menü başlıklarını açılır menü şeklinde tasarlayabiliriz. Açılır menü yaparken dikkat etmemiz gereken en önemli nokta açılan menünün pozisyonudur. Yine açılan menü yaparken sırasız listelerden (<ul>) yararlanacağız.

Aşağıdaki uygulamada dikey açılır menü yapımı anlatılmıştır
İlk önce menümüzün hangi başlık ve alt başlıklardan oluşacağına karar vermeliyiz. Örneğimizin aşağıdaki başlıklardan oluşacağını varsayarak sonuca gideceğiz

Gördüğünüz gibi Şirket Tarihçesi ve Hizmetlerimiz başlıkları alt başlıklara sahip oldukları için bunları iç içe liste şeklinde yazacağız yani alt menü haline getireceğiz.

Şimdi üstteki listeyi oluşturalım
<div class="menum">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirket Tarihcesi</a></li>
<li><a href="#">Yöneticilerimiz</a></li>
<li><a href="#">Çalışmalarımız</a></li>
<li><a href="#">Faaliyetlerimiz</a></li>
</ul>
<li><a href="#"Hizmetlerimiz</a>
<ul>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Logo Tasarım</a></li>
<li><a href="#">Danışmanlık</a></li>
</ul>
<li><a href="#">Referanslarımız</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

Kod Görünüm:
Bizi Takip Edin
Pinterest Facebook Twitter  © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.


STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ


STİL ŞABLONU (CSS) MENÜ İŞLEMLERİ 

Web sitemizi ziyaret eden kullanıcılar, sayfalar arasında gezinirken menüler sayesinde diğer sayfalara hızlı erişim sağlarlar. CSS ile yapılan menüler esnek, kolay düzenlenebilen, çabuk yüklenen ve güzel görünümlü menülerdir.

Sayfamızın tasarımına göre menü tasarımı yapabiliriz. Biz burada en çok kullanılan altı çeşit menü yapımını ele alacağız.

Dikey Menü Yapımı
Menü elemanlarının alt alta sıralandığı menülerdir. Listeleme etiketlerine stil şablonları uygulayarak değişik varyasyonlar oluşturulabilir.

Örnek:  Aşağıdaki uygulamada adım adım dikey menü yapımı anlatılmaktadır.

İlk önce hangi menü başlıklarını içerecek ona karar vermeliyiz. Örneğin menü
şu başlıkları içersin; Ana Sayfa, Hakkımızda, Ürünler, Referanslar ve İletişim.















Şimdi her liste elemanının (Bunlar aynı zamanda menü başlıkları olacak.) başındaki madde imini kaldırmak için aşağıdaki stil şablonunu sınıf seçicisi şeklinde yazalım ve uygulayalım















Menü elemanlarını blok haline getirelim, zemin rengini ve yazı rengini ayarlayalım.














Menü elemanlarının üzerine fare ile gelindiğinde biçeminin değişmesi için (rollover efekti) a:hover etiketine stil uygulayalım. Fare ile menü üzerine geldiğimizde zemin ve yazı rengini değiştirelim ve yazı tipini kalın yapalım.
















Menü elemanlarının arasını biraz açalım.














Yatay Menü Yapımı 
Dikey menü yaparken “display:block” özelliğini kullanmıştık. Yatay menü yaparken dikkat etmemiz gereken en önemli nokta <li> etiketine display:inline; özellik ve değeri uygulamamız gerektiğidir.

Örnek: Yukarıda tasarlamış olduğumuz CSS dikey menüyü yatay şekilde nasıl
gerçekleştireceğimizi adım adım göstereceğiz.

Stil şablonumuzda yapmamız gereken ilk değişiklik liste elemanlarını yatay sıralamak için <li> etiketine display:inline; uygulanması.












Menü elemanlarının altındaki link çizgilerini kaldıralım ve aralarındaki mesafeyi artıralım

















Zemine ve yazıya renk verelim.



















Fare ile menü üzerine geldiğimizde zemin ve yazı rengini değiştirelim ve yazı tipini kalın yapalım.























Css Menü Tasarım ve kodlama biçimleri konularının devamını diğer yazılarımda takip edebilirsiniz.
Yazı uzun olmasın ve diye kısaltarak paylaşım yapmaya özen gösterdim ve açıklayıcı olması için


Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.

Float, Clear ve Display CSS Özelliği

Float, Clear ve Display Özelliği 

Float özelliğini şu örnekle açıklayabiliriz: Bir su birikintisi üzerindeki kâğıt parçasının rüzgarla sağa sola doğru kaydığını (floating) düşünün, işte bu kâğıt parçasının sağa sola kayması gibi biz de nesnelerimizi float özelliğini kullanarak; sağa (float:right) ve sola (float:left) kaydırma işlemine tabi tutabiliriz.
Div ile yapılmış üç adet kutu bulunmaktadır; div blok-level bir elemandır ve normal akışı aşağıda olduğu gibidir. 
Clear: 
Float özelliğinin etkisinden kurtulmak, yani kaydırma işine son vermek için kullanılır. Dört farklı değer alabilir. Bunlar; 
None: Değişiklik yapma. 
Right: Sağa kaydırma işine son ver 
Left : Sola kaydırma işine son ver. 
Both : Her iki yönde de kaydırma işine son ver
Normal olarak bir web sayfasındaki nesnelerin akışı, o elemanın seviye (level) türüne göre değişir. Seviye (level) türüne göre iki tip eleman vardır;
Blok-level elemanlar : Blok şeklinde işlenirler. Sayfadaki normal akışları yukarıdan aşağı şekilde alt alta sıralanırlar. Blok-level elemanlar inline elemanları ve diğer blok-level elemanları içerebilirler. Tipik özellikleri, yeni bir satır başlangıcı yapmalarıdır. 
Inline-level elemanlar: Inline-level elemanlar aynı satırda işlenirler. Sayfadaki akışları soldan sağa doğrudur, başka bir inline elemanı içerebilirler. Yeni satır veya boşluk oluşturmazlar. 

Örtüşen Ögeler (Overlapping Elements) 
 
Normal akış dışında konumlandırılan ögeler bazen üst üste gelebilir. Bu durumlarda hangi ögenin üstte hangisinin altta olacağını belirlemek için “z-index” özelliğini kullanacağız. 
 z-index değeri en yüksek olan öge en üstte yer alır, z-index değeri en küçük olan öge ise en altta yer alır. Pratik olarak aşağıdaki şekliyle kullanacağız. 
z-index:1; Ögenin üstte kalması için kullanır. 
z-index:-1; Ögenin üstte kalması için kullanır. 
Örnek-1
p { 
position:absolute
right:10px
top:5px
z-index:1;}
Örnek-2  Aşağıdaki örtüşen ögeler uygulamasını yapıp sonucu gözlemleyiniz.


Madde İmi Olarak Resim Belirleme 
 
“list-style-image” özelliği sayesinde, istediğimiz herhangi bir görseli(tercihen gif, png) boyutları uygun olmak şartıyla madde imi olarak kullanabiliriz.
Örnek-1
ul { 
list-style-image:url("maddeimi.png")

} 
Örnek-2
Aşağıdaki uygulamayı yapıp sonucu gözlemleyiniz. 

Uygulamada kullanılan örnek maddeimi.png görseli,






























Menü Yapımı Kodlama Biçimi












































Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.

STİL ŞABLONU (CSS) ÖZELLİKLERİ

STİL ŞABLONU (CSS) ÖZELLİKLERİ 

Bu kısımda etiketlere stil şablonlarının nasıl uygulanacağını göreceğiz. <a> etiketinin CSS ile kullanımını daha önceki modülümüzde incelemiştik. Bu kısımda aşağıdaki özellikler anlatılacaktır.

 Zemin özellikleri
 Font özellikleri
 Kutu modeli özellikleri
 Tablo özellikleri
 Pozisyon özellikleri
 Liste özellikleri

Zemin Özellikleri 

Ögelere zemin (background) rengi vermek veya zemin resmi eklemek ile onların nasıl davranış göstereceğini kapsar. Background, arka plân olarak da adlandırılabilir. Bu özellikler;

 background-color
 background-image
 background-repeat
 background-attachment
 background-position


 Zemin Rengi 

“background-color” özelliği ögelerin (etiketlerin) zeminine renk vermek için kullanılır. Renk belirleme işi için “Renk Birimleri” başlığında ele aldığımız yöntemlerden istediğimizi seçebiliriz. Ancak en çok tercih edilen RGB kodu verilerek yapılandır. Örneğin;
 h1 {background-color:#3070E7;} h1 etiketi için zemin rengini #3070E7 yapacaktır

Aşağıdaki örnekte üç farklı etikete zemin rengi verilmiştir. Bunlardan div etiketi kutu modeli (model-box) dediğimiz özel bloklar oluştururken kullanılmaktadır. 

 Zemin Resmi 
“background-image” özelliği ögelere zemin resmi eklemek için kullanılır. Örnek olarak “zemin.jpg” isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki stil şablonu kodunu uygulamalıyız. 
body { background-image:url( ‘zemin.jpg’); } 

Zemin Resmi Tekrarı 
"background-repeat" özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır: 
 background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS 
varsayılan olarak bunu yapacaktır.) 
 background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.) 
 background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.) 
 background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.) 
Örnek görsel olarak aşağıda verilen resmi sayfanızın olduğu yere “logo.gif” olarak kaydedip 
body { background-image:url( ‘logo.gif’); 
 background-repeat : repeat;

Zemin Resmi Pozisyonu 
"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır. 
top left top center top right 
center left center center center right 
bottom left bottom center bottom right 
background-position:top left; (Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.) 
background-position:top center; (Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.) 
background-position:top right; (Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.) 
background-position:center left; (Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.) 
background-position:center center; (Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.) 
background-position:center right; (Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.) 
background-position:bottom left; (Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.) 
background-position:bottom center; (Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.) 
background-position:bottom right; (Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.) 
background-position:x% y%; (Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. İlk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:60% 75%; ) 
background-position:xpos ypos; (Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel'li rakam yatayın, ikinci pixe

Örnek olarak bir önceki örnekte sayfamıza döşediğimiz “logo.gif“ görselini sayfamızın tam ortasına yerleştirelim. 
body { background-image: url(‘logo.gif’)
background-repeat : no-repeat
background-position: center center ; } 
Bu örneğimizi kısaltma uygulayarak şöyle de yazabilirdik; 
body{ background:url(‘logo.gif’) no-repeat center center;} 

Birkaç örnek daha vermek gerekirse;
Örnek1: body{ background: url(logo.gif) no-repeat bottom right;} 
Örnek2: body{ background: url(logo.gif) no-repeat 60% 75%;} 
Örnek3: body{ background: url(logo.gif) no-repeat 100px 200px;}

Zemin Resmi İliştirme 
“background-attachment” özelliği zemine yerleştirdiğimiz görselin kaydırma çubuğu ile birlikte hareket edip etmeyeceğinin kontrolünü sağlar. 
Görselin kaydırma çubukları ile birlikte hareket etmesini istiyorsak değer olarak “scroll” kullanırız. Geçerli (default) değer budur, hiçbir şey yazılmadığında bu durum yine geçerlidir. 
Örnek:
body { background-image: url( ‘logo.gif’)
 background-repeat : no-repeat; 
background-attachment: scroll ; } 
Görselin kaydırma çubukları ile birlikte hareket etmemesini, sabit kalmasını istiyorsak değer olarak “fixed” kullanırız. 
Örnek: 
body { background-image: url(logo.gif)
 background-repeat : no-repeat
background-attachment: fixed; } 

Font ve Metin (Text) Özellikleri 
Öncelikle font ve metin (text) arasındaki farkı bilmeliyiz. Font özellikleri karakterlerin tip ve biçimlerinin nasıl olacağını belirlerken, metin (text) özellikleri font özellikleri ile belirlediğimiz karakterlerin bir araya gelmesi ile oluşan yazıların (metin) sayfadaki düzenini kontrol etmeye yarar. 
 Font Özellikleri 
Font özellikleri web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiştirmek için kullanılır. Bu özellikler; 
 font-family 
 font-size 
 font-weight 
 font-style 
 line-height 
 font 
 Font Ailesi 
“font-family” özelliği, bir metne ait font ailesini belirlemeye yarar. Bunu yaparak yazı tipimizi seçmiş oluruz. Bu özellik birden fazla font ailesi ismi içerebilir, her font ailesi ismi virgülle ayrılır. 
Örnek-1:

Yukarıdaki örnekte tarayıcı ilk önce Verdana yazı tipinin tarayıcı tarafından desteklendiğine bakacaktır. Desteklenmediği takdirde sırayla diğerlerini deneyecektir. 

Örnek-2:

Font Boyutu 

font-size” yazı karakterlerinin, dolayısıyla da metnin boyutunu ayarlamaya yarar. 
Boyutu piksel olarak " px " , yüzde olarak " % " ya da " em " ile belirtebiliriz. 
  
Örnek:
Font Kalınlığı 

“font-weight” özelliği, fontun kalınlık, incelik değerini belirlemeye yarar.100 (ince)-900 (kalın) arasında bir değer alabildiği gibi bold, bolder, normal ve lighter değerlerini de alabilir. 

Örnek: 
p{ 
 font-weight: bold; 
 
Yukarıdaki örnekte p etiketi içinde yer alan yazının tamamının kalın yazılması sağlanmıştır.
 Font Stili 

"font-style" özelliği, metni eğik (italik), az eğik veya normal yapmak için kullanılır. 

p { font-style:normal; }  Metin normal görünür. 
p { font-style:italic; }      Metin italik yani eğik yazı olarak görünür. 
p { font-style:oblique; }  Metin az eğik görünür(Çok fazla desteklenmez.). 
Satırlar Arası Mesafe Ayarı 

“line-height” özelliği, metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır. 

p{ line-height: 15px;}  Satırlar arası mesafeyi 15 px yapar. 

Font 

Kısaltma işlemini yaparken aşağıdaki söz dizimi kullanılır: 

font: font-style font-weight font-size/line-height font-family; 

Örnek olarak aşağıdaki özellikler olsun; 

font-weight: bold
font-family: verdana, sans-serif
font-size: 12px
line-height: 15px

Kısaltma olarak kullanılan kod ise tek satır; 
 font: bold 12px/15px verdana, sans-serif;
Metin (Text) Özellikleri 

Bu kısımda metni nasıl biçimlendireceğinizi (bir metne ait renk, hizalama, font büyüklüğü, harfler arası boşluk, metnin altını veya üstünü çizmek gibi) öğreneceksiniz. Bu özellikler: 
color 
 text-align 
 text-decoration 
 text-transform 
 text-indent 
 line-height 
 letter-spacing 
 word-spacing 
 vertical-align 

Metin Rengi 

“color” özelliği, metne renk vermek için kullanılır. Değer olarak daha önce öğrendiğiniz renk birimlerinden istediğinizi kullanılabilirsiniz. 

Örnek-1                 h1{ color: #449BDB; } 
Örnek-2                 p { color:black; } 
Örnek-3                 p {color: rgb(255, 0, 0);} 

 Metin Hizalama 

text-align” özelliği, metinleri hizalama için kullanılır. Metinleri sağa, sola,iki yana yaslayabilir veya ortalayabiliriz. 

text-align:left; (Metni sola hizalamak için kullanılır.) 
text-align:center; (Metni ortaya hizalamak için kullanılır.) 
text-align:right; (Metni sağa hizalamak için kullanılır.) 
text-align:justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır. Gazete ve magazin dergilerinde olduğu gibi.) 

Örnek :  h1 { text-align:left; } 

Metin Dekorasyonu 

text-decoration” özelliği, genellikle bağlantıların (link) altındaki çizgileri kaldırmakla birlikte metinlerin üst tarafını çizmeyi, altını çizmeyi, üzerini çizmeyi ve onlara yanıp sönme (blink) efekti vermeyi sağlar. 

 text-decoration:none; (Genellikle a etiketine uygulanır, çizgiyi kaldırır.) 
 text-decoration:underline; (Metni altı çizili yapar.) 
 text-decoration:overline; (Metnin üst tarafını (tepesini) çizili yapar.) 
 text-decoration:line-through; (Metnin üzerinden (ortasından) çizgi geçirir.) 
 text-decoration:blink;   (Metnin yanıp sönmesini (bir görünüp bir görünmemesi sağlar.)

 Metin İçindeki Resmin Dikey Konumunu Ayarlamak 

“vertical-align” özelliği, bir ögenin dikey olarak hizalaması için kullanılır. Aşağıdaki değerleri alabilir. Varsayılan değeri “baseline” dir. 

 baseline : Orta (metin içeriğine göre) 
 sub : Altsimge 
 super : Üstsimge 
 top : Yukarı (elemente göre) 
 text-top: Yukarı (metin içeriğine göre) 
 middle : Orta (elemente göre) 
 bottom : Alt (elemente göre) 
 text-bottom : Alt (metin içeriğine göre) 
 px ve yüzde (%) değerleri de verilebilir. 

Kutu Modeli Özellikleri 

Tablosuz tasarımların gereklilik kazandığı günümüzde, bu iş için esas etiketimiz olan <div>” etiketi, kutu modeli (box model) oluştururken de esas etiket konumundadır. 

Div etiketleri sayesinde, istediğimiz kutu modellemelerini gerçekleştirebiliyoruz. 
Ayrıca istediğimiz ögenin etrafını istediğimiz biçimde sarabiliyoruz ve bu kutuların kendi 
içlerinde ve kendi aralarındaki düzenini stil şablonları uygulayarak ayarlayabiliyoruz. 

Kutu modeli şu üç ana ögeden oluşur; 
 margin (kenar dışı boşluğu) 
 border (kenar kalınlığı) 
 padding (kenar içi boşluğu) 

Aşağıdaki resimde kutu modeli (box-model) görsel olarak gösterilmiştir. 
Kenar Dışı Boşluğu Özellikleri 

Turuncu renk ile sınırları belli olan kutumuzun diğer ögelerle arasındaki mesafeyi belirleyen ‘margin’ ögesinin alt elemanları şunlardır; 

margin-top (üst kenar dışı boşluğu) 
margin-right (sağ kenar dışı boşluğu) 
margin-bottom (alt kenar dışı boşluğu) 
margin-left (sol kenar dışı boşluğu) 
margin (kenar dışı boşlukları) (Kısaltma amaçlı kullanılır.) 

Margin ile kısaltma işlemi yapılırken aşağıdaki durumlar söz konusudur; 

 margin:25px 50px 75px 100px; (üst 25px, sağ 50px, alt 75px, sol 100px olur.) 
 margin:25px 50px 75px; (üst 25px, sağ ve sol 50px, alt 75px olur.) 
 margin:25px 50px; (üst ve alt 25px, sağ ve sol 50px olur.) 
 margin:25px; (Tüm kenar dışı boşlukları 25px olur.) 

Kenar Çizgisi Özellikleri 

Kenar çizgisi özellikleri ile kenar çizgisinin biçemini, rengini ve kalınlığını ayarlanabilir. Tüm kenarlara veya ayrı ayrı her kenara bu ayarları uygulayabiliriz. Bu özellikler şunlardır;
Kenar Çizgisi Biçemi 

Kenar çizgisinin nasıl olacağını (noktalı, kesik kesik, düz, çift, vb.) belirler. Herhangi bir değer yazılmadığı zaman ‘none’ varsayılan olarak geçerlidir. Aşağıdaki değerleri alabilir. 






Örnek: 
.border_1 { border-style:dotted;} bu şekilde her hangi bir div (kutu) etiketine uygulamadık. Şimdi sınıf seçicimizin div’e uygulanmış haline bakalım

Örnek-2 Şimdi de üst ve alt kenar için düz; sağ ve sol kenarlar için çift çizgi biçemini uygulayalım. 
.border_1 { 
 border-top-style: solid; 
 border-bottom-style:solid; 
 border-left-style: double; 
 border-right-style: double; 
























Bizi Takip Edin
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın.



Traffic Racer v1.6.5 (Para Hilesi, Hileli, Mod, Hack) APK & indir yükle download


Traffic Racer, Android telefon ve tabletleriniz üzerinden oynayabileceğiniz en iyi araba yarışı oyunlarından bir tanesidir. Şehirde seçtiğiniz araba ile birlikte dilediğiniz herşeyi yapmanızı sağlayan oyun gerçekten çok heyecanlı.
Kendi arabanız ile sokaklarda yapamadığınız sürat ve makas atma gibi hareketleri Traffic Racer'da yapabiliyorsunuz. Muhteşem grafik ve ses efektlerine sahip olan oyunda gerçekçi bir sürüş tecrübesi sizi bekliyor.
Oyundaki amacınız, kalabalık trafikte yapabildiğiniz en yüksek süratte aracınızı kullanarak gidebildiğiniz kadar uzun mesafe yapmak ve yüksek puan almak. Yarışlardan kazandığınız paralar ile yeni araçlar alabilir veya kendi aracınızı güçlendirebilirsiniz. Ayrıca elde ettiğiniz puan sonucu dünya üzerindeki oyuncular arasındaki yerinizi oyun içerisinden görebiliyorsunuz.
Özellikler:
  • Muhteşem 3 boyutlu grafikler
  • Gerçekçi araç kontrolü
  • 17 Farklı araç seçeneği
  • Çöl, karlı yol, şehir dışı ve şehirde gece olmak üzere 4 detaylı mekan
  • 4 farklı oyun modu (Sonsuz, Çift yön, Zaman Karşı ve Serbest Sürüş)
  • Arabanızın görünümünü düzenlemeniz için çeşitli jant ve boya seçenekleri
  • Türkçe dil desteği
Traffic Racer'ı oynarken hızlanmak için ekranın sağına ve yavaşlamak için ekranın soluna dokunmanız yeterlidir. Ayrıca oyun içerisinde ne kadar hızlı sürerseniz o kadar puan kazanırsınız. Saatte 100 kilometreden fazla hızla giderken araçları yakınından geçerek sollamak size ekstra puan ve para kazandırır. Çift yön modunda ise karşı şeritten giderek ekstra ve puan kazanabiliyorsunuz.
Sizde bu heyecanlı ve etkileyici araba yarışı oyununu oynamak isterseniz hemen ücretsiz olarak Android telefon ve tabletlerinize indirebilirsiniz.

İNDİRMEK İÇİN TIKLAYINIZ!


Görüntüler:
Traffic Racer - screenshotTraffic Racer - screenshotTraffic Racer - screenshotTraffic Racer - screenshot

Traffic Racer v1.6.5 Para Hilesi, Mod, Sınırsız Para, Hileli, Money Mod İndir - Android Hile Mekani Blog!

Stil Şablonu (CSS) Temelleri

Stil Şablonu (CSS) Temelleri

CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil Şablonları olarak yerleşen
basit ve kullanışlı bir işaretleme dilidir. Stil şablonu HTML ögelerine (yazı, paragraf, kenar
çizgisi, resim, bağlantı...) stil vermek amacıyla kullanılır. Diğer bir deyişle sayfamızın
içeriğinin biçimlendirilme işleminin yapıldığı kısımdır.

HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World
Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur;
içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir
dosya ile biçimlendirme olanağı tanımaktadır. Bu, web sayfalarımıza esneklik bize ise hız
kazandırır. Tablosuz tasarımın daha da önem kazandığı günümüzde CSS kullanımı olmazsa
olmazlardandır.

1.1. CSS’nin Yapısı 

CSS’nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır. 
Seçici olarak tüm HTML etiketlerini kullanabileceğimiz gibi ileride göreceğimiz ID (kimlik) ve Class (sınıf) seçicilerini de kullanabiliriz. 
 Bildirim bloğu süslü parantez ile açılır ve kapanır. Bildirimler arasında “;” (noktalı virgül) kullanılır. Her Bildirim, "Özellik" ve "Değer" içerir. Özellik ve değer arası “:” (iki nokta üst üste) ile ayrılır. 
 Özellik, değiştirilmek istenen stil özniteliğidir. Örnek; color, font-size vb. 
 Değer ise stil özniteliklerine verilen değerlerdir. Örnek; blue, 14px vb. 
Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır. 

1.1.1. Sınıf (Class) Seçicisi 
Sınıf seçicileri birden fazla ögeye uygulanabilir ve birden fazla kullanılabilir. Örneğin 
önemli adında bir sınıf seçicisi oluşturalım, özellik olarak da yazının renginin kırmızı ve 
kalın olmasını sağlayalım; 

Sınıf seçici olarak belirlediğimiz ismin önüne “.” (nokta) koymamız gerekmektedir. 
Bu ismi herhangi bir ögenin class özniteliğine atayarak stili uygulamış oluruz. Örneğimiz için .onemli sınıf (class) seçicisi yukarıdaki gibi olacaktır.Bu stilimizi sayfamızda H1 ve p etiketlerine uygulayalım. 

Kod:
<html>
<head>
<title>CSS Öğreniyorum</title>
<style type="text/css">
.onemli {
color: #F00;
font-weight:bold;
}
</style>
</head>
<body>
<p class="onemli">Bilgi Cafem 61</p>
<h1 class="onemli">Bilgi Cafem 61</h1>
</body>
</html>

Tasarım Görünümü:


CSS Öğreniyorum



Bilgi Cafem 61

Bilgi Cafem 61



1.1.2. ID Seçicisi 

Sınıf (class) seçicilerini birden fazla ögeye atayarak kullanabiliyorduk; ID seçiciler ise yalnız bir ögeye atanır ve bir kez kullanılırlar. Örneğin “haber_baslik” adında bir stil oluşturalım, özellik olarak da yazı renginin mavi ve ortalı olmasını sağlayalım;
#haber_baslik {
text-align:center;
color:blue;
}

ID seçicisi olarak belirlediğimiz ismin önüne “#” koymamız gerekmektedir. ID’ye verdiğimiz isim, sayfa içinde aynı isme sahip ögeye (etiket) uygulanmış olacaktır. Örneğimiz için #haber_baslik ID seçicisi yukarıdaki gibi olacaktır. Bu stilimizi p etiketine uygulayalım.

Kod:


<html>
<head>
<style type="text/css">
#blogger_baslik
{
text-align:center;
color:blue;
}
</style>
</head>
<body>
<p id="blogger_baslik"Bilgi Cafem 61</p>
<p>Bilişim Bilgi Teknolojileri Blog Sitesi.</p>
</body>
</head>

1.1.3. Etiket (Tag ) Seçicisi 

Etiket seçicileri aynı türden tüm ögelere (etiketlere), istediğimiz stili uygulamak için kullanılır. Bir başka deyişle etiketleri kendi isteğimize göre uyarlarız. Örneğin sayfamızdaki tüm karakterlerin boyutunun 20px olmasını istiyorsak;
olarak yazmamız yeterlidir. Bir başka örnek olarak sayfamızdaki paragraflarda yazı büyüklüğünün 16px, yazı tipinin Arial ve kalın olmasını sağlamamak için, stilimiz aşağıdaki şekilde oluşturulur. 
p
{
font-family: Arial;
font-size:16px;
font-weight: bold;
}

1.2. CSS Kullanım Alanları 

Oluşturduğumuz stil şablonlarını sayfamıza nasıl uygulayacağımızı, nereye yerleştirmemiz gerektiğini belirleyen 3 yöntem vardır:

 Yerel kullanım alanı
 Global kullanım alanı
 Bağlantılı kullanım alanı

1.2.1. Yerel Kullanım Alanı 

Etiket içinde stil kullanımı (In-line Style) olarak da adlandırılır. Bu kullanım şeklinde CSS direkt etiketin“style” özniteliği kullanılarak uygulanır.

Örnek: p etiketine, etiket içinde uygulanmak üzere yazı rengini kırmızı ve ortaya hizalı yapalım;
şeklinde olacaktır. Şimdi bunun tüm kod içinde nasıl göründüğüne bakalım;
<html>
<head>
<title>Bilgi Cafem 61</title>
</head>
<body>
<p style="color:red; text-align:center;>Merhaba</p>
</body>
</html>

Yerel, bir başka deyişle etiket içi CSS kullanımı, tek tek her etiketin içine yazılması gerektiği ve yönetiminin zor olması sebebiyle çok gerekmedikçe önerilmemektedir.

1.2.2. Global Kullanım Alanı 

Dahili stil kullanımı (Internal Style Sheet) olarak da adlandırılır. CSS kodumuz sayfamızın <head> kısmında, <style>…</style> etiketi içinde yer alır. Kısmen de olsa
HTML ve CSS kodumuzu birbirinden ayırmış oluruz.

Örnek: h3 etiketine uygulanmak üzere yazı rengini kırmızı, yazı büyüklüğünü 12pt ve sola hizalı yapalım;

 Görüldüğü üzere stilimizi <style> etiketi içinde <style type=”text/css” >
…CSS…</style> yer alacak şeklinde yazdık. Şimdi de bunu <head>…</head> etiketleri arasına aşağıdaki gibi yerleştirmemiz gerekiyor.
<html>
<head>
<title>CSS Öğreniyorum</title>
<style type="text/css">
h3{
color:red;
text-align:left;
font-size:12pt;
}
</style>
</head>
<body>
<h3>Duyurular</h3>
</body>
</html>

Global (dahili) olarak yerleştirdiğimiz CSS kodumuz sadece bu sayfayı etkileyecektir. Başka bir sayfada h3 etiketi normal görevini yapacaktır.

Global kullanım alanına sahip olan stil şablonumuzda seçici olarak etiket seçici kullanıldığını görmekteyiz. Şimdi de kullanım yerine müdahale etmeden seçici tipini değiştirelim. Seçicimizi, istediğimiz başlıkların stilinideğiştirmeye yönelik bir stil şablonu olarak tasarladığımız için aynı sayfada birden çok kez kullanılma olasılığı yüksektir. Bu sebeple ID seçici değil de sınıf (class) seçici seçmemiz gerekmektedir.
İsim olarak rakamla başlamayan, Türkçe karakter içermeyen ve karışıklığa yol açmaması için var olan etiket isimlerinden olmayan bir isim belirleyelim. Örneğin seçtiğimiz isim “baslik” olsun ve tabii ki bunun birsınıf seçicisi olduğunu belirtmek için başında nokta işareti olacak şekilde “.baslik” yazmalıyız. Uygulama aşağıda görülmektedir. 
<html>
<head>
<title>CSS Öğreniyorum</title>
<style type="text/css">
h3{
color:red;
text-align:left;
font-size:12pt;
}
</style>
</head>
<body>
<h3 class="baslık">Duyurular</h3>
</body>
</html>


1.2.3. Bağlantılı Kullanım Alanı 

Harici stil kullanımı (External Style Sheet) olarak da adlandırılır. Stilimizi “.css” uzantılı stil şablonu dosyasına kaydederek, kullanmak istediğimiz sayfalarda <link> etiketi yardımıyla çağırırız. HTML kısmı ile CSS kısmını birbirinden tamamen ayırmış oluruz.
Sayfalarımızın okunaklılığı ve yönetilebilirliği maksimum düzeye çıkacaktır. Bu nedenle en çok tercih edilen yöntemdir.

Bu yöntem en çok tercih edilen yöntem olduğu için nasıl ki resimlerimizi, dokümanlarımızı ayrı klasörlerde tutuyorsak stil şablonu (CSS) dosyalarını da ayrı bir klasörde tutmalıyız. Klasör ismi olarak “CSS” veya “styles” isimlerini tercih edebilirsiniz.
Bu klasörler içinde yer alan .css dosyalarına istediğimiz sayfadan bağlantı sağlayarak, içinde oluşturulmuş tüm stilleri sayfamıza uygulayabiliriz.
Örnek olarak stilim.css isminde harici bir stil şablonu (CSS) dosyası oluşturalım.Oluşturduğumuz dosyanın içine bir önceki örnekte yaptığımız stilin kodlarını yazalım. 
stilim.css dosyasının içeriği;
Bu örnekte sadece sınıf (class) seçici kullanılmıştır. İstenildiği takdirde her türlü seçici türünü dosya içine yazabiliriz. Önemli olan dosya içinde sadece stil şablonu formatına ait kodların yer almasıdır. 

Şimdi bu dosyayı sayfamıza <link> etiketini kullanarak bağlayalım; 
<html>
<head>
<title>CSS Öğreniyorum</title>
<link href="stilim.css"="stylesheet" type="text/css">
</head>
<body>
<h3 class="baslik">Duyurular</h3>
</body>
</head>


Dikkat etmemiz gereken nokta css dosyasını çağırdığımız sayfanın bulunduğu konumdan, css dosyasının bulunduğu konuma dosya yolunun tam olarak yazılmasıdır.

Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve index sayfasından style dosyasında bulunan stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır.
<link href=”styles/stilim.css” rel=”stylesheet” type=”text/css”> 

Örneğin, Resim 1.1’deki gibi bir dosya düzenimiz olduğunu ve template dosyası içindeki bir sayfadan style dosyasında bulunun stilim.css dosyasını çağıracağımızı farz edelim. Kod yapımız aşağıdaki gibi olacaktır. 
<link href=”../styles/stilim.css” rel=”stylesheet” type=”text/css”>















Bizi Takip Edin...
Pinterest Facebook Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakabilirsiniz...