{"id":56265,"date":"2023-01-05T13:55:00","date_gmt":"2023-01-05T10:55:00","guid":{"rendered":"http:\/\/earnado.com\/tr\/?p=56265"},"modified":"2023-01-05T15:55:55","modified_gmt":"2023-01-05T12:55:55","slug":"css-nedir","status":"publish","type":"post","link":"https:\/\/earnado.com\/tr\/css-nedir\/","title":{"rendered":"CSS Nedir?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"56265\" class=\"elementor elementor-56265\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3ad2877e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3ad2877e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2dd106fb\" data-id=\"2dd106fb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-532d67e elementor-widget elementor-widget-text-editor\" data-id=\"532d67e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 08-05-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<div class=\"section-content\">\r\n<h1><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-56280\" src=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-4.png\" alt=\"css nedir\" width=\"700\" height=\"350\" srcset=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-4.png 700w, https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-4-300x150.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/h1>\r\n<h1>CSS Nedir?<\/h1>\r\n<strong>CSS<\/strong> (Basamakl\u0131 Stil Sayfalar\u0131), harika g\u00f6r\u00fcnen web sayfalar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar. Peki CSS nedir ve nas\u0131l \u00e7al\u0131\u015f\u0131r? <span class=\"\">Bu yaz\u0131m\u0131zda CSS&#8217;nin ne oldu\u011funu basit bir \u015fekilde sizlere a\u00e7\u0131klayacak ve ayr\u0131ca dille ilgili baz\u0131 \u00f6nemli terimleri de anlataca\u011f\u0131z.<\/span>\r\n\r\nHTML&#8217; ye Giri\u015f mod\u00fcl\u00fcnde, HTML&#8217; in ne oldu\u011funu ve belgeleri i\u015faretlemek i\u00e7in nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 \u00f6\u011frenmi\u015ftik. Bu belgeler bir web taray\u0131c\u0131s\u0131nda okunabilir olacakt\u0131r. Ba\u015fl\u0131klar normal metinden daha b\u00fcy\u00fck g\u00f6r\u00fcnecek, paragraflar yeni bir sat\u0131ra b\u00f6l\u00fcnecek ve aralar\u0131nda bo\u015fluk olacak. Ba\u011flant\u0131lar, metnin geri kalan\u0131ndan ay\u0131rt etmek i\u00e7in renkli ve alt\u0131 \u00e7izili. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz, taray\u0131c\u0131n\u0131n varsay\u0131lan stilleridir. \u00c7ok temel stiller taray\u0131c\u0131n\u0131n sayfan\u0131n yazar\u0131 taraf\u0131ndan a\u00e7\u0131k bir stil belirtilmemi\u015f olsa bile. Sayfan\u0131n temelde okunabilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in HTML&#8217; ye uygulad\u0131\u011f\u0131 bir y\u00f6ntemdir.\r\n\r\n<img decoding=\"async\" src=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/First_steps\/What_is_CSS\/html-example.png\" alt=\"Bir taray\u0131c\u0131 taraf\u0131ndan kullan\u0131lan varsay\u0131lan stiller\" width=\"1385\" height=\"594\" \/>\r\n\r\nAncak, t\u00fcm web siteleri b\u00f6yle g\u00f6r\u00fcnseydi web s\u0131k\u0131c\u0131 bir yer olurdu. CSS kullanarak, bu s\u0131k\u0131c\u0131 durumdan kurtulabilir. HTML \u00f6\u011felerinin taray\u0131c\u0131da tam olarak nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kontrol edebilir ve istedi\u011finiz tasar\u0131m\u0131 kullanarak i\u015faretlemenizi sunabilirsiniz.\r\n\r\n<img decoding=\"async\" class=\"alignnone size-full wp-image-56282\" src=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-3.png\" alt=\"css nedir\" width=\"700\" height=\"350\" srcset=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-3.png 700w, https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-3-300x150.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/>\r\n\r\n<\/div>\r\n<section aria-labelledby=\"what_is_css_for\">\r\n<h2 id=\"what_is_css_for\">CSS ne i\u00e7in?<\/h2>\r\n<div class=\"section-content\">\r\n\r\nDaha \u00f6nce de belirtti\u011fimiz gibi CSS, belgelerin kullan\u0131c\u0131lara nas\u0131l sunuldu\u011funu, nas\u0131l \u015fekillendirildi\u011fini, d\u00fczenlendi\u011fini vb. belirten bir dildir.\r\n\r\n<strong>Peki bu Belge nedir? <\/strong>\r\n\r\n<strong>Belge<\/strong> 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 veya XML gibi ba\u015fka bi\u00e7imlendirme dilleriyle de kar\u015f\u0131la\u015fabilirsiniz.\r\n\r\n\u0130lginizi \u00e7ekebilir: <a href=\"https:\/\/earnado.com\/tr\/web-sitesi-kurmak-icin-neler-yapmak-gerekir-adim-adim-anlatim\/\">Web Sitesi Kurmak \u0130\u00e7in Neler Yapmak Gerekir? Ad\u0131m Ad\u0131m Anlat\u0131m<\/a>\r\n\r\n<strong>Bir belgeyi bir kullan\u0131c\u0131ya sunmak<\/strong>, onu hedef kitleniz taraf\u0131ndan kullan\u0131labilecek bir forma d\u00f6n\u00fc\u015ft\u00fcrmek anlam\u0131na gelir. Firefox, Chrome veya 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.\r\n<div id=\"sect1\" class=\"notecard note\">\r\n\r\n<strong>Not:<\/strong> Bir taray\u0131c\u0131ya bazen kullan\u0131c\u0131 arac\u0131s\u0131 denir. Bu, temelde bir bilgisayar sistemi i\u00e7indeki bir ki\u015fiyi temsil eden bir bilgisayar program\u0131 anlam\u0131na gelir. Taray\u0131c\u0131lar, CSS hakk\u0131nda konu\u015furken akl\u0131m\u0131za gelen ana kullan\u0131c\u0131 arac\u0131 t\u00fcr\u00fcd\u00fcr, ancak yaln\u0131zca bunlar de\u011fildir. HTML ve CSS belgelerini yazd\u0131r\u0131lacak PDF&#8217;lere d\u00f6n\u00fc\u015ft\u00fcrenler gibi ba\u015fka kullan\u0131c\u0131 arac\u0131lar\u0131 da mevcuttur.\r\n\r\n<\/div>\r\nCSS, \u00e7ok temel belge metni stili i\u00e7in de kullan\u0131labilir. \u00d6rne\u011fin, ba\u015fl\u0131klar\u0131n ve ba\u011flant\u0131lar\u0131n rengini ve boyutunu de\u011fi\u015ftirmek i\u00e7in bir d\u00fczen olu\u015fturmak i\u00e7in kullan\u0131labilir. Ay\u0131ca 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\u00fcrmek ve animasyon gibi efektler i\u00e7in bile kullan\u0131labilir.\r\n\r\n<\/div>\r\n<\/section><section aria-labelledby=\"css_syntax\">\r\n<h2 id=\"css_syntax\">CSS s\u00f6zdizimi<\/h2>\r\n<div class=\"section-content\">\r\n\r\nCSS kural tabanl\u0131 bir dildir. Web sayfan\u0131zdaki belirli \u00f6\u011felere veya \u00f6\u011fe gruplar\u0131na uygulanmas\u0131 gereken stil gruplar\u0131n\u0131 belirterek kurallar\u0131 tan\u0131mlars\u0131n\u0131z.\r\n\r\n\u00d6rne\u011fin, sayfan\u0131zda ana ba\u015fl\u0131\u011f\u0131n b\u00fcy\u00fck k\u0131rm\u0131z\u0131 metin olarak g\u00f6sterilmesine karar verebilirsiniz.\u00a0A\u015fa\u011f\u0131daki kod, yukar\u0131da a\u00e7\u0131klanan stili elde edecek \u00e7ok basit bir CSS kural\u0131n\u0131 g\u00f6sterir:\r\n<div class=\"code-example\">\r\n<pre class=\"brush: css notranslate\"><code><span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> red<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 5em<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\r\nYukar\u0131daki \u00f6rnekte, CSS kural\u0131 bir\u00a0se\u00e7iciyle\u00a0a\u00e7\u0131l\u0131r .\u00a0Bu, stil verece\u011fimiz HTML \u00f6\u011fesini\u00a0<em>se\u00e7er. <\/em>Bu durumda, birinci seviye ba\u015fl\u0131klar\u0131 (\u00a0<code>&lt;h1&gt;<\/code>) \u015fekillendirmeliyiz.\r\n\r\n<\/div>\r\n<ul>\r\n \t<li>Daha sonra bir k\u00fcme parantezi g\u00f6r\u00fcyoruz<code>{ }<\/code>.<\/li>\r\n \t<li><strong>Parantezlerin i\u00e7inde \u00f6zellik<\/strong>\u00a0ve\u00a0<strong>de\u011fer<\/strong>\u00a0\u00e7iftleri\u00a0\u015feklini alan\u00a0bir veya daha fazla\u00a0<strong>bildirim olacakt\u0131r.\u00a0<\/strong>\u00d6zelli\u011fi (yukar\u0131daki \u00f6rnekteki gibi) iki nokta \u00fcst \u00fcste i\u015faretinden \u00f6nce \u00f6zelli\u011fin de\u011ferini ise iki nokta \u00fcst \u00fcste i\u015faretinden sonra (bu \u00f6rnekteki gibi) belirtiriz. <code>color<\/code><code>red<\/code><\/li>\r\n \t<li>Bu \u00f6rnekte, biri <code>color<\/code> i\u00e7in ve di\u011feri <code>font-size<\/code> i\u00e7in olmak \u00fczere iki bildirim i\u00e7erir.\u00a0Her bir \u00e7ift, se\u00e7ece\u011fimiz eleman(lar)\u0131n bir \u00f6zelli\u011fini (\u00a0<code>&lt;h1&gt;<\/code>bu durumda) belirtir, ard\u0131ndan bu \u00f6zelli\u011fe vermek istedi\u011fimiz bir de\u011feri belirtir.<\/li>\r\n<\/ul>\r\nCSS\u00a0\u00f6zellikleri, hangi \u00f6zelli\u011fin belirtildi\u011fine ba\u011fl\u0131 olarak farkl\u0131 izin verilen de\u011ferlere sahiptir.\u00a0\u00d6rne\u011fimizde \u00e7e\u015fitli\u00a0renk de\u011ferleri<code>color<\/code> alabilen bir \u00f6zelli\u011fimiz var.\u00a0 Ayr\u0131ca <code>font-size<\/code> \u00a0\u00f6zelli\u011fine de sahibiz.\u00a0Bu \u00f6zellik, \u00e7e\u015fitli\u00a0boyut birimlerini de\u011fer olarak alabilir.\r\n\r\nBir CSS stil sayfas\u0131, birbiri ard\u0131na yaz\u0131lan bu t\u00fcr bir\u00e7ok kural\u0131 i\u00e7erecektir.\r\n<div class=\"code-example\">\r\n<pre class=\"brush: css notranslate\"><code><span class=\"token selector\">h1<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> red<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 5em<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">p<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> black<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\r\n<\/div>\r\nYaz\u0131m\u0131z\u0131 bitirdi\u011finizde baz\u0131 de\u011ferleri \u00e7abucak \u00f6\u011frendi\u011finizi g\u00f6receksiniz, baz\u0131lar\u0131n\u0131 ise ara\u015ft\u0131rman\u0131z gerekecek. \u00c7\u00fcnk\u00fc bu konuyu sa\u011flam bir temel olu\u015fturmak i\u00e7in olduk\u00e7a iyi kavraman\u0131z gerekiyor. MDN&#8217;deki bireysel \u00f6zellik sayfalar\u0131, unuttu\u011funuzda veya de\u011fer olarak ba\u015fka ne kullanabilece\u011finizi bilmek istedi\u011finizde, \u00f6zelliklere ve de\u011ferlerine h\u0131zl\u0131 bir \u015fekilde bakman\u0131z\u0131 sa\u011flar.\r\n<div id=\"sect2\" class=\"notecard note\">\r\n\r\n<strong>Unutmay\u0131n, MDN <\/strong>CSS referans\u0131nda listelenen t\u00fcm CSS \u00f6zellik sayfalar\u0131na (di\u011fer CSS \u00f6zellikleriyle birlikte) ba\u011flant\u0131lar bulabilirsiniz. Alternatif olarak, bir CSS \u00f6zelli\u011fi hakk\u0131nda daha fazla bilgi bulman\u0131z gerekti\u011finde favori arama motorunuzda &#8220;mdn <em>css-\u00f6zellik-ad\u0131 &#8221; aramaya al\u0131\u015fmal\u0131s\u0131n\u0131z.<\/em>\u00a0\u00d6rne\u011fin, &#8220;mdn color&#8221; ve &#8220;mdn font-size&#8221; kelimelerini aramay\u0131 deneyin! bu y\u00f6ntem i\u015flemlerinizi olduk\u00e7a h\u0131zland\u0131racakt\u0131r.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-56283\" src=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/Css-nedir-1.png\" alt=\"css nedir\" width=\"700\" height=\"350\" srcset=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/Css-nedir-1.png 700w, https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/Css-nedir-1-300x150.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/>\r\n\r\n<\/div>\r\n<\/div>\r\n<\/section><section aria-labelledby=\"css_modules\">\r\n<h3 id=\"css_modules\">CSS mod\u00fclleri<\/h3>\r\n<div class=\"section-content\">\r\n\r\n<em>CSS kullanarak stil olu\u015fturabilece\u011finiz pek \u00e7ok \u015fey oldu\u011fundan, dil mod\u00fcllere<\/em> ayr\u0131lm\u0131\u015ft\u0131r. MDN&#8217;yi ke\u015ffederken bu mod\u00fcllere ili\u015fkin referanslar\u0131 g\u00f6receksiniz. Belge sayfalar\u0131n\u0131n \u00e7o\u011fu belirli bir mod\u00fcl etraf\u0131nda d\u00fczenlenmi\u015ftir. \u00d6rne\u011fin, amac\u0131n\u0131n ne oldu\u011funu ve i\u00e7erdi\u011fi \u00f6zellikleri ve \u00f6zellikleri \u00f6\u011frenmek i\u00e7in\u00a0Arka Planlar ve Kenarl\u0131klar mod\u00fcl\u00fcne y\u00f6nelik MDN referans\u0131na bakabilirsiniz.\u00a0<em>Bu mod\u00fclde, teknolojiyi tan\u0131mlayan Spesifikasyonlara<\/em>\u00a0da bir ba\u011flant\u0131 bulacaks\u0131n\u0131z\u00a0(ayr\u0131ca a\u015fa\u011f\u0131daki b\u00f6l\u00fcme bak\u0131n).\r\n\r\nBu a\u015famada, CSS&#8217;nin nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131 konusunda \u00e7ok fazla endi\u015felenmenize gerek yok. Ancak, \u00f6rne\u011fin belirli bir \u00f6zelli\u011fin di\u011fer benzer \u015feyler aras\u0131nda bulunabilece\u011finin ve bu nedenle muhtemelen ayn\u0131 belirtimde oldu\u011funun fark\u0131ndaysan\u0131z bilgi bulmay\u0131 kolayla\u015ft\u0131rabilir.\r\n\r\nSpesifik bir \u00f6rnek i\u00e7in, Arka Planlar ve Kenarl\u0131klar mod\u00fcl\u00fcne geri d\u00f6nelim. Bu mod\u00fclde tan\u0131mlanacak olan <code>background-color<\/code>ve <code>border-color<\/code> \u00f6zellikleri i\u00e7in mant\u0131kl\u0131 oldu\u011funu d\u00fc\u015f\u00fcnebilirsiniz . Ve evet hakl\u0131 olurdunuz.\r\n\r\n<\/div>\r\n<\/section><section aria-labelledby=\"css_specifications\">\r\n<h3 id=\"css_specifications\">CSS \u00f6zellikleri<\/h3>\r\n<div class=\"section-content\">\r\n\r\nGelin biraz da CSS \u00f6zelliklerine de\u011finelim. T\u00fcm web standartlar\u0131 teknolojileri (HTML, CSS, JavaScript, vb.) standart kurulu\u015flar\u0131 ( W3C , WHATWG , ECMA veya Khronos gibi) taraf\u0131ndan yay\u0131nlanan ve spesifikasyonlar (veya &#8220;\u00f6zellikler&#8221;) ad\u0131 verilen dev belgelerde tan\u0131mlan\u0131r ve kesin olarak tan\u0131mlan\u0131r. Asl\u0131nda bu teknolojilerin nas\u0131l davranmas\u0131 gerekti\u011fidir.\r\n\r\nCSS&#8217;de farkl\u0131 de\u011fil tabi ki, W3C i\u00e7inde CSS \u00c7al\u0131\u015fma Grubu ad\u0131 verilen grup taraf\u0131ndan geli\u015ftirildi. Bu grup, taray\u0131c\u0131 sat\u0131c\u0131lar\u0131n\u0131n ve CSS ile ilgilenen di\u011fer \u015firketlerin temsilcilerinden olu\u015fur. <em>Davetli uzmanlar<\/em> olarak bilinen ve ba\u011f\u0131ms\u0131z sesler olarak hareket eden ba\u015fka insanlar da vard\u0131r ve bir \u00fcye kurulu\u015fla ba\u011flant\u0131l\u0131 de\u011fillerdir.\r\n\r\nYeni CSS \u00f6zellikleri, CSS \u00c7al\u0131\u015fma Grubu taraf\u0131ndan geli\u015ftirilir veya belirlenir. Belirli bir taray\u0131c\u0131 belirli bir yetene\u011fe sahip olmakla ilgilendi\u011finden. Bazen de web tasar\u0131mc\u0131lar\u0131 ve geli\u015ftiricileri bir \u00f6zellik istedi\u011finden. Bazen de \u00c7al\u0131\u015fma Grubunun kendisi bir gereksinim belirledi\u011finden CSS s\u00fcrekli geli\u015fiyor ve yeni \u00f6zellikler kullan\u0131ma sunuluyor. Bununla birlikte, CSS ile ilgili \u00f6nemli bir \u015fey ise, herkesin eski web sitelerini bozacak \u015fekilde hi\u00e7bir \u015feyi de\u011fi\u015ftirmemek i\u00e7in \u00e7ok \u00e7al\u0131\u015fmas\u0131d\u0131r elbette. 2000 y\u0131l\u0131nda o zamanlar mevcut olan s\u0131n\u0131rl\u0131 CSS kullan\u0131larak olu\u015fturulmu\u015f bir web sitesi bug\u00fcn hala bir taray\u0131c\u0131da kullan\u0131labilir olmal\u0131d\u0131r!\r\n\r\nCSS&#8217;ye yeni ba\u015flayan biri olarak, b\u00fcy\u00fck olas\u0131l\u0131kla CSS \u00f6zelliklerini bunalt\u0131c\u0131 bulacaks\u0131n\u0131z. Evet bu konu yeni ba\u015flayan yaz\u0131l\u0131mc\u0131lar i\u00e7in biraz s\u0131k\u0131c\u0131 gelebilir fakat bu temel bilgiyi ilerleyen projeleriniz yap\u0131m a\u015famas\u0131nda \u00e7ok fazla kullanaca\u011f\u0131na eminiz. Bunlar web geli\u015ftiricilerinin CSS&#8217;yi anlamak i\u00e7in okumas\u0131 i\u00e7in de\u011fil. Kullan\u0131c\u0131 arac\u0131lar\u0131ndaki \u00f6zelliklere destek uygulamak i\u00e7in m\u00fchendislerin kullanmas\u0131 i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bir\u00e7ok deneyimli geli\u015ftirici, MDN belgelerine veya di\u011fer \u00f6\u011freticilere ba\u015fvurmay\u0131 tercih eder. Yine de bu \u00f6zelliklerin var oldu\u011funu bilmeye ve kulland\u0131\u011f\u0131n\u0131z CSS taray\u0131c\u0131 deste\u011fi ve \u00f6zellikler aras\u0131ndaki ili\u015fkiyi anlamaya de\u011fer.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-56281\" src=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-2.png\" alt=\"css nedir\" width=\"700\" height=\"350\" srcset=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-2.png 700w, https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-2-300x150.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/>\r\n\r\n<\/div>\r\n<\/section><section aria-labelledby=\"browser_support_information\">\r\n<h3 id=\"browser_support_information\">Taray\u0131c\u0131 destek bilgileri<\/h3>\r\n<div class=\"section-content\">\r\n\r\nBir CSS \u00f6zelli\u011fi belirlendikten sonra, yaln\u0131zca bir veya daha fazla taray\u0131c\u0131 bu \u00f6zelli\u011fi uygulad\u0131ysa web sayfalar\u0131n\u0131 geli\u015ftirmede bizim i\u00e7in yararl\u0131d\u0131r. Bu, kodun CSS dosyam\u0131zdaki talimat\u0131 ekrana yazd\u0131r\u0131labilecek bir \u015feye d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in yaz\u0131ld\u0131\u011f\u0131 anlam\u0131na gelmektedir. Bu s\u00fcrece daha \u00e7ok CSS Nas\u0131l \u00c7al\u0131\u015f\u0131r yaz\u0131m\u0131zda bakaca\u011f\u0131z. T\u00fcm taray\u0131c\u0131lar\u0131n ayn\u0131 anda bir \u00f6zelli\u011fi uygulamas\u0131 al\u0131\u015f\u0131lmad\u0131k bir durumdur. Bu nedenle genellikle CSS&#8217;nin bir k\u0131sm\u0131n\u0131 baz\u0131 taray\u0131c\u0131larda kullanabilece\u011finiz di\u011ferlerinde kullanamayaca\u011f\u0131n\u0131z bir bo\u015fluk vard\u0131r. Bu nedenle uygulama durumunu kontrol etmek faydal\u0131d\u0131r.\r\n\r\n\u0130lginizi \u00e7ekebilir: <a href=\"https:\/\/earnado.com\/tr\/internet-sunuculari-nasil-calisir\/\">\u0130nternet Sunucular\u0131 Nas\u0131l \u00c7al\u0131\u015f\u0131r? Sunucu Nas\u0131l Se\u00e7ilir?<\/a>\r\n\r\nTaray\u0131c\u0131 destek durumu, her MDN CSS \u00f6zellik sayfas\u0131nda &#8220;Taray\u0131c\u0131 uyumlulu\u011fu&#8221; adl\u0131 bir tabloda g\u00f6sterir. Bu m\u00fclk\u00fcn web sitenizde kullan\u0131l\u0131p kullan\u0131lamayaca\u011f\u0131n\u0131 kontrol etmek i\u00e7in tablodaki bilgilere bak\u0131n. \u00d6rnek olarak, CSS <code>font-family<\/code> \u00f6zelli\u011fi i\u00e7in taray\u0131c\u0131 uyumluluk tablosuna bak\u0131n.\r\n\r\nGereksinimlerinize ba\u011fl\u0131 olarak, bu \u00f6zelli\u011fin \u00e7e\u015fitli taray\u0131c\u0131larda nas\u0131l desteklendi\u011fini kontrol etmek i\u00e7in taray\u0131c\u0131 uyumluluk tablosunu kullanabilirsiniz. Ayr\u0131ca belirli taray\u0131c\u0131n\u0131z\u0131n ve sahip oldu\u011funuz s\u00fcr\u00fcm\u00fcn \u00f6zelli\u011fi destekleyip desteklemedi\u011fini veya bilmeniz gereken herhangi bir uyar\u0131 olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilirsiniz.\r\n\r\n<\/div>\r\n<\/section><section aria-labelledby=\"summary\">\r\n<h4 id=\"summary\">\u00d6zet<\/h4>\r\n<div class=\"section-content\">\r\n\r\nYaz\u0131m\u0131z\u0131n sonuna geldiniz! Bu yaz\u0131m\u0131zda size CSS hakk\u0131nda biraz teorik biraz da anlamsal olabilecek bilgiler aktarmaya \u00e7al\u0131\u015ft\u0131k. Yaz\u0131l\u0131ma ilgi duyan ancak \u00f6\u011frenmeye yeni ba\u015flayan bir kullan\u0131c\u0131ysan\u0131z bu yaz\u0131 size biraz bunalt\u0131c\u0131 gelebilir. Unutmay\u0131n ki bunlar\u0131 bir yaz\u0131l\u0131mc\u0131 olarak bilmek zorundas\u0131n\u0131z. Bu y\u00fczden olabildi\u011fince anlamaya ve kendinizce detayland\u0131rmaya \u00e7al\u0131\u015fmal\u0131s\u0131n\u0131z. Art\u0131k CSS&#8217;nin ne oldu\u011funu biraz anlad\u0131\u011f\u0131n\u0131za g\u00f6re, kendi kendinize biraz CSS yazmaya ba\u015flayabilirsiniz. Size bol \u015fans dilerim\r\n\r\n<\/div>\r\n<\/section>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSS Nedir? CSS (Basamakl\u0131 Stil Sayfalar\u0131), harika g\u00f6r\u00fcnen web sayfalar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar. Peki CSS nedir ve nas\u0131l \u00e7al\u0131\u015f\u0131r? Bu yaz\u0131m\u0131zda CSS&#8217;nin ne oldu\u011funu basit bir \u015fekilde sizlere a\u00e7\u0131klayacak ve ayr\u0131ca dille ilgili baz\u0131 \u00f6nemli terimleri de anlataca\u011f\u0131z. HTML&#8217; ye Giri\u015f&#8230;<\/p>\n","protected":false},"author":400,"featured_media":56285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1207,78,80,1206],"tags":[],"class_list":["post-56265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kod-gelistirme","category-web-analizi","category-web-tasarim","category-yazilim"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Nedir? - Earnado<\/title>\n<meta name=\"description\" content=\"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS&#039;in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/earnado.com\/tr\/css-nedir\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Nedir? - Earnado\" \/>\n<meta property=\"og:description\" content=\"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS&#039;in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/earnado.com\/tr\/css-nedir\/\" \/>\n<meta property=\"og:site_name\" content=\"Earnado\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-05T10:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-05T12:55:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Serhat Ekta\u015f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Serhat Ekta\u015f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/earnado.com\/tr\/css-nedir\/\",\"url\":\"https:\/\/earnado.com\/tr\/css-nedir\/\",\"name\":\"CSS Nedir? - Earnado\",\"isPartOf\":{\"@id\":\"https:\/\/earnado.com\/tr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png\",\"datePublished\":\"2023-01-05T10:55:00+00:00\",\"dateModified\":\"2023-01-05T12:55:55+00:00\",\"author\":{\"@id\":\"https:\/\/earnado.com\/tr\/#\/schema\/person\/e9298f8813a78fe22888e46458d20cf6\"},\"description\":\"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS'in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!\",\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/earnado.com\/tr\/css-nedir\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage\",\"url\":\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png\",\"contentUrl\":\"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png\",\"width\":800,\"height\":400},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/earnado.com\/tr\/#website\",\"url\":\"https:\/\/earnado.com\/tr\/\",\"name\":\"Earnado\",\"description\":\"\u0130\u015finizi Kafan\u0131zda De\u011fil \u0130nternette B\u00fcy\u00fct\u00fcn!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/earnado.com\/tr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/earnado.com\/tr\/#\/schema\/person\/e9298f8813a78fe22888e46458d20cf6\",\"name\":\"Serhat Ekta\u015f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/earnado.com\/tr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5fb1bc9b3d9f5aa8c9a7882be8a8fb7472bfcbb3660620a1efef15b465b58a15?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5fb1bc9b3d9f5aa8c9a7882be8a8fb7472bfcbb3660620a1efef15b465b58a15?s=96&d=mm&r=g\",\"caption\":\"Serhat Ekta\u015f\"},\"description\":\"Yakla\u015f\u0131k 1 y\u0131ld\u0131r pazarlama ve dijital pazarlama alan\u0131 ile ilgileniyorum. Kariyerimde bu alanda ilerlemeyi d\u00fc\u015f\u00fcn\u00fcyorum. Akademik e\u011fitimin yan\u0131 s\u0131ra \u00e7e\u015fitli kurulu\u015flardaki pazarlama alan\u0131nda g\u00f6rev al\u0131yor ve online \u00fczerinden dijital pazarlama \u00fczerine e\u011fitimler al\u0131yorum.\",\"sameAs\":[\"https:\/\/www.instagram.com\/98serhat\/?hl=tr\",\"https:\/\/www.linkedin.com\/in\/serhatektas\/\"],\"url\":\"https:\/\/earnado.com\/tr\/author\/serhatektassq\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Nedir? - Earnado","description":"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS'in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!","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:\/\/earnado.com\/tr\/css-nedir\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Nedir? - Earnado","og_description":"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS'in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!","og_url":"https:\/\/earnado.com\/tr\/css-nedir\/","og_site_name":"Earnado","article_published_time":"2023-01-05T10:55:00+00:00","article_modified_time":"2023-01-05T12:55:55+00:00","og_image":[{"width":800,"height":400,"url":"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png","type":"image\/png"}],"author":"Serhat Ekta\u015f","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Serhat Ekta\u015f","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/earnado.com\/tr\/css-nedir\/","url":"https:\/\/earnado.com\/tr\/css-nedir\/","name":"CSS Nedir? - Earnado","isPartOf":{"@id":"https:\/\/earnado.com\/tr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage"},"image":{"@id":"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage"},"thumbnailUrl":"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png","datePublished":"2023-01-05T10:55:00+00:00","dateModified":"2023-01-05T12:55:55+00:00","author":{"@id":"https:\/\/earnado.com\/tr\/#\/schema\/person\/e9298f8813a78fe22888e46458d20cf6"},"description":"Bu yaz\u0131m\u0131zda CSS Nedir konusu ele ald\u0131k. CSS'in ne demek oldu\u011funu \u00f6\u011frenerek sizde yaz\u0131l\u0131m konusunda bilgi sahibi olun. \u015eimdi okuyun!","inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/earnado.com\/tr\/css-nedir\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/earnado.com\/tr\/css-nedir\/#primaryimage","url":"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png","contentUrl":"https:\/\/earnado.com\/tr\/wp-content\/uploads\/2022\/08\/css-nedir-5.png","width":800,"height":400},{"@type":"WebSite","@id":"https:\/\/earnado.com\/tr\/#website","url":"https:\/\/earnado.com\/tr\/","name":"Earnado","description":"\u0130\u015finizi Kafan\u0131zda De\u011fil \u0130nternette B\u00fcy\u00fct\u00fcn!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/earnado.com\/tr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Person","@id":"https:\/\/earnado.com\/tr\/#\/schema\/person\/e9298f8813a78fe22888e46458d20cf6","name":"Serhat Ekta\u015f","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/earnado.com\/tr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5fb1bc9b3d9f5aa8c9a7882be8a8fb7472bfcbb3660620a1efef15b465b58a15?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5fb1bc9b3d9f5aa8c9a7882be8a8fb7472bfcbb3660620a1efef15b465b58a15?s=96&d=mm&r=g","caption":"Serhat Ekta\u015f"},"description":"Yakla\u015f\u0131k 1 y\u0131ld\u0131r pazarlama ve dijital pazarlama alan\u0131 ile ilgileniyorum. Kariyerimde bu alanda ilerlemeyi d\u00fc\u015f\u00fcn\u00fcyorum. Akademik e\u011fitimin yan\u0131 s\u0131ra \u00e7e\u015fitli kurulu\u015flardaki pazarlama alan\u0131nda g\u00f6rev al\u0131yor ve online \u00fczerinden dijital pazarlama \u00fczerine e\u011fitimler al\u0131yorum.","sameAs":["https:\/\/www.instagram.com\/98serhat\/?hl=tr","https:\/\/www.linkedin.com\/in\/serhatektas\/"],"url":"https:\/\/earnado.com\/tr\/author\/serhatektassq\/"}]}},"_links":{"self":[{"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/posts\/56265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/users\/400"}],"replies":[{"embeddable":true,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/comments?post=56265"}],"version-history":[{"count":6,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/posts\/56265\/revisions"}],"predecessor-version":[{"id":57743,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/posts\/56265\/revisions\/57743"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/media\/56285"}],"wp:attachment":[{"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/media?parent=56265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/categories?post=56265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/earnado.com\/tr\/wp-json\/wp\/v2\/tags?post=56265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}