CSS



warning: Creating default object from empty value in /home/hanci/domains/hanci.org/public_html/modules/taxonomy/taxonomy.pages.inc on line 33.

CSS Örnek Kod

CSS Örnek Kodlar

Css ile tekrarlanmayan arka plan resmi yapmak için öncelikle arka
plana bir resim atamak gerekir. Bunu background-image : url(resmim);
kodu ile yaparız.
Daha sonra bu resmin tekrarlanmasını önlemek için background-repeat:no-repeat
komutunu vermek gerekir.
En son olarak resmi ortalamak için background-position : center
komutunu vereceğiz

Şu kodda olduğu gibi :

BODY
{
BACKGROUND-IMAGE : URL(./bayrak.gif);
BACKGROUND-REPEAT: NO-REPEAT;

CSS Background Özellikleri

CSS, web kodlayıcılarına
(X)HTML dökümanlarına stil uygulamalarını sağlar. (X)HTML kodu ile
stil kodunu birbirinden ayırarak web kodlayıcılara büyük kolaylıklar
sağlar. Burada genel kullanılan CSS özelliklerini hep beraber tek
tek kısaca inceleyeceğiz.

Burada tanımlanacak CSSözellikleri 15 Haziran 2005′de yürürlüğe
giren CSS2.1 standartlarına göre yazılmıştır.

Sırası ile aşağıdaki özelliklere değinilecektir.

Zemin (Background) Özellikleri
Kenarlık (Border) Özellikleri

CSS’de 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.

1. Font
Normalde bir font tanımlarken 4 adet CSS kodu kullanılır:

view sourceprint?1.font-weight: bold;
2.font-family: verdana, sans-serif;
3.font-size: 11px;
4.line-height: 15px;
Kısaltma olarak kullanlan kod ise tek satır:

view sourceprint?1.font: bold 11px/15px verdana, sans-serif;

CSS Birimleri

Bu makalede CSS’de
kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve
renkleri tanımlamak için kullanılır. Birimleri dört gruba ayıra
biliriz. uzunluk birimleri, yüzde
birimleri, renk birimleri ve URL
birimleri

CSS Pseudo-Sınıfları

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.)

CSS Özellik Seçicileri

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.

CSS’in Yapısı

CSS’in Yapısı

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).

CSS İle Link Kontrolü

Kod Alanı:<html xmlns="http://www.hanci.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>
<div id="menu">
<a href="">hanci</a>

CSS İle Scrollbar'a Yeni Görünüm

Scrollbarınızı renklendirmek istiyorsanız bu ders size çok yardımcı olacaktır.

Kod Alanı:body {
scrollbar-arrow-color: #547741;
scrollbar-face-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;

CSS Çeşitleri nelerdir

Cssin (Stil Şablonu ) 3 farklı kullanım alanı vardır. Bunlar ;

Yerel, yani sayfada sadece bir kez: Yerel stil şablonlar bir html etiketi için özel olarak kullanılırlar.

Global, yani tüm sayfa için: Global stil şablonlar sayfadaki tüm html etiketlerinin belirlenen özellikte olması istendiğinde kullanılırlar.

Bağlantılı, yani birden çok sayfa için: Ba?lantılı stil şablonlar birçok sayfada aynı biçimde olması istendiğinde kullanılırlar.

Yerel Stil Şablonu
Yerel Stil Şablonlar, uygulanacak etiketi sadece bir kez bulunduğu yerde (yerel ) etkiler. Şimdi bir örnek verelim.

CSS de Fare İmleci

Fare İmlecini Seçmek
Fare imlecinin sembolünü değiştirmek de sizin elinizde. Bunun için
cursor özelliğini kullanıyoruz. cursor özelliği aşağıdaki değerleri
alabilir:

url Bu değer ile kendi tasarladığımız .cur uzantılı imleci tanımlayabiliyoruz. --
default Varsayılan değer bildiğimiz ok şekli imleç. Değiştirdiğimiz imleçten varsayılan değere dönmek için sıkça kullanılır.
hand Genellikle link izlenimi veren el şekilli bu imleç, ziyaretçiyi sol tıklamaya güdüler.
crosshair Ziyaretçiyi bir noktayı belirlemesi (nişan alması ) yönünde güdüler.
pointer Ziyaretçiyi bir noktayı göstermeye güdüler.
move Ziyaretçiyi bir şeyi tutup hareket ettirmeye güdüler.

CSS ile Konumlandırma

Bu sayfada HTML nesnelerinin CSS ile sayfa içinde nasıl konumlandırılacağını göreceğiz.

Nesne Yüzdürme İlk özelliğimiz: float. Bu özellik ile HTML nesnelerinin sayfada
veya herhangi bir HTML elemanının içinde konumlandırmaya yarar. Bu
işleme yüzdürme diyoruz. Örneğin bir resim nesnesinin metin içindeki
konumunu düşünün, bu resim nesnesini hizalayarak bu nesneyi metin denizi
içinde yüzdürmüş oluyoruz. Eğer float özelliğine right özelliği
verirsek nesne sağda, left özelliği verirsek solda, none özelliğini
verirsek yazıldığı yerde konumlandırılır.

CSS de Listeleme

Bu sayfayı okumadan önce,
HTMLde öğrendiğimiz listeleme kodlarını birkez gözden geçirmenizi
tavsiye ederim. Bu sayfanın konusu listeleme kodlarını CSS ile
şekillendirmektir.

Maddeleme İşaretleri
HTMLde anlatıldığı üzere, iki tür listeleme vardır: sıralı
listeleme, sırasız listeleme. Sıralı listelemeyi type="..."
parametresine "1", "a", "A", "I", "i" gibi değerler vererek
şekillendiriyorduk. Aynı şekilde sırasız listelemeyi type="..."
parametresine "disc", "circle", "square" gibi değerlerle
şekillendiriyorduk. CSSde type="..." parametresinin işlevini
list-style-type özelliği üstlenmiştir. Bu özelliğin aldığı özellikler de
aşağı yukarı aynı:

none Maddelerin önüne işaret koymaz.

CSS de İç Kenar Boşluğu

İçkenar Boşluk Değeri
Özellikle tablolarda içkenar boşluklarının ayarlanması, tablo düzeni
için önemli bir işlemdir. CSSde dışkenar boşluklarını ifade etmek için
padding özelliğinden yararlanırız.

padding özelliğine vereceğimiz değerler şu şekillerde olabilir:

birim İçkenar boşluğunun CSS birimleriyle ifade edilmesidir.
padding: 12px, margin:1cm, vb.
yüzde oranı İçkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
padding: 20%

Eğer padding özelliğine tek değer verirsek, tüm içkenar boşlukları
bu değeri alır. Eğer iki değer verirsek, üst ve alt içkenar boşlukları
ilk değeri, sol ve sağ içkenar boşlukları ikinci değeri alır. Eğer üç

CSS ile Dış Kenar Boşluğu

HTMLde nesnelerin diğer
nesnelere olan konumunu, dışkenar boşlukları ile belirleyebiliriz. Her
nesnenin bir sınır çizgisi olduğu gibi, sınır çizgisinin dışında bir
boşluk da vardır; ancak bu boşluğun varsayılan değeri sıfırdır. Bu
dersimizde bu boşluğu margin özelliği ile ifade edeceğiz.

Dışkenar Boşluk Değeri
margin özelliğine vereceğimiz değerler şu şekillerde olabilir:

auto Dışkenar boşluğunu gözatıcı (browser ) otomatik olarak belirler.
margin: auto
birim Dışkenar boşluğunun CSS birimleriyle ifade edilmesidir.
margin: 12px, margin:1cm, vb.
yüzde oranı Dışkenar boşluğunun, sayfa büyüklüğüne olan yüzde oranıyla belirlenmesidir.
margin: 20%

CSS de Sınır Çizgisi

Sınır Çizgi Şekilleri
CSSde sınır çizgilerinin şeklini belirlemek için border-style
özelliğinden yararlanırız. Bu özelliğin değerleri şunlardır: none,
dotted, dashed, solid, double, groove, ridge, inset, ve outset.
Aşağıdaki uygulama bu değerlerin nasıl sonuç verdiğini gösteriyor. NOT:
Bu özelliği Netscape desteklemiyor.

Kod Alanı:

CSS ile Arkaplan Biçimi

HTML derslerinde sayfanın
arkaplanını değiştirmek için <body> komutuna bgcolor="..."
parametresini atıyorduk. Bu parametre tablolar veya diğer kodlar (h1-h6,
marquee,vb... )için de geçerliydi.

Arkaplan Rengi
CSSde ise bu kodların background-color özelliğine renk değerleri veriyoruz.

Kod Alanı:

CSS ile Font Biçimi

Font Türü Önce font seçmeyi öğrenelim. HTML derslerinde <font> kodu ve
face="..." parametresi ile yazı fontunu belirliyorduk. CSSde ise bu işi
font-family özelliği ile yaparız:

Kod Alanı:

CSS Giriş

CSS (Cascading Style
Sheets ) web tasarımcılarının işini oldukça kolaylaştırmaktadır. CSS
HTMLden ayrı yeni bir dil değil, HTMLin önemli bir parçasıdır. CSS ile
web sayfasındaki araçların görünümleri genelleştirilir.

HTML derslerinde style="..." parametresini görmüştük. Bu parametre
ile tanımlanan kodun özelliklerini değiştirmiştik. CSS style
özelliklerinin tüm sayfa için tanımlanmasıdır. Hem Navigator 4.0 hem de
Internet Explorer 4.0 browserlar ve daha gelişmiş olanları CSSyi
destekliyor. Fazla uzatmadan konuya girmek daha iyi olur sanırım.

HTML derslerinde geçen ama üzerinde pek durmadığımız style
parametresi üzerinde açıklama yapmam gerekiyor. style parametresi

CSS Nedir ?

HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.

Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.

Stylizer ile CSS kodlama

Profesyonel web tasarımcılarına müthiş bir kolaylık sağlayan bu yazılım , işe yeni başlayanlara da kolayca CSS öğrenme fırsatı tanıyor.

Web tasarımı için dünyada ve Türkiye’de en çok kullanılan yazılımlar Microsoft ve Adobe gibi büyük yazılım şirketlerinin çok da ucuz olmayan ürünleri . Microsoft, web tasarımcıları için Visual Web Developer Express gibi ücretsiz bir çözüm sunuyor olsa da tüm ihtiyaçları karşılayan program paketleri dişe dokunur lisans ücretleriyle satılıyor. Yüksek lisans ücretleri kurumsal kullanıcılar tarafında elbette ki bu başarılı yazılımlar için makul görünebilir. Fakat web tasarımına farklı amaçlarla yönelen, örneğin işe bir hobi gözüyle bakan kullanıcılar için çok can sıkıcı olabiliyor. Şimdi tanıtacağımız yazılımın hem ücretsiz bir sürümü, hem de makul ücretli bir sürümü var. Yüksek ücretli bir sürümüyse yok! :)

Kanada’lı Skybound firmasının bir ürünü olan Stylizer, web tasarımıyla uğraşan herkesi ilk görüşte şaşkınlığa sevk edebilecek, etkileyici bir yazılım.

Anket

Web sitesinde hangisi daha önemlidir:
İçeriği paylaş