Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Semih güzelel

<[if !mso]> <[endif]><[if gte mso 9]> Normal 0 21 false false false MicrosoftInternetExplorer4 <[endif]><[if gte mso 9]> <[endif]><[if gte mso 10]> <[endif]>

Css'in HTML içerisinde kullanım şekilleri

Css sayfa içinde 3 şekilde kullanılabilir bunlar ;

 

Yerel Stil Şablonu:

Yerel stil şablonları sayfada bir tek html etiketi için özel olarak kullanılırlar yani bulunduğu yerde etkiler.
<[if !supportLineBreakNewLine]>

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
</head>
<body>
<h2>Css Kullanım Şekilleri</h2><br>
<h2 style="font-size:25pt; color:red">Yerel Kullanım</h2>
</body>
</html> <[if gte vml 1]>
 
 
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 

 
<[endif]><[if !vml]><[endif]>

 Başlıksız İçerik______________________

Örnekte olduğu gibi <h2> etiketinin olduğu yere stil eklemiş olduk.

Global Stil Şablonu:

Global stil şablonu , stilin tüm sayfada etkili olmasını sağlar.Bu stil şablonu <head></head> satırları arasında tanımlanmalıdır.Aşağıdaki tüm <h2> etiketli kısımlardaki stil özellikleri sabitlenmiş oldu.

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
<style type="text/css">
<
h2 {font-size:25pt; color:red}
>
</style>
</head>
<body>
<h2>Global Stil Şablonu</h2>
</body>
</html>

 Başlıksız İçerik______________________

<[endif]>

Bağlantılı Stil Şablonu:

Eğer stil özelliklerinin tek bir html sayfasını değilde birden çok html sayfasını biçimlendirmek istiyorsanız css uzantılı bir text dosyasına yazılmalıdır.Css biçimlendirmesini çağıracağımız sayfaya yine <head> </head> etiketleri arasına <link rel="stylesheet" type="text/css" href="dosya_ismi.css"> şeklinde yazarız ve çağırdığımız css dosyasını sayfamıza açarız.

 

stil.css dosyası;

h1 {font-size:13pt; color:green}
h2 {font:20pt; color:blue}
h3 {font-size:15pt; color:red}


<[if !supportLineBreakNewLine]>
<[endif]>

*.html dosyası;

<html>
<head>
<title>Css'in Html İçinde Kullanımı</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>Bağıntılı Stil Şablonu</h2>
<h2>Bağıntılı Stil Şablonu</h2>
<h3>Bağıntılı Stil Şablonu</h2>
</body>
</html>

 Başlıksız İçerik______________________<[if gte vml 1]> <[endif]><[if !vml]><[endif]>

Pseudo Class Örnekleri

Pseudo sınıfları ve elementleri CSS destekli tüm tarayıcılarda otomatik tanınan özel sınıf ve elementlerdir.Pseudo class bir elementi farklı alt classlara böler.Örneğin link elementini active, visited, hover sınıflarına bölmesi gibi.

 

a:visited {color: red;} ziyaret edilmiş linkin kırmızı olmasını sağlayan pseudo class örneği.

 

Normal sınıflar ile pseudo sınıflar birlikte kullanılabilir.

a.disarilinki:link, a.disarilinki:visited {color: blue;} normal sınıf ve pseudo sınıfın birlikte kullanımı.

 

ID seçicileri ile birlikte de kullanılabilirler.

a#altkisim:link{font-weight: bold;} a# id seçicisi ile birlikte kullanımı. <[if gte mso 9]>
 
 
<[endif]><[if gte mso 10]>
<[endif]>

Link Pseudo Classları:
<[if gte mso 9]> Normal 0 21 false false false MicrosoftInternetExplorer4 <[endif]><[if gte mso 9]> <[endif]><[if gte mso 10]> <[endif]>ziyaret edilen link yeşil olcak.
a:link{color:gray;} <[if gte mso 9]> Normal 0 21 false false false MicrosoftInternetExplorer4 <[endif]><[if gte mso 9]> <[endif]><[if gte mso 10]> <[endif]>link ziyaret edilmeden önce gri renkte olcak.

Başlıksız İçerik______________________

<[if gte mso 9]> Normal 0 21 false false false MicrosoftInternetExplorer4 <[endif]><[if gte mso 9]> <[endif]><[if gte mso 10]> <[endif]>Dinamik Pseudo Classları:

<[if gte mso 9]> Normal 0 21 false false false MicrosoftInternetExplorer4 <[endif]><[if gte mso 9]> <[endif]><[if gte mso 10]> <[endif]>

Dinamik pseudo classları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır.3 tanedir :focus, :active ve :hover.

 

Pseudo classlarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-focus-hover-active” sıralaması yapılmalıdır.

 

:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır. Örneğin input alanına içerik girerken stilinin değişmesi gibi.

 Başlıksız İçerik______________________

:active - Aktif olan elemente stil atamak için kullanılır.

:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için kullanılır. Örneğin bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için kullanılabilir.

Başlıksız İçerik______________________

İlk Çocuk Elementi seçmek:

Diğer bir pseudo sınıfımız :first-child‘dır.first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.

Örnek Kod;
 

<html>
<head>
<title>Pseudo Class Örnekleri</title>
<style type="text/css" name="alternatifard">
<
p:first-child {font-weight: bold;}
li:first-child {color:#f00;}
>
</style>
</head>
<body>
 
<LI class=alternatifard>
<LI class=alternatifard><div>
<p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
<LI class=alternatifard>
<ul>
<li>Bu liste ilk çocuk elementtir ve font rengi kırmızı olacak</li>
<li>Bu çocuk element değil</li>
<li>Bu da değil</li>
</ul>
<p>Bu pragraf bir çocuk element değil.</p>
</div> 
</body>
</html>

Başlıksız İçerik______________________

Şekildeki gibi liste nesneleri yani  <LI> çocuk elemenleri li:first-child {color:#f00;}  css koduyla kırmızı renkte, paragraflar ise

p:first-child {font-weight: bold;} koduyla kalın olarak gözükücektir.
Semih Güzelel no:34
Örnek
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri 
<!DOCTYPE html>
<html>
<head>
<style>
div, p, li { /* tüm div,p,lilere uygulandi */
    padding:10px;
}
    
div p { /*tüm çocuk ve toruna uygula*/
	background-color:green;
}

div > p { /*tüm çocuklara uygula*/
  background-color: gold;
}

div + p { /*tüm kardeşlere uygula divden sonra gelen p kardeşlere*/
  background-color: orange;
}

p ~ ul { /*tüm kardeşlere uygula ama +dan farklı olarak arada başka kardeşler olabilir*/
  background-color: grey;
}

</style>
</head>
<body>

<div>
  <h2>Donald Duck</h2>
  <p>Donald Duck lives in Duckburg. tüm div,p,lilere uygulandi</p>
</div>

<div>
  <span><p>div içinde span içindeki p</p></span>
  <p>div içindeki p</p>
  <p>div içindeki ikinci p</p>
</div>

<div>
  <p>div içindeki p.</p>
  <a><p>div içinde a tagı içindeki p</p></a>
  <p>div içindeki ikinci p</p>
</div>

<p>Donald Duck's best friend is Mickey.</p>

<ul>
	<li>madde 1</li>
</ul>

<a> araya başka bir tag girdi </a>

<ul>
	<li>madde 2</li>
</ul>

</body>
</html>
 

67,565 Okunma 1 Yorum 12/02/2026.13:02:16 12/02/2026.16:02:36

/ Yorumunuzu Ekleyin
/ Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri Yorumları +1 Yorum
  • misafir
    1
    misafir
    way be ii mis ;
    09.Mayıs.2011..09:57:35,.Pazartesi
Görsel Liste
CSS ile Web Sayfası Oluşturma

CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır.CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır.Eskiden sayfayapısını tablolarla oluştururduk.Bu kullanımın bir çok sorunları vardı.Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır.Biz burada bu konudan bahsedeceğiz.

82,851 okuma, 31.05.2014 16:50

CSS ile Web Sayfası Oluşturma
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri

Cssin html içerisinde kullanım şekilleri, puseduo class örnekleri

65,746 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri
Css İle Hizalama İşlemleri

Yapacağınız bir sitenin, sayfanın tam ortasında görünmesini istiyorsunuz diyelim. Bunu çok basit ve pratik bir işlemle çözebilirsiniz.

60,724 okuma, 29.12.2013 15:02

Css İle Hizalama İşlemleri
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.

Css stillerinin nesneyi etkileme yolları ve sıraları: (#), (.), (*), (class) CSS de nasıl kullanılır bu başlık altında bulabilirsiniz.

48,685 okuma, 16.12.2013 20:00

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
CSS’i Web Sayfalarına Eklemek

CSS’in yapısı iki ana kısımdan oluşur.Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block).Bildirim Bloğuda iki ye ayrılır.Özellik(Property) ve Değer(Value)

33,224 okuma, 25.10.2024 14:23

CSS’i Web Sayfalarına Eklemek
Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme

Tek parça resim dosyası

31,356 okuma,

Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme
CSS Konumlandırma (Position)

CSS konseptinin en önemli konusukonumlandırma (positioning) dir. positon:static, position:absolute, position:relative, position:fixed şeklinde kullanılır.

30,982 okuma, 29.12.2013 14:47

CSS Konumlandırma (Position)
CSS ile Content Menü Yapımı

İçeriğe göre boyutlarını ayarlayabilen ve gerekli resimleri tek bir dosyadan alan bir Content Menü tasarımı

30,284 okuma,

CSS ile Content Menü Yapımı
CSS Seçicileri

CSS diğer web standartlarından çok farklıdır. CSS olarak da bilinen Cascading Style Sheets, daha zarif bir şekilde tasarlanmış web sayfaları oluşturmak için kullanılan bir tasarım dilidir. Bir öğe bir seçiciye göre seçilir ve şekillendirilebilir. HTML öğeleri CSS seçicileri kullanılarak şekillendirilebilir.

29,189 okuma, 22.11.2024 13:37

CSS Seçicileri
CSS Tanımlamalarında Kullanılan Ölçü Birimleri

Bu konu basit bir konu gibi görünebilir ancak birçok geliştirici CSS ölçüm birimi olarak yalnızca px kullanıyor. Başka hangi seçeneklere sahip olduğunuzu bilmenizin önemli

26,931 okuma, 01.01.2025 21:56

CSS Tanımlamalarında Kullanılan Ölçü Birimleri
Internet Explorer Koşullu İşlemleri

Koşullu yorum basit bir Internet Explorer özelliğidir, Microsoft Windows ve IE5 sonrasında geçerlidir. Mantık olarak Ineternet Explorerin sürümüne görefarklı HTML blokları kullanıcılara sunmak olarak özetlenebilir.

26,824 okuma,

Internet Explorer Koşullu İşlemleri
CSS ile yazıcı çıktı işlemleri

Web sayfalarının çıktılarını almak her zaman sorunludur. Web sayfaları web tarayıcılarında güzel görünürler ancak çıktı almak için uygun değildirler. Web sayfalarında yazıların daha okunaklı olması için sans-serif font ailesi kullanılır ancak çıktı için uygun olan font tipi serif font ailesidir. Ayrıca bir çok site de çıktıda görünmememsi gereken sol menü, banner ve alt kısım gibi alanlar vardır

26,057 okuma,

CSS ile yazıcı çıktı işlemleri
Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements

25,637 okuma,

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements
Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri

Cssin html içerisinde kullanım şekilleri, pseudo class örnekleri

25,504 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri
Şerit Halindeki Resimden Bölümler Almak

Sitelerin yüklenme hızını arttıran ve template yapısına uygun olmasını sağlayan CSS özelliği hakkında bir makale

25,442 okuma,

Şerit Halindeki Resimden Bölümler Almak
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

24,926 okuma,

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.

24,870 okuma,

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, , ., , Class Css De Neyi İfade Eder.
Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements

Outlines, padding, positioning, table, text, pseudo-classes, pseudo-elements gibi css nesnelerinin açıklamaları ve örnekleri.

24,447 okuma,

Outlines, Padding, Positioning, Table, Text, Pseudo-classes, Pseudo-elements
CSS te kullanılan kısaltmalar

CSS; kodlama yaparken bizim bazı kısaltmaları kullanmamıza izin verir. Böylece hem fazla kod yığınından kurtulmuş oluruz, hemde sayfa boyutlarını en aza indirmiş oluruz

23,935 okuma,

CSS te kullanılan kısaltmalar
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

Background, border, classification, dimension, font, generated content, list and marker, margin

23,561 okuma,

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
Tek parça resim dosyasından ilgili resmi CSS ile kullanmak

23,341 okuma,

Tek parça resim dosyasından ilgili resmi CSS ile kullanmak
Pseudo-sınıfları ve Pseudo-elementleri

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi. )

23,302 okuma,

Pseudo-sınıfları ve Pseudo-elementleri
Background, Border, Dimension, Font, List And Marker, Margin

23,268 okuma,

Background, Border, Dimension, Font, List And Marker, Margin
(X)HTML Döküman Hiyerarşisini Anlamak

CSS güçlüdür, çünkü CSS uygun stilleri ve bu stilleri nasıl uygulanacağını belirlemek için (X)HTML dökümanının yapısını kullanır. (X)HTML Sayfa yapısına stil uygulamanın bir çok yolu vardır. Ancak bu yolları öğrenmeden önce (X)HTML hiyerarşisini öğrenmemiz gerekir

23,048 okuma,

(X)HTML Döküman Hiyerarşisini Anlamak
CSS Classları Hakkında

Bazı CSS Classları arasındaki farklılıkları anlatan İngilizce bir makale

22,963 okuma,

CSS Classları Hakkında
CSS ile kullanımdan kalkan özellikler

CSS kullanımı ile tedavülden kalkan veya kullanımı azalan özellikleri sıralayalım:

22,792 okuma,

CSS ile kullanımdan kalkan özellikler
Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası Ve Class Css De Neyi İfade Eder.

22,430 okuma,

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası Ve Class Css De Neyi İfade Eder.
Özellik Seçicileri(Attribute Selectors)

CSS ile tanımlama yaparken Xhtml nesnelerine erişmede bazen sıkıntı çekeriz. Ne yapsak da bu elemente atama yapsak diye bu genelde programcı - Arayüz Kod Yazarı ayrımının olduğu projelerde çok başımıza gelir. Bu sorunu kökünden çözen bir yöntemdir Özellik Seçicileri

22,352 okuma,

Özellik Seçicileri(Attribute Selectors)
CSS Shorthand(kısacası) Tenikleri

Uzun parametlereler alan CSS taglarının kısaca yazılış metotları

22,183 okuma, 03.10.2024 09:20

CSS Shorthand(kısacası) Tenikleri
CSS ve Filitreler

21,430 okuma,

CSS ve Filitreler
Yükleniyor...
Yükleniyor...