 |
Pseudo elementler bir elementin belirli bir parçasına css uygulamak için kullanılır. Örneğin;
- İlk harfe veya satıra veya elemente stil uygulamak için
- Bir elementin içeriğinden önce veya sonra bir içerik eklemek için
Syntax
selector::pseudo-element {
property: value;
}
Not! Pseudo class'lar ile pseudo elementleri ayırmak için CSS'te pseudo elementlerin gösterim şekli tek iki noktalı gösterim yerine CSS3 ile çift iki noktalı gösterim şeklinde değiştirildi. Geriye dönük uyumluluk sağlamak için tek noktalı gösterim şeklide hala desteklenmektedir.
All CSS Pseudo Elements
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Her bir <p> element başına bir şeyler eklemek için |
| ::before | p::before | Her bir <p> elementin sonuna bir şeyler eklemek için |
| ::first-letter | <p::first-letter | Her bir <p> elementin ilk harfine stil eklemek için |
| ::first-line | p::first-line | Her bir <p> elementin ilk satırına stil eklemek için |
| ::selection | p::selection | Her bir <p> elementin kullanıcı tarafından seçilen kısmına stil eklemek için |
- Bir kullanıcı fareyle bir öğenin üzerine geldiğinde o öğeye stil verme
- Ziyaret edilen ve görünmeyen bağlantıları farklı bir şekilde stilize etme
- Bir öğeye odaklanıldığında stil verme
Syntax
selector:pseudo-class {
property: value;
}
Anchor Pseudo Class'lar
/* ziyaret edilmemiş link */
a:link {
color: #FF0000;
}
/* ziyaret edilmiş link */
a:visited {
color: #00FF00;
}
/* mouse ile linkin üzerine gelindiğinde */
a:hover {
color: #FF00FF;
}
/* linke tıklandığı anda */
a:active {
color: #0000FF;
}
Not! Daha efektif bir kullanım için :hover, :link ve :visited'ten sonra; :active ise :hover'dan sonra gelmelidir. pseudo class'lar case-sensitive değildir.
Pseudo Class'lar ve CSS Class'lar
Pseudo class'lar ile css class'ları birlikte kullanılabilir.
a.highlight:hover {
color: #ff0000;
}
Yukarıdaki örnekte sadece class'ı highlight olan a elementleri etkilenecektir.
Tooltip
Bir pseudo class'ın gerçekleşme durumunda farklı bir element'in durumu değiştirilebilir.
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Yukarıdaki örnekte div elementi üzerine mouse ile gelindiğinde p elementinin display özelliği değiştirilecektir.
Tüm CSS Pseudo Class'ları
| Selector | Örnek | Örnek Açıklama |
|---|---|---|
| :active | a:active | Tüm Linklerin üzerine tıklandığı anda ki özellikleri tanımlamak için |
| :checked | input:checked | Tüm checked özelliği true olan <input> elementler için |
| :disabled | input:disabled | Tüm display özelliği true olan <input> elementler için |
| :empty | p:empty | Bir çocuk elemente sahip olmayan tüm <p> elementleri için |
| :enabled | input:enabled | Tüm enabled <input> elementler için |
| :first-child | p:first-child | Parent'ının ilk elementi olan tüm <p> elementleri için |
| :first-of-type | p:first-of-type | Tüm parent'ların ilk <p> olan elementleri için |
| :focus | input:focus | <input> element'lerin focus durumundaki özelliklerini tanımlamak için |
| :hover | a:hover | Link elementinin üzerine mouse ile gelindiği durumdaki özelliklerini tanımlamak için |
| :in-range | input:in-range | Belirtilen değer aralığını aşmayan bir değer girilen <input> elementler için |
| :invalid | input:invalid | Tüm invalid değeri olan <input> elementleri için |
| :lang(language) | p:lang(it) | "it" ile başlayan bir lang özelliği olan tüm <p> elementleri için |
| :last-child | p:last-child | Parent'ının son elementi olan tüm <p> elementleri için |
| :last-of-type | p:last-of-type | Tüm parent'ların son <p> olan elementleri için |
| :link | a:link | Daha önce ziyaret edilmemiş tüm linkler için |
| :not(selector) | :not(p) | <p> elementi olmayan tüm elementler için |
| :nth-child(n) | p:nth-child(2) | Bir parent'ın ikinci elementi olan tüm <p> elementleri için |
| :nth-last-child(n) | p:nth-last-child(2) | Bir parent'ın sondan ikinci elementi olan tüm <p> elementleri için |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Tüm parent'ların sondan ikinci <p> elementleri için |
| :nth-of-type(n) | p:nth-of-type(2) | Tüm parent'ların ikinci <p> elementleri için |
| :only-of-type | p:only-of-type | Parent'ının tek <p> elementi olan <p> elementleri için |
| :only-child | p:only-child | Parent'ının tek child elementi olan <p> elementleri için |
| :optional | input:optional | "required" özelliği tanımlanmayan tüm <input> elementleri için |
| :out-of-range | input:out-of-range | Belirtilen değer aralığını aşan bir değer girilen <input> elementler için |
| :read-only | input:read-only | "readonly" özelliği tanımlanan tüm <input> elementler için |
| :read-write | input:read-write | "readonly" özelliği tanımlanmayan tüm <input> elementler için |
| :required | input:required | "required" özelliği tanımlanan tüm <input> elementler için |
| :root | root | Sayfanın root elementi için |
| :target | #news:target | Aktif olan #news elementler için |
| :valid | input:valid | Uygun bir değer girilmiş tüm <input> elementler için |
| :visited | a:visited | Ziyaret edilmiş tüm linkler için |
CSS'de overflow özelliği bir alana sığmayacak kadar büyük olan içeriğe ne olacağını ayarlamamızı sağlar. Overflow aşağıdaki değerleri alabilir;
Visible
Varsayılan değerdir. Taşma kırpılmaz. İçerik öğenin dışına taşmış bir şekilde görüntülenir.div {
overflow: visible;
}
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Hidden
Taşma kırpılır ve içeriğin geri kalanı görünmez olur.
div {
overflow: hidden;
}
Scroll
Taşma kırpılır ve içeriğin geri kalanını görmek için bir kaydırma çubuğu eklenir.
div {
overflow: scroll;
}
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Auto
Eğer bir taşma olursa bu taşma kırpılır ve scroll eklenir. Bir taşma durumu olmazsa scroll eklenmez.
div {
overflow: auto;
}
You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
HTML'de div ve span elemanları genellile diğer elemanları gruplamak ve yerleşimlerini düzenlemek için kullanılır. CSS'de ise o gruplara ortak stil tanımlamak için kullanılır.
Div ve span elemanları arasındaki tek var; div elemanının görünüm tipi block iken span elemanının inline'dır. Bu sadece içerisinde bulunan elemanların sayfadaki yerleşimlerini etkiler.
Inline ve block elemanlar arasındaki farkı buraya tıklayarak okuyabilirsiniz.
HTML'de her elemanın default olarak görünüm tipi vardır. Bu tip block veya inline olabilir. Bu tip CSS ile değiştirilebilir.
Block elemanlar, bulunduğu satırın tümünü kaplar ve eklendiği yerde yeni bir satıra geçer.
Inline elemanlar, eklendiği yerde sadece boyutu kadar yer kaplar.
Not: Height ve width özellikleri sadece block elemanlarda kullanılabilir.
Block Elemanlar
<address><article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Inline Elemanlar
<a><abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
HTML'de <meta> etiketi, <head> etiketi içerisinde kullanılan bir etikettir. Bu etiket ile sitemiz ile ilgili bilgileri tarayıcılar, arama motorları ve diğer web hizmetleri paylaşabiliriz.
Web sayfamızda kullanılacak karakter setini aşağıdaki şekilde tanımlayabiliriz. Bu sayede sitemizdeki türkçe karakterler doğru bir şekilde yorumlanabilir.
<meta charset="UTF-8">
Web sayfamız ile ilgili kısa bir açıklamayı aşağıdaki şekilde tanımlayabiliriz.
<meta name="description" content="Free Web tutorials">
Arama motorlarının web sayfamızı doğru bir şekilde bulabilmesi için etiketleri aşağıdaki şekilde tanımlayabiliriz.
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Web sayfamızın yazarını aşağıdaki şekilde tanımlayabiliriz.
<meta name="author" content="Berkay Demirel">