font-family<\/code> \u00f6zelli\u011fi, metnin hangi yaz\u0131 tipiyle g\u00f6r\u00fcnt\u00fclenece\u011fini belirler. Genellikle birincil bir font ve yedek (fallback) fontlar listesi verilir, b\u00f6ylece taray\u0131c\u0131 ilk fontu bulamazsa listedeki bir sonrakini kullan\u0131r. \u00d6rne\u011fin, font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;<\/code> \u015feklinde bir kullan\u0131m, taray\u0131c\u0131n\u0131n s\u0131ras\u0131yla bu fontlar\u0131 aramas\u0131n\u0131 sa\u011flar. Genel font aileleri (serif<\/code>, sans-serif<\/code>, monospace<\/code>, cursive<\/code>, fantasy<\/code>) son yedek olarak belirtilmelidir. G\u00fcn\u00fcm\u00fczde Google Fonts gibi servisler arac\u0131l\u0131\u011f\u0131yla web fontlar\u0131n\u0131 kolayca entegre etmek ve @font-face<\/code> kural\u0131 ile \u00f6zel fontlar kullanmak olduk\u00e7a yayg\u0131nd\u0131r.<\/p>\nfont-size<\/code> \u00f6zelli\u011fi ise metnin b\u00fcy\u00fckl\u00fc\u011f\u00fcn\u00fc kontrol eder. Piksel (px<\/code>), em (em<\/code>), rem (rem<\/code>), y\u00fczde (%<\/code>), viewport geni\u015fli\u011fi (vw<\/code>) ve viewport y\u00fcksekli\u011fi (vh<\/code>) gibi \u00e7e\u015fitli birimler kullan\u0131labilir. px<\/code> statik bir boyut sunarken, em<\/code> ve rem<\/code> birimleri duyarl\u0131 tasar\u0131mlar i\u00e7in daha esnektir; em<\/code> \u00fcst \u00f6\u011fenin font boyutuna g\u00f6re, rem<\/code> ise k\u00f6k (root) \u00f6\u011fenin (genellikle html<\/code>) font boyutuna g\u00f6re boyutlan\u0131r. vw<\/code> ve vh<\/code> ise do\u011frudan viewport’un boyutuna g\u00f6re \u00f6l\u00e7eklenir ve ak\u0131\u015fkan tipografi i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nMetin Rengi ve Arka Plan\u0131<\/h4>\n
Metinlerin rengini color<\/code> \u00f6zelli\u011fi ile ayarlarken, metnin i\u00e7inde bulundu\u011fu \u00f6\u011fenin arka plan rengini background-color<\/code> \u00f6zelli\u011fi ile belirleriz. Bu \u00f6zellikler i\u00e7in onalt\u0131l\u0131k (#RRGGBB<\/code>), RGB (rgb(R,G,B)<\/code>), RGBA (rgba(R,G,B,A)<\/code>), HSL (hsl(H,S,L)<\/code>) ve HSLA (hsla(H,S,L,A)<\/code>) de\u011ferleri ile birlikte \u00f6nceden tan\u0131mlanm\u0131\u015f renk isimleri kullan\u0131labilir. \u00d6zellikle rgba<\/code> ve hsla<\/code> de\u011ferlerindeki “A” (alpha) kanal\u0131, saydaml\u0131k (opacity) ayarlamas\u0131na olanak tan\u0131r. Okunabilirlik a\u00e7\u0131s\u0131ndan metin rengi ile arka plan rengi aras\u0131nda yeterli kontrast sa\u011flamak kritik \u00f6neme sahiptir. WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131, eri\u015filebilir bir kullan\u0131c\u0131 deneyimi i\u00e7in minimum kontrast oranlar\u0131n\u0131 belirler.<\/p>\nMetin Kal\u0131nl\u0131\u011f\u0131 ve Stili<\/h4>\n
font-weight<\/code> \u00f6zelli\u011fi, metnin kal\u0131nl\u0131\u011f\u0131n\u0131 kontrol eder. normal<\/code> ve bold<\/code> anahtar kelimelerinin yan\u0131 s\u0131ra, 100’den 900’e kadar artan bir \u00f6l\u00e7ekte say\u0131sal de\u011ferler de (\u00f6rne\u011fin font-weight: 700;<\/code> kal\u0131n anlam\u0131na gelir) kullan\u0131labilir. lighter<\/code> ve bolder<\/code> de\u011ferleri ise \u00f6\u011fenin \u00fcst \u00f6\u011fesine g\u00f6re g\u00f6receli kal\u0131nl\u0131k sa\u011flar. font-style<\/code> \u00f6zelli\u011fi, metnin e\u011fik (italic<\/code>), oblik (oblique<\/code>) veya normal (normal<\/code>) olup olmayaca\u011f\u0131n\u0131 belirler. \u0130talik genellikle bir fontun \u00f6zel bir versiyonu iken, oblik taray\u0131c\u0131n\u0131n normal metni e\u011ferek olu\u015fturdu\u011fu bir stildir.<\/p>\nMetin Hizalama<\/h4>\n
text-align<\/code> \u00f6zelli\u011fi, bir blok \u00f6\u011fe i\u00e7indeki metnin yatay hizalamas\u0131n\u0131 belirler. Kullan\u0131labilecek de\u011ferler left<\/code> (sola hizal\u0131), right<\/code> (sa\u011fa hizal\u0131), center<\/code> (ortalanm\u0131\u015f) ve justify<\/code> (iki yana yasl\u0131) \u015feklindedir. justify<\/code> de\u011feri, metni sat\u0131r\u0131n hem soluna hem de sa\u011f\u0131na yaslayarak d\u00fczg\u00fcn bir kenar olu\u015fturur; bu genellikle uzun metin bloklar\u0131nda daha profesyonel bir g\u00f6r\u00fcn\u00fcm sa\u011flar ancak baz\u0131 dillerde kelime aral\u0131klar\u0131n\u0131 \u00e7ok fazla a\u00e7abilir. vertical-align<\/code> \u00f6zelli\u011fi ise \u00f6zellikle sat\u0131r i\u00e7i \u00f6\u011feler (\u00f6rne\u011fin ![]()
<\/code> veya <\/code>) ve tablo h\u00fccreleri i\u00e7indeki metinlerin dikey hizalamas\u0131n\u0131 kontrol eder.<\/p>\nSat\u0131r Y\u00fcksekli\u011fi ve Harf Aral\u0131\u011f\u0131<\/h4>\n
line-height<\/code> \u00f6zelli\u011fi, bir metin sat\u0131r\u0131n\u0131n y\u00fcksekli\u011fini, yani sat\u0131rlar aras\u0131ndaki dikey bo\u015flu\u011fu ayarlar. De\u011fer olarak birim belirtmeden bir say\u0131 (line-height: 1.5;<\/code> gibi) vermek en iyi uygulamad\u0131r, \u00e7\u00fcnk\u00fc bu, font boyutunun 1.5 kat\u0131 anlam\u0131na gelir ve font boyutu de\u011fi\u015fti\u011finde sat\u0131r y\u00fcksekli\u011finin de orant\u0131l\u0131 olarak de\u011fi\u015fmesini sa\u011flar. \u0130yi ayarlanm\u0131\u015f bir sat\u0131r y\u00fcksekli\u011fi, metinlerin okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00c7ok dar veya \u00e7ok geni\u015f sat\u0131r aral\u0131klar\u0131 okunmay\u0131 zorla\u015ft\u0131rabilir.<\/p>\nletter-spacing<\/code> \u00f6zelli\u011fi, metindeki harfler aras\u0131ndaki bo\u015flu\u011fu ayarlar. Pozitif de\u011ferler harfleri birbirinden uzakla\u015ft\u0131r\u0131rken, negatif de\u011ferler harfleri birbirine yakla\u015ft\u0131r\u0131r (kerning etkisi). Dikkatli kullan\u0131ld\u0131\u011f\u0131nda metinlerin esteti\u011fini art\u0131rabilir, ancak a\u015f\u0131r\u0131 kullan\u0131m okunabilirli\u011fi bozabilir.<\/p>\nKelime Aral\u0131\u011f\u0131<\/h4>\n
word-spacing<\/code> \u00f6zelli\u011fi, letter-spacing<\/code>‘e benzer \u015fekilde, metindeki kelimeler aras\u0131ndaki bo\u015flu\u011fu kontrol eder. Yine pozitif veya negatif de\u011ferler alabilir. \u00d6zellikle belirli bir g\u00f6rsel etki yaratmak veya dar s\u00fctunlarda kelime ak\u0131\u015f\u0131n\u0131 iyile\u015ftirmek i\u00e7in kullan\u0131labilir. Ancak, bu \u00f6zelli\u011fin de a\u015f\u0131r\u0131 kullan\u0131m\u0131 metnin okunabilirli\u011fini olumsuz etkileyebilir.<\/p>\nGeli\u015fmi\u015f Metin D\u00fczenleme Teknikleri<\/h3>\n
Temel \u00f6zelliklerin \u00f6tesinde, CSS metinlerinizi daha dinamik ve etkileyici hale getirecek geli\u015fmi\u015f teknikler sunar.<\/p>\n
Metin Dekorasyonu ve D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/h4>\n
text-decoration<\/code> \u00f6zelli\u011fi, metne alt\u0131 \u00e7izili (underline<\/code>), \u00fcst\u00fc \u00e7izili (overline<\/code>) veya \u00fczeri \u00e7izili (line-through<\/code>) gibi dekoratif \u00e7izgiler ekler. none<\/code> de\u011feri, varsay\u0131lan alt\u0131 \u00e7izili ba\u011flant\u0131lar\u0131 kald\u0131rmak i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r. CSS3 ile birlikte text-decoration-color<\/code>, text-decoration-style<\/code> ve text-decoration-thickness<\/code> gibi alt \u00f6zellikler sayesinde bu \u00e7izgilerin rengini, stilini (d\u00fcz, dalgal\u0131, kesik \u00e7izgili vb.) ve kal\u0131nl\u0131\u011f\u0131n\u0131 daha detayl\u0131 kontrol etmek m\u00fcmk\u00fcnd\u00fcr.<\/p>\ntext-transform<\/code> \u00f6zelli\u011fi, metnin b\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc yapar. uppercase<\/code> t\u00fcm harfleri b\u00fcy\u00fct\u00fcr, lowercase<\/code> t\u00fcm harfleri k\u00fc\u00e7\u00fclt\u00fcr ve capitalize<\/code> her kelimenin ilk harfini b\u00fcy\u00fct\u00fcr. Bu \u00f6zellik, HTML i\u00e7eri\u011fini de\u011fi\u015ftirmeden metnin g\u00f6rsel sunumunu ayarlamak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nMetin Ta\u015fmas\u0131 ve Kesilmesi<\/h4>\n
Uzun metinlerin dar kapsay\u0131c\u0131larda nas\u0131l davranaca\u011f\u0131n\u0131 kontrol etmek i\u00e7in white-space<\/code>, overflow<\/code> ve text-overflow<\/code> \u00f6zellikleri kullan\u0131l\u0131r. white-space<\/code> \u00f6zelli\u011fi, bo\u015fluklar\u0131n ve sat\u0131r sonlar\u0131n\u0131n nas\u0131l i\u015flenece\u011fini belirler. nowrap<\/code> de\u011feri, metnin tek bir sat\u0131rda kalmas\u0131n\u0131 sa\u011flar ve kapsay\u0131c\u0131dan ta\u015fmas\u0131na neden olabilir.<\/p>\nE\u011fer metin kapsay\u0131c\u0131dan ta\u015farsa, overflow<\/code> \u00f6zelli\u011fi ta\u015fan i\u00e7eri\u011fin nas\u0131l ele al\u0131naca\u011f\u0131n\u0131 belirtir (hidden<\/code> ile gizleme, scroll<\/code> ile kayd\u0131rma \u00e7ubu\u011fu ekleme, auto<\/code> ile gerekti\u011finde kayd\u0131rma \u00e7ubu\u011fu ekleme). text-overflow<\/code> \u00f6zelli\u011fi ise metin ta\u015fmas\u0131 durumunda, ta\u015fan metnin nas\u0131l g\u00f6rselle\u015ftirilece\u011fini belirler. ellipsis<\/code> de\u011feri, ta\u015fan metnin yerine \u00fc\u00e7 nokta (…) koyarak kesilmesini sa\u011flar; bu, kullan\u0131c\u0131ya daha fazla metin oldu\u011funu ancak yer k\u0131s\u0131tlamas\u0131 nedeniyle g\u00f6sterilemedi\u011fini bildirir. Bu \u00f6zellik genellikle white-space: nowrap;<\/code> ve overflow: hidden;<\/code> ile birlikte kullan\u0131l\u0131r.<\/p>\nG\u00f6lge Efektleri<\/h4>\n
text-shadow<\/code> \u00f6zelli\u011fi, metne g\u00f6lge efekti eklemek i\u00e7in kullan\u0131l\u0131r. D\u00f6rt de\u011fer al\u0131r: yatay ofset, dikey ofset, bulan\u0131kl\u0131k yar\u0131\u00e7ap\u0131 ve g\u00f6lge rengi. \u00d6rne\u011fin, text-shadow: 2px 2px 4px #333;<\/code> metne sa\u011fa 2 piksel, a\u015fa\u011f\u0131ya 2 piksel kaym\u0131\u015f, 4 piksel bulan\u0131kl\u0131\u011fa sahip koyu gri bir g\u00f6lge ekler. Birden fazla g\u00f6lge efekti virg\u00fclle ayr\u0131larak eklenebilir, bu da daha karma\u015f\u0131k ve katmanl\u0131 g\u00f6lgeler olu\u015fturmaya olanak tan\u0131r.<\/p>\nMetin Y\u00f6n\u00fc<\/h4>\n
direction<\/code> \u00f6zelli\u011fi, metnin ak\u0131\u015f y\u00f6n\u00fcn\u00fc belirler: ltr<\/code> (left-to-right, soldan sa\u011fa) veya rtl<\/code> (right-to-left, sa\u011fdan sola). Arap\u00e7a veya \u0130branice gibi sa\u011fdan sola yaz\u0131lan diller i\u00e7in kritik \u00f6neme sahiptir. unicode-bidi<\/code> \u00f6zelli\u011fi ise metnin y\u00f6n\u00fcn\u00fc daha karma\u015f\u0131k senaryolarda (\u00f6rne\u011fin, sa\u011fdan sola bir metin i\u00e7inde soldan sa\u011fa bir al\u0131nt\u0131) manuel olarak ge\u00e7ersiz k\u0131lmak i\u00e7in kullan\u0131l\u0131r.<\/p>\nS\u00fctun D\u00fczenleri<\/h4>\n
column-count<\/code> ve column-width<\/code> gibi CSS Multi-column Layout \u00f6zellikleri, bir metin blo\u011funu gazetelerdeki gibi birden fazla s\u00fctuna b\u00f6lmek i\u00e7in kullan\u0131l\u0131r. column-count<\/code> belirli bir s\u00fctun say\u0131s\u0131 isterken, column-width<\/code> her s\u00fctunun minimum geni\u015fli\u011fini belirler ve taray\u0131c\u0131n\u0131n uygun say\u0131da s\u00fctun olu\u015fturmas\u0131n\u0131 sa\u011flar. column-gap<\/code> s\u00fctunlar aras\u0131ndaki bo\u015flu\u011fu, column-rule<\/code> ise s\u00fctunlar aras\u0131na dikey bir \u00e7izgi eklemeyi sa\u011flar. Bu \u00f6zellikler, uzun metinlerin okunabilirli\u011fini art\u0131rmak ve sayfa d\u00fczenine estetik bir dokunu\u015f katmak i\u00e7in etkili olabilir.<\/p>\n\u0130lk Harf ve \u0130lk Sat\u0131r Stilleri<\/h4>\n
::first-letter<\/code> ve ::first-line<\/code> s\u00f6zde elemanlar\u0131 (pseudo-elements), bir metin blo\u011funun ilk harfine veya ilk sat\u0131r\u0131na \u00f6zel stiller uygulamak i\u00e7in kullan\u0131l\u0131r. ::first-letter<\/code> genellikle b\u00fcy\u00fck, farkl\u0131 bir font veya renkte bir “drop cap” efekti olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. ::first-line<\/code> ise bir paragraf\u0131n ilk sat\u0131r\u0131n\u0131 vurgulamak i\u00e7in farkl\u0131 bir renk veya font kal\u0131nl\u0131\u011f\u0131 gibi stiller uygulamak i\u00e7in kullan\u0131labilir. Bu \u00f6zellikler, tipografik vurgular ekleyerek metinlerin g\u00f6rsel \u00e7ekicili\u011fini art\u0131r\u0131r.<\/p>\nWeb Fontlar\u0131 ve Performans<\/h4>\n
@font-face<\/code> kural\u0131, sunucunuzda bar\u0131nd\u0131r\u0131lan veya harici bir kaynaktan y\u00fcklenen \u00f6zel fontlar\u0131 kullanman\u0131z\u0131 sa\u011flar. Bu, tasar\u0131mc\u0131lara marka kimli\u011fine uygun benzersiz fontlar kullanma \u00f6zg\u00fcrl\u00fc\u011f\u00fc verir. Ancak, web fontlar\u0131n\u0131n kullan\u0131m\u0131 performans \u00fczerinde \u00f6nemli bir etkiye sahip olabilir. Font dosyalar\u0131n\u0131n boyutu, indirme s\u00fcresini etkiler. font-display<\/code> \u00f6zelli\u011fi (auto<\/code>, block<\/code>, swap<\/code>, fallback<\/code>, optional<\/code>), font y\u00fcklenirken metnin taray\u0131c\u0131da nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fini kontrol ederek “Flash of Unstyled Text” (FOUT) veya “Flash of Invisible Text” (FOIT) gibi sorunlar\u0131 y\u00f6netmeye yard\u0131mc\u0131 olur. font-display: swap;<\/code> genellikle iyi bir denge sa\u011flar, \u00e7\u00fcnk\u00fc font y\u00fcklenene kadar yedek bir font g\u00f6sterir ve ard\u0131ndan y\u00fcklenen fontla de\u011fi\u015ftirir.<\/p>\nKapsay\u0131c\u0131lar ve Ak\u0131\u015f Kontrol\u00fc<\/h3>\n
Metinlerinizi sadece bi\u00e7imlendirmekle kalmaz, ayn\u0131 zamanda sayfa d\u00fczeni i\u00e7inde do\u011fru bir \u015fekilde konumland\u0131rmak ve ak\u0131\u015f\u0131n\u0131 kontrol etmek de \u00f6nemlidir. Bu, metinleri \u00e7evreleyen kapsay\u0131c\u0131lar ve \u00e7e\u015fitli CSS d\u00fczenleme modelleri arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r.<\/p>\n
Blok ve Sat\u0131r \u0130\u00e7i \u00d6\u011feler<\/h4>\n
HTML’deki her \u00f6\u011fe varsay\u0131lan olarak bir display<\/code> de\u011ferine sahiptir. block<\/code> \u00f6\u011feler (\u00f6rne\u011fin div<\/code>, p<\/code>, h1<\/code>), kendi sat\u0131rlar\u0131n\u0131 kaplar ve geni\u015flikleri varsay\u0131lan olarak ebeveynlerinin %100’\u00fcd\u00fcr. inline<\/code> \u00f6\u011feler (\u00f6rne\u011fin span<\/code>, a<\/code>, em<\/code>), yaln\u0131zca i\u00e7erikleri kadar yer kaplar ve yeni bir sat\u0131ra ba\u015flamazlar. inline-block<\/code> ise hem sat\u0131r i\u00e7i \u00f6\u011feler gibi ak\u0131\u015fta kal\u0131r hem de blok \u00f6\u011feler gibi geni\u015flik ve y\u00fckseklik gibi \u00f6zelliklere sahip olabilir. display<\/code> \u00f6zelli\u011fi, bir \u00f6\u011fenin bu davran\u0131\u015flar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Metin bloklar\u0131n\u0131 d\u00fczenlerken display: flex<\/code> ve display: grid<\/code> gibi modern CSS d\u00fczenleme modelleri, metinleri \u00e7evreleyen kutular\u0131n hizalanmas\u0131 ve da\u011f\u0131t\u0131lmas\u0131 konusunda \u00e7ok daha g\u00fc\u00e7l\u00fc ve esnek \u00e7\u00f6z\u00fcmler sunar.<\/p>\nMarjin ve Dolgu<\/h4>\n
margin<\/code> ve padding<\/code> \u00f6zellikleri, bir \u00f6\u011fenin \u00e7evresindeki bo\u015fluklar\u0131 kontrol eder. padding<\/code>, \u00f6\u011fenin i\u00e7eri\u011fi ile kenarl\u0131\u011f\u0131 aras\u0131ndaki i\u00e7 bo\u015flu\u011fu olu\u015ftururken, margin<\/code> \u00f6\u011fenin kenarl\u0131\u011f\u0131 ile di\u011fer \u00f6\u011feler aras\u0131ndaki d\u0131\u015f bo\u015flu\u011fu olu\u015fturur. Her iki \u00f6zellik de top<\/code>, right<\/code>, bottom<\/code>, left<\/code> de\u011ferlerini ayr\u0131 ayr\u0131 alabilir veya k\u0131salt\u0131lm\u0131\u015f (shorthand) g\u00f6sterimlerle tek seferde ayarlanabilir. Metin bloklar\u0131 aras\u0131ndaki dikey ve yatay bo\u015fluklar\u0131 ayarlamak, okunabilirli\u011fi ve g\u00f6rsel hiyerar\u015fiyi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde etkiler. \u00d6zellikle margin-bottom<\/code> ile paragraflar aras\u0131na bo\u015fluk eklemek yayg\u0131n bir uygulamad\u0131r.<\/p>\nKonumland\u0131rma<\/h4>\n
position<\/code> \u00f6zelli\u011fi, bir \u00f6\u011fenin sayfa d\u00fczeni i\u00e7indeki konumunu belirler. static<\/code> varsay\u0131lan de\u011ferdir ve \u00f6\u011feler normal belge ak\u0131\u015f\u0131nda kal\u0131r. relative<\/code>, \u00f6\u011feyi normal ak\u0131\u015fta tutar ancak top<\/code>, right<\/code>, bottom<\/code>, left<\/code> \u00f6zellikleri ile kendi normal konumuna g\u00f6re hareket ettirilebilir. absolute<\/code>, \u00f6\u011feyi normal ak\u0131\u015ftan \u00e7\u0131kar\u0131r ve en yak\u0131n konumland\u0131r\u0131lm\u0131\u015f \u00fcst \u00f6\u011feye (static olmayan bir \u00fcst \u00f6\u011fe) g\u00f6re konumland\u0131r\u0131r. fixed<\/code>, \u00f6\u011feyi taray\u0131c\u0131 penceresine g\u00f6re sabitler ve sayfa kayd\u0131r\u0131ld\u0131\u011f\u0131nda bile yerinde kal\u0131r. sticky<\/code> ise belirli bir e\u015fi\u011fe ula\u015fana kadar relative<\/code> gibi davran\u0131r, e\u015fi\u011fi ge\u00e7tikten sonra fixed<\/code> gibi yap\u0131\u015f\u0131r. Metin kutular\u0131n\u0131 veya belirli metin vurgular\u0131n\u0131 sayfa i\u00e7inde belirli yerlere sabitlemek veya ak\u0131\u015ftan ba\u011f\u0131ms\u0131z konumland\u0131rmak i\u00e7in bu \u00f6zellikler kullan\u0131l\u0131r.<\/p>\nFloat ve Clear<\/h4>\n
float<\/code> \u00f6zelli\u011fi, bir \u00f6\u011feyi (genellikle bir g\u00f6rseli) normal ak\u0131\u015ftan \u00e7\u0131kar\u0131r ve kapsay\u0131c\u0131s\u0131n\u0131n soluna veya sa\u011f\u0131na yaslar, di\u011fer i\u00e7eri\u011fin (metnin) bu \u00f6\u011fenin etraf\u0131nda akmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir resmin etraf\u0131nda metin ak\u0131tmak i\u00e7in float: left;<\/code> veya float: right;<\/code> kullan\u0131l\u0131r. Ancak float<\/code> kullan\u0131m\u0131, ebeveyn \u00f6\u011fenin y\u00fcksekli\u011fini etkileyebilir ve “clearfix” teknikleri gerektirebilir. clear<\/code> \u00f6zelli\u011fi ise, bir \u00f6\u011fenin kendisinden \u00f6nceki kayan \u00f6\u011felerin yan\u0131na yerle\u015fmesini engeller. clear: both;<\/code> en yayg\u0131n kullan\u0131md\u0131r ve hem sol hem de sa\u011f taraftaki kayan \u00f6\u011felerin etkisini temizler. Modern d\u00fczenleme teknikleri (Flexbox, Grid) genellikle float<\/code> kullan\u0131m\u0131n\u0131n yerini alm\u0131\u015ft\u0131r, ancak hala belirli durumlar i\u00e7in ge\u00e7erlili\u011fini korur.<\/p>\nFlexbox ile Metin D\u00fczenleme<\/h4>\n
CSS Flexbox (Esnek Kutu Modeli), tek boyutlu (sat\u0131r veya s\u00fctun) d\u00fczenler i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Metin bloklar\u0131n\u0131 bir kapsay\u0131c\u0131 i\u00e7inde yatay veya dikey olarak hizalamak, bo\u015fluklar\u0131 e\u015fit olarak da\u011f\u0131tmak veya \u00f6\u011felerin s\u0131ras\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in idealdir. \u00d6rne\u011fin, bir ba\u015fl\u0131k ve alt ba\u015fl\u0131\u011f\u0131 dikey olarak ortalamak veya birden fazla metin kutusunu e\u015fit aral\u0131klarla yan yana dizmek i\u00e7in display: flex;<\/code>, justify-content<\/code> ve align-items<\/code> gibi \u00f6zellikler kullan\u0131labilir. Flexbox, \u00f6zellikle navigasyon men\u00fcleri veya k\u00fc\u00e7\u00fck bile\u015fenler i\u00e7indeki metinlerin d\u00fczenlenmesinde b\u00fcy\u00fck esneklik sa\u011flar.<\/p>\nGrid ile Metin D\u00fczenleme<\/h4>\n
CSS Grid (Izgara Modeli), iki boyutlu (hem sat\u0131r hem de s\u00fctun) d\u00fczenler i\u00e7in tasarlanm\u0131\u015ft\u0131r ve daha karma\u015f\u0131k sayfa d\u00fczenleri olu\u015fturmak i\u00e7in m\u00fckemmeldir. Metin alanlar\u0131n\u0131 belirli \u0131zgara h\u00fccrelerine yerle\u015ftirmek, farkl\u0131 metin bloklar\u0131 aras\u0131nda hassas hizalamalar yapmak veya duyarl\u0131 bir \u015fekilde metin ak\u0131\u015f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131labilir. display: grid;<\/code>, grid-template-columns<\/code>, grid-template-rows<\/code>, grid-gap<\/code> ve grid-area<\/code> gibi \u00f6zellikler, metinlerin sayfa i\u00e7indeki konumunu ve boyutunu detayl\u0131 bir \u015fekilde kontrol etmeyi sa\u011flar. B\u00fcy\u00fck i\u00e7erik alanlar\u0131, dergi tarz\u0131 d\u00fczenler veya karma\u015f\u0131k bile\u015fenler i\u00e7indeki metinlerin d\u00fczenlenmesi i\u00e7in Grid, Flexbox’tan daha kapsaml\u0131 \u00e7\u00f6z\u00fcmler sunar.<\/p>\nEri\u015filebilirlik ve Duyarl\u0131l\u0131k<\/h3>\n
Metin d\u00fczenlemesi sadece estetik de\u011fil, ayn\u0131 zamanda eri\u015filebilirlik ve duyarl\u0131l\u0131k a\u00e7\u0131s\u0131ndan da b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Her kullan\u0131c\u0131n\u0131n, her cihazda i\u00e7eri\u011fe rahat\u00e7a eri\u015febilmesi hedeflenmelidir.<\/p>\n
Okunabilirlik \u0130\u00e7in En \u0130yi Uygulamalar<\/h4>\n
* Kontrast Oranlar\u0131:<\/strong> Metin rengi ile arka plan rengi aras\u0131ndaki kontrast, WCAG y\u00f6nergelerine (minimum 4.5:1 oran\u0131) uygun olmal\u0131d\u0131r. D\u00fc\u015f\u00fck kontrast, \u00f6zellikle g\u00f6rme engelli veya renk k\u00f6r\u00fc kullan\u0131c\u0131lar i\u00e7in metinleri okunaks\u0131z hale getirebilir.
\n* Sat\u0131r Uzunlu\u011fu:<\/strong> \u0130deal sat\u0131r uzunlu\u011fu genellikle 45-75 karakter aras\u0131nda \u00f6nerilir. \u00c7ok uzun sat\u0131rlar g\u00f6zleri yorar, \u00e7ok k\u0131sa sat\u0131rlar ise okuma ak\u0131\u015f\u0131n\u0131 bozar.
\n* Do\u011fru Font Boyutlar\u0131:<\/strong> Ba\u015fl\u0131klar ve ana metinler i\u00e7in uygun font boyutlar\u0131 se\u00e7ilmelidir. Genellikle ana metin i\u00e7in 16px (veya 1em\/1rem) iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Font boyutlar\u0131, metnin i\u00e7eri\u011fine ve ba\u011flam\u0131na g\u00f6re ayarlanmal\u0131d\u0131r.
\n* rem<\/code> ve em<\/code> Kullan\u0131m\u0131:<\/strong> Duyarl\u0131 tasar\u0131mlarda px<\/code> yerine rem<\/code> veya em<\/code> birimlerini kullanmak, kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131 ayarlar\u0131ndan font boyutunu de\u011fi\u015ftirebilmesine olanak tan\u0131r ve daha esnek bir \u00f6l\u00e7eklendirme sa\u011flar.<\/p>\nDuyarl\u0131 Metin D\u00fczenlemesi<\/h4>\n
Duyarl\u0131 web tasar\u0131m\u0131, web sayfalar\u0131n\u0131n farkl\u0131 cihaz boyutlar\u0131na ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine uyum sa\u011flamas\u0131n\u0131 gerektirir. Metinler de bu uyumun \u00f6nemli bir par\u00e7as\u0131d\u0131r.<\/p>\n
* @media<\/code> Sorgular\u0131:<\/strong> media<\/code> sorgular\u0131, belirli ekran geni\u015flikleri veya di\u011fer cihaz \u00f6zelliklerine g\u00f6re CSS stillerini de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, k\u00fc\u00e7\u00fck ekranlarda font boyutunu k\u00fc\u00e7\u00fcltmek, sat\u0131r y\u00fcksekli\u011fini ayarlamak veya s\u00fctun d\u00fczenini tek s\u00fctuna indirmek i\u00e7in @media<\/code> kurallar\u0131 kullan\u0131labilir.<\/p>\n@media (max-width: 768px) {\n body {\n font-size: 16px;\n line-height: 1.6;\n }\n h2 {\n font-size: 2em;\n }\n }<\/code><\/pre>\n* viewport<\/code> Birimleri (vw<\/code>, vh<\/code>):<\/strong> vw<\/code> (viewport width) ve vh<\/code> (viewport height) birimleri, metin boyutlar\u0131n\u0131n do\u011frudan taray\u0131c\u0131 penceresinin geni\u015fli\u011fine veya y\u00fcksekli\u011fine g\u00f6re \u00f6l\u00e7eklenmesini sa\u011flar. Bu, ak\u0131\u015fkan tipografi olu\u015fturmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r, ancak \u00e7ok dikkatli kullan\u0131lmal\u0131d\u0131r, \u00e7\u00fcnk\u00fc a\u015f\u0131r\u0131ya ka\u00e7\u0131ld\u0131\u011f\u0131nda metinler \u00e7ok b\u00fcy\u00fck veya \u00e7ok k\u00fc\u00e7\u00fck g\u00f6r\u00fcnebilir.
\n* Ak\u0131\u015fkan Tipografi:<\/strong> calc()<\/code> fonksiyonu ve vw<\/code> birimlerinin bir kombinasyonu ile ak\u0131\u015fkan tipografi olu\u015fturulabilir. Bu, font boyutunun ekran boyutuna g\u00f6re kademeli olarak de\u011fi\u015fmesini sa\u011flar. \u00d6rne\u011fin, font-size: calc(1em + 1vw);<\/code> gibi bir ifade, font boyutunun temel bir em<\/code> de\u011ferine ek olarak viewport geni\u015fli\u011finin bir y\u00fczdesi kadar b\u00fcy\u00fcmesini sa\u011flar.<\/p>\nSonu\u00e7<\/h3>\n
CSS, web sayfalar\u0131ndaki metinleri sadece g\u00f6rsel olarak bi\u00e7imlendirmekle kalmay\u0131p, ayn\u0131 zamanda okunabilirlik, estetik ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan optimize etmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. Temel font \u00f6zelliklerinden ba\u015flayarak, metin ak\u0131\u015f\u0131n\u0131 kontrol eden geli\u015fmi\u015f d\u00fczenleme tekniklerine, eri\u015filebilirlik ve duyarl\u0131l\u0131k konular\u0131na kadar geni\u015f bir yelpazede sunulan CSS yetenekleri, web geli\u015ftiricilerine ve tasar\u0131mc\u0131lar\u0131na s\u0131n\u0131rs\u0131z yarat\u0131c\u0131l\u0131k alan\u0131 sunar.<\/p>\n
Etkili metin d\u00fczenlemesi, sadece teknik bilgi birikimi de\u011fil, ayn\u0131 zamanda iyi bir tasar\u0131m anlay\u0131\u015f\u0131 ve kullan\u0131c\u0131 odakl\u0131 bir yakla\u015f\u0131m gerektirir. Her projenin kendine \u00f6zg\u00fc ihtiya\u00e7lar\u0131 oldu\u011funu unutmamak, farkl\u0131 CSS \u00f6zelliklerini birle\u015ftirerek en uygun \u00e7\u00f6z\u00fcmleri bulmak ve s\u00fcrekli olarak deneme yapmak \u00f6nemlidir. Eri\u015filebilirlik standartlar\u0131na uymak ve farkl\u0131 cihazlarda duyarl\u0131 bir deneyim sunmak, modern web geli\u015ftiricili\u011finin temel ta\u015flar\u0131ndand\u0131r. Bu rehberde ele al\u0131nan konular\u0131 derinlemesine inceleyerek ve pratik uygulamalarla peki\u015ftirerek, web projelerinizde metinlerinizi ustal\u0131kla d\u00fczenleyebilir ve kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in unutulmaz bir okuma deneyimi sunabilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber\nWeb sayfalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan metinler, kullan\u0131c\u0131 deneyimini do\u011frudan etki","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-31451","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber Web sayfalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan metinler, kullan\u0131c\u0131 deneyimini do\u011frudan etki\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-10T00:40:47+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-10-10T00:40:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\"},\"wordCount\":2971,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\",\"name\":\"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-10T00:40:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber","og_description":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber Web sayfalar\u0131n\u0131n temel yap\u0131 ta\u015flar\u0131ndan biri olan metinler, kullan\u0131c\u0131 deneyimini do\u011frudan etki","og_url":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-10T00:40:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"16 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber","datePublished":"2025-10-10T00:40:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/"},"wordCount":2971,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/","name":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-10T00:40:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-ile-metin-duzenleme-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS ile Metin D\u00fczenleme: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31451"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31451\/revisions"}],"predecessor-version":[{"id":31452,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31451\/revisions\/31452"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}