diff options
Diffstat (limited to 'files/tr/learn')
9 files changed, 1627 insertions, 0 deletions
diff --git a/files/tr/learn/common_questions/how_does_the_internet_work/index.html b/files/tr/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..199ba351ea --- /dev/null +++ b/files/tr/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,95 @@ +--- +title: How does the Internet work? +slug: Learn/Common_questions/How_does_the_Internet_work +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>This article discusses what the Internet is and how it works.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>None, but we encourage you to read the <a href="/en-US/docs/Learn/Thinking_before_coding">Article on setting project goals</a> first</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>İnternet, web'in belkemiği, web'i mümkün kılan teknik altyapıdır. İnternet, en temel haliyle, hepsi birbirleriyle iletişim kuran geniş bir bilgisayar ağıdır.</p> + +<p>İnternetin tarihi biraz belirsiz. 1960'larda ABD Ordusu tarafından finanse edilen bir araştırma projesi olarak başladı ve daha sonra birçok devlet üniversitesinin ve özel şirketin desteğiyle 1980'lerde kamu altyapısına dönüştü. İnterneti destekleyen çeşitli teknolojiler zamanla gelişti, ancak çalışma şekli o kadar değişmedi: İnternet bilgisayarları birbirine bağlamanın ve ne olursa olsun, bağlantıda kalmanın bir yolunu bulan bir yoldur.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> +</ul> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<h3 id="A_simple_network">A simple network</h3> + +<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p> + +<div class="note"> +<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.</p> + +<p>Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="A_network_of_networks">A network of networks</h3> + +<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special <em>routers</em> that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Finding_computers">Finding computers</h3> + +<p>If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> + +<p>That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a <em>domain name</em>. For example (at the time of writing; IP addresses can change) <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_and_the_web">Internet and the web</h3> + +<p>As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> +</ul> diff --git a/files/tr/learn/common_questions/index.html b/files/tr/learn/common_questions/index.html new file mode 100644 index 0000000000..4aafae4a32 --- /dev/null +++ b/files/tr/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> + +<h2 id="How_the_Web_works">How the Web works</h2> + +<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> + +<dl> + <dt> + <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> + </dt> + <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> + </dt> + <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> + <dt> + <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> + </dt> + <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> + <dt> + <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> + </dt> + <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> + <dt> + <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> + </dt> + <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> + <dt> + <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> + </dt> + <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> +</dl> + +<h2 id="Tools_and_setup">Tools and setup</h2> + +<p>Questions related to the tools/software you can use to build websites.</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> + </dt> + <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> + </dt> + <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> + <dt> + <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> + </dt> + <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/tr/learn/common_questions/tarayıcı_geliştirici_araçları_araçları_nelerdir/index.html b/files/tr/learn/common_questions/tarayıcı_geliştirici_araçları_araçları_nelerdir/index.html new file mode 100644 index 0000000000..57a11f27e5 --- /dev/null +++ b/files/tr/learn/common_questions/tarayıcı_geliştirici_araçları_araçları_nelerdir/index.html @@ -0,0 +1,238 @@ +--- +title: Tarayıcı geliştirici araçları nelerdir? +slug: Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +<div>{{IncludeSubnav("/en-US/Learn")}}</div> + +<div class="summary"> +<p>Günümüzde hemen hemen tüm modern tarayıcılar güçlü ve gelişmiş geliştirici araçlarına sahip. Bu araçlar yüklenmiş durumdaki sayfanın HTML, CSS ve JavaScript kodlarını incelemekten sayfanın istediği asset'lere ve bu asset'lerin yüklenme süresini görebilmeye kadar pek çok işleve sahip. Bu yazıda size kullandığınız tarayıcının geliştirici araçlarının temel işlevlerini öğreneceksiniz.</p> +</div> + +<div class="note"> +<p><strong>Not</strong>: Aşağıdaki örnekleri çalıştırmadan önce <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> yazısında geliştirdiğimiz <a href="http://mdn.github.io/beginner-html-site-scripted/">Beginner's example site</a> adlı web sitesini açmalısınız. Bu siteyi aşağıdaki adımları takip ederken açık tutmalısınız.</p> +</div> + +<h2 id="Tarayıcının_geliştirici_araçlarına_ulaşmak">Tarayıcının geliştirici araçlarına ulaşmak</h2> + +<p>Geliştirici araçları tarayıcınızda aşağıdaki görseldekine benzer bir pencerede bulunmakta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16205/DevTools_63_inspector.png" style="border: 1px solid black; display: block; height: 1364px; margin: 0px auto; width: 672px;"></p> + +<p>Peki bu pencereyi nasıl açabiliriz? Bunun üç yolu bulunmakta:</p> + +<ul> + <li><em><strong>Klavye ile:</strong></em> <em><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></em>, ya da + + <ul> + <li><strong>Internet Explorer ve Edge için: </strong><kbd>F12 </kbd></li> + <li><strong>macOS için: </strong><em><span class="Unicode"><kbd>⌘</kbd> + <kbd>⌥</kbd> + <kbd>I </kbd></span></em></li> + </ul> + </li> + <li><span class="Unicode"><em><strong>Menü çubuğu ile: </strong></em></span> + <ul> + <li><strong>Firefox: </strong>Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Toggle Tools, </span></em><span class="Unicode">ya da </span><em>Tools ➤</em></span><em> Web Developer ➤ Toggle Tools</em></li> + <li><strong>Chrome:</strong> <em><span class="Unicode">More tools</span> ➤ Developer tools</em></li> + <li><strong>Safari:</strong> <em><span class="Unicode">Develop ➤</span> Show Web Inspector.</em> Eğer Develop menüsünü göremiyorsanız, <em>Safari<span class="Unicode"> ➤</span> Preferences ➤ Advanced</em>, ve son olarak menü çubuğunda <em>Show Develop</em> seçeneğini işaretleyin.</li> + <li><strong>Opera</strong>: <em><span class="Unicode">Developer ➤</span> Developer tools</em></li> + </ul> + </li> + <li><strong><em>Bağlam menüsü ile:</em></strong> Web sayfasındaki bir öğenin üstünde sağ tıkladıktan (Mac için Ctrl-click), sonra açılan menüden <em>Inspect Element </em>seçeneğini seçin. (Bu yöntemin en büyük avantajı açılan pencerede seçilen kodu vurgulaması.)</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16206/inspector_context.png" style="display: block; height: 232px; margin: 0px auto; width: 350px;"></p> + +<h2 id="Inspector_DOM_kaşifi_ve_CSS_editörü">Inspector: DOM kaşifi ve CSS editörü</h2> + +<p>Geliştirici araçları genelde varsayılan olarak Inspector penceresini, aşağıdaki görseldekine benzer şekilde, açar. Bu araç bulunduğunuz sayfanın o anki HTML kodunu ve o koda uygulanan CSS kodlarını gösterir. Ayrıca gösterilen kodları düzenleyebilmenizi ve canlı olarak bu değişimleri görebilmenizi sağlar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16208/inspector_highlighted.png" style="border-style: solid; border-width: 1px; display: block; height: 509px; margin: 0px auto; width: 672px;"></p> + +<p>Eğer inpector penceresini göremiyorsanız,</p> + +<ul> + <li><em>Inspector</em> sekmesine tıklayın/dokunun.</li> + <li>Internet Explorer kullanıyorsanız <em>DOM Explorer</em>'a tıklayın/dokunun ya da <kbd>Ctrl</kbd> + <kbd>1</kbd> tuşlarına basın.</li> + <li>Microsoft Edge ya da Opera kullanıyorsanız Elements'e tıklayın/dokunun.</li> + <li>Safari kullanıyorsanız kontroller çok açık olmayabilir, fakat eğer başka bir seçeneği seçmediyseniz HTML kodunu görebilmeniz gerek. CSS kodlarını görmek için <em>Style</em> butonuna tıklayın.</li> +</ul> + +<h3 id="DOM_inspector'ünü_keşfetmek">DOM inspector'ünü keşfetmek</h3> + +<p>Başlangıç olarak DOM inspector'deki herhangi bir HTML öğesine sağ tıklayın ve açılan bağlam menüsüne göz atın. Mevcut seçenekler tarayıcıdan tarayıcıya değişiklik gösterebilse de başlıca seçenekler hemen hemen her tarayıcıda aynıdır:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16209/dom_inspector.png" style="border: 1px solid black; display: block; height: 320px; margin: 0px auto; width: 350px;"></p> + +<ul> + <li><strong>Delete Node</strong> (bazen <em>Delete Element</em>). Seçili öğeyi siler.</li> + <li><strong>Edit as HTML</strong> (bazen <em>Add attribute</em>/<em>Edit text</em>). Seçili HTML öğesini düzenleyebilmenizi ve sonuçlarını canı olarak görebilmenizi sağlar. Debugging ve test yapmak için oldukça kullanışlı bir özellikdir.</li> + <li><strong>:hover/:active/:focus</strong>. Seçilen öğenin tasarımının nasıl değişeceğine göz atabilmeniz için öğe için seçilen durumu açık duruma getirir.</li> + <li><strong>Copy/Copy as HTML</strong>. Seçilen HTML kodunu kopyalar.</li> + <li>Bazı tarayıcılar Copy CSS Path ve Copy XPath seçeneklerine de sahiptir. Bu seçenekler o anki HTML öğesini seçecek CSS işaretçisini ya da XPath ifadesini kopyalayabilmenizi sağlar.</li> +</ul> + +<p>Şimdi elinizdeki DOM yapısını düzenlemeyi deneyin. Öncelikle bir öğenin üstünde çift tıklayın, ya da sağ tıklayıp Edit as HTML seçeneğini seçin. Sonrasında seçtiğiniz öğeyi istediğiniz gibi düzenleyebilirsiniz fakat unutmayınki bu değişiklikler kalıcı değildir.</p> + +<h3 id="CSS_editörünü_keşfetmek">CSS editörünü keşfetmek</h3> + +<p>Varsayılan olarak CSS editörü seçili öğeye uygulanan CSS kurallarını gösterir:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16211/CSS_Inspector.png" style="border: 1px solid black; display: block; height: 281px; margin: 0px auto; width: 500px;"></p> + +<p>CSS editörünün pek çok kullanışlı özelliği var:</p> + +<ul> + <li>Öğeye uygulanan kurallar öğe için en spesifik olandan en az spesifik olana doğru sıralanır.</li> + <li>Deklarasyonların yanındaki kutucuklara tıklayarak o deklarasyonun kaldırılması durumunda ne olacağını görebilirsiniz.</li> + <li>Kısaltılmış özelliklerin yanlarındaki ok işaretlerine tıklayarak uzun hallerini görebilirsiniz.</li> + <li>Özellik isimlerine ya da değerlere tıklarsanız bir metin kutusu açılacaktır. Bu metin kutusunda yeni değerler ekleyebilir ve canlı olarak oluşacak tasarımı görebilirsiniz.</li> + <li>Her kuralın yanında kuralın dosya adı ve bulunduğu satır numarası bulunmakta. Kurala tıklamanız durumunda geliştirici aracı sizin için kural dosyasını açacaktır. Bu dosyada kuralları düzenleyebilir ve kaydedebilirsiniz.</li> + <li>Kuralların süslü parantezlerinden kapatma parantezine tıklayarak yeni deklarasyonlar yazabileceğiniz bir metin kutusunu açabilirisiniz.</li> +</ul> + +<p>CSS Viewer üzerinde tıklayabileceğiniz bir kaç sekme görebilirsiniz:</p> + +<ul> + <li><em>Computed</em>: Bu sekme size seçili öğenin hesaplanmış son tasarımını (tarayıcın öğeye uyguladığı son veriler ile) gösterir.</li> + <li><em>Layout</em>: Firefox'da bu alan iki bölümden oluşur: + <ul> + <li><em>Box Model</em>: Seçili öğenin box modelini görsel bir şekilde temsil eder. Bu modelde öğenin sahip olduğu pading, border ve margin değerlerini ve öğenin büyüklüğünü görebilirsiniz.</li> + <li><em>Grid</em>: Eğer inceledeğiniz sayfa CSS grid yapısını kullanıyorsa bu yapının detaylarını gösterir.</li> + </ul> + </li> + <li><em>Fonts</em>: Firefox'da <em>Fonts </em>sekmesi seçili öğede kullanılan fontları gösterir.</li> +</ul> + +<h3 id="Daha_fazlası_için">Daha fazlası için</h3> + +<p>Farklı tarayıcıların Inspector'larını keşfedin:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Opera'da da aynı şekilde çalışmaktadır.)</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li> +</ul> + +<h2 id="JavaScript_debugger'ı">JavaScript debugger'ı</h2> + +<p>JavaScript debugger, kodunuzdaki problemleri belirleyebilmek için kodun çalışması sırasında beklemesini istediğiniz noktalarda değişkenlerin değerlerini gözlemleyebilme ve breakpointler atayabilme olanağı sağlar.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png" style="border: 1px solid black; display: block; height: 556px; margin: 0 auto; width: 672px;"></p> + +<p>Debugger'a erişmek için:</p> + +<p><strong>Firefox</strong>: JavaScript debugger için, <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> Simgesine tıkla ➤ <em>Web Developer</em> ➤ <em>Debugger</em> ya da <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> tuşlarına bas. Eğer geliştirici araçları açık durumdaysa <strong>Debugger </strong>sekmesine tıkla.</p> + +<p><strong>Chrome</strong>: Geliştirici araçlarını aç ve <strong>S</strong><strong>ources </strong>sekmesine tıkla. (Opera'da da aynı yöntem geçerli.)</p> + +<p><strong>Edge ve Internet Explorer 11</strong>: <kbd>F12</kbd> tuşuna bastıktan sonra <kbd>Ctrl</kbd> + <kbd>3</kbd> tuşlarına basın. Eğer geliştirici araçları açık durumda ise Debugger sekmesine tıklayın.</p> + +<p><strong>Safari</strong>: Geliştirici araçlarını açtıktan sonra Debugger sekmesini tıklayın.</p> + +<h3 id="Debugger'ı_keşfetmek">Debugger'ı keşfetmek</h3> + +<p>Firefox'da JavaScript Debugger üç bölümden oluşmaktadır.</p> + +<h4 id="Dosya_Listesi">Dosya Listesi</h4> + +<p>Soldaki ilk bölmemiz bize debug ettiğiniz sayfa ile ilgili dosyaları listelemektedir. Üzerinde çalışmak istediğiniz dosyayı seçebilirsiniz. Bir dosyanın üstüne tıklayarak içeriğini Debugger'ın orta bölümünde görüntüleyebilirsiniz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16240/File_List.png" style="border: 1px solid black; display: block; height: 326px; margin: 0 auto; width: 350px;"></p> + +<h4 id="Kaynak_Kodu">Kaynak Kodu</h4> + +<p>Kodun çalışmasını durdurmak istediğiniz yere breakpoint atayabilirsiniz. Görseldeki kodun 18 numaralı satırının vurgulanması bu satıra bir breakpoint atandığını göstermektedir.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16241/Source_code.png" style="border: 1px solid black; display: block; height: 251px; margin: 0 auto; width: 400px;"></p> + +<h4 id="Watch_expression'ları_ve_breakpoint'ler">Watch expression'ları ve breakpoint'ler</h4> + +<p>Sağdaki bölmede eklediğiniz watch expression'ların ve atadığınız breakpoint'lerin listesini görebilirsiniz.</p> + +<p>Görseldeki ilk kısım,<strong> Watch expression</strong>, listItems adlı bir değişkenin eklendiğini gösteriyor. Listeyi genişleterek dizinin içindeki değerlere göz atabilirsiniz.</p> + +<p>Bir sonraki kısım , <strong>Breakpoints</strong>, sayfaya atanmış breakpoint'leri listelemekte. Örnekteki example.js dosyasında <code>listItems.push(inputNewItem.value);</code> adlı ifadeye bir breakpoint atandığını görüyoruz.</p> + +<p>Son iki kısım sadece kod çalışıyorken görünmektedirler.</p> + +<p><strong>Call stack</strong> kısmı o anki satıra kadar çalışmış olan kodu göstermektedir. Örnekte kodun fare tıklamasını ele alan bir fonksiyon içinde olduğunu ve o an bir breakpoint'te beklediğini görebilirsiniz.</p> + +<p>Son kısım, <strong>Scopes</strong>, kodun farklı noktalarından hangi değerlerin görünür durumda olduğunu gösterir. Mesela, aşağıdaki resimde addItemClick fonksiyonun kodu için mevcut durumda kullanılabilecek nesneleri görebilirsiniz.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16242/watch_items.png" style="border: 1px solid black; display: block; height: 743px; width: 350px;"></p> + +<h3 id="Daha_fazlası_için_2">Daha fazlası için</h3> + +<p>Farklı tarayıcıların JavaScript debugger'larını keşfedin:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li> + <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger">Microsoft Edge Debugger</a></li> + <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Chrome Debugger</a></li> + <li><a href="https://developer.apple.com/safari/tools/">Safari Debugger</a></li> +</ul> + +<h2 id="JavaScript_konsolu">JavaScript konsolu</h2> + +<p>JavaScript konsolu, düzgün çalışmayan JavaScript kodlarınının debug edilmesi için harika bir araçtır. JavaScript konsolu yüklenmiş durumdaki sayfada JavaScript kodu çalıştırabilmenizi ve oluşan hataları görebilmenizi sağlar. Bu konsola ulaşabilmek:</p> + +<p>Eğer geliştirici araçları açık durumda ise Console sekmesine tıklayın.</p> + +<p>Diğer durumlarda Firefox <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd> tuşları ile JavaScript konsolunu açabilmenize imkan tanır. Bir diğer yöntem ise menü komutlarını kullanmak: Menu <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ Web Developer </span></em><em><span class="Unicode">➤ Web Console, </span></em><span class="Unicode">ya da </span><em>Tools ➤</em></span><em> Web Developer ➤ Web Console. </em>Diğer tarayıcılarda<em> </em>JavaScript konsoluna ulaşmak için önce<em> </em>geliştirici araçlarını açıp sonra Console sekmesine tıklayabilirsiniz.</p> + +<p>Bu yöntemlerin sonucun görseldekine benzer bir pencere göreceksiniz:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16212/console_only.png" style="border: 1px solid black; display: block; height: 187px; margin: 0px auto; width: 672px;"></p> + +<p>Konsolun ne yapabildiğini görmek için örnekteki kod parçacıklarını konsolunuzda teker teker deneyin:</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!');</pre> + </li> + <li> + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myImage.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>Şimdi de kodların hatalı örneklerini deneyin ve neler elde edeceğinizi görün.</p> + +<ol> + <li> + <pre class="brush: js">alert('hello!);</pre> + </li> + <li> + <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre> + </li> + <li> + <pre class="brush: js">var myImage = document.createElement('img'); +myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'); +document.querySelector('h1').appendChild(myImage);</pre> + </li> +</ol> + +<p>Tarayıcınız hata döndürmeye başladığını göreceksiniz. Bu hatalar çoğu zaman çok açık ifadeler döndürmeselerde elinizdeki problemleri çözmek için yeterli olacaklardır.</p> + +<h3 id="Daha_fazlası_için_3">Daha fazlası için</h3> + +<p>Farklı tarayıcıların JavaScript konsollarını keşfedin:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li> + <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera'nın inspector'ü aynı şekilde çalışmakta)</li> + <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li> +</ul> + +<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> +</ul> diff --git a/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..224b5b181a --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,166 @@ +--- +title: Nitelik seçiciler +slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +tags: + - Attrubute + - Başlangıç + - Beginner + - CSS + - Learn + - Nitelik + - Ogrenim + - Selectors + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>HTML eğitimi çalışmalarından hatırladığın gibi, kullanılan öğenin, öğe hakkında daha ayrıntılı bilgi veren niteliklere sahip olabilir. CSS'de, belirli niteklilere sahip öğeleri hedeflemek için nitelik seçicileri kullanabilirsin. Bu ders, bu çok kullanışlı seçicileri nasıl kullanacağını gösterecek.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Nitelik seçicilerin ne olduğunu ve nasıl kullanılacağını öğrenmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Durum_ve_değer_seçiciler">Durum ve değer seçiciler</h2> + +<p>Bu seçiciler, tek başına bir niteliğin varlığına (örneğin <code>href</code>) veya niteliğin değerine karşı çeşitli eşleşmelere dayalı olarak bir öğenin seçilmesini sağlar.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Örnek</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[nitelik]</code></td> + <td><code>a[title]</code></td> + <td>Belirtilen niteliğe sahip öğeleri eşleştirir(adı köşeli parantez içindeki değerdir)</td> + </tr> + <tr> + <td><code>[nitelik=değer]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td>Nitelik değerinin tırnak içerisindeki değerle tam olarak eşleşenleri seçer.</td> + </tr> + <tr> + <td><code>[nitelik~=değer]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p><br> + Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya diğerlerinden boşlukla ayrılmış olan eşleşmeleri seçer.</p> + </td> + </tr> + <tr> + <td><code>[nitelik|=<em>değer</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>Nitelik değeri tırnak içerisindeki değerle tam olarak eşleşen veya eşleşen değerle başlamış olması kaidesiyle hemen ardından tire(-) işaretiyle ayrılmış değerleri seçer.</td> + </tr> + </tbody> +</table> + +<p>Aşağıdaki örnekte bu seçicilerin kullanıldığını görebilirsin.</p> + +<ul> + <li><code>li[class]</code>: kullanarak bir seçiciyi herhangi bir sınıf niteliğine sahip öğeyle eşleştirebiliriz.</li> + <li><code>li[class="a"]</code>: <code>a</code> sınıfına sahip bir öğeyle eşleşir. ancak öğe <code>a</code> sınıfından başka bir sınıfa da dahil edilmiş ise bu öğeyle eşleşmez.</li> + <li><code>li[class~="a"]</code>: <code>a</code> sınıfıyla tam olarak eşleşen ve boşlukla diğer sınıflardan ayrılarak tanımlanmış öğeleride seçer.</li> + <li><code>li[lang|="zh"</code>: <code>zh</code> ile tam eşleşen veya <code>zh</code><code>-</code> ile başlayan nitelik değerlerine sahip öğeleri seçer.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="Alt_dize_eşleştirme_seçicileri">Alt dize eşleştirme seçicileri</h2> + +<p>Bu seçiciler, niteliğin değeri içindeki dizelerde daha gelişmiş eşlemelere olanak tanır. Örneğin, <code>box-warning</code> ve <code>box-error</code> sınıfların olsun ve siz <code>box-</code> dizesiyle başlayan her şeyi hedeflemek istiyorsan, <code>[class^="box-"]</code> ile ikisini birde seçebilirsin. (veya <code>[class|="box"]</code> yukarıdaki bölümde açıklandığı gibi).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Örnek</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[nitelik^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>nitelik değeri, çift tırnak içerisindeki dize ile başlıyorsa eşleştirmeyi sağlar.</td> + </tr> + <tr> + <td><code>[nitelik$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td>nitelik değeri, çift tırnak içerisindeki dize ile bitiyorsa eşleştirmeyi sağlar.</td> + </tr> + <tr> + <td><code>[nitelik*=<em>value</em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>nitelik değerinin herhangi bir yerinde çift tırnak içerisindeki dize bulunuyorsa eşleştirme sağlar.</td> + </tr> + </tbody> +</table> + +<p>(Dipnot: Düzenli ifadelerde kullanımları çok yaygındır <code>^</code> ile başlayanlar ve <code>$</code> <em>ile bitenler</em>.)</p> + +<p>Bir sonraki örnek, bu seçicilerin kullanımını göstermektedit:</p> + +<ul> + <li><code>li[class^="a"]</code>: <code>a</code> ile başlayan herhangi bir nitelik değeriyle eşleşir. Bu nedenle ilk iki liste öğesiyle eşleşir.</li> + <li><code>li[class$="a"]</code>: <code>a</code> ile biten herhangi bir nitelik değeriyle eşleşir. Bu nedenle birinci ve üçüncü liste öğesiyle eşleşir.</li> + <li><code>li[class*="a"]</code>: Herhangi bir nitelik değerinin, herhangi bir yerinde <code>a</code> dizesi geçiyorsa eşleşir. Bu yüzden tüm liste öğelerimizle eşleşir.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="Büyük_küçük_harf_duyarlılığı">Büyük küçük harf duyarlılığı</h2> + +<p>Esasen CSS büyük/küçük harfe duyarlı değildir. Fakat HTML belge dilinin gereksinimlerinden dolayı ASCII karakter aralığında büyük/küçük harfe duyarlı olacaktır. Eğer kurallarının büyük/küçük harfe duyarlı olmasını istemiyorsan <code>i</code> bildirimini köşeli parantezi kapatmadan önce bildirmen gerekmektedir. CSS'in büyük/küçük harfe duyarlılığı hedeflediği belge diline göre belirlenecektir.</p> + +<p>Aşağıdaki örnekte, ilk seçici, <code>a</code> ile başlayan bir değerle eşleşecektir — yalnızca ilk liste öğesiyle eşleşir çünkü diğer iki liste öğesi büyük A harfiyle başlar. ikinci seçici, büyük/küçük harf duyarlı bağrağını kullanır ve bu nedenle tümüyle eşleşir.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Belge dilinin büyük/küçük harfe duyarlı olmadığı durumlarda, büyük/küçük harfe duyarlı eşlemeyi zoralayacak yeni bir değer daha vardır(<code>s</code>). Ancak bu, tarayıclarda daha az desteklenir ve HTML gereksinimlerinden dolayı kullanışlı değildir.</p> +</div> + +<h2 id="Sonraki_adımlar">Sonraki adımlar</h2> + +<p>Artık nitelik seçicilerle işimiz bitti, bir sonraki dersimize devam edebiliriz ve <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sözde sınıf ve sözde öğe seçiciler</a> hakkında bilgi edinebilirsin.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html new file mode 100644 index 0000000000..8e47528ca3 --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html @@ -0,0 +1,86 @@ +--- +title: 'Becerilerinizi test edin: Kutu Modeli' +slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +tags: + - Başlangıç + - CSS +translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +--- +<div>{{LearnSidebar}}</div> + +<div></div> + +<p>Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.</p> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi bir araç kullanmakta faydalı olabilir.</p> + +<p>Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.</p> +</div> + +<h2 id="Kutu_Model_Bir">Kutu Model Bir</h2> + +<p>Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.</p> + +<p><img alt="Two boxes of the same size" src="https://mdn.mozillademos.org/files/17126/mdn-box-model1.png" style="height: 851px; width: 792px;"></p> + +<p>Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/box-models-download.html">kaynak kodları</a> indirin.</p> +</div> + +<h2 id="Kutu_Modeli_İki">Kutu Modeli İki</h2> + +<p>Bu görevde kutuya şunları ekleyin:</p> + +<ul> + <li>5px, siyah ve noktalı bir kenarlık.</li> + <li>20px üst kenar boşluğu.</li> + <li>1em sağ kenar boşluğu.</li> + <li>40px bir alt kenar boşluğu.</li> + <li>2em'lik bir sol kenar boşluğu.</li> + <li>her tarafına 1em'lik dolgu<img alt="A box with a dotted border" src="https://mdn.mozillademos.org/files/17127/mdn-box-model2.png" style="height: 261px; width: 1265px;"></li> +</ul> + +<p>Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}</p> + +<div class="blockIndicator note"> +<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/mbp-download.html">kaynak kodları</a> indirin.</p> +</div> + +<h2 id="Kutu_Modeli_Üç">Kutu Modeli Üç</h2> + +<p>Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?</p> + +<p><img alt="An inline box with space between it and the text around it." src="https://mdn.mozillademos.org/files/17128/mdn-box-model3.png" style="height: 458px; width: 1264px;"></p> + +<p>Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p>Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/box-model/inline-block-download.html">kaynak kodları</a> indirin.</p> +</div> + +<h2 id="Değerlendirme_veya_daha_fazla_yardım">Değerlendirme veya daha fazla yardım</h2> + +<p>Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.</p> + +<p>Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:</p> + +<ol> + <li>Çalışmanızı <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, veya <a href="https://glitch.com/">Glitch</a> gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.</li> + <li>Bize <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a> değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: + <ul> + <li>"Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.</li> + <li>Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.</li> + <li>Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.</li> + <li>Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.</li> + </ul> + </li> +</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/combinators/index.html b/files/tr/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..5141688e8e --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,120 @@ +--- +title: Birleştiriciler +slug: Learn/CSS/Building_blocks/Selectors/Combinators +tags: + - Birleştiriciler + - CSS + - Selectors + - combinators + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>İşleyeceğimiz son seçiciler birleştiricilerdir; birleştiriciler diğer seçicileri, birbirleriyle ve belgedeki içeriğin konumu ile yararlı bir ilişki sağlaycak şekilde birleştirirler.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS'de kullanılabilecek farklı birleştirici seçiciler hakkında bilgi edinmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Soytorun_birleştirici">Soy(torun) birleştirici</h2> + +<p><strong>Soy birleştiricisi</strong> — tipik olarak tek bir boşluk (<code> </code>) karakterinden oluşur — <dfn>en az iki seçiciden oluşan (ata, eşleşen n. soy, n. eşleşenin soyundan gelen n+1. eşleşen soy). Birinci seçicinin eşleştiği öğenin soyunda ikinci seçicinin eşleştiği öğe ile eşleşir. torunt seçici hiyararşide kaçıncı basamakta olduğu önemli değildir. Bir alt öğede olabir, 2., 3., 4. veya daha alt seviyelerdeki bir öğede olabir.</dfn> Örneğin; aşağıda <code>body</code>'nin soyundan gelen <code>article</code>'nin soyundaki <code>p</code> ile eşleşirlir. <code>article</code> <code>body</code>'nin 50. torunu olabilir, <code>p</code>'de <code>article</code>'nin 15. torunu olabilir burada dikkat edilecek durum <code>p</code> ile <code>body</code> arasında herhengi bir yerde <code>article</code>'nin olması gerekmektedir. Tabiki buradaki kavram yazacağın kurala göre değişecektir.</p> + +<pre class="brush: css notranslate">body article p +</pre> + +<p>Aşağıdaki örnekte, sadece <code>.box</code> sınıfının içindeki <code><p></code> öğesini eşleştiriyoruz.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="Çocuk_birleştirici">Çocuk birleştirici</h2> + +<p><strong>Çocuk birleştirici</strong>, iki seçici arasına yerleştirilen büyüktür işaretidir (<strong><code>></code></strong>). Yalnızça birinci seçiciyle eşleşen öğelerin doğrudan alt öğeleri içinde bulunan, ikinci seçiciyle eşleşen öğelerle eşleşir. Hiyerarşinin sonraki alt öğeleriyle bir eşleştirme gerçekleştirmez. Örneğin, <code><article></code> öğesinin doğrudan bir alt öğesi olan <code><p></code> öğesiyle eşleşen bir kural yazmak istersek:</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>Bir sonraki örnekte, içinde sıralı bir liste bulunan sırasız bir liste var. Sadece <code><ul></code> öğe seçicimin doğrudan bir alt öğesi olan <code><li></code> öğesiyle eşleşen bir kural yazıp. Onlara üst sınır çizgisi tanımladım.</p> + +<p>Buradaki <code><li></code> seçicinin çocuk olduğunu belirten <code>></code> işaretini kaldırırsan, bir soy seçiciyle karşılaşırsın ve tüm öğeler kırmızı bir üst kenarlık alır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="Bitişik_kardeş_birleştirici">Bitişik kardeş birleştirici</h2> + +<p>Bitişik kardeş seçici (<code>+</code>), hiyararşinin aynı seviyesindeki başka bir öğenin hemen yanındaki öğeyi seçmek için kullanılır. Örneğin, <code><p></code> öğesinden sonra gelen <code><img</code><code>></code> öğesini seçmek için:</p> + +<pre class="brush: css notranslate">p + img</pre> + +<p>Yaygın bir kullanım örneği, aşağıda olduğu gibi, bir başlığı takip eden paragrafa bir şeyler yapmaktır. Burada doğrudan bir <code><h1></code> bitişiğinde olan bir paragraf arıyoruz ve onu şekillendirmek istiyoruz.</p> + +<p>Eğer <code><h1></code> ve <code><p></code> arasına <code><h2></code> gibi başka bir seçici eklersen, paragrafın artık şekillenmediğini göreceksin.</p> + +<p> {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="Genel_kardeş_birleştirici">Genel kardeş birleştirici</h2> + +<p>Doğrudan bitişik olmasalar bile bir öğenin kardeşlerini seçmek istiyorsan, genel kardeş birleştiriciyi (<code>~</code>) kullanabilirsin. <code><p></code> öğesinden sonra gelen tüm <code><img></code> öğelerini seçmek için şunu yapardık.</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>Aşağıdaki örnekte, <code><h1></code> öğesinden sonra gelen <code><p></code>'yi seçip, daha sonra gelen <code><div></code>'i atlıyoruz ve bir sonra ki <code><p></code> öğesinide seçiyoruz.</p> + +<div class="blockIndicator note"> +<p>Not: Genel kardeş seçici kendinden sonra gelen aynı hiyararşideki kardeşleriyle eşleşir. Kendinden önce gelen kardeşleriyle bir eşleşme sağlamaz.</p> +</div> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="Birleştiricileri_kullanma">Birleştiricileri kullanma</h2> + +<p>Belgenin bir bölümünü seçmek için önceki derslerde keşfettiğin seçicilerden herhangi birini birleştiricilerle birleştirebilirsin. Örneğin, <code><ul></code> doğrudan çocukları ve "a" sınıfına sahip liste öğelerini seçmek istesem, aşağıdaki kodu kullanabilirim.</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>ancak, belgenin çok özel bölümlerini seçen büyük seçici listeleri oluştururken dikkatli olun. Seçiciyi biçimlendirmedeki öğenin konumuna özelleştirdiğin için CSS kurallarını farkılı bir yerde kullanman zor olacaktır.</p> + +<p>Basit bir sınıf oluşturmak ve bunu söz konusu öğeye uygulamak genellikle daha iyidir. Bununla birlikte, belgendeki bir şeye ulaşman gerekiyorsa ve bir CMS tarafından oluşturulmuş olması hasebiyle HTML'ye erişemiyorsan, birleştiriciler hakkındaki bilgin çok yararlı olacaktır.</p> + +<h2 id="Beçerilerini_test_et!">Beçerilerini test et!</h2> + +<p>Bu derste bir çok konuyu ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devam etmeden önce bu bilgileri öğrendiğini doğrulamak için bazı ek testlere bakmak isteyebilirsin — <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Becerilerini test et: Seçiciler</a>.</p> + +<h2 id="Sıradaki">Sıradaki</h2> + +<p>Bu, seçicilerle ilgili derslerimizin son bölümüdür. Bir sonraki derste CSS'in başka bir önemli kısmına geçeceğiz — <a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">CSS Kutu Modeli</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/index.html b/files/tr/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d78c248dbf --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,238 @@ +--- +title: CSS seçicileri +slug: Learn/CSS/Building_blocks/Selectors +tags: + - Acemi + - Attribute + - Beginner + - CSS + - Class + - Eğitim + - Learn + - Nitelik + - Pseudo + - Selectors + - Sozde + - id + - seçiciler + - sınıf +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td> + </tr> + </tbody> +</table> + +<h2 id="Seçici_nedir">Seçici nedir?</h2> + +<p>Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin <em>konusu</em> olarak anılır.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir <code>h1</code> birinci dereceden başlıkları seçen seçiciyle <code>.special</code> gibi bir sınıf seçici.</p> + +<p>CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler standardizasyonunda</a> tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.</p> + +<h2 id="Seçici_listeleri">Seçici listeleri</h2> + +<p>Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı <em>seçici listelerinde</em> birleştirebiliriz. Örn.i hem <code>h1</code> hemde <code>.special</code> sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p> + +<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> öğesine stil uygulanmaya devam edecektir.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Seçici_türleri">Seçici türleri</h2> + +<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.</p> + +<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3> + +<p>Bu grup, HTML öğesini hedefleyen seçicileri <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>Sınıfı hedefleyen seçicileri:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>ve bir kimliği hedefleyen seçicileri içerir:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="nitelik_seçicileri">nitelik seçicileri</h3> + +<p>Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Sözde_sınıf_ve_sözde_öğeler">Sözde sınıf ve sözde öğeler</h3> + +<p>Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., <code>:hover</code> sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., <code>::first-line</code> her zaman bir öğenin (<code><p></code> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <code><span></code> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Birleştiriciler">Birleştiriciler</h3> + +<p>Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<code><article></code> öğesini alt birleştirici (<code>></code>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Sıradaki">Sıradaki</h2> + +<p>Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> sayfasına geçerek yolculuğuna başlayabilirsin.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Seçiciler_referans_tablosu">Seçiciler referans tablosu</h2> + +<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Örnek</th> + <th scope="col">CSS Eğitim sayfası</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Tür seçici</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf Seçici</a></td> + <td><code>.box { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf Seçici</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td> + <td><code>#unique { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçiciler</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçiciler</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Sözde öğe seçiciler</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde sınıflar</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Torun birleştiricil</a></td> + <td><code>article p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">Çocuk birleştirici</a></td> + <td><code>article > p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştirici</a></td> + <td><code>h1 + p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Genel Kardeş birleştirici</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td> + </tr> + </tbody> +</table> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..5b2ecb8a1f --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,414 @@ +--- +title: Sözde sınıflar ve sözde öğeler +slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +tags: + - Başlangıç + - Beginner + - CSS + - Eğitim + - Learn + - Pseudo + - Pseudo-class + - Pseudo-element + - Selectors + - Sozde Ogeler + - Sozde sınıflar + - seçiciler +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>Bakacağımız bir sonraki seçici kümesi, <strong>sözde sınıflar</strong> ve <strong>sözde öğeler</strong> olarak adlandıracağız. Bunların sayıları oldukça fazladır ve genellikle özel amaçlara hizmet ederler. Bunları nasıl kullanacağını öğrendikten sonra, yapmaya çalıştığın bir görev için işe yarar bir şey olup olmadığını görmek için listeye göz atabilirsin. MDN referans sayfaları, her seçici için tarayıcı desteğini açıklamada her zamanki gibi yardımcı olur.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Sözde sınıf ve sözde öğe seçicileri hakkında bilgi edinmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Sözde_sınıf_nedir">Sözde sınıf nedir?</h2> + +<p>Sözde sınıf, belirli bir durumda olan öğeleri seçen bir seçicidir. Örneğin, türlerinin ilk öğeleridirler veya fare imleci üzerlerine getirilmiştir. Belgenin bir kısmına bir sınıf uygulamış gibi davranma eğilimindediler, genellikle kurallardaki fazla sınıfları azaltmana yardımcı olur ve daha esnek, bakımı kolay bir kod sağlarlar.</p> + +<p>Sözde sınıflar, iki nokta üst üste ile başlayan anahtar kelimelerdir:</p> + +<pre class="notranslate">:<em>pseudo-class-name</em></pre> + +<h3 id="Basit_sözde_sınıf_örneği">Basit sözde sınıf örneği</h3> + +<p>Basit bir örneğe bakalım. Bir makaledeki ilk paragrafı daha büyük ve kalın yapmak istersek, bu paragrafa bir sınıf ekleyebilir ve ardından aşağıdaki ilk örnekte olduğu gibi bu sınıfa CSS uygulayabilirim:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>Bunu sürdürmek gerçekten can sıkıcı olabilir — ya belgenin üstüne yeni bir paragraf eklenirse? Sınıfı yeni paragrafa taşımam gerekir. Sınıfı eklemek yerine {{cssxref(":first-child")}} sözde sınıfını kullanabilirim — bu her zaman belgedeki ilk alt öğeyi hedefleyecek ve artık HTML'yi düzenlememe gerek kalmayacaktır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>Tüm sözde sınıflar aynı şekilde davranır. Belgemizin belirli bir durumda olan bir kısmını hedeflerler ve HTML'mize bir sınıf eklemişiz gibi davranırlar. MDN'de bulunan diğer bazı örneklere bir göz atmak yararlı olacaktır:</p> + +<ul> + <li><code><a href="/tr/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/tr/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/tr/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Sözde sınıfları ve öğeleri, önünde herhangi bir öğe seçici olmadan yazmak geçerlidir. Yukarıdaki örnekte, öğe seçici olmadan <code>:first-child</code>'ı doğrudan yazabilirsin ve artık kural <code><article></code> öğesinin herhangi ilk çocuğu olan herhangi bir öğesiyle eşleşir — tür önemli değildir. <code>first-child</code> ile <code>*:first-child</code>'ın aynı işi yaptığını fakat evrensel seçici ile kullanımında okunurluluğun daha iyi olduğunu daha önceden açıklamıştır. Bununla birlikte, genellikle bundan daha fazla kontrole sahip olmak istenir, bu nedenle karekeristik özelliklere hakim olmalısın.</p> +</div> + +<h3 id="Kullanıcı_eylemi_sözde_sınıfları">Kullanıcı eylemi sözde sınıfları</h3> + +<p>Bazı sözde sınıflar, yalnızca kullanıcının belgeyle etkileşim kurduğunda geçerlidir. Bazen <strong>dinamik sözde sınıflar</strong> olarak adlandırılan bu <strong>kullanıcı eylemi</strong> sözde sınıfları, kullanıcı onunla etkileşime girdiğinde öğeye bir sınıf eklemiş gibi davranır. Örnek verirsek:</p> + +<ul> + <li><code><a href="/tr/docs/Web/CSS/:hover">:hover</a></code> — Farenin işaretçisi hangi öğenin üzerindeyse o öğeyi seçer. Farenin konumu değiştikçe seçilen öğede değişir. Fare işaretçisini bu listenin başındaki <code>:hover</code> dizesinin üzerine getirerek değişimi görebilirsin.</li> + <li><code><a href="/tr/docs/Web/CSS/:focus">:focus</a></code> — Bu sadece, kullanıcı öğeye klavye kontrolleri kullanarak odaklanılan öğeyi seçer.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="Sözde_öğe_nedir">Sözde öğe nedir?</h2> + +<p>Sözde öğeler de benzer şekilde davranırlar, ancak var olan öğelere bir sınıf uygulamak yerine, sanki hedeflediğin noktaya yeni bir HTML öğesi eklemişsin gibi davranırlar. Sözde öğeler çift iki nokta üst üste ile başlar <code>::</code>.</p> + +<pre class="notranslate"><em>::pseudo-element-name</em></pre> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: İlk kullanılmaya başlanan bazı sözde öğeler tek iki nokta üst üste sözdizimini kullandı, bu nedenle bunları bazen kodlarda veya örneklerde görebilirsin. Modern tarayıcılar, geriye dönük uyumluluk için ilk zamanlarda çıkan söz dizimlerini tek veya çift üstü üste nokta ile desteklemeye devam ederler.</p> +</div> + +<p>Örneğin, bir paragrafın ilk satırını seçmek istiyorsan, onu bir <code><span></code> öğesine sarabilir ve ona bir CSS kuralı uygulayabilirsin; ancak, sarmaladığın kelime sayısı ana öğenin genişliğinden daha uzun veya daha kısa olsaydı bu başarısız olurdu. Bir satıra kaç kelimenin sığacağını bilemediğimiz için — ekran genişliği veya yazı tipi boyutu değişirse içeriğin şeklide değişecektir — bunu HTML öğesi ekleyerek sağlam bir şekilde yapmak imkansızdır.</p> + +<p><code>::first-line</code> Sözde öğesi güvenilir bir şekilde bunu sizin için yapacaktır — kelimelerin sayısının çoğalıp/azalması, ekranın genişleyip/daralması veya yazı tipinin ve boyutunun değişmesi bunu etkilemeyecek halen ilk satırı seçmeye devam edecektir.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>Sanki bir <code><span></code>, ilk biçimlendirilmiş satırın etrafını sihirli bir şekilde sarmış ve satır uzunluğu her değiştiğinde kendini güncelleştiriyormuş gibi davranır.</p> + +<p>Bu örnekte her iki paragrafın da ilk satırını seçtiğini görebilirsin.</p> + +<h2 id="Sözde_sınıfları_ve_sözde_öğeleri_birleştirmek">Sözde sınıfları ve sözde öğeleri birleştirmek</h2> + +<p>İlk paragrafın ilk satırını kalın yapmak istersen, <code>:first-child</code> ve <code>::first-line</code> seçicileri birbirine zincirleyebilirsin. Aşağıdaki CSS'i kullanması için önceki canlı örneği düzenlemeyi deneyin. Bir <code><article></code> öğesi içinde bulunan ilk öğenin<code><p></code> ilk satırını seçmek istediğimizi söylüyoruz.</p> + +<pre class="brush: css notranslate"><code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="before_ve_after_ile_içerik_oluşturmak">::before ve ::after ile içerik oluşturmak</h2> + +<p>CSS kullanarak belgene içerik eklemek için kullanılan bir kaç özel sözde öğe vardır: <code>content</code>.</p> + +<p>Aşağıdaki canlı örnekte olduğu gibi bir metin dizisi eklemek için bunları kullanabilirsin. <code>content</code> özelliğinin metin dizesini değiştirmeyi dene ve çıktıdaki değişimi gözlemle. Ayrıca <code>::before</code> sözde öğesini <code>::after</code> olarak değiştir ve öğenin başına eklenen metnin ne tür bir değişim geçirdiğini gözlemle.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>CSS'den metin dizeleri eklemek aslında web'de çok sık yaptığımız bir şey değildir. Çünkü bu metne bazı ekran okuyucular tarafından erişilemez ve gerektiğinde bu metinleri birilerinin bulması ve düzenlemesi zor olabilir.</p> + +<p>Bu sözde öğelerin daha geçerli bir kullanımı, bir simge eklemektir, örneğin aşağıdaki örnekte eklenen küçük ok, bir ekran okuyucusu tarafından okunmasını istemediğimiz gösterimdir:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>Bu sözde öpeler, aynı zamanda sayfadaki herhangi bir öğe gibi biçimlendirilebilen boş bir dize eklemek için de sıklılkla kullanılır.</p> + +<p>Bu sonraki örnekte, <code>::before</code> sözde öğesini kullanarak boş bir dizge ekledim. Bu boş dizeyi genişlik ve yükseklikle biçimlendirebilmem için bunu <code>display: block</code> olarak ayarladım. Artık CSS kullanarak onu normal bir öğe gibi şekillendirebiliyorum. Tanımlar üzerinde oynayarak görünüşünü ve davranışını değiştirebilirsin.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p>Özellik ile birlikte <code>::before</code> ve <code>::after</code> sözde öğelerin kullanımı, CSS'de "Oluşturulan İçerik" olarak adlandırılır ve bu tekniği çeşitli görevler için kullanıldığını sıklıkla görürsün. <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, CSS ile bir ok oluşturmamızı sağlayan harika bir sitedir. Okunu oluştururken CSS'e incele, {{cssxref("::before")}} ve cssxref("::after")}} sözde öğelerinin kullanıldığını göreceksin. Bu seçicileri her gördüğünde, belgeye neyin eklendiğini görmek için {{cssxref("content")}} özelliğine bak.</p> + +<h2 id="Referans_bölümü">Referans bölümü</h2> + +<p>Çok sayıda sözde sınıf ve sözde öğe vardır ve başvurlaracak bir listeye sahip olmak yararlıdır. Aşağıda, MDN'deki referans sayfalarına bağlantılarla birlikte listeleyen bir tablo bulunmakta. Bunu, hedeflemen için mevcut olan seçenekleri görmek için bir referans olarak kullanman takıldığın noktalarda faydalı olacaktır.</p> + +<h3 id="Sözde_sınıflar">Sözde sınıflar</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref(":active") }}</td> + <td>Kullanıcının tarafından etkinleştirilen öğeyi seçecektir. Bu kullanıcının bir butona tıklaması/etkinleştirmesi ile bu eylemi bırakması arasında gerçekleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":any-link") }}</td> + <td>Bağlantının herhangi bir durumuyla eşleşir <code>:link</code> ve <code>:visited</code> her iki bağlantı durumunun ikisiylede eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":blank") }}</td> + <td>herhangi kullanıcı girişi olmayan <a href="/tr/docs/Web/HTML/Element/input"><code><input></code> öğesiyle</a> eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":checked") }}</td> + <td>Kullanıcının seçtiği öğelerle eşleşir. Örn., onay kutuları veya radyo düşmelerini tikini açtığında.</td> + </tr> + <tr> + <td>{{ Cssxref(":current") }}</td> + <td>O anda görüntülenmekte olan öğeyle veya öğenin bir atasıyla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":default") }}</td> + <td>Bir dizi benzer öğe arasında varsayılan değeri olan bir veya daha fazla UI öğesiyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":dir") }}</td> + <td>Öğenin yönlülüğüne göre eşleme yapmak için kullanılır (HTML <code><a href="/tr/docs/Web/HTML/Global_attributes/dir">dir</a></code> niteliğinin değerine veya CSS <code><a href="/tr/docs/Web/CSS/direction">direction</a></code> özelliğindeki değere göre).</td> + </tr> + <tr> + <td>{{ Cssxref(":disabled") }}</td> + <td>Devre dışı bırakılmış kullanıcı arabirimi öğeleriyle eşleşir. Herhangi bir şekilde etkileşime girilemez sadece varsayılan olarak görünebilir.</td> + </tr> + <tr> + <td>{{ Cssxref(":empty") }}</td> + <td>Alt öğesi(çocukları) olmayan bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":enabled") }}</td> + <td>Herhangi bir şekilde etkileşime girilebilen öğeleri seçer.</td> + </tr> + <tr> + <td>{{ Cssxref(":first") }}</td> + <td><a href="/tr/docs/Web/CSS/Paged_Media">Basılı Medya</a>, içerisindeki ilk sayfayla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":first-child") }}</td> + <td>Kardeşler arasında birinci olan öğeyle eşleşir</td> + </tr> + <tr> + <td>{{ Cssxref(":first-of-type") }}</td> + <td>Türdeş kardeşler arasındaki ilk öğeyi seçer.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus") }}</td> + <td>Odaklanmış bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-visible")}}</td> + <td>Öğeler arasında klavye ile dolaşıldığında odağın görüntülenmesi gereken öğelerle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-within") }}</td> + <td>Odaklanılabilen bir çocuğu olan öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":future") }}</td> + <td>Geçerli öğeden sonraki öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":hover") }}</td> + <td>Kullanıcının üzerine geldiği öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":indeterminate") }}</td> + <td>Değeri belirsiz olan UI öğeleriyle eşleşir, genellikle <a href="/tr/docs/Web/HTML/Element/input/checkbox">checkboxes</a>.</td> + </tr> + <tr> + <td>{{ Cssxref(":in-range") }}</td> + <td>Değeri belirtilen aralık içerisinde olan bir öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":invalid") }}</td> + <td>Geçersiz bir değer girilmiş olan <code><input></code> öğesiyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":lang") }}</td> + <td>Dil tanımı olan bir öğe ile eşleşir (HTML'nin <a href="/tr/docs/Web/HTML/Global_attributes/lang">lang</a> niteliğindeki değerleri baz alır).</td> + </tr> + <tr> + <td>{{ Cssxref(":last-child") }}</td> + <td>Kardeşler arasındaki en son öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":last-of-type") }}</td> + <td>Türdeş kardeşler arasındaki en son öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":left") }}</td> + <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, içersindeki soldaki sayfalarla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":link")}}</td> + <td>Ziyaret edilmeyen bağlantılar ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":local-link")}}</td> + <td>Geçerli belge ile aynı sitede bulunan sayfalara işaret eden bağlantılarla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":is", ":is()")}}</td> + <td>Seçicide belirtilen seçilerden herhangi biriyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":not") }}</td> + <td>Bağımsız deşişken tarafından temsil edilmeyen öğe/öğeler ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-child") }}</td> + <td>Kardeş listesindeki öğeler ile eşleşir — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-of-type") }}</td> + <td>Türdeş kardeş listesindeki öğeler ile eşleşir. — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; 1, 3, 5, 7, vb. sıradaki öğelerle eşleşir, Tüm tek olanlar)</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-child") }}</td> + <td>Kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-of-type") }}</td> + <td>Türdeş kardeşler listesinden sondan başlayarak eşleştirmeye başlar — (örn. Kardeşler eşleşirken an+b formülüne göre hesaplanarak eşleşir: a=2, b=1: 2n+1; sondan 1., sondan 3., sondan 5., vb gibi öğeleri seçer.)</td> + </tr> + <tr> + <td>{{ Cssxref(":only-child") }}</td> + <td>Kardeşi olmayan bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":only-of-type") }}</td> + <td>Türdeş kardeşi olmayan bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":optional") }}</td> + <td>Örnek girişlerin gösterildiği öğeler ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":out-of-range") }}</td> + <td>Girilen değerin belirtilen aralığın dışında olduğu öğelerle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":past") }}</td> + <td>Geçerli öğeden önceki öğelerle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":placeholder-shown") }}</td> + <td>Tanımlayıcı bilgileri gösteren öğeler ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":playing") }}</td> + <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile oynatıldığında eşleşir..</td> + </tr> + <tr> + <td>{{ Cssxref(":paused") }}</td> + <td>Duraklatılıp oynatılabilen bir ses, video veya benzer bir kaynağı temsil eden öğe ile duraklatıldığında eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":read-only") }}</td> + <td>Kullanıcı tarafından değeri değiştirilemeyen bir öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":read-write") }}</td> + <td>Kulanıcı tarafından değeri değiştirilebilen bir öğe ile eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":required") }}</td> + <td>Kullanıcı tarafından bir değer girilmesi gereken öğelerle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":right") }}</td> + <td><a href="/tr/docs/Web/CSS/CSS_Pages">Basılı Medya</a>, sağ sayfalarla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":root") }}</td> + <td>Belgenin kök öğesiyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":scope") }}</td> + <td>scope öğesi olan herhangi öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":valid") }}</td> + <td>Geçerli bir değer girilmiş <code><input></code> öğesiyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":target") }}</td> + <td>Geçerli bir URL'yi hedefleyen öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref(":visited") }}</td> + <td>Daha önceden ziyaret edilmiş bağlantılarla öşleşir.</td> + </tr> + </tbody> +</table> + +<h3 id="Sözde_öğeler">Sözde öğeler</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Seçici</th> + <th scope="col">Açıklama</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref("::after") }}</td> + <td>Kaynak öğenin gerçek içeriğinden sonra görünen biçimlendirilebilir bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::before") }}</td> + <td>Kaynak öğenin gerçek içeriğinden önce görünen biçimlendirilebilir bir öğeyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-letter") }}</td> + <td>Öğe içeriğinin ilk harfiyle eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-line") }}</td> + <td>Öğe içeriğinin ilk satırıyla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::grammar-error") }}</td> + <td>HTML sayfasında tarafıyıcı tarafından işaretlenen bir gramer hatasıyla eşleşir .</td> + </tr> + <tr> + <td>{{ Cssxref("::marker") }}</td> + <td>Genellikle bir madde işareti veya numara içeren bir liste öğesinin işaret kutusuyla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::selection") }}</td> + <td>Belgenin seçilen kısmıyla eşleşir.</td> + </tr> + <tr> + <td>{{ Cssxref("::spelling-error") }}</td> + <td>HTML sayfasında tarayıcı tarafından işaretlenen yazım hatasıyla eşleşir.</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> diff --git a/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..e5260643f8 --- /dev/null +++ b/files/tr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,135 @@ +--- +title: 'Tür, sınıf ve Kimlik seçicileri' +slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +tags: + - Başlangıç + - Beginner + - CSS + - Class + - Kimlik + - Learn + - Ogrenim + - Selectors + - id + - seçiciler + - sınıf +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını inceleyeceğiz.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Ön koşullar:</th> + <td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td> + </tr> + <tr> + <th scope="row">Amaç:</th> + <td>Farklı CSS seçicileri hakkında bilgi edinmek.</td> + </tr> + </tbody> +</table> + +<h2 id="Tür_seçiciler">Tür seçiciler</h2> + +<p>Bir <strong>tür seçici</strong>, belgende bir HTML öğesini seçtiği için bazen <em>etiket seçici</em> veya <em>öğe seçici</em> olarak anılır. Aşağıdaki örnekte, <code>span</code>, <code>em</code> ve <code>strong</code> seçicilerini kullandık.</p> + +<p><strong><code><h1></code> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="Evrensel_seçici">Evrensel seçici</h2> + +<p>Evrensel seçici bir yıldız işaretiyle (<code>*</code>) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.</p> + +<h3 id="Seçicilerinin_daha_kolay_okunmasını_sağlamak_için_evrensel_seçiciyi_kullanma">Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma</h3> + +<p>Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin, <code><article></code> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, {{cssxref(":first-child")}} sözde sınıfını kullanabilirsin. <code><article></code> öğe seçiciyle birlikte bir alt seçici olarak <a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a> kullanımı:</p> + +<pre class="brush: css notranslate">article :first-child { + font-weight: bold; +}</pre> + +<p>Bunla birlikte, bir öğenin ilk çocuğu olan <code><article></code> öğesini seçmek için kullanılan <code>article:first-child</code> ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.</p> + +<p>Bu karışıklığı önlemek için, <code>:first-child</code> sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <code><article></code> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.</p> + +<pre class="brush: css notranslate">article *:first-child { + font-weight: bold; +} </pre> + +<p>Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.</p> + +<h2 id="Sınıf_seçiciler">Sınıf seçiciler</h2> + +<p>Sınıf seçici bir nokta (<code>.</code>) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; <code>highlight</code> adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Belirli_unsurlara_göre_sınıfları_hedeflemek">Belirli unsurlara göre sınıfları hedeflemek</h3> + +<p>Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, <code>highlight</code> sınıfına sahip <code><span></code> ve <code><h1></code> öğelerimize farklı stillerle vurgulayacağız.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.</p> + +<h3 id="Birden_fazla_sınıf_uygulanmış_bir_öğeyi_hedeflemek">Birden fazla sınıf uygulanmış bir öğeyi hedeflemek</h3> + +<p>Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.</p> + +<p>Aşağıdaki örnekte, <code><div></code> içerisinde bir notumuz var. Gri kenar, kutu bir <code>notebox</code> sınıfına dahilse uygulanır. Kutu ayrıca <code>warning</code> veya <code>danger</code> sınıflarından birine dahilse {{cssxref("border-color")}}'unu değiştirebiliriz.</p> + +<p>Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <code><div></code>'in sadece <code>danger</code> sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="Kimlik_seçiciler">Kimlik seçiciler</h2> + +<p>Kimlik seçici nokta karakterinden ziyade diyez <code>#</code> karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere tek bir kimlik(<code>id</code>) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Uyarı: </strong>Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Not</strong>: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.</p> +</div> + +<h2 id="Sonraki_derste">Sonraki derste</h2> + +<p><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçicileri</a> inceleyerek seçicileri keşfetmeye devam edeceğiz.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Bu_kısımda">Bu kısımda</h2> + +<ol> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a> + <ul> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li> + </ul> + </li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li> + <li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li> +</ol> |