CSS Se\u00e7iciler: T\u00fcrleri ve Kullan\u0131mlar\u0131<\/p>\n
CSS (Cascading Style Sheets), web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve stilini kontrol etmek i\u00e7in kullan\u0131lan bir stil dilidir. CSS’in g\u00fcc\u00fcn\u00fc tam olarak kullanabilmek i\u00e7in farkl\u0131 se\u00e7icileri anlamak ve etkin bir \u015fekilde kullanmak olduk\u00e7a \u00f6nemlidir. Bu makalede, en yayg\u0131n CSS se\u00e7ici t\u00fcrlerini detayl\u0131 bir \u015fekilde inceleyece\u011fiz. \u00d6rneklerle desteklenmi\u015f a\u00e7\u0131klamalar\u0131m\u0131z sayesinde, CSS se\u00e7icilerini daha iyi anlayacak ve projelerinizde ba\u015far\u0131l\u0131 bir \u015fekilde uygulayabileceksiniz.<\/p>\n
En temel CSS se\u00e7icileri; element, s\u0131n\u0131f ve ID se\u00e7icileridir. Bu se\u00e7iciler, HTML \u00f6\u011felerini stillemek i\u00e7in kullan\u0131l\u0131r ve CSS’in temel yap\u0131 ta\u015flar\u0131n\u0131 olu\u015ftururlar.<\/p>\n
Element se\u00e7icileri, HTML elementlerinin ad\u0131n\u0131 kullanarak stil uygular. \u00d6rne\u011fin, t\u00fcm paragraflar\u0131 stillemek i\u00e7in S\u0131n\u0131f se\u00e7icileri, HTML elementlerine atanm\u0131\u015f s\u0131n\u0131f adlar\u0131n\u0131 kullanarak stil uygular. Birden fazla elemente ayn\u0131 stili uygulamak i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131rlar. S\u0131n\u0131f adlar\u0131 nokta (.) ile ba\u015flar.<\/p>\n Bu kodu, ID se\u00e7icileri, HTML elementlerinin benzersiz ID’lerini kullanarak stil uygular. Bir sayfada her ID sadece bir kez kullan\u0131labilir. ID’ler # i\u015faretiyle ba\u015flar. Genellikle sayfa i\u00e7erisinde tek bir elemente \u00f6zg\u00fc stilleri uygulamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n Temel se\u00e7icilerin yan\u0131 s\u0131ra, daha karma\u015f\u0131k stil uygulamalar\u0131 i\u00e7in bir\u00e7ok geli\u015fmi\u015f se\u00e7ici t\u00fcr\u00fc mevcuttur. Bu se\u00e7iciler, daha spesifik hedefleme ve daha verimli stil uygulamas\u0131 sa\u011flar. <\/p>\n \u00d6znitelik se\u00e7icileri, HTML elementlerinin \u00f6zniteliklerine g\u00f6re stil uygular. \u00d6rne\u011fin, Pseudo-s\u0131n\u0131f se\u00e7icileri, elementin durumuna veya konumuna ba\u011fl\u0131 olarak stil uygulamak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, Pseudo-element se\u00e7icileri, HTML elementlerine yeni elementler eklemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, Bu se\u00e7iciler sayesinde, HTML kodunu de\u011fi\u015ftirmeden stil ve i\u00e7erik ekleyebilirsiniz. Bu, \u00f6zellikle web tasar\u0131m\u0131nda olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, navigasyon men\u00fclerine ikonlar eklemek i\u00e7in pseudo-elementler kullan\u0131labilir.<\/p>\n CSS se\u00e7icileri, web tasar\u0131m\u0131nda esneklik ve kontrol sa\u011flar. Farkl\u0131 se\u00e7icileri \u00f6\u011frenmek ve do\u011fru \u015fekilde uygulamak, temiz ve etkili bir CSS kodu yazman\u0131za yard\u0131mc\u0131 olur. Bu makalede ele ald\u0131\u011f\u0131m\u0131z se\u00e7iciler, CSS’in sadece temelini olu\u015fturur. Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz. Ayr\u0131ca, CSS konusunda daha derinlemesine bilgi edinmek i\u00e7in Mozilla Developer Network<\/a> kayna\u011f\u0131n\u0131 da inceleyebilirsiniz.<\/p>\n #Etiketler: CSS, CSS Se\u00e7iciler, Element Se\u00e7ici, S\u0131n\u0131f Se\u00e7ici, ID Se\u00e7ici, \u00d6znitelik Se\u00e7ici, Pseudo-S\u0131n\u0131f Se\u00e7ici, Pseudo-Element Se\u00e7ici, Web Geli\u015ftirme<\/p>\n <\/body>p<\/code> element se\u00e7icisini kullanabilirsiniz.<\/p>\n\np {\n color: blue;\n}\n<\/code><\/pre>\n2. S\u0131n\u0131f Se\u00e7icisi<\/h3>\n
\n.baslik {\n font-size: 24px;\n font-weight: bold;\n}\n<\/code><\/pre>\n<h1 class=\"baslik\">Ba\u015fl\u0131k<\/h1><\/code> gibi bir HTML elementinde kullanabilirsiniz.<\/p>\n3. ID Se\u00e7icisi<\/h3>\n
\n#ana-baslik {\n color: red;\n text-align: center;\n}\n<\/code><\/pre>\nDaha Geli\u015fmi\u015f CSS Se\u00e7iciler<\/h2>\n
4. \u00d6znitelik Se\u00e7icisi<\/h3>\n
href<\/code> \u00f6zniteli\u011fine sahip t\u00fcm a<\/code> elementlerini stilleyebilirsiniz.<\/p>\n\na[href] {\n color: green;\n}\n<\/code><\/pre>\n5. Pseudo-S\u0131n\u0131f Se\u00e7icileri<\/h3>\n
:hover<\/code> pseudo-s\u0131n\u0131f\u0131, fare imleci bir elementin \u00fczerine geldi\u011finde stil uygulamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\na:hover {\n text-decoration: underline;\n}\n<\/code><\/pre>\n6. Pseudo-Element Se\u00e7icileri<\/h3>\n
::before<\/code> ve ::after<\/code> pseudo-elementleri, elementin ba\u015f\u0131na veya sonuna i\u00e7erik eklemek i\u00e7in kullan\u0131labilir.<\/p>\n\np::before {\n content: \"Paragraf: \";\n}\n<\/code><\/pre>\nSonu\u00e7<\/h2>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Se\u00e7iciler: T\u00fcrleri ve Kullan\u0131mlar\u0131 CSS (Cascading Style Sheets), web sayfalar\u0131n\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve stilini kontrol etmek i\u00e7in kullan\u0131lan…","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-8788","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n