Genel Bilgi - Tanım ve Kurallar - Hızlı Kurs
Markanız için 300X300 alan.
Bu CSS hızlı kursu CSS'in yazım kurallarını, belgeye eklenmesini ve CSS ile ilgili belli başlı temel bilgileri özet olarak öğrenerek dili (CSS özelliklerini) öğrenmeye hemen başlamak isteyenler için derlendi.
Unutmayın ki CSS dilinin temelini iyi almak yerine hızlı kurs ile geçiştirirseniz bu durum ileride uygulama sırasında size zaman kaybettirecek durumların ortaya çıkmasına neden olacaktır.
CSS öğrenmeye başlamadan önce, HTML'nin ne olduğunun bilinmesi gerekir! Bk. HTML Belge.
Köprü metin sayfalarında ilk kod olan <!doctype html>'yi yanlış yazarsanız, hiç yazmazsanız ya da öncesinde herhangi bir şey yazılmışsa sayfa garip mod'ta yorumlanır ve CSS kodları olması gerekenden ayrı davranabilir.
<!doctype html> HTML5 (yeni nesil) için kullanılır.
CSS Belgeye Nasıl Uygulanır ? - Hızlı Kurs
4 farklı biçimde!
<head></head>etiketleri arasında bağlantı yoluyla<link rel="stylesheet" type="text/css" href="https://SonDevrim.com/tasarım/SonDevrim.css">@importyoluyla (Tarayıcının kalıcı belleğine alınır. Bellekten okunduğundan ötürü güncellenmesi pratik değildir.)<head></head>etiketleri arasında<style>etiketi içinde:<head> <style> body{color:red;} </style> </head>- Doğrudan köprü metine gömerek:
<span style="color:red;">...<span>
CSS kullanırken ilk seçiminiz 1 numara olsun. Burada yazan kodu tüm belgelerinize (sayfalarınıza) ekleyebilirsiniz.
Böylece bir CSS dosyasını değiştirmekle birden çok belgeye etki edebilirsiniz.
Bazı belgelerde (sayfalarda) değişikliğe gidiyorsanız, bu belgelerde <style> etiketi kullanın (3 numaralı seçenek). Böylelikle bazı belgelerde değişikliğe gidebilirsiniz.
3 numaralı kuralı uyguladığınız belgelerde de aykırı davranması gereken bir etiket varsa ve bu etikete nokta atışı yapmak isterseniz 4 numaralı kuralı uygulayın.
Bu kuralları uygulayarak 4 numaralı kuralın kullanılmadığı belgeleri ziyaret edenlere biçim dosyanızla birlikte yalnızca az sayıda belgeyi hedefleyen kuralları göndermemeniz şu anlama gelir:
Daha küçük bir CSS dosyanız (.css) olur ve bu size hem bant genişliğinden fayda sağlatır hem de CSS dosyanız derli toplu (daha okunaklı) durur.
Yeni başlayanlar @import'tan şimdilik uzak dursun!
CSS Sıfırlama - Eric Meyer Yöntemi
Tarayıcılar belgeyi açarken size hiç sormadan bazı etiketlere bazı değerler uygularlar.
Bu durum yaptığınız tasarımlar arasında tarayıcıdan tarayıcıya ayrıca bir fark oluşmasına neden olur.
Etiketleri öntanımlı değerlerine döndürmeniz tarayıcı uyumu konusunda oldukça kolaylık sağlar.
CSS sıfırlama için Eric Meyer yöntemi:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display: block;
}
body{
line-height: 1;
}
ol,ul{
list-style: none;
}
blockquote,q{
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after{
content: '';content: none;
}
table{
border-collapse: collapse;border-spacing: 0;
}Bu kodların uygulanmasıyla tarayıcıdan tarayıcıya oluşan farklar ortadan kalktığından ötürü tasarımınızı geliştirmeniz daha kolay olacaktır.
Yazım Kuralları - Hızlı Kurs
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SonDevrim HTML Dersleri, İpuçları ve Örnekleri</title>
<link rel="stylesheet" type="text/css" href="https://SonDevrim.com/tasarım/SonDevrim.css">
<style type="text/css">
html{font-size:15px;color:red;}
body{background-color:#f00;}
</style>
</head>
<body style="margin:0;padding:0;">
<p>İçerik buraya geliyor...</p>
</body>
</html>margin | padding: Yukarı Sağ Aşağı Sol; - margin | padding: 5px 7px 0px 3px;
border: Genişlik Tür Renk; - border: 1px solid #f00;
doğrudur.
margin: 1px 1em 1px 0;
yanlış değildir ama bu biçimde kullanılması önerilmez.
rem, em, %, px gibi farklı birimleri birlikte kullanmayın. Bu tür kullanımlar yasak değil ancak birimlerin (yoğun olarak) böyle karışık kullanılması tarayıcı sağlama işlemini (render) gerçekleştirirken tarayıcıyı yorar.
margin: 0; ve padding: 0;
Ögenin (sırasıyla) satır dışı ve satır içi boşluklarını kaldırırlar.
margin | padding: yukarı sağ aşağı sol;
Yukarı değeri, aşağı değeri yazılmadığında aşağı değeri için de geçerlidir.
Sağ değeri, sol değeri yazılmadığında sol değeri için de geçerlidir.
Eğer margin: yukarı sağ; ise --> margin: yukarı sağ yukarı sağ uygulanır.
margin: X Y; <--> margin: X Y X Y; (margin: X Y Z; = margin: X Y Z Y;)
margin: 3px 5px; <--> margin: 3px 5px 3px 5px;
(margin: 11px 13px 17px; = margin: 11px 13px 17px 13px;)Diğer durumlar:
margin: 1px; <--> margin: 1px 1px 1px 1px;Baskınlık - Hızlı Kurs
Genel olarak: Sonra yazılan değer geçerlidir!
İki seçici de aynı baskınlıktaysa sonra yazılan geçerlidir. Ancak (renklerde olduğu gibi) önce yazılan renk değeri sonrakine göre baskınsa önceki geçerlidir!
<head> etiketi içindeki <link> etiketi ile gelen tasarım, <style> etiketiile gelen tasarımdan sonra gelirse sonra yazılan geçerlidir!
body{color: red;color: blue;} Mavi (blue) renk geçerlidir.
body, siyah kimliğine iye ise body#siyah{color:black;} siyah geçerli olur. Böyle bir durumda, body.yüklü{color: yellow;} <body> etiketi yüklü sınıfına iye olduğunda sarı (yellow) geçerli olmayacaktır.
Sarı renk sonra tanımlanmış olmasına rağmen kimlikler (#kimlik) sınıflara (.sınıf) göre daha baskındır! Bu yüzden sarı renk geçerli olmaz.
html>body.yüklü{color: green;}, body.yüklü{color: yellow;} seçicisine göre dahda baskındır! Geçerli renk yeşildir (green).
Daha az baskından (yukarıdan) baskına (aşağıya) doğru:
1 numara ve <style> etiketi içinde yazılan 2-6 arası numaralar aynı baskınlıktadır.
Aşağıdaki örnekler pratiklik açısından, sayfada olması gereken kullanım sırasına göre (1 / 2-6 / 7) yazılmışlardır.
<link rel="stylesheet" type="text/css" href="https://SonDevrim.com/tasarım/SonDevrim.css">body{color: red;}body.yüklü{color: yellow;}html>body.yüklü{color: aqua;}body#siyah{color: black;}html>body#mor{color: purple;}<body style="color: orange;"></body>
Seçiciler - Hızlı Kurs
Etiket adlarının her biri seçicidir.
Belge için :root, sayfa için html, gövde için body, kutular için div, paragraflar için p, satır içi etiketler için span, bölümler için section, görseller için img, bağlantılar için a ve benzeri kullanılabilir.
html{color: red;}body{color: green;}div{color: blue;}section{color: navy;}p{color: red;}span{color: white;}a{color: purple;}
başlık sınıflı kutunun çocukları olan p'leri seçmek için: div.başlık>p
uyarı kimlikli paragrafın çocukları olan satır içi (span) etiketleri seçmek için p#uyarı>span
kullanılabilir.
div.başlık>p ile div.başlık p arasında fark vardır. İlkinde p, div.başlık seçicisinin çocuğu ise geçerlidir. İkincisinde ise p, div.başlık seçicisinin çocuğu ayrıca çocuğunun çocuğunun çocuğunun çocuğu olduğu yani div.başlık seçicisinin herhangi bir dereceden alt soyu (torunu) olduğu durumlarda da geçerldir.
Arada bu biçimde boşluk bırakarak seçici tanımlamak tarayıcıları yorar. Çalışması en uzun süren seçicilerdir.
img+span ile img etiketinden sonra gelen tüm satır içi (span) etiketleri seçersiniz.
Tüm etiketler için * kullanılır.
section>p ~ pre seçicisi ile <section> etiketi'nin içindeki <p> etiketi'den sonra gelen <pre> etiketi seçiliyor.
Kimlik (#) ve sınıf (.) seçicilerinde büyük küçük tamga (harf - karakter) ayrımı vardır!
header#BelgeGirişi{/* Kimlik Seçici */}
h1.anaBaşlık{/* Sınıf Seçici */}
h1[data-örnek]{/* Öznitelik Seçici */}Çok fazla CSS Seçicileri var. CSS hızlı kurs ile yetinmeyin.
Yorumlar - Hızlı Kurs
Tek Satırlık Yorum Satırı:
/* Bu iki kod arasında duran hiç bir şey tarayıcılar tarafından yorumlanmaz. Çünkü bu not (tek satırlık) yorum satırıdır. */Çok Satırlı Yorum Satırı:
/*
Bu iki kod arasında duran hiç bir şey tarayıcılar tarafından yorumlanmaz. Çünkü bu not (tek satırlık) yorum satırıdır.
Çok Satırlı
Not Yazımı
*/Yorumlar süslü parantez ({}) ile başlayıp biten blokların dışına yazılmalıdır. Blokların içine yazılan yorumlar tarayıcıları yavaşlatır.
.örnek{color: purple;} /* Bu yorum blokun dışına yazıldı. */Sonuç - Hızlı Kurs
Buradaki bilgiler üstün körü verilmiştir. Hızlı kurs ile yetinmek yerine CSS eğitimini en baştan almanız sizin yararınızadır.