CSS Dersleri
css‘i anlatan bir 癟ok websitesi var bunlardan t羹rk癟e i癟erik sunanlar覺n覺 art覺k tan覺mayan覺n覺z yoktur… en bata Fatih Hayriolu gibi pop羹ler blog sahibi arkadalar覺m覺z olmak 羹zere css bah癟esi,css Rehberi gibi siteler bizlere css’i 繹retmek i癟in ellerinden geleni yap覺yorlar. kendilerine teekk羹r ederiz. css 繹renmek isteyenler i癟in yabanc覺 css kaynaklar覺n覺 da tan覺yal覺m.
rnek olarak css dersi veren Tizag.com‘a bir g繹z gezdirmenizi tavsiye ediyorum. buradaki i癟erik her ne kadar yabanc覺 olsa da (ingilizce) uygulad覺覺 formata az 繹nce bahsettiim turk癟e i癟erikli css sitelerinde pek rastlayam覺yoruz…
ne dersiniz b繹yle sitelerin de t羹rk癟eleri olsa ya da t羹rk癟e i癟erik sunan arkadalar覺m覺z i癟in de ilham kayna覺 olabilecek bir format sunuyor.
ilginizi 癟ekebilecek baz覺 Yabanc覺 css kaynaklar覺:
- Tizag.com: bu site sadece css deil bir 癟ok konuda bal覺klar halinde dersler veriyor…
- Html.net/css gibi bir 癟ok site bulabilirsiniz…
paylamak istediiniz yerli ve yabanc覺 css kaynaklar覺n覺 yorumlar覺 kullanarak ekleyebilirsiniz.
Css Kodlar覺n覺 K覺saltmak
Eer tasar覺mlar覺n覺zda tablo kullanm覺yorsan覺z sitenizin herhangi bir b繹l羹m羹 ziyaret edildiinde internet taray覺c覺s覺 css dosyan覺za/kodlar覺n覺za mutlaka bavuracakt覺r. Demek istediim tasar覺m覺n覺z覺n altyap覺s覺nda en s覺k bavurulan b繹l羹m css kodlar覺n覺zd覺r. Dolay覺s覺yla bu b繹l羹m羹 m羹mk羹n olabildiince ekonomik kullanmak hem sunucu bant kullan覺m覺n覺z覺 az da olsa hafifletecek hem de ziyaret癟ilerinizin sitenize ulama s羹resini asgariye indirecektir.
Asl覺nda bu konuya Site A癟覺lma S羹resini K覺saltmak bal覺kl覺 yaz覺da deinmeye 癟al覺m覺t覺m. Bu yaz覺da da biraz daha detayland覺rmaya ve daha farkl覺 ipu癟lar覺 veremeye 癟al覺aca覺m.
Gereksiz anlat覺mlar
Css kodlar覺n覺zda baz覺 b繹l羹mlerin balang覺癟 ve bitimlerine dikkat 癟ekmek amac覺yla ilgili b繹l羹mler;
/*----------------------*/
/*-----Yan menu basla-----*/
/*----------------------*/
...kodlar...
/*----------------------*/
/*-----Yan menu bitir-----*/
/*----------------------*/
eklinde yaz覺lm覺 olabilir. Asl覺na bakarsan覺z bu ekilde yaz覺m覺n tasar覺ma hi癟bir etkisi yoktur. Yaln覺zca daha anla覺l覺r olmak i癟in b繹yle bir yol se癟ilebilir. Bu kodalar覺 k覺salt覺rken;
/*Yan menu basla*/
...kodlar...
/*Yan menu bitir*/
gibi bir yaz覺m ekli yapabilirsiniz. Her iki bi癟im de ayn覺 eyi ifade etmektedir. Ancak dediim gibi dilerseniz hi癟 kullanmayabilirsiniz de.
Yaz覺 tipleri ve boyutlar覺
Sitenizin farkl覺 b繹l羹mlerinde, farkl覺 yaz覺m bi癟imlerini kullanma ihtiyac覺 duyabilirsiniz. rnek verecek olursak;
yanmenu {
font-weight: bold;
font-family: verdana, arial;
font-size: 12px;
line-height: 18px;
}
gibi basit bir kodlamada birden fazla komutu yazd覺k. Bu tarz bir kodlamay覺 k覺salt覺rken;
yanmenu {font: bold 12px/18px verdana, arial;}
yazmam覺z yeterli olacakt覺r. G繹r羹ld羹羹 gibi hem yaz覺 kal覺nl覺覺n覺, hem yaz覺 tipini, hem de yaz覺 boyutu ve sat覺r y羹ksekliini tek bir sat覺ra indirgemi olduk.
Renklendirme
Bildiiniz gibi standart renk kodlar覺;
color: #ffffff;
background: #000000;
eklinde g繹sterilir. Bu 6 haneli yaz覺m覺 3 haneye d羹羹rebilirsiniz. Yani;
color: #fff;
background: #000;
gibi. Burada yap覺lan k覺saltma ilemini birazdan vereceim ara癟lar ile ger癟ekletirebilirsiniz. 羹nk羹 bana bazen matematik problemi 癟繹zmek gibi geliyor.
er癟eveler (Border)
Tasar覺m覺n覺zda baz覺 b繹l羹mleri 癟eitli 癟er癟eve bi癟imleri i癟ine alabilirsiniz. Burada da k覺saltma ilemi ger癟ekletirebilirsiniz. Uzun bir kod;
border-top-width: 3px;
border-top-style: dotted;
border-top-color: #dddddd;
gibi olabilir. Biz burada 癟er癟evenin 羹st 癟izgisi i癟in kal覺nl覺k, stil ve renk deerlerini vermi olduk. Bunu u ekilde k覺saltabiliriz;
border-top: 3px dotted #ddd;
G繹r羹ld羹羹 gibi 3 sat覺rl覺k kodu tek bir sat覺ra indirebildik. Yine 癟er癟eve b繹l羹m羹nde yapabileceiniz bir k覺saltma u ekilde olabilir;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
Burada ilgili b繹l羹m羹n tamam覺n覺 癟er癟eveye ald覺k. K覺sa yaz覺m;
border:1px solid #000;
Yani 癟er癟evenin her kenar覺 i癟in ayn覺 deeri tekrar tekrar yazmaktansa genel bir deer bi癟mi olduk.
Margin ve Padding
Az 繹nce 癟er癟eve b繹l羹m羹nde ger癟ekletirdiimiz k覺saltma ilemini margin ve padding deerlerini verirken de uygulayabiliriz. Uzun bir koda 繹rnek;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 5px;
Bu yaz覺mda her y繹n i癟in deerler 4 sat覺rda yaz覺lm覺. Farkl覺 deerler olsa da bunlar覺 tek bir sat覺rda u ekilde birletirebiliriz;
margin: 20px 15px 20px 5px;
Bir de ayr覺 ayr覺 繹yle bir yaz覺m bi癟imi olabilir;
padding-left:10px;
padding-right:10px;
padding-top: 0;
padding-bottom: 0;
Bunu k覺saltmak i癟in de kullanaca覺m覺z kod;
padding:0 10px;
Burada ger癟ekletirdiimiz k覺saltma ilemini biraz daha a癟覺klayal覺m. Tek sat覺r olarak yazd覺覺m覺z her 4 deer girintinin yap覺laca覺 bir y繹n羹 ifade etmektedir. rnekteki ikili deerde 0 olan ilki alt ve 羹st羹, 10 olan ise sa ve solu ifade eder.
Eer;
margin: 20px 15px 10px;
Yazarsak 20 ile 羹st羹, 15 ile hem sa覺 hem solu, 10 ile de alt覺 belirtiriz. Bir dier bi癟im;
margin: 20px;
Burada da her y繹n i癟in 20 deerini vermi olduk. Bir k羹癟羹k ipucu da 0 olan deerlerin ard覺ndan px (piksel) yazman覺za gerek yok.
Ayn覺 繹zelliklere sahip ba覺ms覺z b繹l羹mler
Konuyu hemen 繹rneklendirelim;
a:link {
color:#000;
text-decoration:underline;
}
a:visited {
color:#000;
text-decoration:underline;
}
G繹r羹ld羹羹 gibi sitemizdeki balant覺lar覺 bi癟imlendirdik. Ancak hem normal bir balant覺n覺n, hem de ayn覺 ziyaret癟inin daha 繹nce kulland覺覺 bir balant覺n覺n ayn覺 bi癟ime sahip olmas覺 ramen farkl覺 iki b繹l羹m olarak yazd覺k. Kodlar覺 u ekilde k覺saltabiliriz;
a:link, a:visited {
color:#000;
text-decoration:underline;
}
Ayn覺 bi癟imlerdeki farkl覺 b繹l羹mleri bu ekilde araya virg羹l koyarak tek bir seferde yazmam覺z m羹mk羹n.
Tek sat覺r, birden fazla sat覺r
Kodlar覺n覺z覺 tek sat覺rda toplamak belki durumu biraz zor anla覺l覺r yap覺yor ancak bu yolla da tasarruf edebilirsiniz. Yani;
bolum {
margin: 10px 0;
float: left;
}
Kodunu
bolum {margin:10px 0;float:left;}
eklinde yazman覺z m羹mk羹n. Ancak dediim gibi g繹r羹n羹m a癟覺s覺ndan biraz kar覺覺k durabilir.
Bu ilemler elbette 癟ok b羹y羹k kazan覺mlar deil ancak kodlar覺n覺z i癟in ger癟ekten faydal覺. Birka癟 kilobaytl覺k dosyalarda k覺saltma yapmak pek g繹ze g繹r羹nmese de 20-25 kilobaytl覺k kodlarda yapaca覺n覺z k覺saltmalar olumlu ekilde size geri d繹necektir.
Css k覺saltma ara癟lar覺
Buraya kadar olan b繹l羹mde kodlar覺n覺zda k覺saltma yapabileceiniz kimi noktalar覺 ele almalaya 癟al覺t覺m. imdi de kodlar覺n覺z覺 otomatik olarak k覺saltan kimi ara癟lar覺 veremeye 癟al覺aca覺m. Bu ara癟lar, sizin belirleyeceiniz k覺staslar ile (yukar覺da bir癟ouna deindik) kodlar覺n覺zda k覺saltma yapman覺za olanak veriyor. Ancak k覺saltmay覺 yapmdan 繹nce kodlar覺n覺z覺 bir kenara kaydetmenizi tavsiye ederim. Yeni kodlarla yapaca覺n覺z 繹nizlemelerde problem 癟覺kmas覺 halinde kaynak kodunuzu sorunlu b繹l羹mlerde kullanabilirsiniz. Ayr覺ca css kodlar覺n覺z覺n boyutunu da not etmeyi unutmay覺n. 羹nk羹 baz覺 durumlarda optimize edilmi kodlar orijinal kodlar覺n覺zdan daha uzun olabiliyor. rnein ben olduk癟a k覺sa yazm覺覺m ki bu ara癟lar覺n baz覺lar覺n覺 denediimde kod boyutunda art覺 oldu.
zenle se癟ilmi dersler
noupe sitesinde css, ajax, javascript, flash, Photoshop , illustrasyon, web tasar覺m ile ilgili birbirinden g羹zel dersler 繹zenle se癟ilmi, sizleri bekliyor.
css, eriilebilirlik ve standartlar 羹zerine
burada g繹rd羹羹m linklerde web tasar覺mc覺lar覺 i癟in css (dersleri) temalar覺, web 2.0 hakk覺nda , ajax, eriilebilirlik ve standartlar 羹zerine bilgiler, makaleler, 繹rnekler bulunuyor.
