Konular

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

BACKGROUND

Özellik Açıklama Değerler IE F N W3C
color Bir öğedeki yazıların renklerini tanımlamakta kullanılır renk-hex
renk-adı
renk-rgb
4 1 6 1
background Bir yöndeki tüm art alan tanımlarının hepsini atamak için kullanılan kısaltma background-color
background-image
background-repeat
background-attachment
background-position
4 1 6 1
background-attachment Bir art alan resmi değişmez mi yoksa sayfayla birlikte kayar mı olduğunu belirtir scroll
fixed
4 1 6 1
background-color Bir öğenin art alan rengini atar renk-rgb
renk-hex
renk-adi
transparent
4 1 4 1
background-image Bir resmi art alan resmi olarak belirler url(URL)
none
4 1 4 1
background-position Art alan resminin başlangıç noktasını tanımlar top left top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
4 1 6 1
background-repeat Art alan resminin nasıl yineleneceğini belirtir repeat repeat-x
repeat-y
no-repeat
4 1 4 1

 

Background, Border, Classification, Dimension, Font, Generated Content, List and Marker, Margin

burada backgroundun resim özelligini kullanıyoruz....

  

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

burada ise yazının arkaplanına renklendirme özelligini kullanıyoruz

BORDER

CSS border özelliği bir öğenin sınırına ilişkin stil ve renk tanımlamada kullanılır. HTML içinde yazıların çevresine sınır koymak tablolarla yapılır. Fakat CSS border özelliği güzel etkileriyle yazıların çevresini sınırlama olanağı oluşturur ve her öğeye uyarlanabilir.

Özellik Açıklama Değerler IE F N W3C
border Bir tanımda her dört yöndeki sınırları belirlemeye yarayan kısaltılmış bir özelliktir. sınır-eni
sınır-stili
sınır-rengi
4 1 4 1
border-bottom Bir tanımda alt sınırın tüm özelliklerini bir arada tanımlamaya yarayan kısaltılmış tanımdır. sınır-alt-eni
sınır-stili
sınır-rengi
4 1 6 1
border-bottom-color Alt sınırın rengini belirler sınır-rengi 4 1 6 2
border-bottom-style Alt sınırın stilini tanımlar sınır-stili 4 1 6 2
border-bottom-width Alt sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-color Dört sınır için renk belirten değerlerdir. Tek ya da dört renge kadar tanım yapılabilir. renk 4 1 6 1
border-left sol sınır için tüm değerleri tanımlamaya yarayan bir kısaltmadır sol-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-left-color Sol sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-left-style Sol sınırın stilini tanımlar sınır-stili 4 1 6 2
border-left-width Sol sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-right Sağ sınır için tüm değerlerin tanımlanabildiği bir kısaltmadır. sağ-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-right-color Sağ sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-right-style Sağ sınırın stilini tanımlar sınır-stil 4 1 6 2
border-right-width Sağ sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-style Dört sınırın stillerini tanımlar. birden dörde kadar stil tanımı yapılabilir. none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top Üst sınırın tüm özelliklerini tanımlamak için kullanılan bir kısaltmadır. üst-sınır-eni
sınır-stili
sınır-rengi
4 1 6 1
border-top-color Üst sınırın rengini tanımlar sınır-rengi 4 1 6 2
border-top-style Üst sınırın stilini tanımlar sınır-stili 4 1 6 2
border-top-width Üst sınırın enini tanımlar thin
medium
thick
uzunluk
4 1 4 1
border-width Bir tanımdaki dört sınırın özelliklerinin belirtildiği kısaltılmış özelliktir. Birden dörde kadar tüm değerler yazılabilir thin
medium
thick
uzunluk
4 1 4 1

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

 

<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-width: 5px
}
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
p.two

{
border-style: solid;
border-width: thick


}
p.three
{
border-style: solid;
border-width: 5px 10px
}
p.four
{
border-style: solid;
border-width: 5px 10px 1px
}
p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}
</style>
</head>
<body>
<p class="one">Some text</p>
<p class="two">Some text</p>
<p class="three">Some text</p>
<p class="four">Some text</p>
<p class="five">Some text</p>
</body>
</html>
 

Burda ise borderın istedigimiz bir kenarını kalın yapabiliyoruz

 

 

<html>
<head>
<style type="text/css">
p.one
{
border-style: solid;
border-color: #0000ff
}
p.two
{
border-style: solid;
border-color: #ff0000 #0000ff
}
p.three
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff
}
p.four

{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
</body>
</html>
 

  Burda ise borderımızın herangi bi kısmına istedigimiz renkleri verebiliyoruz

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Burda borderımaza çeşitli şekiller verebiliyoruz...

 

CLASSİFİCATİON

Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir.
Bu özellik, Bir öğeyi nasıl ve nereye görüntüleyeceğinizi belirtir. Bir başka öğe içinde resmin yerede görüneceğini tanımlar, bir öğeyi normal yerine göreceli olarak nereye yerleştirileceğini belirtir. Bir öğenin mutlak yerini tanımlar ve bir öğenin görülebilirliğinin nasıl kontrol edileceğini belirtir.

Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape.
  W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

 

Özellik Açıklama Değerler IE F N W3C
clear Nir öğenin, başka kayan öğelere izin verilmeyen yanlarını tanımlar. left
right
both
none
4 1 4 1
cursor Görüntülenecek İmleç (cursor) tipini tanımlar. url-adresi
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Bir öğe eğer görüntülenirse nasıl olduğunu tanımlar none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Bir resim y ada yazının diğer bir öğe içinde nasıl yer alacağını tanımlar left
right
none
4 1 4 1
position Bir öğeyi statik, göreceli, mutlak ve değişmez yerleştirmek için kullanılır. static
relative
absolute
fixed
4 1 4 2
visibility Bir öğenin görüntülenecek mi yoksa gizlenecek mi olduğunu belirtir. visible
hidden
collapse
4 1 6 2

 

 

DİMENSİON

Bir öğenin yükseklik ve enini ayarlamakta kullanılır. Bu özellik iki satır arasındaki aralığı da değiştirebilmenizi sağlar.

Özellik Açıklama Değerler IE F N W3C
height Bir öğenin yüksekliğini ayarlar auto
uzunluk
%
4 1 6 1
line-height Satırlar arasındaki açıklığı belirler normal
sayı
uzunluk
%
4 1 4 1
max-height Bir öğenin yüksekliğinin en çok ne olacağını belirtir none
uzunluk
%
- 1 6 2
max-width Bir öğenin eninin en çok ne olacağını belirtir. none
uzunluk
%
- 1 6 2
min-height Bir öğenin yüksekliğinin en az ne olacağını belirtir. uzunluk
%
- 1 6 2
min-width Bir öğenin eninin en az ne olacağını belirtir uzunluk
%
- 1 6 2
width Bir öğenin enini belirler auto
%
uzunluk
  
4 1 4 1

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Font

CSS Yazı-tipi özelliği, yazının yazı-tipi ailesini, koyuluğunu, boyunu ve stilini değiştirmemize olanak verir. Not: CSS1'de yazı-tipleri "yazı-tipi" adıyla tanımlanır. Eğer bir taracıyı belirtilen yazı-tipini desteklemiyorsa, varsayılan yazı-tipini kullanır.

  1. Tarayıcı bir yazı-tipini ya yerel olduğu ya da WEB'den indirildiği için tanır. Eğer aynı özellikleri olan iki yazı-tipi varsa tarayıcı birini tümüyle dikkate almaz.
  2. Bir öğede, içindeki her karakterde tarayıcı yazı-tipinin tüm özelliklerini uygular. Yazı-tipinin tüm özellikleri yazı-tipi-ailesi ile kullanılır. Yazı-tipi özelliklerinin bu yazı ailesi kurallarına uygunluğu belirlenir. Uyumlu olan özellikler öğede uygulanır.
  3. yazı-tipi ailesi içinde yazı-tipi yoksa, yazı-tipi kümesindeki alternatif yazı-tipi ve bunun yazı-tipi-ailesi kullanılır.
  4. Bulanan yazı-tipi geçerli ama ilgili karakter için grafik gösterim yoksa, bu durumda alternatif yazı-tipi kullanılır.
  5. Eğer yazı-tipi tümüyle yoksa tarayıcı varsayılan yazı-tipini kullanır.

Her özelliğin aranıp bulunması kuralları aşağıdaki gibidir:

  1. Yazı-tipi stili (font-style) ilk denenen olur. Eğik (italic) yazı için yazı-tipinde (italic) ya da (oblique) sözcükleri varsa geçerlidir. Eğer doğru tanım bulunamazsa yazı-tipi stili hatalı olur.
  2. Daha sonra yazı-tipi- değiştirma (font-variant) denenir. "normal" "küçük-büyük harfler" (small-caps"; tanımının aranmasını gerektirir. Aranan bulunursa tüm küçük harfler küçük büyük harflere çevrilir.
  3. yazı-ağırlığı (font-weight) daha sonra aranan özelliktir. Bu özellik hiç hataya düşmez.
  4. yazı-tipi-boyu (font-size) tarayıcı bağımlı sınırlamalara bağlı bir değerdir. Örneğin değiştirilebilen yazı-tip boyu tarayıcının kayıtlarındaki en yakın yazı-tipi boyuna yuvarlanarak görüntülenir

 

Özellik Açıklama Değerler IE F N W3C
font Bir yazı tipinin tüm tanımlarını bir komutta yazabilmek için kullanılan kısaltmadır. yazı-tipi stili
başka yazı-tipi biçimi
yazı-tipi koyuluğu
yazı-tipi boyu/satır yüksekliği
yazı-tipi ailesi
caption
icon
menu
message-box
small-caption
status-bar
4 1 4 1
font-family Öncelikli yapılmış yazı-tipi ailesi adları ve/ya da bir öğe için aile adı aile adı
soysal aile
3 1 4 1
font-size yazı-tipi boyutunu belirtir xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
uzunluk
%
3 1 4 1
font-size-adjust Bir ögenin görünen değerinin ilk seçilen yazı-tipi için x-height olmasına denir none
sayı
- - - 2
font-stretch Seçilmiş yazı-tipi ailesini daraltır ya da genişletir normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
- - - 2
font-style yazı-tipi stilini atar normal
italic
oblique
4 1 4 1
font-variant Yazının küçültülmüş büyük harflerle ya da normal yazı-tipi ile görüntülenmesi için kullanılır normal
small-caps
4 1 6 1
font-weight Yazı-tipi için koyuluk ataması yapar normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

bu kısımda yazımızın stilini belirliyoruz ve yazının hangi boyutlarda olabilcegini kalınlıgını yada italicmı olcagını buradan ayarlayabiliyoruz...

GENERATED CONTENT

 Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

 

LİST AND MARKER

Liste özelliği listenin madde işaretini değiştirmeye, ya da bir resmi bu işaret yerine kullanmaya yarar.

Liste özelliği listenin madde işaretini değiştirmeye, ya da bir resmi bu işaret yerine kullanmaya yarar.

Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape.
  W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.
Özellik Açıklama Değerler IE F N W3C
list-style Bir tanımda liste özelliğinin tüm değerlerini belirlemeye yarayan kısaltılmış işlemdir. liste-stil-tipi
liste-stil-yeri
liste-stil-resmi
4 1 6 1
list-style-image Liste madde işareti olarak resim kullanıldığını gösterir none
url
4 1 6 1
list-style-position Madde işaretinin yerini belirtir inside
outside
4 1 6 1
list-style-type Madde işaretinin tipini belirtir none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha 
4 1 4 1
marker-offset   auto
uzunluk
  1 7 2

 

 

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>

</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
 

  Bu arada css ile bir listeme yapılıyor ve listeme yapılırken madde liste işaretleri disc,circle ,square ve bi işaret kullanılmadan listeleme yapılabiliyor...

 

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin<html>
<head>
<style type="text/css">
ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}

ol.ualpha {list-style-type: upper-alpha}
</style>

</head>

<body>

<ol class="decimal">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="lroman">
<li>Coffee</li>
<li>Tea</li>

<li>Coca Cola</li>
</ol>

<ol class="uroman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="lalpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="ualpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>

</html>
 

  Burada ise listeleme yaparken madde işareti olarak karakterlerden yararlanıyoruz...

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

burda ise listeleme yaparken liste işareti olarak resimlerden faydalanıyoruz...

MARGİN

Kenar özelliği, öğelerin çevresindeki boşluğu tanımlar. İçeriği üst üste bindirmek için eksi değerler tanımlama olanağı vardır. Üst, sağ, alt ve sol kenar boşlukları ayrı özelliklerle tanımlanarak birbirlerinden bağımsız değiştirilebilir. Kısaltılmış bir kenar boşluğu özelliği hepsini topluca tanımlamakta da kullanılabilir.

Not: Netscape ve IE "body" tanımına varsayılan değer olarak 8px kenar boşluğu atar. Opera bu atamayı yapmaz, ama Opera da varsayılan değer olarak 8px dolgu kullanır. Buna göre tüm sayfa için kenar boşluğu tanımlamak isterseniz ve operada da düzgün olması için dolgu (padding) tanımı da yapmanız gerekecektir.

Destekleyen Tarayıcılar: IE: Internet Explorer, F: Firefox, N: Netscape.
  W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.
Özellik Açıklama Değerler IE F N W3C
margin Kenar tanımlarının tümünün bir arada yapıldığı kısaltılmış özelliktir. üst-kenar-boşluğu
sağ-kenar-boşluğu
alt-kenar-boşluğu
sol-kenar-boşluğu
4 1 4 1

margin-bottom

Bir öğe için alt kenar boşluğunu tanımlar auto
uzunluk
%
4 1 4 1

margin-left

Sol kenar boşluğunu belirtir auto
uzunluk
%
3 1 4 1

margin-right

Sağ kenar boşluğunu belirtir auto
uzunluk
%
3 1 4 1
margin-top Üst kenar boşluğunu tanımlar auto
uzunluk
%
3 1 4 1

 

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Yorumunuzu Ekleyin

CSS ile Web Sayfası Oluşturma

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.

70,793 Okunma 3 Yorum 11/07/2007 16:49:40 31/05/2014 16:50:32

Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

55,892 Okunma Henüz yorum yapılmamış 10/07/2007 19:48:11 29/12/2013 15:02:02

CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.

26,239 Okunma Henüz yorum yapılmamış 09/07/2007 18:20:40 29/12/2013 14:47:24

CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

26,112 Okunma Henüz yorum yapılmamış 27/01/2010 04:22:34

CSS’i Web Sayfalarına Eklemek

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)

24,947 Okunma 1 Yorum 12/07/2007 18:42:48

CSS Seçicileri

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

23,478 Okunma Henüz yorum yapılmamış 05/09/2007 23:01:25

Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

22,610 Okunma Henüz yorum yapılmamış 17/02/2010 01:08:14

CSS ile yazıcı çıktı işlemleri

Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır

21,738 Okunma Henüz yorum yapılmamış 11/07/2007 00:05:06

CSS te kullanılan 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

19,775 Okunma Henüz yorum yapılmamış 11/07/2007 00:16:08

Pseudo-sınıfları ve Pseudo-elementleri

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

19,082 Okunma Henüz yorum yapılmamış 12/07/2007 19:42:06

(X)HTML Döküman Hiyerarşisini Anlamak

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

19,034 Okunma Henüz yorum yapılmamış 09/07/2007 00:11:42

Şerit Halindeki Resimden Bölümler Almak

Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale

18,874 Okunma 1 Yorum 22/02/2008 09:18:59

CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

18,748 Okunma Henüz yorum yapılmamış 05/09/2007 01:49:34

Özellik Seçicileri(Attribute Selectors)

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

18,243 Okunma Henüz yorum yapılmamış 09/07/2007 14:20:52

Yükleniyor...