{"id":25074,"date":"2023-07-13T15:39:37","date_gmt":"2023-07-13T13:39:37","guid":{"rendered":"https:\/\/yoodigital.co\/?p=25074"},"modified":"2024-01-22T22:31:08","modified_gmt":"2024-01-22T19:31:08","slug":"css-nedir-ne-ise-yarar","status":"publish","type":"post","link":"https:\/\/yoodigital.co\/tr\/css-nedir-ne-ise-yarar\/","title":{"rendered":"CSS Nedir, Ne \u0130\u015fe Yarar?"},"content":{"rendered":"
Web sitesi, HTML, yaz\u0131l\u0131m ve kodlama gibi terimler s\u00f6z konusu oldu\u011funda CSS akla gelen ilk terimlerden biri. K\u0131sa bir \u00f6zet ge\u00e7mek gerekirse CSS web sitelerinin g\u00f6rsel olarak \u015fekillendirilmesine olanak tan\u0131yan ve kendine has kurallar\u0131 olan bir tan\u0131m dilidir.\u00a0<\/span><\/p>\n

CSS Nedir?<\/h2>\n

A\u00e7\u0131l\u0131m\u0131 \u201cCascading Style Sheets\u201d olan CSS, \u201cBasamaklanm\u0131\u015f Stil Katmanlar\u0131\u201d anlam\u0131na gelir. HTML ve JavaScript ile birlikte en temel web teknolojileri aras\u0131nda yer alan CSS, web sayfalar\u0131 \u00fczerinde olduk\u00e7a fazla g\u00f6rsel denetim sunar.\u00a0<\/span><\/p>\n

CSS kullanarak, HTML \u00f6\u011felerinin taray\u0131c\u0131da tam olarak nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kontrol edebilir, istedi\u011finiz tasar\u0131m\u0131 kullanarak i\u015faretlemenizi sunabilirsiniz.\u00a0<\/span><\/p>\n

CSS Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n

Bir web sitesi olu\u015fturuyorsan\u0131z, HTML ile ba\u015flaman\u0131z gerekiyor. Bu bi\u00e7imlendirme dili ile ba\u015fl\u0131klar, paragraflar, resimler, tablolar, formlar, listeler ve \u00e7ok daha fazlas\u0131n\u0131 ekleyebilirsiniz. Ancak bu \u00f6\u011felerin sayfada nas\u0131l sunuldu\u011funu ya da d\u00fczenlendi\u011fini kontrol edemezsiniz.<\/span><\/p>\n

\u0130\u015fte burada CSS devreye giriyor. CSS, bir sayfan\u0131n taray\u0131c\u0131ya nas\u0131l g\u00f6r\u00fcnmesi gerekti\u011fini a\u00e7\u0131klar ve taray\u0131c\u0131 da onu buna g\u00f6re olu\u015fturur. CSS, bir sayfadaki metin ve arka plan rengini de\u011fi\u015ftirmek, ba\u011flant\u0131lardan alt \u00e7izgiyi kald\u0131rmak ve resimleri, metni ve di\u011fer HTML \u00f6\u011felerini canland\u0131rmak gibi \u00e7ok \u00e7e\u015fitli bi\u00e7imsel ama\u00e7lar i\u00e7in kullan\u0131labilir.<\/span><\/p>\n

Bunu ger\u00e7ekle\u015ftirmenin ise 3 yolu vard\u0131r:<\/span><\/p>\n

Sat\u0131r \u0130\u00e7i CSS : Bir HTML \u00f6\u011fesinin i\u00e7ine yerle\u015ftirilmi\u015f stil niteli\u011fini gerektirir.<\/span><\/p>\n

Dahili CSS : Bir HTML dosyas\u0131n\u0131n head b\u00f6l\u00fcm\u00fcne yerle\u015ftirilmi\u015f <style> \u00f6\u011fesini gerektirir.<\/span><\/p>\n

Harici CSS : Bir HTML dosyas\u0131n\u0131n ba\u015f b\u00f6l\u00fcm\u00fcn\u00fcn i\u00e7ine yerle\u015ftirilmi\u015f <link> \u00f6\u011fesini gerektirir.<\/span><\/p>\n

\"\"<\/p>\n

CSS Ne \u0130\u015fe Yarar?<\/h2>\n

Daha \u00f6nce de belirtti\u011fimiz gibi CSS, belgelerin kullan\u0131c\u0131lara nas\u0131l sunuldu\u011funu, nas\u0131l \u015fekillendirildi\u011fini ve d\u00fczenlendi\u011fini belirten bir dildir.<\/span><\/p>\n

Belge genellikle bir bi\u00e7imlendirme dili kullan\u0131larak yap\u0131land\u0131r\u0131lm\u0131\u015f bir metin dosyas\u0131d\u0131r. HTML en yayg\u0131n bi\u00e7imlendirme dilidir, ancak SVG ya da XML gibi ba\u015fka bi\u00e7imlendirme dilleriyle de kar\u015f\u0131la\u015fabilirsiniz.<\/span><\/p>\n

Bir belgeyi bir kullan\u0131c\u0131ya sunmak , onu hedef kitleniz taraf\u0131ndan kullan\u0131labilecek bir forma d\u00f6n\u00fc\u015ft\u00fcrmek anlam\u0131na gelir. Firefox , Chrome ya da Edge gibi taray\u0131c\u0131lar, belgeleri \u00f6rne\u011fin bir bilgisayar ekran\u0131nda, projekt\u00f6rde veya yaz\u0131c\u0131da g\u00f6rsel olarak sunmak \u00fczere tasarlanm\u0131\u015ft\u0131r.<\/span><\/p>\n

CSS, \u00e7ok temel belge metni stili i\u00e7in kullan\u0131labilir. Ba\u015fl\u0131klar\u0131n ve ba\u011flant\u0131lar\u0131n rengini ve boyutunu de\u011fi\u015ftirebilir, bir d\u00fczen olu\u015fturmak i\u00e7in kullan\u0131labilir. Tek bir metin s\u00fctununu ana i\u00e7erik alan\u0131 ve ilgili bilgiler i\u00e7in bir kenar \u00e7ubu\u011fu olan bir d\u00fczene d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz ya da animasyon gibi efektler i\u00e7in bile kullanabilirsiniz.<\/span><\/p>\n

CSS\u2019in Sundu\u011fu Avantajlar<\/h2>\n

CSS, bi\u00e7imlendirmek i\u00e7in fazladan HTML olmadan, belgenizin yap\u0131s\u0131 \u00e7ok daha okunabilir hale gelir ve belgeyi bozmadan g\u00fcncellemeyi kolayla\u015ft\u0131r\u0131r. T\u00fcm CSS\u2019leriniz ayr\u0131 bir dosyaya ta\u015f\u0131nabilir, bu da stillerinizi g\u00fcncellemenizi kolayla\u015ft\u0131r\u0131r.<\/span><\/p>\n

Basamaklanm\u0131\u015f Stil Katmanlar\u0131 kullanmak genellikle web sayfalar\u0131n\u0131z\u0131n arkas\u0131nda daha az kod bulunmas\u0131na yol a\u00e7ar ve bu da sayfan\u0131n indirilme s\u00fcrelerine yard\u0131mc\u0131 olur. G\u00f6r\u00fcnt\u00fcler genellikle bir sayfan\u0131n en a\u011f\u0131r \u00f6\u011fesidir ve genellikle sayfalar\u0131n\u0131z\u0131 yava\u015flatan en b\u00fcy\u00fck su\u00e7ludur. G\u00f6r\u00fcnt\u00fclerin k\u00fc\u00e7\u00fclt\u00fclmesi i\u00e7in optimize edilebilece\u011finden emin olun.<\/span><\/p>\n

CSS, web sayfalar\u0131n\u0131z\u0131n sunumu \u00fczerinde daha fazla kontrol sa\u011flar. Web tasar\u0131mc\u0131lar\u0131n\u0131n bazen ne kadar az kontrole sahip olabilece\u011fi g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, bir k\u0131sm\u0131n\u0131 geri alman\u0131n bir yolu oldu\u011funu bilmek g\u00fczel. CSS\u2019nin, metnin aral\u0131\u011f\u0131n\u0131 ve sat\u0131r aral\u0131\u011f\u0131n\u0131 kontrol etme se\u00e7enekleri gibi HTML\u2019ye g\u00f6re daha fazla bi\u00e7imlendirme se\u00e7ene\u011fine sahip olmas\u0131n\u0131n yan\u0131 s\u0131ra, CSS ayr\u0131ca sayfan\u0131n hangi s\u0131rayla g\u00f6r\u00fcnt\u00fclenece\u011fini de belirleyebilir. Baz\u0131 a\u011f\u0131r grafikleriniz varsa, ziyaret\u00e7ilerinizin en az\u0131ndan grafiklerinizin y\u00fcklenmesini beklerken okuyabilecekleri bir metin olmas\u0131n\u0131 sa\u011flamak i\u00e7in bunlar\u0131 kodunuza en son yerle\u015ftirebilirsiniz.\u00a0<\/span><\/p>\n

Genel olarak herkes taraf\u0131ndan kabul edilmese de, CSS\u2019in sayfalar\u0131n\u0131z\u0131n bir arama motorunda bulunmas\u0131na yard\u0131mc\u0131 olmas\u0131 muhtemeldir. CSS siteniz daha az kod i\u00e7erdi\u011finden ve daha basit bir yap\u0131ya sahip oldu\u011fundan, sadece sizin i\u00e7in de\u011fil arama motoru i\u00e7in de okunmas\u0131 daha kolayd\u0131r. Yani asl\u0131nda CSS, SEO\u2019ya da faydal\u0131d\u0131r.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

En Pop\u00fcler CSS K\u00fct\u00fcphaneleri<\/h2>\n

Animate.css, birden \u00e7ok taray\u0131c\u0131da uygulanabilen, kullan\u0131ma haz\u0131r bir CSS animasyonlar\u0131 k\u00fct\u00fcphanesi olmakla beraber, kurulumu olduk\u00e7a kolayd\u0131r. Animasyonun uzunlu\u011funu, gecikme s\u00fcresini ve etkile\u015fimlerini belirtir ve bunlar olduk\u00e7a kolay komutlarla ger\u00e7ekle\u015ftirilir.<\/span><\/p>\n

Bootstrap ile geli\u015ftiricilerin, bir siteyi daha k\u00fc\u00e7\u00fck ekran boyutlar\u0131 ayarlama konusunda ayr\u0131 projeler olu\u015fturmas\u0131 gerekmez. Sadece gerekli Bootstrap s\u0131n\u0131flar\u0131n\u0131 birle\u015ftirmeleri gerekir ve tasar\u0131m kendini ayarlar.<\/span><\/p>\n

UIkit size kapsaml\u0131 bir HTML, CSS ve JS bile\u015fenleri koleksiyonu sunar. Temalarla geni\u015fletilebilir ve kendi g\u00f6r\u00fcn\u00fcm\u00fcn\u00fcz\u00fc olu\u015fturmak i\u00e7in \u00f6zelle\u015ftirmesi kolayd\u0131r. H\u0131zl\u0131 ve g\u00fc\u00e7l\u00fc web aray\u00fczleri geli\u015ftirmek i\u00e7in hafif ve mod\u00fcler bir CSS k\u00fct\u00fcphanesidir.<\/span><\/p>\n

CSS Kodlar\u0131 Nelerdir?<\/h2>\n

Birka\u00e7 basit CSS kodu \u00f6\u011frenerek web sitenizi istedi\u011finiz gibi dizayn edebilirsiniz. Bunlardan baz\u0131lar\u0131 \u015funlard\u0131r:<\/span><\/p>\n

Kolay Paragraf Bi\u00e7imlendirme i\u00e7in Temel CSS Kodu: CSS ile stil olu\u015fturmak, her \u00f6\u011fe olu\u015fturdu\u011funuzda bir stil belirtmeniz gerekmedi\u011fi anlam\u0131na gelir. \u201c P { font-size: 120%; color: dimgray; } \u201c koduna sahiptir.<\/span><\/p>\n

Karakter B\u00fcy\u00fckl\u00fc\u011f\u00fcn\u00fc De\u011fi\u015ftirmek i\u00e7in CSS \u00d6rne\u011fi: B\u00fcy\u00fck harflerle olmas\u0131 gereken k\u00fc\u00e7\u00fck harfli paragraflar i\u00e7in bir tan\u0131m olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. \u201c p.smallcaps { font-variant: small-caps; } \u201c koduna sahiptir. Ayr\u0131ca b\u00fcy\u00fck haflerle yaz\u0131lm\u0131\u015f bir metni k\u00fc\u00e7\u00fck harflerle kullanmak i\u00e7in ise \u201c<p class=”smallcaps”>paragraf.<\/p> \u201c kodu kullan\u0131l\u0131r.\u00a0<\/span><\/p>\n

Ba\u011flant\u0131 Renklerini De\u011fi\u015ftirmek i\u00e7in Kolay CSS: Bir ba\u011flant\u0131ya atanabilecek d\u00f6rt farkl\u0131 renk vard\u0131r: standart rengi, ziyaret edilen rengi, \u00fczerine gelinen rengi ve etkin rengi. Bunun i\u00e7in \u201c a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; } \u201c kodu kullan\u0131l\u0131r.\u00a0<\/span><\/p>\n

Alt \u00c7izgileri Kald\u0131rmak \u0130\u00e7in CSS: Alt\u0131 \u00e7izili metin bir ba\u011flant\u0131y\u0131 a\u00e7\u0131k\u00e7a belirtirken, bazen bu alt\u0131 \u00e7izgiyi silmek daha ho\u015f g\u00f6r\u00fcn\u00fcr. Bu, \u201ctext-decoration\u201d \u00f6zniteli\u011fi ile ger\u00e7ekle\u015ftirilir. \u201c a { text-decoration: none; } \u201c kodu kullan\u0131l\u0131r.<\/span><\/p>\n

CSS Koduyla Ba\u011flant\u0131 D\u00fc\u011fmesi Yapmak: i\u00e7eri\u011finize dikkat \u00e7ekip bir ba\u011flant\u0131 d\u00fc\u011fmesi koymak i\u00e7in \u201c a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } \u201c kodu kullan\u0131l\u0131r.<\/span><\/p>\n

Metin Kutusu Olu\u015fturmak i\u00e7in CSS \u00d6rnek Kodu: Sayfan\u0131zda bir \u00f6\u011feyi vurgulamak istiyorsan\u0131z, kenarl\u0131k eklemek isteyebilirsiniz. Bunun i\u00e7in \u201c p.important { border-style: solid; border-width: 5px; border-color: purple; } \u201c kodu kullan\u0131l\u0131r.<\/span><\/p>\n

 <\/p><\/div>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Web sitesi, HTML, yaz\u0131l\u0131m ve kodlama gibi terimler s\u00f6z konusu oldu\u011funda CSS akla gelen ilk terimlerden biri. K\u0131sa bir \u00f6zet ge\u00e7mek gerekirse CSS web sitelerinin g\u00f6rsel olarak \u015fekillendirilmesine olanak tan\u0131yan ve kendine has kurallar\u0131 olan bir tan\u0131m dilidir.\u00a0 CSS Nedir? A\u00e7\u0131l\u0131m\u0131 \u201cCascading Style Sheets\u201d olan CSS, \u201cBasamaklanm\u0131\u015f Stil Katmanlar\u0131\u201d anlam\u0131na gelir. HTML ve JavaScript ile…<\/p>\n","protected":false},"author":2,"featured_media":988568,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-25074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir-nasil-yapilir"],"_links":{"self":[{"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/posts\/25074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/comments?post=25074"}],"version-history":[{"count":2,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/posts\/25074\/revisions"}],"predecessor-version":[{"id":988571,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/posts\/25074\/revisions\/988571"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/media\/988568"}],"wp:attachment":[{"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/media?parent=25074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/categories?post=25074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yoodigital.co\/tr\/wp-json\/wp\/v2\/tags?post=25074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}