• Gündem
  • Alışveriş
  • Finans
  • YaCevap
  • Seyahat
  • Video
  • Görsel
  • Ana Sayfa
  • Teknoloji
  • Psikoloji ve İlişkiler
  • Bilim ve Eğitim
  • Yemek
  • Kültür ve Sanat
  • Filmler ve Diziler
  • Ekonomi ve Finans
  • Oyun
  • Spor
  • Güzellik ve Moda
  • Faydalı İpuçları
  • Otomobil
  • Hukuk
  • Seyahat
  • Hayvanlar ve doğa
  • Sağlık
  • Diğer
  • Buradasın
    • YaCevap ›
    • Teknoloji ›

    Bir img'ye birden fazla class nasıl verilir?

    • #Teknoloji
    • #HTML
    • #CSS
    • #Programlama

    Yazeka

    Arama sonuçlarına göre oluşturuldu

    Bir 
    img
    etiketine birden fazla 
    class
    vermek için, sınıf isimlerini boşluk bırakarak ayırmak yeterlidir 12:
    <img class="smaller-image thick-green-border" src="..." alt="..." />
    5 kaynaktan alınan bilgiyle göre:

      Yanıtı değerlendir

      5 kaynak

      1. academy.patika.dev
        1
      2. forum.freecodecamp.org
        2
      3. softauthor.com
        3
      4. hdstockimages.com
        4
      5. dofactory.com
        5

    • Daha fazla bilgi

    Konuyla ilgili materyaller

    ID ve class arasında hangisi daha önceliklidir?

    ID, class'a göre daha önceliklidir. Bu öncelik, tarayıcı tarafından CSS kurallarının uygulanmasında belirlenir ve aşağıdaki sıraya göre işler: 1. ID: Bir web sayfasında sadece bir element için stil kuralları tanımlar ve bu nedenle benzersizdir. 2. Class: Birden fazla elemente aynı stilin uygulanmasını sağlar, dolayısıyla daha genel bir kullanım alanına sahiptir.
    • #Teknoloji
    • #WebGeliştirme
    • #CSS
    • #HTML
    5 kaynak

    ID ve Class aynı anda nasıl kullanılır?

    ID ve Class aynı anda bir HTML elementinde kullanılabilir. Örnek kullanım: ```html <h4 class="h-blue thick" id="main-title">Başlık</h4> ``` Bu örnekte, `h-blue` ve `thick` sınıflarının yanı sıra `main-title` ID'si de belirtilmiştir.
    • #Teknoloji
    • #HTML
    • #ID
    • #WebGeliştirme
    5 kaynak
  • Yazeka nedir?
Seçili sitelerdeki metinlere göre Yazeka tarafından oluşturulan yanıtlardır. Hatalar içerebilir. Önemli bilgileri kontrol ediniz.
  • © 2025 Yandex
  • Gizlilik politikası
  • Kullanıcı sözleşmesi
  • Hata bildir
  • Şirket hakkında
{"ahk10":{"state":{"logoProps":{"url":"https://yandex.com.tr"},"formProps":{"action":"https://yandex.com.tr/search","searchLabel":"Bul"},"services":{"activeItemId":"answers","items":[{"url":"https://yandex.com.tr/gundem","title":"Gündem","id":"agenda"},{"url":"https://yandex.com.tr/shopping","title":"Alışveriş","id":"shopping"},{"url":"https://yandex.com.tr/finance","title":"Finans","id":"finance"},{"url":"https://yandex.com.tr/yacevap","title":"YaCevap","id":"answers"},{"url":"https://yandex.com.tr/travel","title":"Seyahat","id":"travel"},{"url":"https://yandex.com.tr/video/search?text=popüler+videolar","title":"Video","id":"video"},{"url":"https://yandex.com.tr/gorsel","title":"Görsel","id":"images"}]},"userProps":{"loggedIn":false,"ariaLabel":"Menü","plus":false,"birthdayHat":false,"child":false,"isBirthdayUserId":true,"className":"PortalHeader-User"},"userIdProps":{"flag":"skin","lang":"tr","host":"yandex.com.tr","project":"neurolib","queryParams":{"utm_source":"portal-neurolib"},"retpath":"https%3A%2F%2Fyandex.com.tr%2Fyacevap%2Fc%2Fteknoloji%2Fq%2Fbir-img-ye-birden-fazla-class-nasil-verilir-927670016%3Flr%3D213%26ncrnd%3D52378","tld":"com.tr"},"suggestProps":{"selectors":{"form":".HeaderForm","input":".HeaderForm-Input","submit":".HeaderForm-Submit","clear":".HeaderForm-Clear","layout":".HeaderForm-InputWrapper"},"suggestUrl":"https://yandex.com.tr/suggest/suggest-ya.cgi?show_experiment=222&show_experiment=224","deleteUrl":"https://yandex.com.tr/suggest-delete-text?srv=web&text_to_delete=","suggestPlaceholder":"Yapay zeka ile bul","platform":"desktop","hideKeyboardOnScroll":false,"additionalFormClasses":["mini-suggest_theme_tile","mini-suggest_overlay_tile","mini-suggest_expanding_yes","mini-suggest_prevent-empty_yes","mini-suggest_type-icon_yes","mini-suggest_personal_yes","mini-suggest_type-icon_yes","mini-suggest_rich_yes","mini-suggest_overlay_dark","mini-suggest_large_yes","mini-suggest_copy-fact_yes","mini-suggest_clipboard_yes","mini-suggest_turboapp_yes","mini-suggest_expanding_yes","mini-suggest_affix_yes","mini-suggest_carousel_yes","mini-suggest_traffic_yes","mini-suggest_re-request_yes","mini-suggest_source_yes","mini-suggest_favicon_yes","mini-suggest_more","mini-suggest_long-fact_yes","mini-suggest_hide-keyboard_yes","mini-suggest_clear-on-submit_yes","mini-suggest_focus-on-change_yes","mini-suggest_short-fact_yes","mini-suggest_app_yes","mini-suggest_grouping_yes","mini-suggest_entity-suggest_yes","mini-suggest_redesigned-navs_yes","mini-suggest_title-multiline_yes","mini-suggest_type-icon-wrapped_yes","mini-suggest_fulltext-highlight_yes","mini-suggest_fulltext-insert_yes","mini-suggest_lines_multi"],"counter":{"service":"neurolib_com_tr_desktop","url":"//yandex.ru/clck/jclck","timeout":300,"params":{"dtype":"stred","pid":"0","cid":"2873"}},"noSubmit":false,"formAction":"https://yandex.com.tr/search","tld":"com.tr","suggestParams":{"srv":"serp_com_tr_desktop","wiz":"TrWth","yu":"5753675501755459471","lr":213,"uil":"tr","fact":1,"v":4,"use_verified":1,"safeclick":1,"skip_clickdaemon_host":1,"rich_nav":1,"verified_nav":1,"rich_phone":1,"use_favicon":1,"nav_favicon":1,"mt_wizard":1,"history":1,"nav_text":1,"maybe_ads":1,"icon":1,"hl":1,"n":10,"portal":1,"platform":"desktop","mob":0,"extend_fw":1,"suggest_entity_desktop":"1","entity_enrichment":"1","entity_max_count":"5"},"disableWebSuggest":false},"context":{"query":"","reqid":"1755459477740313-14570345578189853055-balancer-l7leveler-kubr-yp-sas-58-BAL","lr":"213","aliceDeeplink":"{\"text\":\"\"}"},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w01-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"header"}}}}},"type":"neuro_library","subtype":"header"},"ahk11":{"state":{"links":[{"id":"main","url":"/yacevap","title":"Ana Sayfa","target":"_self"},{"id":"technologies","url":"/yacevap/c/teknoloji","title":"Teknoloji","target":"_self"},{"id":"psychology-and-relationships","url":"/yacevap/c/psikoloji-ve-iliskiler","title":"Psikoloji ve İlişkiler","target":"_self"},{"id":"science-and-education","url":"/yacevap/c/bilim-ve-egitim","title":"Bilim ve Eğitim","target":"_self"},{"id":"food","url":"/yacevap/c/yemek","title":"Yemek","target":"_self"},{"id":"culture-and-art","url":"/yacevap/c/kultur-ve-sanat","title":"Kültür ve Sanat","target":"_self"},{"id":"tv-and-films","url":"/yacevap/c/filmler-ve-diziler","title":"Filmler ve Diziler","target":"_self"},{"id":"economics-and-finance","url":"/yacevap/c/ekonomi-ve-finans","title":"Ekonomi ve Finans","target":"_self"},{"id":"games","url":"/yacevap/c/oyun","title":"Oyun","target":"_self"},{"id":"sport","url":"/yacevap/c/spor","title":"Spor","target":"_self"},{"id":"beauty-and-style","url":"/yacevap/c/guzellik-ve-moda","title":"Güzellik ve Moda","target":"_self"},{"id":"useful-tips","url":"/yacevap/c/faydali-ipuclari","title":"Faydalı İpuçları","target":"_self"},{"id":"auto","url":"/yacevap/c/otomobil","title":"Otomobil","target":"_self"},{"id":"law","url":"/yacevap/c/hukuk","title":"Hukuk","target":"_self"},{"id":"travel","url":"/yacevap/c/seyahat","title":"Seyahat","target":"_self"},{"id":"animals-and-nature","url":"/yacevap/c/hayvanlar-ve-doga","title":"Hayvanlar ve doğa","target":"_self"},{"id":"health","url":"/yacevap/c/saglik","title":"Sağlık","target":"_self"},{"id":"other","url":"/yacevap/c/diger","title":"Diğer","target":"_self"}],"activeLinkId":"technologies","title":"Kategoriler","baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w02-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"header-categories"}}}}},"type":"neuro_library","subtype":"header-categories"},"ahk12":{"state":{"tld":"com.tr","markdown":"Bir `img` etiketine birden fazla `class` vermek için, sınıf isimlerini **boşluk bırakarak** ayırmak yeterlidir [```1```](https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi)[```2```](https://forum.freecodecamp.org/t/html-classes-img-that-has-a-class-already-and-i-want-to-addd-another/192373):\n\n```html\n\u003cimg class=\"smaller-image thick-green-border\" src=\"...\" alt=\"...\" />\n```","sources":[{"sourceId":1,"url":"https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi","title":"CSS ile Class ve ID Kullanımı Dersi | Patika.dev","shownUrl":"https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi"},{"sourceId":2,"url":"https://forum.freecodecamp.org/t/html-classes-img-that-has-a-class-already-and-i-want-to-addd-another/192373","title":"Html Classes Img That Has a Class Already and I Want to...","shownUrl":"https://forum.freecodecamp.org/t/html-classes-img-that-has-a-class-already-and-i-want-to-addd-another/192373"},{"sourceId":3,"url":"https://softauthor.com/javascript-working-with-images/","title":"Create Image Elements in JavaScript","shownUrl":"https://softauthor.com/javascript-working-with-images/"},{"sourceId":4,"url":"https://hdstockimages.com/blog/how-to-add-a-class-to-an-image-in-html/","title":"How to Add a Class to an Image in Html – HD Stock Images","shownUrl":"https://hdstockimages.com/blog/how-to-add-a-class-to-an-image-in-html/"},{"sourceId":5,"url":"https://www.dofactory.com/html/img/class","title":"HTML Img Class","shownUrl":"https://www.dofactory.com/html/img/class"}],"isHermione":false,"headerProps":{"header":"Bir img'ye birden fazla class nasıl verilir?","homeUrl":"/yacevap","categoryUrl":"/yacevap/c/teknoloji","categoryTitle":"Teknoloji","canUseNativeShare":false,"extralinksItems":[{"variant":"reportFeedback","reportFeedback":{"feature":"YazekaAnswers","title":"Bu yanıtta yanlış olan ne?","checkBoxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Soruma yanıt verilmedi"},{"value":"Bilgi hataları var"},{"value":"Bilgi yetersiz"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Yanıtta kullanılan kaynaklar güvenilir değil"},{"value":"Bu soru için yanıt gerekmiyor"},{"value":"Diğer"}]}}],"tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/html","text":"#HTML"},{"href":"/yacevap/t/css","text":"#CSS"},{"href":"/yacevap/t/programlama","text":"#Programlama"}]},"suggestProps":{"suggestItems":[{"id":-1,"url":"/search?text=Bir+img%27ye+birden+fazla+class+nas%C4%B1l+verilir%3F&promo=force_neuro","text":"Daha fazla bilgi"}]},"feedbackProps":{"feature":"YazekaAnswers","baseProps":{"metaFields":{"yandexuid":"5753675501755459471","reqid":"1755459477740313-14570345578189853055-balancer-l7leveler-kubr-yp-sas-58-BAL"}},"positiveCheckboxLabels":[{"value":"Yanıtı çok beğendim"},{"value":"Yanıtta gerekli bilgiler var"},{"value":"Kolay anlaşılır"},{"value":"Diğer"}],"negativeCheckboxLabels":[{"value":"Uygunsuz veya aşağılayıcı yanıt"},{"value":"Soruma yanıt verilmedi"},{"value":"Bilgi hataları var"},{"value":"Bilgi yetersiz"},{"value":"Bilgi güncel değil"},{"value":"Görüntüleme hataları"},{"value":"Yanıtta kullanılan kaynaklar güvenilir değil"},{"value":"Bu soru için yanıt gerekmiyor"},{"value":"Diğer"}]},"dialogStoreProps":{"baseUrl":"","baseUrlWs":""},"globalStoreProps":{"imageBackendUrl":"https://yandex.com.tr/images-apphost/image-download?cbird=171","query":"","retina":false,"avatarId":"0","isHermione":false,"isMacOS":false,"tld":"com.tr","isEmbeddedFuturis":false,"isLoggedIn":false,"brand":"yazeka","reqId":"1755459477740313-14570345578189853055-balancer-l7leveler-kubr-yp-sas-58-BAL","device":{"isIOS":false,"platform":"desktop"}},"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w03-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"question"}}}}},"type":"neuro_library","subtype":"question"},"ahk13":{"state":{"relatedMaterials":[{"favicons":["https://favicon.yandex.net/favicon/v2/https://juniortoexpert.com/tr/css-hiyerarsisi/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://careerkarma.com/blog/css-class-vs-id-2/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.ucuncubinyil.com/id-ve-class-secicilerinin-farki-web-gelistirmede-dogru-secici-kullanimi/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.geeksforgeeks.org/difference-between-id-and-class-attributes-in-html/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://matthewjamestaylor.com/id-vs-class?size=16&stub=1"],"href":"/yacevap/c/teknoloji/q/id-ve-class-arasinda-hangisi-daha-onceliklidir-2108853681","header":"ID ve class arasında hangisi daha önceliklidir?","teaser":"ID, class'a göre daha önceliklidir. Bu öncelik, tarayıcı tarafından CSS kurallarının uygulanmasında belirlenir ve aşağıdaki sıraya göre işler: 1. ID: Bir web sayfasında sadece bir element için stil kuralları tanımlar ve bu nedenle benzersizdir. 2. Class: Birden fazla elemente aynı stilin uygulanmasını sağlar, dolayısıyla daha genel bir kullanım alanına sahiptir.","tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/webgelistirme","text":"#WebGeliştirme"},{"href":"/yacevap/t/css","text":"#CSS"},{"href":"/yacevap/t/html","text":"#HTML"}]},{"favicons":["https://favicon.yandex.net/favicon/v2/https://academy.patika.dev/courses/css/css-ile-class-ve-id-kullanimi?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://css.sitesi.web.tr/css-id-class.html?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://www.udacity.com/blog/2021/01/html-css-class-and-id-selectors-everything-you-need-to-know.html?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://css-tricks.com/the-difference-between-id-and-class/?size=16&stub=1","https://favicon.yandex.net/favicon/v2/https://prototurk.com/html/id-ve-class?size=16&stub=1"],"href":"/yacevap/c/teknoloji/q/id-ve-class-ayni-anda-nasil-kullanilir-1390829173","header":"ID ve Class aynı anda nasıl kullanılır?","teaser":"ID ve Class aynı anda bir HTML elementinde kullanılabilir. Örnek kullanım: ```html \u003ch4 class=\"h-blue thick\" id=\"main-title\">Başlık\u003c/h4> ``` Bu örnekte, `h-blue` ve `thick` sınıflarının yanı sıra `main-title` ID'si de belirtilmiştir.","tags":[{"href":"/yacevap/t/teknoloji","text":"#Teknoloji"},{"href":"/yacevap/t/html","text":"#HTML"},{"href":"/yacevap/t/id","text":"#ID"},{"href":"/yacevap/t/webgelistirme","text":"#WebGeliştirme"}]}],"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w04-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"related"}}}}},"type":"neuro_library","subtype":"related"},"ahk14":{"state":{"tld":"com.tr","isIos":false,"isQuestionPage":true,"baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w05-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"ask_question"}}}}},"type":"neuro_library","subtype":"ask_question"},"ahk15":{"state":{"generalLinks":[{"id":"privacy-policy","text":"Gizlilik politikası","url":"https://yandex.com.tr/legal/privacy_policy/"},{"id":"terms-of-service","text":"Kullanıcı sözleşmesi","url":"https://yandex.com.tr/legal/tos/"},{"id":"report-error","text":"Hata bildir","url":"https://forms.yandex.com.tr/surveys/13748122.01a6645a1ef15703c9b82a7b6c521932ddc0e3f7/"},{"id":"about-company","text":"Şirket hakkında","url":"https://yandex.com.tr/project/portal/contacts/"}],"copyright":{"url":"https://yandex.com.tr","currentYear":2025},"socialLinks":[{"url":"https://www.tiktok.com/@yandex.turkiye","type":"tiktok","title":"TikTok"},{"url":"https://www.youtube.com/@YandexTurkiye","type":"youtube","title":"Youtube"},{"url":"https://www.facebook.com/YandexComTr","type":"facebook","title":"Facebook"},{"url":"https://www.instagram.com/yandex__turkiye/","type":"instagram","title":"Instagram"},{"url":"https://x.com/yndxturkiye","type":"x","title":"X"}],"categoriesLink":[],"disclaimer":"Seçili sitelerdeki metinlere göre Yazeka tarafından oluşturulan yanıtlardır. Hatalar içerebilir. Önemli bilgileri kontrol ediniz.","baobab":{"parentNode":{"context":{"genInfo":{"prefix":"ahk1w06-0-1"},"ui":"desktop","service":"neurolib","fast":{"name":"neuro_library","subtype":"footer"}}}}},"type":"neuro_library","subtype":"footer"}}