Css Tema

12 Eylül 2009

Site içerisinde arama yapın.

Ücretsiz CSS Temalar – Bedava CSS Tema

WebMD Home

Home Page

Email a Friend

Print Article

Kullanım Kolaylığı

28 Ekim 2009
Kategori Dersler | Yorum Yazin

HTML’de her etikete artı özellikler eklemek için baska bir etiket ve/veya

özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede

yaptıgımızı düsünürseniz çok büyük zaman kaybı ve ugras gerektigini

göreceksiniz.

<h1><font color=”blue”>Baslık</font></h1>

Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçekten

çok zor. CSS’de aynı islem için

h1 {color: blue}

Kodunu yazmamız yeterli. Bu elemanın özelliklerinde degisiklik yapmak

istedigimizde sadece burada degistirerek tüm sitede bu elemanın

özelliklerini degistirmis olacagız. Ayrıca bu islemi sadece bu etiket için

degil diger etiketlere de uygulayabiliriz.

h1, h2 {color: blue}

Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web

kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada degislik

yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.

HTML’de her etikete artı özellikler eklemek için baska bir etiket ve/veya

özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede

yaptıgımızı düsünürseniz çok büyük zaman kaybı ve ugras gerektigini

göreceksiniz.

<h1><font color=”blue”>Baslık</font></h1>

Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçekten

çok zor. CSS’de aynı islem için

h1 {color: blue}

Kodunu yazmamız yeterli. Bu elemanın özelliklerinde degisiklik yapmak

istedigimizde sadece burada degistirerek tüm sitede bu elemanın

özelliklerini degistirmis olacagız. Ayrıca bu islemi sadece bu etiket için

degil diger etiketlere de uygulayabiliriz.

h1, h2 {color: blue}

Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web

kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada degislik

yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.

Renkler: css, kolay, kullanım

Görünüm Avantajları

28 Ekim 2009
Kategori Dersler | Yorum Yazin

CSS HTML’e göre birçok stil özelligine sahiptir. CSS’in sayfa içerigi

ögelerinin sayfa görünümü ögelerinden ayrılması için gelistirildigini

düsünürsek avantajı bastan anlasılmıs olur.

<h1>CSS’e Giris</h1>

HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak

atama gibi çesitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde

ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak

CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri

de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

h1 {

color: white;

font: italic 11px Arial, serif;

text-decoration: underline;

background: yellow url(titlebg.gif) repeat-x;

border: 1px solid red;

margin-bottom: 0;

padding: 5px;}

CSS HTML’e göre birçok stil özelligine sahiptir. CSS’in sayfa içerigi

ögelerinin sayfa görünümü ögelerinden ayrılması için gelistirildigini

düsünürsek avantajı bastan anlasılmıs olur.

<h1>CSS’e Giris</h1>

HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak

atama gibi çesitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde

ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak

CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri

de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)

h1 {

color: white;

font: italic 11px Arial, serif;

text-decoration: underline;

background: yellow url(titlebg.gif) repeat-x;

border: 1px solid red;

margin-bottom: 0;

padding: 5px;}

Renkler: avantaj, css, görüntü

CSS’in tanımı ve genel bilgi

28 Ekim 2009
Kategori Dersler | Yorum Yazin

CSS (Cascading Style Sheets – Stil Sablonları), Web dokümanlarına stil
eklemek için kullanılan basit ve güçlü bir dildir.
Web sayfalarının yapılarını düsündügümüzde 3 kısma ayıra biliriz. çerik
kısmı, biçimlendirme kısmı ve dinamik kısım.
çerik kısmı, HTML kodlarını içeren sayfa asıl içerigini olusturan birimleri
olusturma kısımdır. Bu kısım genelde metinlerden olussa da, resim,
animasyon ve video gibi elemanlarıda içerir.
Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntülenecegini
gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve
kullanıslı sayfa sunmak için gerekli elemanları içerir.
Dinamik kısım, Javascript ile yapılan dinamik islemleri içerir. Etkilesimli
sayfalar olusturmak için kullanılır.
Eskiden ki hala bu sekilde kodlama yapanlar mevcut. çerik kısmı ve
biçimlendirme kısmı içi içe kodlama yapardık, örnegin yazıtipi tanımı için
etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve
erisebilirlik açısından büyük kayıplarımız vardı.
CSS biçimlendirme kısmının yönetimini saglamak için kullanılır. çerik
kısmı ile biçimlendirme kısmının ayrılmasını saglayan CSS bize birçok
avantajlar saglar. Örnegi 10.000 sayfası olan bir siteyi tek css dokümanı
yardımı ile biçimlendirmemizi saglar.
CSS 1996Vda W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri)
CSS2.1 sürümü yürürlüktedir. CSS3.0Vda çalısmaları devam etmektedir.
CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work
adresinden ulasabilirsiniz.
Tablosuz Web Sayfası kodlama teknigini kullanmayanlar CSS’in
ehemmiyetini tam olarak anlayamayacaktır.

Renkler: bilgi, css, tanım

CSS ile konu çeken botlardan korunma

14 Ekim 2009
Kategori Diğer Konular | Yorum Yazin

HTML:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<p>Burada <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> bir <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> paragraf <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> var <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> ve <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> içerisinde <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> linkler <a href="http://www.csstema.com/" class="gizle">www.csstema.com</a> gizli </p>
</body>
</html>

Basit bir örnek siz istediğiniz gibi geliştirebilirsiniz. konunuzu çeken siteyi gizli link veriyor diye google a şikayet ederseniz hem arama sonuçlarından hemde adsense den banlarlar. Sizde rahat edersiniz. Tabi hangi siteye link verirsiniz orası size kalmış.

HTML:

<body>
<p>Burada <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> bir <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> paragraf <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> var <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> ve <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> içerisinde <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> linkler <a href="http://www.csstema.com/" style="display:none;">www.csstema.com</a> gizli </p>
</body>
</html>

Bence ikinci örnek daha güzel. Çünkü ilk örnekte sadece paragrafı çekeceği için css kodunuzu almayacaktır bu yüzden web sitesinde eklediğiniz linklerde gözükecektir adamda olayı hemen anlar eğer ikinci örnektekini kullanırsanız www.csstema.com gibi hiç bir şey anlamaz.

Renkler: bot, çeken, css, hırsız, konu, korunma, robot, yöntem

Farklı boyutta ki resimleri alttan hizalama – Resimlere üst boşluk ekleyerek div in altına hizalama php destekli

9 Ağustos 2009
Kategori CSS Örnekler, PHP | 1 Yorum

Problem yaşadığım web sitesi www.msnsmile.com du. Resimleri üstten hizalaya biliyordum. Div in altına hizalamak için bir kaç php kodu işimi gördü ilk olarak resimlerin yüksekliğini aldırdım. getimagesize fonksiyonu ile ve resimlerin en fazla 140px yükseklikleri olduğunu hesap ederek en büyük resimde 10px boşluk kalması için üst taraftan resimleri eklediğim div in yüksekliğini 150 px olarak aldım. 150px lik yüksekliğimdende resimlerin yüksekliğini çıkararak üstten kaç px boşluk bırakırsam resimlerin alttan hizalanmasını sağlayacağımı buldum ve her resim için farklı padding değerleri kullanarak alttan hizaladım.

PHP:

$size = getimagesize("smile/$row1[resim]");
$boy = $size[1];
$boy = 150-$boy;

kutu için kullandığım css kodu

CSS:

.kutu { bottom: 20px; float:left; margin: 10px 0 10px 15px; width: 165px; border:1px solid #000; background: #FFFFFF; text-align:center; }
.kutu img { border:0;}

while döngüsünde kullandığım php kodu

PHP:

echo '
<div class="kutu" style="padding:'.$boy.'px 0px 10px 0px"><a href="smile/'.$row1[resim].'"><img src="smile/'.$row1[resim].'" border="0" alt="" /></a></div>
';

resimlerin altıdanda 10px boşluk bırakıoruz.

http://www.msnsmile.com/Large-JvP-Pack-3-c42.html en belirgin olan kategori.

Renkler: boy, css, div, getimagesize(), height, hizalama, kutu, padding, PHP, resim, yükseklik, yüzen

Sitenizin arkaplanına resim sabitleyin. position fixed

2 Ağustos 2009
Kategori Dersler | Yorum Yazin

CSS:

Renkler: arkaplan, background, center, css, fixed, image, position, resim, sabit

Form elemanları renklendirelim input focus

31 Temmuz 2009
Kategori Dersler | 1 Yorum

Form elemanlarımızı renklendirmek için css dosyamıza küçük bir kod yazmamız yeterli oluyor. Bu örnekte arka plan rengini ve form nesnesinin içerisine yazılacak olan yazının rengini değiştiriyoruz. input nesnesinin bir çok özelliğini değiştirebiliriz ama kenarlığı kalınlaşan bir form nesnesi hem sitemizin yapısını hemde görüntü kalitesi bozacapı için biz sadece arkaplan ve yazı rengini değiştiriyoruz. Böylece formumuzu dolduran kişide hangi bölümde olduğunu rahatlıkla görebilecektir.

CSS:

input:focus{
background-color:#000066;
color:#FFFFFF;
}

Renkler: background-color, color, css, değişim, focus, form, input, renk

CSS Düğün Organizasyon Teması

17 Temmuz 2009
Kategori 3 Blog, Css Tema, Üst Menü | Yorum Yazin

Site Genişliği: 900px

Yazı Fontu : tahoma

Demo Adresi : http://www.csstema.com/demo/dugun/

Düğün CSS Tema (71)

Renkler: css, düğün, organizasyon, sade, tasarım, tema

CSS ile Kutu Şeklinde Menü Hazırlamak (display:block)

14 Nisan 2009
Kategori Menüler | 2 Yorum

İlk önce html sayfamızı oluşturup index.html olarak kayıt edin içerisindeki kodlar aşağıda.

HTML:

<div id="menu">
<ul>
<li> <a href="hakkimizda.html">Anasayfa</a></li>
<li> <a href="hakkimizda.html">Hakkımızda</a></li>
<li> <a href="urunler.html">Ürünler</a></li>
<li> <a href="üye girisi.html">üyegirişi</a></li>
<li> <a href="iletisim.html">iletişim</a></li>
</ul>
</div>

Bir dosya daha oluşturup menu.css diye kayıt edin.

CSS:

body {
font-family:tahoma;
font-size:12px;
}
#menu ul
{
list-style:none
}
#menu ul li
{
text-align:center;
width:100px;
display:block;
}
#menu ul li a
{
color:yellow;
padding:10px 0px 0px 0px;
text-decoration:none;
height:30px;
background-color:red;
display:block;
}
#menu ul li a:hover
{
color:red;
text-decoration:underline;
background-color:yellow;
display:block;
}

CSS dosyasını oluştururken ilk önce

body ile sayfamızın yazı fontunu ve yazı büyüklüğü ayarladık.İstersek bunu a ve a:hover etiketleri içindede tanımlaya bilirsiniz.

CSS:

body {
font-family:tahoma;
font-size:12px;
}

Listemizin önündeki noktaları iptal etmek için ul etiketi içindeki noktaları aşağıdaki kodu yazıyoruz.

CSS:

#menu ul
{
list-style:none
}

ul etiketi içindeki li etikerlerini block biçimi alması için display:block; yazıları ortalamak için text-align:center; li nin genişliği içinde width:100px; yazıyoruz.

CSS:

#menu ul li

{
text-align:center;
width:100px;
display:block;
}

a yani link etiketimiz içinde renk belirliyoruz site açıldığında linklerin rengi color:yellow; linklerin üste yapışık çıkmaması için padding:10px 0px 0px 0px;
altındaki çizgiyi kaldırmak için text-decoration:none; yüksekliğini belirtmek için height:30px; arkaplan rengi için background-color:red; block şeklini alması için display:block; kullanıyoruz.

CSS:

#menu ul li a

{

color:yellow;

padding:10px 0px 0px 0px;

text-decoration:none;

height:30px;

background-color:red;

display:block;

}

üstüne geldiğinde renklerin değişmesi için color:red; renkleri değiştiriyoruz text-decoration:underline; yazıların altını çiziyoruz background-color:yellow; arkaplan resmini değiştiriyoruz display:block; şeklinde görünyülüyoruz.

CSS: