{"id":673,"date":"2024-11-29T23:04:18","date_gmt":"2024-11-29T20:04:18","guid":{"rendered":"https:\/\/aslihankaratas.com\/?p=673"},"modified":"2024-11-30T22:12:03","modified_gmt":"2024-11-30T19:12:03","slug":"css-ozellikleri","status":"publish","type":"post","link":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/","title":{"rendered":"CSS \u00d6ZELL\u0130KLER\u0130"},"content":{"rendered":"\n
    \n
  1. Yaz\u0131 Stilleri:<\/strong>\n
      \n
    • Yaz\u0131 tipi, rengi, boyutu ve hizalamas\u0131n\u0131 belirlemek i\u00e7in kullan\u0131l\u0131r.<\/li>\n\n\n\n
    • \u00d6rnek: .baslik { font-family: Georgia; color: navy; margin: 20px; }<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Arka Plan:<\/strong>\n
        \n
      • Arka plan rengi veya resmi ayarlamak i\u00e7in kullan\u0131l\u0131r.<\/li>\n\n\n\n
      • \u00d6rnek: background-color: lightblue; background-image: url('resim.jpg');<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Kenarl\u0131k (Border):<\/strong>\n
          \n
        • \u00c7er\u00e7eve olu\u015fturur. Kal\u0131nl\u0131k, renk ve stil ayarlanabilir.<\/li>\n\n\n\n
        • \u00d6rnek: border: 3px dashed green; border-radius: 10px;<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Bo\u015fluklar:<\/strong>\n
            \n
          • Margin (D\u0131\u015f Bo\u015fluk):<\/strong> Elemanlar aras\u0131 mesafe.
            \u00d6rnek: margin: 20px;<\/code><\/li>\n\n\n\n
          • Padding (\u0130\u00e7 Bo\u015fluk):<\/strong> \u0130\u00e7erik ile kenarl\u0131k aras\u0131 mesafe.
            \u00d6rnek: padding: 15px<\/code>;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            \n\n\n\n

            2. HTML Yap\u0131s\u0131<\/strong><\/h4>\n\n\n\n
              \n
            1. Div Kullan\u0131m\u0131:<\/strong>\n
                \n
              • Sayfa b\u00f6l\u00fcmlerini gruplamak i\u00e7in temel yap\u0131 ta\u015f\u0131d\u0131r.<\/li>\n\n\n\n
              • \u00d6rnek: <div class=\"baslik\"> <h1>Ba\u015fl\u0131k<\/h1> <\/div><\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n
              • Flexbox D\u00fczeni:<\/strong>\n
                  \n
                • Elemanlar\u0131 d\u00fczenlemek ve hizalamak i\u00e7in kullan\u0131l\u0131r.<\/li>\n\n\n\n
                • \u00d6rnek: display: flex; gap: 10px;<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n
                • Men\u00fc ve \u0130\u00e7erik B\u00f6l\u00fcm\u00fc:<\/strong>\n
                    \n
                  • Sayfa tasar\u0131m\u0131 i\u00e7in dikey ve yatay d\u00fczen olu\u015fturulur.<\/li>\n\n\n\n
                  • \u00d6rnek: <div class=\"menu\">Men\u00fc<\/div> <div class=\"icerik\">\u0130\u00e7erik<\/div><\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n
                    \n\n\n\n

                    3. \u00d6nemli Kavramlar<\/strong><\/h4>\n\n\n\n
                      \n
                    1. Float:<\/strong> Elemanlar\u0131 sa\u011fa\/sola hizalamak.<\/li>\n\n\n\n
                    2. Overflow:<\/strong> \u0130\u00e7erik ta\u015fma durumlar\u0131n\u0131 kontrol etmek.<\/li>\n\n\n\n
                    3. Responsive Tasar\u0131m:<\/strong> Sayfa \u00f6\u011felerini ekran boyutlar\u0131na uygun hale getirme.<\/li>\n<\/ol>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n
                      <html >\n<head>\n    <title>Kutu D\u00fczeni<\/title>\n    <style>\n        \/* Genel sayfa ayarlar\u0131 *\/\n        body {\n            font-family: Arial, sans-serif; \/* Yaz\u0131 tipi olarak Arial se\u00e7ildi *\/\n            margin: 20px; \/* Sayfan\u0131n kenarlar\u0131ndan 20px bo\u015fluk b\u0131rak\u0131ld\u0131 *\/\n        }\n\n        \/* Kutular\u0131n kapsay\u0131c\u0131s\u0131 *\/\n        .kapsayici {\n            display: flex; \/* Kapsay\u0131c\u0131da kutular\u0131 yatayda s\u0131ralar *\/\n            flex-wrap: wrap; \/* Ekran geni\u015fli\u011fi yetmezse kutular\u0131 alt sat\u0131ra ge\u00e7irir *\/\n            gap: 10px; \/* Kutular aras\u0131nda 10px bo\u015fluk b\u0131rak\u0131r *\/\n            margin-bottom: 20px; \/* Kutular ile alt\u0131ndaki i\u00e7erik aras\u0131nda bo\u015fluk b\u0131rak\u0131r *\/\n        }\n\n        \/* Tek bir kutu i\u00e7in stil *\/\n        .kutu {\n            border: 1px solid black; \/* Her kutunun siyah \u00e7er\u00e7evesi *\/\n            padding: 10px; \/* Kutunun i\u00e7eri\u011fi ile kenar\u0131 aras\u0131nda bo\u015fluk b\u0131rak\u0131r *\/\n            text-align: center; \/* Kutunun i\u00e7indeki metni ortalar *\/\n            width: 80px; \/* Her kutunun geni\u015fli\u011fi 80px *\/\n            height: 40px; \/* Her kutunun y\u00fcksekli\u011fi 40px *\/\n            box-sizing: border-box; \/* Kenar bo\u015fluklar\u0131n\u0131 kutu boyutuna dahil eder *\/\n        }\n\n        \/* Daha sonra gelen i\u00e7erik i\u00e7in stil *\/\n        .sonraki-icerik {\n            margin-top: 10px; \/* Kutular ile i\u00e7erik aras\u0131nda bo\u015fluk b\u0131rak\u0131r *\/\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Kutular\u0131n bulundu\u011fu ana kapsay\u0131c\u0131 -->\n    <div class=\"kapsayici\">\n        <div class=\"kutu\">Kutu 1<\/div> <!-- Birinci kutu -->\n        <div class=\"kutu\">Kutu 2<\/div> <!-- \u0130kinci kutu -->\n        <div class=\"kutu\">Kutu 3<\/div> <!-- \u00dc\u00e7\u00fcnc\u00fc kutu -->\n        <div class=\"kutu\">Kutu 4<\/div> <!-- D\u00f6rd\u00fcnc\u00fc kutu -->\n        <div class=\"kutu\">Kutu 5<\/div> <!-- Be\u015finci kutu -->\n        <div class=\"kutu\">Kutu 6<\/div> <!-- Alt\u0131nc\u0131 kutu -->\n    <\/div>\n\n    <!-- Kutular\u0131n alt\u0131nda yer alan i\u00e7erik -->\n    <div class=\"sonraki-icerik\">Daha sonra gelen i\u00e7erik<\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
                      2. HTML Yap\u0131s\u0131 3. \u00d6nemli Kavramlar<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-673","post","type-post","status-publish","format-standard","hentry","category-genel"],"yoast_head":"\nCSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e<\/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:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e\" \/>\n<meta property=\"og:description\" content=\"2. HTML Yap\u0131s\u0131 3. \u00d6nemli Kavramlar\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/\" \/>\n<meta property=\"og:site_name\" content=\"ASLIHAN KARATA\u015e\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-29T20:04:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-30T19:12:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10-1024x576.png\" \/>\n<meta name=\"author\" content=\"aslihankaratas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"aslihankaratas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/\",\"url\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/\",\"name\":\"CSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e\",\"isPartOf\":{\"@id\":\"https:\/\/aslihankaratas.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10-1024x576.png\",\"datePublished\":\"2024-11-29T20:04:18+00:00\",\"dateModified\":\"2024-11-30T19:12:03+00:00\",\"author\":{\"@id\":\"https:\/\/aslihankaratas.com\/#\/schema\/person\/28b7a61160b8d1bb18a217d5f1e856d4\"},\"breadcrumb\":{\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage\",\"url\":\"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10.png\",\"contentUrl\":\"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/aslihankaratas.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS \u00d6ZELL\u0130KLER\u0130\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/aslihankaratas.com\/#website\",\"url\":\"https:\/\/aslihankaratas.com\/\",\"name\":\"ASLIHAN KARATA\u015e\",\"description\":\"Lecturer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/aslihankaratas.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/aslihankaratas.com\/#\/schema\/person\/28b7a61160b8d1bb18a217d5f1e856d4\",\"name\":\"aslihankaratas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/aslihankaratas.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9b9ff8326f9ce8f3ae3e5c45df92cb1c62be24345bd251cd5a84bbe607b592b7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9b9ff8326f9ce8f3ae3e5c45df92cb1c62be24345bd251cd5a84bbe607b592b7?s=96&d=mm&r=g\",\"caption\":\"aslihankaratas\"},\"sameAs\":[\"http:\/\/aslihankaratas.com\"],\"url\":\"https:\/\/aslihankaratas.com\/index.php\/author\/aslihankaratas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e","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:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e","og_description":"2. HTML Yap\u0131s\u0131 3. \u00d6nemli Kavramlar","og_url":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/","og_site_name":"ASLIHAN KARATA\u015e","article_published_time":"2024-11-29T20:04:18+00:00","article_modified_time":"2024-11-30T19:12:03+00:00","og_image":[{"url":"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10-1024x576.png"}],"author":"aslihankaratas","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"aslihankaratas","Tahmini okuma s\u00fcresi":"2 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/","url":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/","name":"CSS \u00d6ZELL\u0130KLER\u0130 - ASLIHAN KARATA\u015e","isPartOf":{"@id":"https:\/\/aslihankaratas.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage"},"image":{"@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage"},"thumbnailUrl":"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10-1024x576.png","datePublished":"2024-11-29T20:04:18+00:00","dateModified":"2024-11-30T19:12:03+00:00","author":{"@id":"https:\/\/aslihankaratas.com\/#\/schema\/person\/28b7a61160b8d1bb18a217d5f1e856d4"},"breadcrumb":{"@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#primaryimage","url":"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10.png","contentUrl":"https:\/\/aslihankaratas.com\/wp-content\/uploads\/2024\/11\/Web-Tasarimi-H10.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/aslihankaratas.com\/index.php\/2024\/11\/29\/css-ozellikleri\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/aslihankaratas.com\/"},{"@type":"ListItem","position":2,"name":"CSS \u00d6ZELL\u0130KLER\u0130"}]},{"@type":"WebSite","@id":"https:\/\/aslihankaratas.com\/#website","url":"https:\/\/aslihankaratas.com\/","name":"ASLIHAN KARATA\u015e","description":"Lecturer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aslihankaratas.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Person","@id":"https:\/\/aslihankaratas.com\/#\/schema\/person\/28b7a61160b8d1bb18a217d5f1e856d4","name":"aslihankaratas","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/aslihankaratas.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9b9ff8326f9ce8f3ae3e5c45df92cb1c62be24345bd251cd5a84bbe607b592b7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9b9ff8326f9ce8f3ae3e5c45df92cb1c62be24345bd251cd5a84bbe607b592b7?s=96&d=mm&r=g","caption":"aslihankaratas"},"sameAs":["http:\/\/aslihankaratas.com"],"url":"https:\/\/aslihankaratas.com\/index.php\/author\/aslihankaratas\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/posts\/673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":3,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/posts\/673\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/posts\/673\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/media?parent=673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/categories?post=673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aslihankaratas.com\/index.php\/wp-json\/wp\/v2\/tags?post=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}