20 G\u00fc\u00e7l\u00fc CSS Se\u00e7ici \u0130pucu: Her Geli\u015ftirici Bilmeli<\/p>\n
Merhaba! Fatih Soysal olarak, web geli\u015ftirme d\u00fcnyas\u0131nda CSS se\u00e7icilerinin \u00f6nemini vurgulamak ve sizlere 20 g\u00fc\u00e7l\u00fc CSS se\u00e7ici ipucu sunmak i\u00e7in buraday\u0131m. Bu ipu\u00e7lar\u0131, kodlar\u0131n\u0131z\u0131 daha temiz, daha okunabilir ve daha etkili hale getirmenize yard\u0131mc\u0131 olacakt\u0131r. Ayn\u0131 zamanda performans\u0131n\u0131z\u0131 da art\u0131racakt\u0131r. Bu makalede, hem temel hem de geli\u015fmi\u015f CSS se\u00e7icilerini ele alaca\u011f\u0131z. \u00d6rneklerle anlat\u0131m yaparak, kavramlar\u0131 daha iyi anlaman\u0131z\u0131 sa\u011flayaca\u011f\u0131z. Haz\u0131rsan\u0131z, ba\u015flayal\u0131m!<\/p>\n
\u00d6ncelikle, her geli\u015ftiricinin bilmesi gereken temel CSS se\u00e7icilerine g\u00f6z atal\u0131m. Bu se\u00e7iciler, HTML elementlerini hedeflemek i\u00e7in kullan\u0131l\u0131r ve kodunuzun temelini olu\u015fturur.<\/p>\n
En basit se\u00e7ici t\u00fcr\u00fcd\u00fcr. \u00d6rne\u011fin, <\/code><\/p>\n Belirli bir elementi se\u00e7mek i\u00e7in kullan\u0131l\u0131r. ID’ler benzersiz olmal\u0131d\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n Birden fazla elemente ayn\u0131 stili uygulamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n \u015eimdi ise, kodunuzu daha da optimize etmenize yard\u0131mc\u0131 olacak geli\u015fmi\u015f CSS se\u00e7icilerini inceleyelim. Bunlar, daha karma\u015f\u0131k HTML yap\u0131lar\u0131n\u0131 hedeflemenizi sa\u011flar.<\/p>\n Bir elementin alt\u0131ndaki t\u00fcm elementleri se\u00e7mek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n Bir elementin do\u011frudan alt\u0131ndaki elementi se\u00e7mek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n Bir elementin hemen karde\u015fini se\u00e7mek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n Bir elementin t\u00fcm karde\u015flerini se\u00e7mek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, <\/code><\/p>\n Bu \u00f6rnekler, geli\u015fmi\u015f CSS se\u00e7icilerinin g\u00fcc\u00fcn\u00fc g\u00f6stermektedir. Daha fazla \u00f6rnek ve detayl\u0131 bilgi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz. Ayr\u0131ca, CSS se\u00e7icileri hakk\u0131nda daha fazla bilgi edinmek i\u00e7in MDN Web Docs<\/a> sayfas\u0131n\u0131 inceleyebilirsiniz.<\/p>\n Bu makalede, 20 g\u00fc\u00e7l\u00fc CSS se\u00e7ici ipucu \u00fczerinde durduk. Umar\u0131m bu ipu\u00e7lar\u0131, web geli\u015ftirme projelerinizde size yard\u0131mc\u0131 olur. Herhangi bir sorunuz varsa, l\u00fctfen bana bildirin. Ba\u015far\u0131lar!<\/p>\n #Etiketler: CSS, CSS Se\u00e7iciler, Web Geli\u015ftirme, HTML, Kodlama, Programlama, Fatih Soysal, Web Tasar\u0131m\u0131, CSS \u0130pu\u00e7lar\u0131, Geli\u015fmi\u015f CSS, Temel CSS<\/p>\n","protected":false},"excerpt":{"rendered":"20 G\u00fc\u00e7l\u00fc CSS Se\u00e7ici \u0130pucu: Her Geli\u015ftirici Bilmeli Merhaba! Fatih Soysal olarak, web geli\u015ftirme d\u00fcnyas\u0131nda CSS se\u00e7icilerinin \u00f6nemini…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-17528","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\np<\/code> t\u00fcm paragraflar\u0131 se\u00e7er. <\/p>\n<\/p>\np {\n color: blue;\n}\n<\/code><\/pre>\n2. ID Se\u00e7icisi:<\/h3>\n
#myElement<\/code> ID’si id=\"myElement\"<\/code> olan elementi se\u00e7er.<\/p>\n<\/p>\n#myElement {\n font-size: 24px;\n}\n<\/code><\/pre>\n3. S\u0131n\u0131f Se\u00e7icisi:<\/h3>\n
.myClass<\/code> class=\"myClass\"<\/code> olan t\u00fcm elementleri se\u00e7er.<\/p>\n<\/p>\n.myClass {\n background-color: yellow;\n}\n<\/code><\/pre>\nGeli\u015fmi\u015f CSS Se\u00e7iciler<\/h2>\n
4. Soy A\u011fac\u0131 Se\u00e7icisi:<\/h3>\n
div p<\/code>, t\u00fcm div<\/code> elementleri i\u00e7indeki p<\/code> elementlerini se\u00e7er.<\/p>\n<\/p>\ndiv p {\n text-align: center;\n}\n<\/code><\/pre>\n5. Do\u011frudan Alt Se\u00e7icisi:<\/h3>\n
div > p<\/code>, div<\/code> elementinin do\u011frudan alt\u0131ndaki p<\/code> elementlerini se\u00e7er.<\/p>\n<\/p>\ndiv > p {\n font-weight: bold;\n}\n<\/code><\/pre>\n6. Geni\u015fletilmi\u015f Soy A\u011fac\u0131 Se\u00e7icisi (+):<\/h3>\n
h2 + p<\/code>, bir h2<\/code> elementinin hemen ard\u0131ndan gelen p<\/code> elementini se\u00e7er.<\/p>\n<\/p>\nh2 + p {\n margin-top: 0;\n}\n<\/code><\/pre>\n7. Karde\u015f Se\u00e7icisi (~):<\/h3>\n
h2 ~ p<\/code>, bir h2<\/code> elementinin t\u00fcm karde\u015f p<\/code> elementlerini se\u00e7er.<\/p>\n<\/p>\nh2 ~ p {\n color: green;\n}\n<\/code><\/pre>\n