Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri, HTML belgelerindeki \u00f6\u011feleri benzersiz bir \u015fekilde tan\u0131mlamak ve bu \u00f6\u011felere \u00f6zel stiller uygulamakt\u0131r. Bu noktada “ID” kavram\u0131 devreye girer. Genellikle “CSS ile ID’ler nas\u0131l olu\u015fturulur?” \u015feklinde yanl\u0131\u015f anla\u015f\u0131lan bu konu, asl\u0131nda HTML’de olu\u015fturulan ID’lerin CSS taraf\u0131ndan nas\u0131l hedeflendi\u011fini ve bi\u00e7imlendirildi\u011fini kapsar. Bu makalede, ID’lerin ne oldu\u011funu, neden \u00f6nemli olduklar\u0131n\u0131, HTML’de nas\u0131l tan\u0131mland\u0131klar\u0131n\u0131 ve CSS ile nas\u0131l etkin bir \u015fekilde kullan\u0131ld\u0131klar\u0131n\u0131 derinlemesine inceleyece\u011fiz. Ayr\u0131ca, ID’lerin s\u0131n\u0131flarla farklar\u0131n\u0131, en iyi kullan\u0131m uygulamalar\u0131n\u0131, ka\u00e7\u0131n\u0131lmas\u0131 gereken durumlar\u0131 ve modern web geli\u015ftirmedeki yerlerini ele alaca\u011f\u0131z.<\/p>\n
ID (Identifier – Tan\u0131mlay\u0131c\u0131), bir HTML belgesindeki tek bir \u00f6\u011feyi benzersiz bir \u015fekilde tan\u0131mlamak i\u00e7in kullan\u0131lan bir HTML \u00f6zniteli\u011fidir. T\u0131pk\u0131 bir insan\u0131n T.C. kimlik numaras\u0131 gibi, bir ID de bir web sayfas\u0131ndaki belirli bir \u00f6\u011fenin “kimlik kart\u0131” gibidir. Bir HTML belgesinde ayn\u0131 ID de\u011ferine sahip birden fazla \u00f6\u011fe bulunmamal\u0131d\u0131r; bu, ID’lerin temel ve en kritik kural\u0131d\u0131r. Bu benzersizlik, hem CSS’in belirli bir \u00f6\u011feye stil uygulamas\u0131 hem de JavaScript’in o \u00f6\u011feyi kolayca manip\u00fcle etmesi i\u00e7in hayati \u00f6nem ta\u015f\u0131r.<\/p>\n
ID’ler, web sayfas\u0131n\u0131n yap\u0131s\u0131n\u0131 d\u00fczenlemek, belirli b\u00f6l\u00fcmlere h\u0131zl\u0131ca atlamak (sayfa i\u00e7i ba\u011flant\u0131lar) ve \u00f6zellikle JavaScript ile dinamik etkile\u015fimler sa\u011flamak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. CSS a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, ID’ler belirli bir \u00f6\u011feye y\u00fcksek \u00f6ncelikli stiller atamak i\u00e7in kullan\u0131l\u0131r. Bir web sayfas\u0131ndaki ana ba\u015fl\u0131k, ana gezinme men\u00fcs\u00fc, sayfan\u0131n alt bilgi alan\u0131 gibi tekil ve kritik b\u00f6l\u00fcmler genellikle bir ID ile tan\u0131mlan\u0131r.<\/p>\n
Web geli\u015ftiricilerin s\u0131k\u00e7a kar\u0131\u015ft\u0131rd\u0131\u011f\u0131 veya yanl\u0131\u015f kulland\u0131\u011f\u0131 iki temel kavram ID’ler ve s\u0131n\u0131flard\u0131r (classes). Her ikisi de HTML \u00f6\u011felerini se\u00e7mek ve stil uygulamak i\u00e7in kullan\u0131lsa da, temel felsefeleri ve kullan\u0131m ama\u00e7lar\u0131 farkl\u0131d\u0131r.<\/p>\n
Bir ID, bir HTML belgesinde yaln\u0131zca bir kez kullan\u0131lmal\u0131d\u0131r. Bu, ID’nin o \u00f6\u011feyi sayfa i\u00e7inde tekil olarak tan\u0131mlad\u0131\u011f\u0131 anlam\u0131na gelir. \u00d6rne\u011fin, bir web sayfas\u0131n\u0131n ana i\u00e7eri\u011fini bar\u0131nd\u0131ran bir S\u0131n\u0131flar ise, bir HTML belgesinde birden fazla \u00f6\u011feye uygulanabilen, yeniden kullan\u0131labilir tan\u0131mlay\u0131c\u0131lard\u0131r. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131ndaki t\u00fcm paragraflara veya bir \u00fcr\u00fcn listesindeki t\u00fcm \u00fcr\u00fcn kartlar\u0131na ayn\u0131 stilin uygulanmas\u0131 gerekti\u011finde CSS’te se\u00e7ici \u00f6zelli\u011fi (specificity), hangi stil kural\u0131n\u0131n bir \u00f6\u011feye uygulanaca\u011f\u0131n\u0131 belirleyen bir \u00f6ncelik sistemidir. ID se\u00e7iciler ( ID’ler, HTML \u00f6\u011felerine Bir HTML \u00f6\u011fesine ID atamak i\u00e7in a\u015fa\u011f\u0131daki s\u00f6zdizimi kullan\u0131l\u0131r:<\/p>\n \u00d6rne\u011fin:<\/p>\ndiv<\/code> elementi i\u00e7in id=\"main-content\"<\/code> kullan\u0131labilir. Bu, o sayfan\u0131n yaln\u0131zca bir ana i\u00e7erik b\u00f6l\u00fcm\u00fc oldu\u011funu belirtir. ID’ler genellikle sayfan\u0131n genel yap\u0131s\u0131n\u0131 olu\u015fturan ana bile\u015fenler (header, footer, nav, main) i\u00e7in veya JavaScript ile do\u011frudan eri\u015filmesi gereken tekil \u00f6\u011feler i\u00e7in tercih edilir.<\/p>\nS\u0131n\u0131flar\u0131n Yeniden Kullan\u0131labilirli\u011fi ve Amac\u0131<\/h4>\n
class=\"highlight\"<\/code> veya class=\"product-card\"<\/code> gibi s\u0131n\u0131flar kullan\u0131l\u0131r. S\u0131n\u0131flar, stil kodunu daha mod\u00fcler ve y\u00f6netilebilir hale getirerek, benzer g\u00f6r\u00fcn\u00fcmlere sahip birden fazla \u00f6\u011feyi grupland\u0131rmak i\u00e7in idealdir.<\/p>\nSe\u00e7ici \u00d6zelli\u011fi (Specificity) A\u00e7\u0131s\u0131ndan Farklar<\/h4>\n
#id-ad\u0131<\/code>), s\u0131n\u0131f se\u00e7icilere (.s\u0131n\u0131f-ad\u0131<\/code>) g\u00f6re \u00e7ok daha y\u00fcksek bir \u00f6zelli\u011fe sahiptir. Bu, bir \u00f6\u011feye hem bir ID hem de bir s\u0131n\u0131f arac\u0131l\u0131\u011f\u0131yla stil uyguland\u0131\u011f\u0131nda, ID se\u00e7icinin stilinin genellikle s\u0131n\u0131f se\u00e7icinin stilini ge\u00e7ersiz k\u0131laca\u011f\u0131 anlam\u0131na gelir. Bu y\u00fcksek \u00f6zellik, ID’leri dikkatli kullanmay\u0131 gerektirir, zira gereksiz yere ID kullanmak, CSS kodunu y\u00f6netmeyi zorla\u015ft\u0131rabilir ve istenmeyen stil \u00e7ak\u0131\u015fmalar\u0131na yol a\u00e7abilir.<\/p>\nHTML’de ID Olu\u015fturma: Temeller<\/h3>\n
id<\/code> \u00f6zniteli\u011fi kullan\u0131larak atan\u0131r. Bu, ID’lerin CSS ile “olu\u015fturulmad\u0131\u011f\u0131n\u0131”, aksine CSS taraf\u0131ndan “hedef al\u0131nd\u0131\u011f\u0131n\u0131” netle\u015ftiren \u00f6nemli bir ayr\u0131md\u0131r.<\/p>\nS\u00f6zdizimi<\/h4>\n