Embedded Files
Hazırlayan: Meryem Savaş
Element olmayan ama element gibi davranan ve seçici olarak kullanarak biçimlendirme yaptığımız seçicilere CSS sözde elementler denir. Sözde elementler sözde sınıflara oldukça benzese de adından da anlaşılacağı üzere işin aslında birer element gibi davranmakta ve ilgili elementin başı, sonu veya bir kısmını etkilemekteler. Sözde elementlerin en büyük özelliği content adındaki CSS özelliği ile içerik alabilmeleri ve bir element gibi belgede kendilerini gösterebilmeleridir.
Önemli: Pseudo-element kullanımında :: şeklinde iki tane iki nokta işareti ile kullanılması gerekir.
::after , ::before
Aşağıdaki öğede ::after elementi p öğesinin sonunda ve ::before elemanı da p öğesinin başında yer almaktadır.
HTML Örneği
<p class="main-text">Alıntı cümlelerin başına ve sonuna tırnak işareti konur.</p>
CSS Örneği
p.main-text::before{
content:'"';
display:inline-block;
background-color:red;
color:#fff;
margin: 0 10px;
padding:5px 20px;
}
p.main-text::after{
content:'"';
display:inline-block;
background-color:red;
color:#fff;
margin: 0 10px;
padding:5px 20px;
}
Sonuç
" Alıntı cümlelerin başına ve sonuna tırnak işareti konur. "
::first-line
::first-line sözde (pseudo) seçici bir HTML öğesinin ilk yani en üst satırının stillendirilmesi için kullanılmaktadır. div, p, h1, section, header gibi tüm HTML öğerleri için kullanılabilir.
Aşağıdaki örnekte ::first-line seçici ile p öğesinin ilk satırını krmızı arka planda beyaz yazı rengi ile stillendirelim.
HTML Örneği
<p>HTML, web tasarımcılarına sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar, paragraflar ve başlıklar oluşturmalarında yardımcıdır. Bu konuda basit kod yapıları olan etiketler ve nitelikler kullanılarak web sayfaları şekillendirilebilir. HTML için aslında bir web sitesinin iskeleti denilebilir. Yani HTML kodları olmadan web sitesi kodlanamaz.</p>
CSS Örneği
p:first-line{
background-color:red;
color:#fff;
font-size:20px;
padding:10px;
}
Sonuç
HTML, web tasarımcılarına sayfalar ve uygulamalar için yapı profilleri, bağlantılar, blok alıntılar, paragraflar ve başlıklar oluşturmalarında yardımcıdır. Bu konuda basit kod yapıları olan etiketler ve nitelikler kullanılarak web sayfaları şekillendirilebilir. HTML için aslında bir web sitesinin iskeleti denilebilir. Yani HTML kodları olmadan web sitesi kodlanamaz.
::first-letter
::first-letter Bir HTML öğesinin içeriğindeki ilk metindeki ilk harfi seçmek için kullanılmaktadır. Genellikle p etiketi için kullanılan bu özellik h1, code, span, ul, header, div gibi birçok HTML öğesi için de kullanılabilir.
Aşağıdaki örenekte p öğesinin ilk harfini stillendirelim.
HTML Örneği
<p>Türkçede cümlenin başındaki sözcüğün ilk harfi büyük harfle başlar.</p>
CSS Örneği
p::first-letter {
font-size: 40px;
color:red;
}
Sonuç
Türkçede cümlenin başındaki sözcüğün ilk harfi büyük harfle başlar.
::selection
::selection sözde seçicisi kullanıcın mouse ile bir alanı seçtiğinde arka plan rengini ve yazı rengini stillendirmenizi sağlayan css seçicisidir. ::selection şeklinde uygulayarak tüm HTML sayfasında aynı stilin görünmesini sağlayabilirsiniz.
Aşağıdaki örnekte ::selection seçici özelliği ile div içerisindeki p elemanının seçildiğinde yazı rengini sarı ve arka plan rengini de siyah yapalım.
HTML Örneği
<p>CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder.</p>
</div>
<p>Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda, ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur. </p>
CSS Örneği
div p::selection {
background-color:black;
color:yellow;
}
Sonuç(paragraf seçildiğinde böyle bir görüntü ortaya çıkar)
CSS, bir HTML sayfasının nasıl görüntüleneceğini tarif eder.
Bu tarifin içinde sayfadaki başlık, metin, resim, video gibi öğelerin görsel özelliklerinin yanı sıra, sayfa yerleşimi ve bu yerleşimin farklı ekranlarda, cihazlarda, ekran, kağıt ya da diğer ortamlarda nasıl değişeceği bilgisi de bulunur.
Page updated
Report abuse