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

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

CSS Stillerini HTML içerisine bağlama

Css yapacağımız stilleri Html içerisinde 3 farklı şekilde bağlayabiliriz. Bunlar:

1-) Yerel (Local) Bağlanma

 

Yalnızca HTML'nin taglarının içinde kullanılan etiketlerdir ve tag neredeyse o yerde özelliklerini değiştirebiliriz. Örneğin (Başlıklarda “H1” Paragraflarda “P” vb…). Bu tanımlama sadece tanımlandığı yerde ve bir kere kullanılabilir. Örnek;

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

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

 

2-) Global Bağlanma
 

Bu bağlanma şekli HTML'nin <head> </head> başlığı içinde yapılır. <style> </style> başlığı içerisinde yazılır. Bir etiketin sadece bir kez özelliklerini tanımlayarak tüm HTML de tekrar tanıtmadan istediğimiz yerde kullanabilirsiniz. Yalnız bir ID ve Class isimleri kullanmalıyız bunun sayesinde istediğimiz HTML tag‘ ın içinde o nesneye ait verdiğimiz stil özelliklerini çağırabiliriz. Örnek;

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

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

 

3-) Link Bağlanma

Bu bağlama şeklini kullanarak bir CSS dosyası dışarıdan HTML sayfasına veya sayfalarına bağlanabiliyoruz. Bu bağlanma şeklinin en büyük özelliği ayrı ayrı stil özelliklerini değiştirmemiz yerine ayrı bir css dosyasına kaydederek bunun içerisinde değişiklik yapmamız. Bu da bize daha hızlı bir şekilde işlem yapmamızı sağlayacaktır. Örnek;

 

Önce bir stil.css adında bir css dosyası oluşturup aşağıdaki kodları yazdık.

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

Sonra herhangi bir isimle bir HTML dosyası oluşturduk. (index.html)

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

Ve sonuç;

 

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

 

CSS Stillerini HTML içerisinde kullanma

 

1-) HTML Etiketleri İle Kullanım

 

Stilleri HTML'nin içinde kullanılan tüm etiketlerle birlikte kullanabilirsiniz. Yanlız stilleri böyle kullanarak bir etiketi yanlızca bir still tanımlayabilir ve kullanabilirsiniz.

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

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

Eğer istersek aynı anda birden çok etikete aynı stilli atayabiliriz. Etiketleri birbirinden ayırmak için aralarına virgül " , " konulur.

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

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

 

2-) Seçiciler İle Kullanımı

Seçiciler ile bir etikete birden fazla stil tanımlayabilir ve kullanabiliriz. İstediğiniz kadar seçici tanımlayabilirsiniz. İstenirse bir stil birden fazla etikete aynı anda aktarılabilir.

a-) Sınıf Seçiciler

Bu seçicilerde stil isminin önüne “.” işareti konulur.

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

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

 

b-) ID Seçiciler

 

Bu seçicilerde stil isminin önüne “#” işareti konulur ve HTML sayfasının içinde herhangi bir etiketle birlikte (buna DIV,SPAN 'da dahil) adı ile çağrılarak kullanılabilirler.

 

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

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

 

Puseduo-class Örnekleri

 

Sadece class seçicisi ile yapılan stil tanımlamalarıdır. Örnekler;

 

1. ÖRNEK

 

Önce stil.css adında bir dosya oluşturuyoruz ve aşağıdaki kodları yazıyoruz.

 

 

a.menu {font-family:Verdana;
		font-weight:bold;
		font-size:13px;
		color:#993333;
		text-decoration:none;
		padding:3px;}

a.menu:hover {background:#FFFF00;
			  font-size:14px;
			  border:2px solid black}
 
.cizgi {font-size:12px;
		font-weight:bold;
		color:#FFFFFF}
 
div.alan {background-color:#FF9900; 
		  text-align:left;
		  padding-top:8px;
		  padding-left:5px;
	 	  height:32px;
		  width:110px;
		  float:left;
		  clear:both}

 

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

Sonra aynı klasör içinde index.html adında bir dosya oluşturup aşağıdaki kodları yazıyoruz.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css'in HTML içerisinde kullanım şekilleri</title>
<link href="stil.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center" class="cizgi">
    <div class="alan"><a class="menu" href="#"> Ana Sayfa </a></div>  
    <div class="alan"><a class="menu" href="#"> Hakkımızda </a></div>  
    <div class="alan"><a class="menu" href="#"> Resimler </a></div> 
    <div class="alan"><a class="menu" href="#"> Galeri </a></div> 
    <div class="alan"><a class="menu" href="#"> İletişim </a></div>
</div>
</body>
</html>

 

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

Ve Sonuç:

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

 

2. ÖRNEK

 

Önce stil1.css adında bir dosya oluşturuyoruz ve aşağıdaki kodları yazıyoruz.

 

a.menu { font-family:Verdana;
	 font-weight:bold;
	 font-size:13px;
	 color:#993333;
	 text-decoration:none;
	 padding:3px; 
	 border:solid 3px }
 
a.menu:hover { background:#000000; 
	       color:#fff000;
	       font-weight:bold;
	       padding:3px }
 
a.menu:active { color:#00FFFF;
		text-decoration:none }
 
a.menu:visited { background-color:#EFEFEF;
		 color:#666666;
		 text-decoration:none }

 

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

 

Sonra aynı klasör içinde index1.html adında bir dosya oluşturup aşağıdaki kodları yazıyoruz.

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css'in HTML içerisinde kullanım şekilleri</title>
<link href="stil1.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="#" class="menu">Ana Sayfa</a> | 
<a href="#" class="menu">Hakkımızda</a> |
<a href="#" class="menu">Referanslar</a> |
<a href="#" class="menu">İletişim</a> 
</body>
</html>

 

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

 

Ve Sonuç:

 

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

 

 

 

Hazırlayan: Fatih ÜN

 

59,599 Okunma Henüz yorum yapılmamış 14/11/2008 11:11:46

Yorumunuzu Ekleyin
Cssin Html İçerisinde Kullanım Şekilleri, Puseduo Class Örnekleri Yorumları +1 Yorum
  • Mücahid
    1
    Mücahid
    cok iyi calısma elıne saglık
    11 Kasım 2015 17:08:29, Çarşamba
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.

76,275 okuma, 31/05/2014

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

Semih güzelel

61,364 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.

57,604 okuma, 29/12/2013

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.

45,495 okuma, 16/12/2013

Css Stillerinin Nesneyi Etkileme Yolları Ve Sırası, Diez, Nokta, Yıldız, Class Css De Neyi İfade Eder.
Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme

Tek parça resim dosyası

28,545 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.

27,869 okuma, 29/12/2013

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ı

27,297 okuma,

CSS ile Content Menü Yapımı
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)

26,789 okuma, 25/10/2024

CSS’i Web Sayfalarına Eklemek
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.

24,876 okuma, 25/10/2024

CSS Seçicileri
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.

23,826 okuma,

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

23,140 okuma,

CSS Tanımlamalarında Kullanılan Ölçü Birimleri
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

23,026 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

22,694 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

22,591 okuma,

Cssin Html İçerisinde Kullanım Şekilleri, Pseudo Class Örnekleri
Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin

22,100 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.

21,966 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.

21,349 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

21,039 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

20,834 okuma,

Background, Border, Classification, Dimension, Font, Generated Content, List And Marker, Margin
Background, Border, Dimension, Font, List And Marker, Margin

20,514 okuma,

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

20,438 okuma,

Tek parça resim dosyasından ilgili resmi CSS ile kullanmak
Ş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

20,409 okuma,

Şerit Halindeki Resimden Bölümler Almak
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. )

20,397 okuma,

Pseudo-sınıfları ve Pseudo-elementleri
(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

20,249 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

20,016 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:

19,940 okuma,

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

19,719 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

19,406 okuma,

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

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

19,337 okuma, 03/10/2024

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

18,791 okuma,

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