Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
4. Kenarlıklar
border-width: thin, medium, thick veya
sayısal değer (e.g. 10px)
border-color: renk isimleri veya RGB deÄŸer
border-style: none, hidden, dotted,
dashed, solid, double, groove, ridge,
inset, outset
Her bir özellik sol, sağ, üst ve alt kenar için ayrı
ayrı tanımlanabilir.
border-top-style, border-left-color, …
4
5. Kenarlık Steno Özellikleri
border: kenarlık özelliklerini bir kerede
ayarlamak için steno kuralı:
aşağıdakine eş değerdir:
Steno kuralı tüm kenarlar için uygulanabilir:
border-top, border-left, border-right,
border-bottom
When to avoid border:0 5
border: 1px solid red
border-width:1px;
border-color:red;
border-style:solid;
6. CSS3 – Kenarlık resmi
Normal kenarlık yerine görüntü kullanılmasına
imkan verir.
Örnek:
border-image özeliiği 3 bölümden oluşur:
Daha detaylı açıklama:
http://css-tricks.com/6883-understanding-
border-image/
6
border-image: url(/slideshow/css-sunum-bileenleri/53859680/border-image.png) 25% repeat;
19. CSS 3 Esnek Kutu Model
Sayfa yerleşimi ile ilgili bir özelliktir.
"display" özelliği için yeni değerler:
flexbox
inline-flexbox
Halen geliÅŸtirilmesi devam ediyor.
Çoğu tarayıcıda desteklenmiyor.
19
27. Styles for Lists
Liste özellikleri liste bileşenlerinin nasıl
görüntüleneceğini belirlemek amacıyla
kullanılır.
Liste bileşen sembolünü değiştirir.
Normal stiller:
List-style-type
<ol>için değerler: circle, square,…
<ul>için değerler: upper-roman, lower-alpha
Her ikisi için: noneul
{
list-style-type:none;
}
28. Ä°m Olarak Resimler
Madde imi olarak resim kullanılabilir.
list-style-image
Tüm tarayıcılarda aynı görüntülenemeyebilir.
IE im ve içerik arasında daha az boşluk bırakır.
Steno özellik
ul
{
list-style-image: url(/slideshow/css-sunum-bileenleri/53859680/&);
}
ul
{
list-style: bullet url(/slideshow/css-sunum-bileenleri/53859680/&);
}
29. Ä°m Olarak Resimler- Alternatif
En soldakine arkaplan yerleÅŸtirilebilir.
Resimli im gibi görünür.
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(/slideshow/css-sunum-bileenleri/53859680/"images/blue-dot.png");
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
31. Navigasyon OluÅŸturmak
Bir navigasyonda ne bulunur?
Sağdan sola yerleştirilmiş bazı düğmeler
Ya da yukarıdan aşağıya
GeniÅŸletilebilir yapmak gerekir.
Bir liste yaratın
Yeni nav bileÅŸeni kolayca ekleyin