<\/p>\n\n\n\n
CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin, CSS temellerini anlaman\u0131zda size fayda sa\u011flayaca\u011f\u0131n\u0131 umuyorum. \ud83c\udf3f
<\/p>\n\n\n\n
CSS Nedir?<\/strong><\/p>\n\n\n\n CSS (Cascading Style Sheets), bir web sayfas\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc d\u00fczenlemek i\u00e7in kullan\u0131lan bir dildir. HTML sayfa yap\u0131s\u0131n\u0131 olu\u015fturur, CSS ise o yap\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc g\u00fczelle\u015ftirir. CSS sayesinde bir sitedeki t\u00fcm sayfalar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tek bir dosyadan de\u011fi\u015ftirebilirsiniz. Bu dosyan\u0131n uzant\u0131s\u0131 \u00d6rne\u011fin:<\/p>\n\n\n\n CSS Nas\u0131l Yaz\u0131l\u0131r?<\/strong><\/p>\n\n\n\n \u00d6rnek:<\/p>\n\n\n\n Bu kod: CSS Nas\u0131l Eklenir?<\/strong><\/p>\n\n\n\n External CSS (Harici)<\/em><\/strong><\/p>\n\n\n\n Ayr\u0131 bir HTML\u2019nin Yorumlar CSS\u2019te Renkler<\/strong><\/p>\n\n\n\n Renkler birka\u00e7 farkl\u0131 \u015fekilde yazabilir:<\/p>\n\n\n\n Arkaplan<\/strong><\/p>\n\n\n\n \u00d6rnek:<\/p>\n\n\n\n T\u00fcm bu \u00f6zellikleri tek sat\u0131rda da yazabiliriz Buna shorthand denir.<\/p>\n\n\n\n Kenarl\u0131klar<\/strong><\/p>\n\n\n\n Kenarl\u0131k, bir kutunun (\u00f6rne\u011fin bir paragraf\u0131n, butonun veya g\u00f6rselin) \u00e7evresini \u00e7er\u00e7eveleyen \u00e7izgidir. Kenarl\u0131\u011f\u0131n stili, rengi ve kal\u0131nl\u0131\u011f\u0131 ayarlanabilir.<\/p>\n\n\n\n Margin<\/strong><\/p>\n\n\n\n Bir kutunun kenar\u0131yla di\u011fer \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu ayarlar.<\/p>\n\n\n\n Kutunun i\u00e7 k\u0131sm\u0131ndaki metin ile kenar aras\u0131ndaki bo\u015flu\u011fu ayarlar. Margin d\u0131\u015ftan bo\u015fluk verir, padding i\u00e7ten.<\/p>\n\n\n\n <\/p>\n\n\n\n Bu yaz\u0131yla CSS\u2019in temellerine k\u0131sa bir giri\u015f yapt\u0131k. Serinin bir sonraki b\u00f6l\u00fcm\u00fcnde, konunun devam\u0131na hep birlikte g\u00f6z ataca\u011f\u0131z. Takipte kal\u0131n, sevgiyle! \ud83d\udcbb\ud83d\udc9a<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\n KAYNAK\u00c7A<\/strong><\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Genelde herkes HTML\u2019den ba\u015flar, ama ben \u00f6nce sayfalar\u0131n nas\u0131l g\u00f6rselle\u015ftirildi\u011fini anlamak istedim. Bu y\u00fczden CSS ile yola \u00e7\u0131k\u0131yorum. Gelin, birlikte web tasar\u0131m\u0131n g\u00f6rsel taraf\u0131n\u0131 ke\u015ffedelim! CSS \u00f6\u011frenirken akl\u0131mda kalan \u00f6nemli notlar\u0131 sadele\u015ftirip burada sizinle payla\u015f\u0131yorum. Bu yaz\u0131y\u0131, temel bilgileri h\u0131zl\u0131ca hat\u0131rlayabilece\u011finiz k\u00fc\u00e7\u00fck bir \u00f6zet sayfa gibi d\u00fc\u015f\u00fcnebilirsiniz. Derin konulara ge\u00e7meden \u00f6nce g\u00f6z atabilece\u011finiz bu i\u00e7eri\u011fin,…<\/p>\n","protected":false},"author":26,"featured_media":56,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[31,35,36,34,33],"class_list":["post-55","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-cbs-gelistiricisi","tag-css","tag-gis","tag-web-cbs-tasarim","tag-web-gis"],"yoast_head":"\n.css<\/code>‘dir.<\/p>\n\n\n\n\n
body {\n background-color: lightblue;\n}\n\nh1 {\n color: white;\n text-align: center;\n}\n\np {\n font-family: verdana;\n font-size: 20px;\n}<\/code><\/pre>\n\n\n\n
Bir CSS kural\u0131 iki b\u00f6l\u00fcmden olu\u015fur:<\/p>\n\n\n\nselector {\n property: value;\n}<\/code><\/pre>\n\n\n\n\n
p<\/code> \u2192 t\u00fcm <p><\/code> etiketleri.<\/li>\n\n\n\np {\n color: red;\n font-size: 16px;\n}<\/code><\/pre>\n\n\n\n
T\u00fcm <p><\/code> (paragraf) etiketlerinin yaz\u0131 rengini k\u0131rm\u0131z\u0131 yapar ve yaz\u0131 boyutunu 16 piksel ayarlar.<\/p>\n\n\n\n.css<\/code> dosyas\u0131nda yaz\u0131l\u0131r, HTML\u2019ye <link><\/code> etiketiyle ba\u011flan\u0131r. T\u00fcm sayfan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc tek dosyadan kontrol edilebilir.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<link rel=\"stylesheet\" href=\"mystyle.css\"> \/* Link etiketi *\/\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
mystyle.css ise \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n\n\n\nbody {\n background-color: lightblue;\n}\n\nh1 {\n color: navy;\n margin-left: 20px;\n}<\/code><\/pre>\n\n\n\n
Internal CSS (Dahili)<\/em><\/strong><\/p>\n\n\n\n<head><\/code> k\u0131sm\u0131nda <style><\/code> etiketiyle yaz\u0131l\u0131r. Sadece o sayfay\u0131 etkiler.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {\n background-color: linen;\n}\n\nh1 {\n color: maroon;\n margin-left: 40px;\n}\n<\/style>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Inline CSS (Sat\u0131r i\u00e7i)<\/em><\/strong><\/p>\n\n\n\n
Stil do\u011frudan HTML etiketinin i\u00e7ine yaz\u0131l\u0131r. Sadece o tek \u00f6\u011feyi etkiler. Bu y\u00f6ntem en az tercih edilendir, \u00e7\u00fcnk\u00fc kod kar\u0131\u015fabilir.<\/p>\n\n\n\n<!DOCTYPE html>\n<html>\n<body>\n\n<h1 style=\"color:blue;text-align:center;\">This is a heading<\/h1>\n<p style=\"color:red;\">This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
CSS Yorum Sat\u0131rlar\u0131<\/strong><\/p>\n\n\n\n\/* ... *\/<\/code> aras\u0131na yaz\u0131l\u0131r.<\/p>\n\n\n\n\/* Bu bir yorum sat\u0131r\u0131d\u0131r *\/\np { color: red; }<\/code><\/pre>\n\n\n\ncolor: red; \/* Renk ad\u0131 *\/<\/code>\ncolor: #ff0000; \/* HEX kodu *\/<\/code>\ncolor: rgb(255, 0, 0); \/* RGB de\u011feri *\/<\/code><\/pre>\n\n\n\n\n
background-color<\/code>: Arkaplan rengi ayarlar.<\/li>\n\n\n\nbackground-image<\/code>: Arkaplana resim ekler.<\/li>\n\n\n\nbackground-repeat<\/code>: Resim sayfada tekrar etsin mi, etmesin mi onu belirler.<\/li>\n\n\n\nbackground-attachment<\/code>: Sayfa a\u015fa\u011f\u0131 yukar\u0131 kayarken arkaplan resmi hareket etsin mi, yoksa sabit mi kals\u0131n?<\/li>\n<\/ul>\n\n\n\nbody {\n background-color: lightblue;\n background-image: url(\"clouds.jpg\");\n background-repeat: no-repeat;\n background-attachment: fixed;\n}<\/code><\/pre>\n\n\n\nbody {\n background: #ffffff url(\"img_tree.png\") no-repeat right top;\n}\n<\/code><\/pre>\n\n\n\np {\n border-style: solid;\n border-color: black;\n border-width: 2px;\n}<\/code><\/pre>\n\n\n\n
T\u00fcm\u00fc tek sat\u0131rda da yazabilir:<\/p>\n\n\n\np {\n border: 2px solid black;\n}<\/code><\/pre>\n\n\n\ndiv {\n margin-top: 20px;\n margin-right: 10px;\n margin-bottom: 5px;\n margin-left: 10px;\n}<\/code><\/pre>\n\n\n\n
Padding<\/strong><\/p>\n\n\n\ndiv {<\/code>\n padding: 10px;<\/code>\n}<\/code><\/code><\/pre>\n\n\n\n
Yaz\u0131 Rengi ve Hizalama<\/strong><\/p>\n\n\n\n\n
color<\/code>: yaz\u0131 rengi<\/li>\n\n\n\ntext-align<\/code>: hizalama<\/li>\n<\/ul>\n\n\n\nh1 {\n color: navy;\n text-align: center;\n}<\/code><\/pre>\n\n\n\n
Yaz\u0131 Dekorasyonu<\/strong><\/p>\n\n\n\np {\n text-decoration: underline;\n text-decoration-style: wavy;\n}<\/code><\/pre>\n\n\n\n
Harf D\u00f6n\u00fc\u015f\u00fcm\u00fc<\/strong><\/p>\n\n\n\nh2 {\n text-transform: uppercase; \/* T\u00fcm\u00fcn\u00fc b\u00fcy\u00fck yapar *\/\n}<\/code><\/pre>\n\n\n\n
Harf Aral\u0131\u011f\u0131<\/strong><\/p>\n\n\n\nh1 { letter-spacing: 3px; }<\/code><\/pre>\n\n\n\n
Sat\u0131r Y\u00fcksekli\u011fi<\/strong><\/p>\n\n\n\np { line-height: 1.5; }<\/code><\/pre>\n\n\n\nhttps:\/\/yoodigital.co\/tr\/css-nedir-ne-ise-yarar\/<\/a><\/code>\nhttps:\/\/www.w3schools.com\/css\/default.asp<\/a><\/code><\/pre>\n\n\n\n