-SENİDUNYAN- Webmaster Sitesi
Y13
Merhaba,Bu metin; okumak için çok tembel olup da avını arayanlar içindir.
Ve template problemlerinizin azemiye inmesi ayrıca optimize
sorunlarınızın azalmasını taahhüt eder.
Not : Anlatımda eksiklik gören arkadaşlarım ,başlığa katkıda bulunsun lütfen.
Bu başlıkta nelerden faydalanabiliriz ?
+Link,liste,katman,font,text,imleç,zemin,tablo,kaydırma çubuğu css ve
ingilizce terimleri
+Bir tasarımda css ve htlm taglarının hazırlanışı
BEDAVA-SİTEM CSS DESİNG TASARIMI ;
CSS KODU KISMI
Tasarımınıza etki edecek komutları her zaman incelemenizde fayda var.
Örneğin;
}
#asd {
color:#FFFFFF;
background: #000000 none top right repeat-x;
} bu parantez tagın başlangıcıdır. Yada html için
'<' tag başlangıcı '>' tag kapanışıdır. Çok basitçe kendine etki eden
bu tagı örnek verebiliriz <center> yada <div> ... </div>
Küçük bilgi verdikten sonra geri dönelim...
*Bir tasarım /* yapımcı bilgileri*/ şeklinde başlar ve */ ...*/ arasını
ziyaretçi göremez.
*body ->ziyaretçi gördüğü tüm içeriği bu etikette bulur.Bu etiket içinde
bazı taglarla tasarımın genel görünümü (arkaplan gibi) belirlenir
a {
text özellikleri
}
a:visited {
link,text vs özellikleri
}
...ımg,padding,hover tagları yukarıdaki gibi biçimlendirilir.
*Sonra body içindeki etiketler (tablolar) biçimlenir
h1 {
yazı
font renk,özellikleri
}
yine h1 yukarıdaki gibi(a:visited,hover)sıralanır.Varsa diğer başlıklar
(hx çoğaltılabilir)
(h1 en büyük başlık h6 en küçük başlıktır.)
Ek Bilgiler :
tr : satır
td : sütun u ifade eder
UL bir liste başlıyor demektir...
padding, '' padding-right : ''
border, '' border-top : ''
etiketleri şeklinde görevlendirilebilir(çoğaltılabilir/ -left, vs)
Ayrıca Css ye etki oluşturacak düzenlemeleri;
(Öneğin free tasarımınızın boyutunu büyültmek için;)
repeat-y; resimi enine uzatır,
repeat-x; resimi boyuna uzatır.
no-repeat; resim aynen kalır
bunu top,left,right diye aynı şekilde çoğaltabilirsiniz
top right repeat-x;
vb şeklinde de olur.
Ve body etiketinde bazı değerleri değiştirmeniz gerekiyor .Örneğin
head (başlık resmi) boyutunu değiştirmelisiniz
Width:En
Height :Yükseklik
şeklinde ayarlayabilirsiniz.
Azami bilmeniz gereken terimler :
body: Gövdenin arka planını rengini vs ziyaretçinin gördüğü herşey
burada tanımlanır.
font-family: Yazı çeşidini belirler.(Arial , Comic)
font-style: Yazının normal veya sağa yatmasını sağlar
font-variant: Yazının normal veya tümünün büyük harfler olmasını sağlar
font-weight: Yazının kalınlık-inceliğini ayarlar
Font :yazı karakteri
color:Tabloda geçen karakterlerin rengini belirler
background :Arkasına gelen komutun arkaplanını ayarlar
margin:Toblo ile pencere kenarları mesafesindeki boşluğu ayarlar
padding:Tablo kenarlarıyla tablo içeriği mesafesini ayarlar
text-decoration :Linkin altının veya üstünün çizgili olup olmayacağını ayarlar
a:visited :Linkin tıklandıktan sonraki halidir
a:hover :Linkin imleç üzerine geldiğindeki durumudur.
underline : Karakterlerin altından çizili olmasını sağlar
border: Linkin etrafında kenarlık oluşturur.
text-align: Karakterlerin dikey olarak nasıl hizalanacağını ayarlar
border-bottom: Tablonun alt kenarının şeklini ayarlar
letter-spacing :Karakterlerin arasında bırakılacak karakterleri belirler.
bottom:Bu komuttan önce gelen tagın alt kısmını ve durumunu ayarlar
relative:Bir önceki katmanla yerinin aynı olduğunu belirler
description : Bir tagın arkasına gelir ve Tanımlar(headerimg .description gibi)
display: Linki içeren herhangibir bölümün istenilen alanın seçilmesini sağlar
overflow: Katman genişliği veya yüksekliğinin sığmayan kısımlarının
durumunu ayarlar
transform:dönüştürmek
uppercase:Karakterlerin büyük harfle olmasını sağlar
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından
oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından
oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.
KATMAN ÖZELLİKLERİ
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak
belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına
ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin
görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.
1 değeri katmanın en altta olacağını belirtir.
TürkMayası
|
