{"id":33288,"date":"2022-04-28T10:45:00","date_gmt":"2022-04-28T07:45:00","guid":{"rendered":"https:\/\/www.natro.com\/blog\/?p=33288"},"modified":"2022-04-29T11:32:00","modified_gmt":"2022-04-29T08:32:00","slug":"css-nedir-css-kodlari-nelerdir","status":"publish","type":"post","link":"https:\/\/www.natro.com\/blog\/css-nedir-css-kodlari-nelerdir\/","title":{"rendered":"CSS Nedir? CSS Kodlar\u0131 Nelerdir?"},"content":{"rendered":"\n

CSS (Cascading Steel Sheets),<\/strong> HTML elementlerinin rengini, boyutunu, arka plan\u0131n\u0131 de\u011fi\u015ftirmenize olanak sa\u011flayan bi\u00e7imlendirme dilidir. Bir\u00e7ok \u00f6n u\u00e7 geli\u015ftirici ve tasar\u0131mc\u0131 web siteleri geli\u015ftirirken bu dili kullan\u0131r. CSS, bir programlama dili de\u011fildir. Bu \u015fu demektir, CSS ile bir form olu\u015fturup o formun \u00e7\u0131kt\u0131lar\u0131n\u0131 sunucuya g\u00f6nderemez, veri i\u015fleyemezsiniz. CSS ile yapabilece\u011finiz \u015fey, olu\u015fturulmu\u015f bir formun \u201cg\u00f6nder\u201d butonunun boyutunu, arka plan rengini, marj\u0131n\u0131 ayarlamakt\u0131r.<\/p>\n\n\n\n

CSS\u2019i HTML elementlerini \u015fekillendirmek i\u00e7in kullan\u0131yorsak, CSS\u2019i anlamadan \u00f6nce HTML nedir, ba\u015fl\u0131ca elementler nedir, bunlar\u0131 anlamam\u0131z gerekebilir.<\/p>\n\n\n\n

HTML Nedir? S\u0131kl\u0131kla Kullan\u0131lan HTML Elementleri Nelerdir?<\/strong><\/span><\/h2>\n\n\n\n
HTML (Hypertext Markup Lnnguage) yani Hiper Metin \u0130\u015fleme Dili, web sitelerindeki i\u00e7eri\u011fin g\u00f6rselle\u015ftirilmesi ve aktar\u0131lmas\u0131 i\u00e7in taray\u0131c\u0131lar\u0131n okudu\u011fu bir dildir. \u0130nternette okudu\u011funuz \u00e7o\u011fu paragraf HTML\u2019deki \u201c
\u201d elementi ile size aktar\u0131l\u0131r. \u00c7o\u011fu ba\u015fl\u0131k i\u00e7in HTML\u2019deki ba\u015fl\u0131k etiketleri(
,
,
,
,
,
) kullan\u0131l\u0131r. Bir web sitesinde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz basit bir tablo, muhtemelen \u201c\u201d elementiyle olu\u015fturulmu\u015ftur. Kulland\u0131\u011f\u0131n\u0131z taray\u0131c\u0131, bu elementler sayesinde size i\u00e7eri\u011fi do\u011fru bir \u015fekilde aktar\u0131r. Yani taray\u0131c\u0131 \u201c
<\/p>\u201d a\u00e7\u0131l\u0131\u015f ve kapan\u0131\u015f etiketleri i\u00e7indeki metni okur, size bir paragraf olarak iletir.<\/p>\n\n\n\n
HTML\u2019deki elementler tabii ki bunlarla s\u0131n\u0131rl\u0131 de\u011fildir. Al\u0131nt\u0131lar i\u00e7in s\u0131kl\u0131kla \u201c
\u201d kullan\u0131l\u0131r, listeler i\u00e7in \u201c
\u201d ya da \u201c
\u201d etiketleri devreye girer. Web sitesinin sabit ba\u015fl\u0131\u011f\u0131(header) ve alt k\u0131sm\u0131(footer) d\u0131\u015f\u0131ndaki neredeyse t\u00fcm elementler bir \u201c\u201d etiketinin i\u00e7inde kullan\u0131l\u0131r.<\/p>\n\n\n\n
T\u00fcm bu elementlerin nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fine karar vermek istedi\u011fimiz anda ise devreye CSS girer.<\/p>\n\n\n\n
\u015eu An CSS Yazabiliriz!<\/strong><\/p>\n\n\n\n
Diz\u00fcst\u00fc ya da masa\u00fcst\u00fc bilgisayar\u0131n\u0131zda, fare ile herhangi bir metnin \u00fczerine sa\u011f t\u0131klay\u0131p \u201cincele\u201d k\u0131sm\u0131na t\u0131klad\u0131\u011f\u0131n\u0131zda, taray\u0131c\u0131n\u0131z size okudu\u011funuz metnin html versiyonunu g\u00f6steren bir ekran \u00e7\u0131karacakt\u0131r. Bu ekran\u0131 muhtemelen daha \u00f6nce birka\u00e7 kere yanl\u0131\u015fl\u0131kla a\u00e7t\u0131n\u0131z ve ne oldu\u011funu anlamadan hemen kapatt\u0131n\u0131z. \u0130\u015fte \u015fimdi, bu ekran\u0131 kapatmadan ve yeni bir HTML d\u00f6k\u00fcman\u0131 olu\u015fturmadan CSS\u2019in ne i\u015fe yarad\u0131\u011f\u0131n\u0131 anlayacaks\u0131n\u0131z. Birlikte bu ekran arac\u0131l\u0131\u011f\u0131yla birka\u00e7 CSS kodu yazaca\u011f\u0131z.<\/p>\n\n\n\n
Natro.com\u2019un ana sayfas\u0131n\u0131 yeni bir sekmede a\u00e7arak CSS yazmaya ba\u015flayaca\u011f\u0131z. Sayfay\u0131 yeni sekmede a\u00e7t\u0131ktan sonra, \u201cWeb Siteniz ve Kurumsal \u0130htiya\u00e7lar\u0131n\u0131z \u0130\u00e7in \u00c7\u00f6z\u00fcmler\u201d alan\u0131na sa\u011f t\u0131klay\u0131p \u201cincele\u201d butonuna bas\u0131n. Art\u0131k natro.com\u2019un ana sayfas\u0131ndaki bu ba\u015fl\u0131\u011f\u0131n HTML ve CSS kodunu g\u00f6r\u00fcyor olmal\u0131s\u0131n\u0131z. \u201cElements\u201d ba\u015fl\u0131\u011f\u0131 alt\u0131ndaki kodlar HTML kodlar\u0131, \u201cStyles\u201d ba\u015fl\u0131\u011f\u0131 alt\u0131ndaki t\u00fcm kodlar CSS kodlar\u0131d\u0131r.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
\u015eimdi bu ba\u015fl\u0131\u011f\u0131n nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fine karar verebiliriz. Ba\u015fl\u0131\u011f\u0131m\u0131z \u201ch2\u201d elementiyle kodlanm\u0131\u015f. \u00d6yleyse \u201cStyles\u201d ba\u015fl\u0131\u011f\u0131n\u0131n alt\u0131ndaki \u201ch2\u201d elementini bulmam\u0131z gerekiyor. Biraz a\u015fa\u011f\u0131ya inince onu hemen g\u00f6receksiniz. Onu bulduktan sonra, alt\u0131na bu ba\u015fl\u0131\u011f\u0131n rengini belli edecek kodu yazabiliriz. Rengin mavi olmas\u0131n\u0131 istedi\u011fimizi farz edelim. Elementin alt\u0131na \u015fu kodu yazmam\u0131z yeterli \u201ccolor: blue !important;\u201d.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Renk de\u011fi\u015fmi\u015f olmal\u0131. \u00c7\u00fcnk\u00fc CSS ile taray\u0131c\u0131ya t\u00fcm \u201ch2\u201d elementlerinin renginin mavi olmas\u0131 gerekti\u011fini belirttik. Ba\u015fka bir CSS kodunu \u00f6ncelik olarak kabul etmesin diye de bizim belirledi\u011fimiz rengin \u00f6nemli (important) oldu\u011funu s\u00f6yledik. Sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a az \u00f6nce siyah olan birka\u00e7 ba\u015fl\u0131\u011f\u0131n daha, mavi oldu\u011funu g\u00f6receksiniz. \u00c7\u00fcnk\u00fc yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklik b\u00fct\u00fcn \u201ch2\u201d elementleri i\u00e7in ge\u00e7erliydi.<\/p>\n\n\n\n
Sayfay\u0131 yeniledi\u011finizde bu de\u011fi\u015fikli\u011fin kayboldu\u011funu g\u00f6receksiniz. Bunun sebebi, natro.com \u00fczerindeki kodlarda de\u011fi\u015fiklik yapacak yetkinizin olmamas\u0131yla ilgilidir. Az \u00f6nce yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fiklik, test etmek i\u00e7in sadece sizin g\u00f6rd\u00fc\u011f\u00fcn\u00fcz bir de\u011fi\u015fiklikti. E\u011fer yetkiniz olan bir web sitesinde bu tip CSS denemeleri yapmak isterseniz, rengini de\u011fi\u015ftirdi\u011finiz ba\u015fl\u0131\u011f\u0131n alt\u0131ndaki W<\/a>e<\/a>b Hosting<\/a><\/strong> paketine g\u00f6z atman\u0131z sizin i\u00e7in faydal\u0131 olacakt\u0131r. Bu \u015fekilde kiralad\u0131\u011f\u0131n\u0131z hostingte bulunan web sitenizde istedi\u011finiz kadar CSS kodu yazarak de\u011fi\u015fiklik yapabilirsiniz. \u00dcstelik bu de\u011fi\u015fiklikler, web siteniz \u00fczerinde tam kontrole sahip olaca\u011f\u0131n\u0131z i\u00e7in, sayfay\u0131 yeniledi\u011finizde kaybolmayacakt\u0131r.<\/p>\n\n\n\n
CSS Nas\u0131l Kullan\u0131l\u0131r?<\/strong><\/h2>\n\n\n\n
Az \u00f6nce, CSS ile bir element tipine (h2) de\u011fi\u015fiklik uygulad\u0131k. Bu y\u00fczden sadece de\u011fi\u015fiklik yapmak istedi\u011fimiz ba\u015fl\u0131k de\u011fil, ayn\u0131 element tipine ait di\u011fer ba\u015fl\u0131klar\u0131n da rengi de\u011fi\u015fti. Peki, sadece tek bir ba\u015fl\u0131\u011fa uygulamak isteseydik? Bunu iki \u015fekilde yapabiliriz:<\/p>\n\n\n\n
Sadece de\u011fi\u015fiklik yapmak istedi\u011fimiz HTML elementinin i\u00e7ine CSS yazarak<\/li>
HTML elementine benzersiz kimlik (ID) atay\u0131p, o kimli\u011fe CSS yazarak<\/li><\/ol>\n\n\n\n
Asl\u0131nda bu iki yol CSS\u2019i kullanman\u0131n \u00fc\u00e7 farkl\u0131 metodundan iki tanesidir. \u00dc\u00e7\u00fcnc\u00fcye daha sonra de\u011finece\u011fiz.<\/p>\n\n\n\n
\u0130lk Metot: Inline (Sat\u0131r \u0130\u00e7i) CSS<\/strong><\/h3>\n\n\n\n
Inline CSS, yukar\u0131da bahsetti\u011fimiz HTML elementinin i\u00e7ine CSS yazma metodudur. Uygulad\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklik, sadece uygulad\u0131\u011f\u0131m\u0131z element i\u00e7in ge\u00e7erli olur. E\u011fer Natro ana sayfas\u0131n\u0131 hala kapatmad\u0131ysan\u0131z, \u015fu an yine i\u015fimize yarayacak. Sayfaya geri d\u00f6nmemiz ve de\u011fi\u015fiklik yapmak istedi\u011fimiz ba\u015fl\u0131\u011f\u0131n \u00fczerine sa\u011f t\u0131klay\u0131p \u201cincele\/denetle<\/strong>\u201d butonuna basarak, Elements<\/strong> sayfas\u0131n\u0131 yeniden a\u00e7mam\u0131z gerekiyor. Bu yol i\u00e7in, \u201cStyles<\/strong>\u201d b\u00f6l\u00fcm\u00fcne ihtiyac\u0131m\u0131z yok. Elements k\u0131sm\u0131 bizim i\u00e7in yeterli. Elementin i\u00e7ine \u201cstyle<\/strong>\u201d \u00f6z niteli\u011fi (attribute) tan\u0131mlayarak CSS yazaca\u011f\u0131z. De\u011fi\u015fiklik yapmak istedi\u011finiz ba\u015fl\u0131\u011f\u0131n HTML etiketine \u00e7ift t\u0131klay\u0131p i\u00e7ine \u015funu yazabilirsiniz: \u201cstyle=\u201dcolor:blue<\/strong>\u201d.<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Yine rengi de\u011fi\u015ftirmeyi ba\u015fard\u0131k. Fakat bir farkla: \u015eu an uygulad\u0131\u011f\u0131m\u0131z de\u011fi\u015fiklik, sadece style \u00f6z niteli\u011fi ile yazd\u0131\u011f\u0131m\u0131z elemente uyguland\u0131. A\u015fa\u011f\u0131ya kayd\u0131rd\u0131\u011f\u0131n\u0131zda az \u00f6nceki \u00f6rnekte oldu\u011fu gibi di\u011fer ba\u015fl\u0131klar\u0131n renginin de\u011fi\u015fti\u011fini g\u00f6remezsiniz. Peki ayn\u0131 i\u015flemi, HTML elementinin i\u00e7ine yazmadan yapamaz m\u0131y\u0131z? Yapar\u0131z, hem de hi\u00e7 zorlanmadan.<\/p>\n\n\n\n
\u0130kinci Metot: External (Harici) CSS<\/strong><\/h3>\n\n\n\n
External CSS metodu, daha en ba\u015fta uygulad\u0131\u011f\u0131m\u0131z y\u00f6ntemin bizzat kendisidir. CSS kodunu HTML elementinin i\u00e7inde de\u011fil, d\u0131\u015f\u0131nda tan\u0131mlar\u0131z. Fark etmi\u015fsinizdir, en ba\u015fta rengi de\u011fi\u015ftirmek i\u00e7in \u201c!important\u201d tan\u0131m\u0131 yapm\u0131\u015ft\u0131k. Ancak elementin i\u00e7ine kod yazarken, bunu yapmaya gerek duymad\u0131k. Bunun sebebi, taray\u0131c\u0131n\u0131n HTML elementinin i\u00e7indeki CSS\u2019i \u201c\u00f6ncelik\u201d olarak alg\u0131lamas\u0131d\u0131r. Tabii \u00f6nceli\u011fi belirlemenin tek yolu \u201c!important\u201d yazmak de\u011fil. Bir yol daha var, \u00e7ok daha net \u00e7ok daha temiz bir yol. O da ID kullanmak.<\/p>\n\n\n\n
Ana sayfaya geri d\u00f6nmemiz gerekiyor. Yapaca\u011f\u0131m\u0131z ilk \u015fey, az \u00f6nceki gibi bir \u201cstyle\u201d \u00f6z niteli\u011fi atamak de\u011fil, \u201cid\u201d \u00f6z niteli\u011fi atamak olacak. Bu sayede, taray\u0131c\u0131m\u0131z elementin \u201cbenzersiz kimli\u011fini\u201d bulup, yapt\u0131\u011f\u0131m\u0131z de\u011fi\u015fikli\u011fi sadece o elemente uygulayacak. Elements b\u00f6l\u00fcm\u00fcnde, de\u011fi\u015fiklik yapmak istedi\u011fimiz elementin i\u00e7ine \u015fu kodu yazamam\u0131z gerekiyor: id=\u201dcurrent-heading\u201d<\/p>\n\n\n\n
Art\u0131k \u201ccurrent-heading\u201d ad\u0131nda bir elementimiz var ve HTML d\u00f6k\u00fcman\u0131nda bununla ayn\u0131 isimde ba\u015fka bir element yok. Kimli\u011fi tamamen benzersiz. \u201cStyles\u201d b\u00f6l\u00fcm\u00fcn\u00fcn sa\u011f taraf\u0131ndaki \u201c+\u201d iconuna t\u0131klad\u0131\u011f\u0131m\u0131zda hemen \u201ch2#current-heading\u201d diye bir kod a\u00e7\u0131lacakt\u0131r. Kimli\u011fimiz zaten benzersiz, o y\u00fczden ba\u015f\u0131ndaki h2\u2019yi silebiliriz. Ard\u0131ndan i\u00e7ine yine renk tan\u0131mlamas\u0131 yapmam\u0131z gerekecek: color:blue;<\/p>\n\n\n\n
$\"\"$ <\/figure>\n\n\n\n
Ba\u015fl\u0131k rengimiz yine de\u011fi\u015fti. Hem de di\u011fer ba\u015fl\u0131klar\u0131n rengine m\u00fcdahale etmek zorunda kalmadan. \u00dc\u00e7\u00fcnc\u00fc bir y\u00f6ntemden daha bahsetmi\u015ftik.<\/p>\n\n\n\n
\u00dc\u00e7\u00fcnc\u00fc Metot: Sayfa \u0130\u00e7i \/ Genel CSS<\/strong><\/h3>\n\n\n\n
\u00dc\u00e7\u00fcnc\u00fc y\u00f6ntem asl\u0131nda olduk\u00e7a basittir. Bu sefer \u201cstyle<\/strong>\u201d tan\u0131mlamas\u0131n\u0131 ne external (harici) ne de internal (sat\u0131r i\u00e7i) y\u00f6ntemle kullan\u0131r\u0131z. Bu y\u00f6ntemde \u201c