{"id":4077,"date":"2020-10-03T18:23:52","date_gmt":"2020-10-03T15:23:52","guid":{"rendered":"https:\/\/www.niobehosting.com\/blog\/?p=4077"},"modified":"2020-10-03T18:23:52","modified_gmt":"2020-10-03T15:23:52","slug":"css-nedir","status":"publish","type":"post","link":"https:\/\/www.niobehosting.com\/blog\/css-nedir\/","title":{"rendered":"CSS Nedir? Nas\u0131l Kullan\u0131l\u0131r? Nas\u0131l \u00d6\u011frenilir?"},"content":{"rendered":"\r\n

Web geli\u015ftirmenin temelini olu\u015fturan kodlama dili\u00a0 HTML\u2019yi hat\u0131rl\u0131yor musunuz? Cevab\u0131n\u0131z evet ise, Basamakl\u0131 Stil Sayfalar\u0131 anlam\u0131na gelen CSS\u2019yi de duymu\u015fsunuzdur. Fakat HTML\u2019yi daha \u00f6nce duymad\u0131ysan\u0131z, k\u0131sa bir a\u00e7\u0131klama yapal\u0131m. HTML yani Hiper Metin \u0130\u015faretleme Dili , web sitesi olu\u015ftururken \u00f6\u011frenmeniz gereken ilk dildir. CSS ise HTML\u2019nin tamamlay\u0131c\u0131s\u0131d\u0131r.<\/p>\r\n\r\n\r\n\r\n

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

CSS, Basamakl\u0131 Stil Sayfalar\u0131 anlam\u0131na gelir. CSS kullanarak, bir web sayfas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirebilir ve kendi istedi\u011finiz gibi \u015f\u0131k bir g\u00f6r\u00fcn\u00fcm verebilirsiniz.<\/p>\r\n\r\n\r\n\r\n

CSS’yi kullanarak, metin rengini, yaz\u0131 tipi stilini, paragraflar aras\u0131ndaki aral\u0131\u011f\u0131, s\u00fctunlar\u0131n nas\u0131l boyutland\u0131r\u0131laca\u011f\u0131n\u0131 ve yerle\u015ftirilece\u011fini, hangi arka plan g\u00f6r\u00fcnt\u00fclerinin veya renklerinin kullan\u0131laca\u011f\u0131n\u0131, yerle\u015fim tasar\u0131mlar\u0131n\u0131, farkl\u0131 cihazlar i\u00e7in ekrandaki varyasyonlar\u0131 ya da ekran boyutlar\u0131n\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\r\n\r\n\r\n\r\n

CSS S\u00fcr\u00fcmleri ve \u00d6zellikleri Nelerdir?<\/h2>\r\n\r\n\r\n\r\n

Cascading Style Sheets, seviye 1 (CSS1)<\/strong> Aral\u0131k 1996’da piyasaya s\u00fcr\u00fclm\u00fc\u015ft\u00fcr. Bu s\u00fcr\u00fcm, CSS dilini ve t\u00fcm HTML etiketleri i\u00e7in basit g\u00f6rsel bi\u00e7imlendirme modelini a\u00e7\u0131klar.<\/p>\r\n\r\n\r\n\r\n

CSS2<\/strong>, May\u0131s 1998’de CSS1 \u00fczerine in\u015fa edilmi\u015ftir. Bu s\u00fcr\u00fcm, a\u015f\u0131r\u0131 kapsaml\u0131 metin bi\u00e7imlendirme dilini geli\u015ftirmek i\u00e7in kullan\u0131lan bildirimsel bir dildir. \u0130\u015fitsel stil sayfalar\u0131, geni\u015fletilmi\u015f yaz\u0131 tipi se\u00e7imi, otomatik numaraland\u0131rma vb. geli\u015fmi\u015f yeteneklere sahiptir. CSS2’nin geriye d\u00f6n\u00fck uyumlulu\u011fu vard\u0131r.
CSS3<\/strong>, Haziran 1999’da daha eski CSS s\u00fcr\u00fcmleri \u00fczerine in\u015fa edilmi\u015ftir. CSS3, \u00f6nceki CSS s\u00fcr\u00fcmlerinin (CSS2) en son standart\u0131d\u0131r. CSS2 ve CSS3 aras\u0131ndaki en b\u00fcy\u00fck fark, CSS3’\u00fcn art\u0131k farkl\u0131 mod\u00fcllere b\u00f6l\u00fcnm\u00fc\u015f olmas\u0131d\u0131r.\u00a0 Her mod\u00fcl W3C’den ayr\u0131 ayr\u0131 ge\u00e7ti\u011fi i\u00e7in, daha geni\u015f bir taray\u0131c\u0131 deste\u011fi yelpazesi vard\u0131r. Uyumlulu\u011fu sa\u011flamak i\u00e7in CSS3 sayfalar\u0131n\u0131z\u0131 olabildi\u011fince \u00e7ok taray\u0131c\u0131da ve i\u015fletim sisteminde test etti\u011finizden emin olman\u0131z gerekir. CSS3, HTML5’in ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r.<\/p>\r\n\r\n\r\n\r\n

HTML ile CSS \u0130li\u015fkisi<\/h2>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

HTML bir web sitesinin ana bile\u015feni iken, CSS, d\u00fczeni kontrol eder ve web tasar\u0131m\u0131n\u0131 (sayfalar\u0131n nas\u0131l sunuldu\u011fu) ayarlar. CSS, HTML \u00f6\u011feleri i\u00e7in arka planlar\u0131, dolguyu, renkleri ve di\u011fer bir\u00e7ok \u00f6zelli\u011fi ayarlar. Animasyon ve resim galerileri gibi di\u011fer heyecan verici \u00f6zellikleri olu\u015fturmak i\u00e7in de CSS’yi kullanabilirsiniz.<\/p>\r\n\r\n\r\n\r\n

HTML’ye \u00e7ok benzer \u015fekilde, CSS de bilgisayar\u0131n\u0131zdaki bir metin d\u00fczenleyici veya kelime i\u015flemci arac\u0131l\u0131\u011f\u0131yla basit ve d\u00fcz metin olarak yaz\u0131l\u0131r. Bu CSS kodunu HTML sayfalar\u0131n\u0131za eklemenin \u00fc\u00e7 ana yolu vard\u0131r: Harici, dahili veya sat\u0131r i\u00e7i.\u00a0<\/p>\r\n\r\n\r\n\r\n

Harici (external) stil sayfalar\u0131 <\/strong>.CSS dosyalar\u0131 olarak kaydedilir ve tek bir dosya arac\u0131l\u0131\u011f\u0131yla t\u00fcm bir web sitesinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc belirlemek i\u00e7in kullan\u0131labilir. Harici bir stil sayfas\u0131 kullanmak i\u00e7in, .html dosyalar\u0131n\u0131z\u0131n harici stil sayfas\u0131na ba\u011flanan ve a\u015fa\u011f\u0131dakine benzer bir ba\u015fl\u0131k b\u00f6l\u00fcm\u00fc i\u00e7ermesi gerekir:<\/p>\r\n\r\n\r\n\r\n

<head><\/p>\r\n\r\n\r\n\r\n

<link rel=\u201dstylesheet\u201d\u00a0 type=\u201dtext\/css\u201d\u00a0 href=mysitestyle.css\u201d><\/p>\r\n\r\n\r\n\r\n

<\/head><\/p>\r\n\r\n\r\n\r\n

Bu .html dosyas\u0131n\u0131 harici stil sayfan\u0131za ba\u011flar ve bu dosyadaki t\u00fcm CSS talimatlar\u0131, ba\u011flant\u0131l\u0131 .html sayfalar\u0131n\u0131za uygulan\u0131r.<\/p>\r\n\r\n\r\n\r\n

Dahili (Internal) stil sayfalar\u0131, do\u011frudan belirli bir .html sayfas\u0131n\u0131n ba\u015fl\u0131\u011f\u0131na yaz\u0131lan CSS talimatlar\u0131d\u0131r. Dahili stil sayfas\u0131 a\u015fa\u011f\u0131daki \u00f6rne\u011fe benzer:<\/p>\r\n\r\n\r\n\r\n

<head><\/p>\r\n\r\n\r\n\r\n

<style><\/p>\r\n\r\n\r\n\r\n

Body\u00a0 {\u00a0 background-color:thistle;\u00a0 }<\/p>\r\n\r\n\r\n\r\n

P\u00a0 {\u00a0 font-size:20px;\u00a0 color:mediumblue;\u00a0 }<\/p>\r\n\r\n\r\n\r\n

<\/style><\/p>\r\n\r\n\r\n\r\n

<\/head><\/p>\r\n\r\n\r\n\r\n

Son olarak, sat\u0131r i\u00e7i (inline) stiller, do\u011frudan HTML koduna yaz\u0131lan ve yaln\u0131zca tek bir kodlama \u00f6rne\u011fine uygulanabilen CSS par\u00e7ac\u0131klar\u0131d\u0131r.\u00a0<\/p>\r\n\r\n\r\n\r\n

\u00d6rne\u011fin, <h1\u00a0 style=\u201dfont-size:40px;color:violet;\u201d>Check out this headline!<\/h1> tek bir .html sayfas\u0131ndaki belirli bir ba\u015fl\u0131\u011f\u0131n mor, 40 punto yaz\u0131 tipinde g\u00f6r\u00fcnmesine neden olur.<\/p>\r\n\r\n\r\n\r\n

\u00d6rneklerden de anlayaca\u011f\u0131n\u0131z gibi, HTML web sitenizi destekleyen temel \u00e7er\u00e7eveler, duvarlar ve kiri\u015flerse; CSS boya, pencere stili ve peyzaj gibidir.<\/p>\r\n\r\n\r\n\r\n

CSS Frameworkleri ve K\u00fct\u00fcphaneleri<\/h2>\r\n\r\n\r\n\r\n

A\u015fa\u011f\u0131da en iyi CSS framework ve k\u00fct\u00fcphanelerini sizin i\u00e7in bir araya getirdik.\u00a0<\/p>\r\n\r\n\r\n\r\n

\u015eimdi hep birlikte bu framework ve k\u00fct\u00fcphaneleri inceleyelim:<\/p>\r\n\r\n\r\n\r\n