Bu yazının amacı, CSS’nin HTML’ye nasıl uygulandığını ve çakışmaların nasıl çözüldüğünü kontrol eden, CSS’nin en temel kavramlarından bazılarına (kademe, özgünlük ve kalıtım) ilişkin anlayışınızı geliştirmektir.
Bu yazı kılavuzun diğer bölümleri ile daha az ilgili ve biraz daha akademik görünse de, bunları anlamak daha sonra size çok fazla fayda sağlayacak! Bu bölümü dikkatli bir şekilde incelemenizi ve devam etmeden önce kavramları anladığınızı kontrol etmenizi öneririz.
Çakışan kurallar
CSS, Basamaklı Stil Sayfaları anlamına gelir ve ilk sözcüğün basamaklandırmanın anlaşılması inanılmaz derecede önemlidir – basamaklı davranışın çalışma şekli CSS’yi anlamanın anahtarıdır.
Bir noktada bir proje üzerinde çalışıyor olacaksınız ve bir öğeye uygulanması gerektiğini düşündüğünüz CSS’nin çalışmadığını göreceksiniz. Genellikle sorun, potansiyel olarak aynı öğeye uygulanabilecek iki kural oluşturmuş olmanızdır. Bu tür bir etkileşim olduğu zaman hangi kuralın geçerli olduğunu kontrol eden mekanizma Kademe (basmak), ve bununla yakından ilgili olan özgüllük‘tür. Öğenizi şekillendiren kurallar beklediğiniz gibi çalışmayabilir, bu nedenle bu mekanizmaların nasıl çalıştığını anlamanız gerekir.
Burada ayrıca önemli olan kalıtım kavramıdır; bu, bazı CSS özelliklerinin varsayılan olarak geçerli öğenin üst öğesinde ayarlanan değerleri devraldığı ve bazılarının almadığı anlamına gelir. Bu, beklemeyeceğiniz bazı davranışlara da neden olabilir.
Çalışacağımız önemli şeylere hızlıca göz atarak başlayalım, sonra sırayla her birine detaylı bakacağız ve birbirleriyle ve CSS’nizle nasıl etkileşime girdiklerini göreceğiz. Bu, anlaşılması zor bir dizi kavram gibi görünebilir. CSS yazma konusunda daha fazla pratik yaptıkça bunların çalışma şekli sizin için daha belirgin hale gelecektir.
Kademe – Basamak
Stil sayfaları basamaklıdır — çok basit bir düzeyde, bu, CSS kurallarının sırasının önemli olduğu anlamına gelir; eşit özgüllüğe sahip iki kural uygulandığında, kullanılacak olan kural CSS’de en son yazılan kuraldır.
Aşağıdaki örnekte, h1 için geçerli olabilecek iki kuralımız var. Bu kurallar aynı seçici olması ve dolayısıyla aynı özgünlük taşımasına rağmen h1, sonda yazılması yüzden mavi olarak boyanır:
h1 {
color: red;
}
h1 {
color: blue;
} <h1>This is my heading.</h1>Çıktımız şu şekilde görünür:
Özgüllük
Özgüllük, birden çok kuralın farklı seçicileri varsa, ancak yine de aynı öğeye uygulanabiliyorsa, tarayıcının hangi kuralın uygulanacağına nasıl karar verdiğidir. Temel olarak bir seçicinin seçiminin ne kadar spesifik olacağının bir ölçüsüdür:
- Öğe seçiciler daha az spesifiktir – sayfada görünen o türden tüm öğeleri seçer – bu nedenle daha düşük bir puan alır.
- Bir sınıf seçici daha spesifiktir – yalnızca belirli bir
classözniteliği değerine sahip bir sayfadaki öğeleri seçer – bu nedenle daha yüksek bir puan alır.
Örnek zamanı! Aşağıda, yine h1 için tanımlanmış iki kural bulunuyor. Ancak, örneğimizdeki h1 kırmızı renkle renklendiriliyor – çünkü sınıf seçici kuralının daha yüksek bir özgüllüğü vardır ve bu nedenle kaynak sırasında daha aşağıda görünse bile uygulanan bu seçicidir.
.main-heading {
color: red;
}
h1 {
color: blue;
}<h1 class="main-heading">This is my heading.</h1>
Spesifiklik puanlamasını ve diğer benzer şeyleri daha sonra açıklayacağız.
Kalıtım – Miras
Kalıtımın da bu bağlamda anlaşılması gerekir – üst öğelerde ayarlanan bazı CSS özellik değerleri, alt öğeleri tarafından miras alınır.
Örneğin, bir öğeye color ve font-family ayarlarsanız, bunlara doğrudan farklı renk ve yazı tipi değerleri uygulamadığınız sürece, içindeki her öğe de o renk ve yazı tipiyle stillendirilir.
body {
color: blue;
}
span {
color: black;
}<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>
Bazı özellikler ise miras alınmaz – örneğin, width. Bir öğeye %50 genişlik ayarlarsanız, tüm alt öğeleri, üst öğelerinin genişliğinin %50’sini almaz. Durum böyle olsaydı, CSS’yi kullanmak çok sinir bozucu olurdu!
Not: MDN CSS özelliği referans sayfalarında, bu özellik hakkında, miras alınıp alınmadığı da dahil olmak üzere bir dizi liste bulunur. Örneğin, renk özelliğine bakın.
Kavramların birlikte nasıl çalıştığını anlamak
Bu üç kavram (kademe, özgüllük ve kalıtım) birlikte hangi CSS’nin hangi öğeye uygulanacağını kontrol eder; aşağıdaki bölümlerde birlikte nasıl çalıştıklarını göreceğiz. Bu biraz karmaşık görünebilir, ancak CSS ile daha fazla deneyim kazandıkça bunları hatırlamaya başlayacaksınız ve unutursanız her zaman ayrıntılara bakabilirsiniz! Deneyimli geliştiriciler bile tüm ayrıntıları hatırlamaz.
Kalıtımı anlama
Mirasla başlayacağız. Aşağıda <ul> içinde iç içe iki düzeyde sırasız liste bulunan bir örneğe sahibiz . Dıştaki <ul> öğesine kenarlık, dolgu ve yazı tipi rengi verdik.
Renk doğrudan çocuklara uygulandı, aynı zamanda dolaylı çocuklara da uygulandı – yakın çocuk <li>s ve ilk iç içe listedekiler. Daha sonra specialikinci iç içe listeye bir sınıf ekledik ve ona farklı bir renk uyguladık. Bu daha sonra çocukları aracılığıyla miras alır.
<ul class="main">
<li>Item One</li>
<li>Item Two
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>Item Three
<ul class="special">
<li>3.1
<ul>
<li>3.1.1</li>
<li>3.1.2</li>
</ul>
</li>
<li>3.2</li>
</ul>
</li>
</ul>.main {
color: rebeccapurple;
border: 2px solid #ccc;
padding: 1em;
}
.special {
color: black;
font-weight: bold;
}
Genişlikler (yukarıda belirtildiği gibi), kenar boşlukları, dolgu ve kenarlıklar gibi şeyler miras alınmaz. Bir sınır, listemizin çocukları tarafından miras alınacak olsaydı, her bir liste ve liste öğesi bir sınır kazanırdı – muhtemelen asla isteyeceğimiz bir etki değil!
Hangi özelliklerin varsayılan olarak devralındığı ve hangilerinin olmadığı büyük ölçüde sağduyuya bağlıdır.
Kalıtımı denetleme
CSS, kalıtımı denetlemek için dört özel evrensel özellik değeri sağlar. Her CSS özelliği bu değerleri kabul eder.
inherit
Seçili öğeye uygulanan özellik değerini, üst öğesininkiyle aynı olacak şekilde ayarlar. Bu “kalıtımı açar”.
initial
Seçili bir öğeye uygulanan özellik değerini, o özelliğin başlangıç değerine ayarlar.
unset
Özelliği doğal değerine sıfırlar, yani öğe miras almışsa inherit gibi davranır, aksi takdirde initial gibi davranır.
revert
Çoğu durumda unset gibi davranır. Ancak özelliği, o özelliğe uygulanan varsayılanlar yerine tarayıcının varsayılan stiline döndürür.
Bir bağlantı listesine bakabilir ve evrensel değerlerin nasıl çalıştığını keşfedebiliriz. Aşağıdaki örneği deneyin. Kodla oynamak, HTML ve CSS ile başa çıkmanın en iyi yoludur.
Örneğin:
- İkinci liste öğesi,
my-class-1sınıfına sahiptir. Bu,<a>öğesini iç içe yerleştirilmiş öğenin rengini devralacak şekilde ayarlar. Kuralı kaldırırsanız bağlantının rengini nasıl değiştirir? - Üçüncü ve dördüncü bağlantıların neden o renkte olduklarını anlıyor musunuz? Üçüncü bağlantı
initialolarak ayarlanmış. Bu, özelliğin (bu durumda siyah) ilk değerini kullandığı ve bağlantılar için mavi olan tarayıcı varsayılanını kullanmadığı anlamına gelir. Dördüncüsü,unset, bağlantı metninin ana öğenin rengi olan yeşili kullandığı anlamına gelir. <a>öğesi için yeni bir renk tanımlarsanız, örneğina { color: red; }, hangi bağlantıların rengi değişir?
body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}<ul>
<li>Default <a href="#">link</a> color</li>
<li class="my-class-1">Inherit the <a href="#">link</a> color</li>
<li class="my-class-2">Reset the <a href="#">link</a> color</li>
<li class="my-class-3">Unset the <a href="#">link</a> color</li>
</ul>
Tüm özellik değerlerinin sıfırlanması
CSS kısayol all özelliği, bu kalıtım değerlerinden birini tüm özelliklere (neredeyse) aynı anda uygulamak için kullanılabilir. Değer olarak miras değerlerinden (inherit, initial, unset veya revert) herhangi birini alabilir. Yeni değişikliklere başlamadan önce bilinen bir başlangıç noktasına geri dönebilmeniz için stillerde yapılan değişiklikleri geri almanın uygun bir yoludur.
Aşağıdaki örnekte iki blok alıntımız var. İlk blok öğesinde kendisine elemanına uygulanan stil bulunuyor, ikincisi için ise Blockquote öğesine uygulanan bir sınıfta ise all:unset bulunuyor.
blockquote {
background-color: red;
border: 2px solid green;
}
.fix-this {
all: unset;
} <blockquote>
<p>This blockquote is styled</p>
</blockquote>
<blockquote class="fix-this">
<p>This blockquote is not styled</p>
</blockquote>
all değerini diğer mevcut değerlerden bazılarına ayarlamayı deneyin ve farkın ne olduğunu gözlemleyin.
Kademeyi anlamak
Artık HTML’nizin derinliklerine yerleştirilmiş bir paragrafın neden gövdeye uygulanan CSS ile aynı renkte olduğunu anlıyoruz ve giriş derslerinden de herhangi bir noktada bir şeye uygulanan CSS’nin nasıl değiştirileceğini biliyoruz — bir öğeye CSS atayarak veya bir sınıf oluşturarak. Şimdi, birden fazla şey bir öğeyi stillendirebildiğinde, kademenin hangi CSS kurallarının uygulanacağını nasıl tanımladığına düzgün bir şekilde bakacağız.
Burada artan önem sırasına göre listelenen dikkate alınması gereken üç faktör vardır. Daha sonra olanlar öncekileri geçersiz kılar:
- Kaynak sırası
- Özgüllük
- Önem
Tarayıcıların tam olarak hangi CSS’nin uygulanması gerektiğini nasıl anladığını görmek için bunlara bakacağız.
Kaynak sırası
Kaynak sırasının kademe için ne kadar önemli olduğunu zaten gördük. Tamamen aynı ağırlığa sahip birden fazla kuralınız varsa, CSS’de en son gelen kazanır.
Özgüllük
Kaynak sırasının önemli olduğu gerçeğini anladık. Ancak bir noktada, stil sayfasında bir kuralın daha sonra geldiğini, ancak daha önceki, çelişen bir kuralın uygulandığını bildiğiniz bir durumla karşılaşırsınız. Bunun nedeni, önceki kuralın daha yüksek bir özgüllüğe sahip olmasıdır – daha spesifiktir ve bu nedenle tarayıcı tarafından öğeye stil vermesi gereken seçici olarak seçilir.
Bu yazıda daha önce gördüğümüz gibi, bir sınıf seçici, bir eleman seçiciden daha fazla ağırlığa sahiptir. Bu nedenle sınıfta tanımlanan özellikler, doğrudan elemana uygulananları geçersiz kılar.
Burada dikkat edilmesi gereken nokta, her ne kadar seçiciler ve seçtikleri şeye uygulanan kuralları konuşuyor olsak da, önemki olan tüm kuralın değil, sadece aynı olan özelliklerin geçersiz kılınmasıdır.
Bu davranış, CSS’nizde tekrarı önlemeye yardımcı olur. Yaygın bir uygulama, temel öğeler için genel stiller tanımlamak ve ardından farklı olanlar için sınıflar oluşturmaktır. Örneğin, aşağıdaki stil sayfasında 2. seviye başlıklar için genel stiller tanımladık ve ardından yalnızca bazı özellikleri ve değerleri değiştiren bazı sınıflar oluşturduk. Başlangıçta tanımlanan değerler tüm başlıklara uygulanır. Daha sonra sınıflarla birlikte başlıklara daha spesifik değerler uygulanır.
h2 {
font-size: 2em;
color: #000;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.small {
font-size: 1em;
}
.bright {
color: rebeccapurple;
} <h2>Heading with no class</h2>
<h2 class="small">Heading with class of small</h2>
<h2 class="bright">Heading with class of bright</h2>
Şimdi tarayıcının özgüllüğü nasıl hesaplayacağına bir göz atalım. Bir öğe seçicinin düşük özgüllüğe sahip olduğunu ve bir sınıf tarafından yok sayılabileceğini zaten biliyoruz. Esasen, farklı seçici türlerine puan cinsinden bir değer verilir ve bunları toplamak o belirli seçicinin ağırlığını verir. Bu da daha sonra diğer potansiyel eşleşmelere karşı değerlendirilebilir.
Bir seçicinin sahip olduğu özgünlük miktarı, binler, yüzler, onlar ve birler olarak düşünülebilecek dört farklı değer (veya bileşen) kullanılarak ölçülür – dört sütunda dört tek basamak:
- Binler: satır içi stiller olarak da bilinen bir
styleöznitelik içindeyse, bu sütuna bir puan verilir. Bu tür bildirimlerin seçicileri yoktur, bu nedenle özgüllükleri her zaman 1000’dir. - Yüzler: Genel seçicide bulunan her bir kimlik (ID) seçici için bu sütunaa bir puan verilir.
- Onlar: Genel seçicide bulunan her sınıf seçici, nitelik seçici veya sözde-sınıf için bu sütunda bir puan bulunur.
- Birler: Genel seçicide bulunan her öğe seçici veya sözde-öğe için bu sütunaa bir puan verilir.
Not: Evrensel seçici ( *), birleştiriciler ( +, >, ~, ‘ ‘) ve olumsuzlama sözde-sınıfının (:not) özgüllük üzerinde hiçbir etkisi yoktur.
Aşağıdaki tablo, size yardımcı olmak için birkaç izole örnek göstermektedir. Bunları gözden geçirmeye çalışın ve neden onlara verdiğimiz özgünlüğe sahip olduklarını anladığınızdan emin olun.
Devam etmeden önce aşağıdaki örneğe bakalım:
/* Özgüllük: 0101 */
#outer a {
background-color: red;
}
/* Özgüllük: 0201 */
#outer #inner a {
background-color: blue;
}
/* Özgüllük: 0104 */
#outer div ul li a {
color: yellow;
}
/* Özgüllük: 0113 */
#outer div ul .nav a {
color: white;
}
/* Özgüllük: 0024 */
div div li:nth-child(2) a:hover {
border: 10px solid black;
}
/* Özgüllük: 0023 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}
/* Özgüllük: 0033 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
a {
display: inline-block;
line-height: 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
width: 200px;
margin-bottom: 10px;
}
ul {
padding: 0;
}
li {
list-style-type: none;
} <div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
Peki burada neler oluyor? Her şeyden önce, biz sadece bu örneğin ilk yedi kuralıyla ilgileniyoruz ve farkedeceğiniz gibi, her birinin önüne bir yorumda bunların özgüllük değerlerini ekledik.
- İlk iki seçici, bağlantının arka plan renginin stili üzerinde rekabet eder – ikincisi kazanır ve zincirde fazladan bir kimlik seçicisi olduğu için arka plan rengini mavi yapar: özgüllüğü 201’e karşı 101’dir.
- Üçüncü ve dördüncü seçiciler, bağlantının metin renginin stili üzerinde rekabet ediyor – ikincisi kazanır ve metni beyaz yapar. Yani kazanan özgüllük 113’e 104’tür.
- Seçici 5-7, üzerine gelindiğinde bağlantının kenarlığının stili üzerinde rekabet eder. Seçici altı, 23’e 24’lük bir özgüllük ile açıkça beşe kaybeder — zincirde bir tane daha az eleman seçiciye sahiptir. Bununla birlikte, seçici yedi, hem beşi hem de altıyı yener – zincirde beş ile aynı sayıda alt seçiciye sahiptir, ancak bir öğe bir sınıf seçici için değiştirilmiştir. Yani kazanan özgüllük 33’e 23 ve 24’tür.
Not: Bu, anlaşılması kolay olsun diye yalnızca yaklaşık bir örnektir. Gerçekte, her seçici türü, daha düşük bir özgüllük düzeyine sahip seçiciler tarafından üzerine yazılamayan kendi özgüllük düzeyine sahiptir. Örneğin, birleştirilmiş bir milyon sınıf seçicisi, bir kimlik seçicinin kurallarını yok sayamazdı.
Özgüllüğü değerlendirmenin daha doğru bir yolu, özgüllük düzeylerini en yüksekten başlayarak ve gerektiğinde en düşüğe doğru tek tek puanlamak olacaktır. Yalnızca bir özgüllük düzeyinde puanlar olduğunda, bir sonraki düzeyi değerlendirmeniz gerekir; aksi takdirde, daha yüksek özgüllük düzeylerinin üzerine asla yazamayacakları için daha düşük özgüllük düzeyi seçicilerini göz ardı edebilirsiniz.
!important
Yukarıdaki hesaplamaların tümünü geçersiz kılmak için kullanabileceğiniz özel bir CSS parçası vardır — !important. Ancak, kullanırken çok dikkatli olmalısınız. Bu, belirli bir özellik için istenilen değeri vermde kullanılır, böylece kademenin normal kurallarını geçersiz kılar.
Birinde kimlik olan (ID) iki paragrafımızın olduğu bu örneğe bir göz atın.
#winning {
background-color: red;
border: 1px solid black;
}
.better {
background-color: gray;
border: none !important;
}
p {
background-color: blue;
color: white;
padding: 5px;
} <p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>
Neler olduğunu görmek için bunun üzerinden geçelim – anlamakta güçlük çekiyorsanız ne olduğunu görmek için bazı özellikleri kaldırmayı deneyin:
- Üçüncü kuralın
colorvepaddingdeğerlerinin uygulandığını ancakbackground-coloruygulanmadığını göreceksiniz. Neden? Aslında üçü de geçerli olmalıydı, çünkü kaynak sıradaki sonraki kurallar genellikle önceki kuralları geçersiz kılar. - Bununla birlikte, sınıf seçicilerin öğe seçicilerden daha yüksek özgüllüğe sahip olması nedeniyle, üstündeki kurallar kazanır.
- Her iki unsur da bir
bettersınıfı içerir, ama ikincide birwinningkimliği bulunur. Kimlikler, sınıflardan bile daha yüksek bir özgüllüğe sahip olduğundan (bir sayfada her benzersiz kimliğe sahip yalnızca bir öğeniz olabilir, ancak aynı sınıfa sahip birçok öğe olabilir — kimlik seçiciler, hedefledikleri şeyde çok belirgindir ), kırmızı arka plan rengi ve 1 piksel siyah kenarlık ikinci öğeye, sınıf tarafından belirtildiği gibi, gri arka plan rengi ve 0 kenarlık 1. öğeye uygulanmalıdır.. - 2. öğe kırmızı arka plan rengini alır, ancak hiçbir kenarlık bulunmaz. Neden? İkinci kuraldaki
!importantbildirimi nedeniyle –border: nonedeğerinden sonra dahil edildi. ID daha yüksek özgüllüğe sahip olsa bile, bu bildirimin önündeki kurala ait kenarlığı alacağı anlamına gelir.
Not: !important bildirimi geçersiz kılmanın tek yolu, daha sonraki kaynak sırasına, veya aynı özgüllükte bir öğeye ya da daha yüksek özgüllüğe sahip başka bir bildirime !important eklemek olacaktır .
!important özelliğini başkalarının kodlarında rastladığınızda ne olduğunu anlamanız için var olduğunu bilmekte fayda var. Ancak mecbur kalmadıkça kesinlikle kullanmamanızı öneririz. !important kademenin normal çalışma şeklini değiştirir, bu nedenle özellikle büyük bir stil sayfasında hata ayıklarken CSS problemlerini çözmeyi gerçekten zorlaştırabilir.
Bunu kullanmak zorunda kalabileceğiniz bir durum, temel CSS modüllerini düzenleyemediğiniz bir CMS üzerinde çalışırken ve gerçekten başka hiçbir şekilde geçersiz kılınamayan bir stili geçersiz kılmak istediğiniz zamandır. Ama gerçekten bundan kaçınabiliyorsanız kullanmayın.
CSS konumunun etkisi
Son olarak, bir CSS bildiriminin öneminin, hangi stil sayfasında belirtildiğine bağlı olduğunu da belirtmekte fayda var – kullanıcıların, geliştiricinin stillerini geçersiz kılmak için özel stil sayfaları ayarlaması mümkündür. Örneğin, kullanıcı görme engelli olabilir ve daha kolay okunabilmesi için ziyaret ettiği tüm web sayfalarındaki yazı tipi boyutunu normal boyutun iki katı olacak şekilde ayarlamak isteyebilir.
Özet
Çakışan bildirimler olduğunda öncekileri geçersiz kılacak şekilde aşağıdaki sıra uygulanacaktır:
- Kullanıcı aracısı stil sayfalarındaki bildirimler (örneğin, başka bir stil ayarlanmadığında kullanılan tarayıcının varsayılan stilleri).
- Kullanıcı stil sayfalarındaki normal bildirimler (bir kullanıcı tarafından belirlenen özel stiller).
- Yazar stil sayfalarındaki normal bildirimler (bunlar, web geliştiricileri olarak bizim tarafımızdan belirlenen stillerdir).
- Yazar stil sayfalarındaki önemli bildirimler
- Kullanıcı stil sayfalarındaki önemli bildirimler
Web geliştiricilerinin stil sayfalarının kullanıcı stil sayfalarını geçersiz kılması mantıklıdır, bu nedenle tasarım amaçlandığı gibi tutulabilir, ancak bazen kullanıcıların yukarıda belirtildiği gibi web geliştirici stillerini geçersiz kılmak için iyi nedenleri vardır – bu, !important kuralları kullanılarak başarılabilir.
Becerilerinizi test edin!
Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz?
Sırada ne var?
Bu makalenin çoğunu anladıysanız, tebrikler – CSS’nin temel mekaniğine aşina olmaya başladınız. Artık seçicilere ayrıntılı olarak bakacağız.
Kademeyi, özgüllüğü ve kalıtımı tam olarak anlamadıysanız, endişelenmeyin! Bu kesinlikle kılavuzda şu ana kadar ele aldığımız en karmaşık konu ve profesyonel web geliştiricilerinin bile bazen zor bulduğu bir şey. Kılavuz boyunca devam ederken bu makaleye birkaç kez geri dönmenizi ve üzerinde düşünmeye devam etmenizi tavsiye ederiz.
Stillerin beklendiği gibi uygulanmamasıyla ilgili garip sorunlarla karşılaşmaya başlarsanız buraya tekrar bakın.