Konular

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

 

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
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.

59,166 Okunma 3 Yorum 11/07/2007 16:49:40 31/05/2014 16:50:32

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.

51,139 Okunma 0 Yorum 10/07/2007 19:48:11 29/12/2013 15:02:02

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

Semih güzelel

50,775 Okunma 1 Yorum 14/11/2008 11:09:11

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.

38,638 Okunma 0 Yorum 21/11/2008 16:04:40 16/12/2013 20:00:41

Tek Parça Resim Dosyasından İlgili Resmi Css İle Gösterme

Tek parça resim dosyası

24,154 Okunma 0 Yorum 29/02/2008 19:43:43

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ı

23,192 Okunma 0 Yorum 27/01/2010 04:22:34

CSS Konumlandırma (Position)

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

22,145 Okunma 0 Yorum 09/07/2007 18:20:40 29/12/2013 14:47:24

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)

20,997 Okunma 1 Yorum 12/07/2007 18:42:48

CSS Seçicileri

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,776 Okunma 0 Yorum 05/09/2007 23:01:25

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.

19,701 Okunma 0 Yorum 17/02/2010 01:08:14

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

18,897 Okunma 0 Yorum 24/02/2010 23:06:17

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

18,838 Okunma 0 Yorum 11/07/2007 00:05:06

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

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

17,526 Okunma 0 Yorum 14/11/2008 11:12:55

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

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

17,318 Okunma 0 Yorum 24/10/2008 11:18:21

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

17,029 Okunma 0 Yorum 11/07/2007 00:16:08

Tek parça resim dosyasından ilgili resmi CSS ile kullanmak

16,484 Okunma 0 Yorum 29/02/2008 09:29:54

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. )

16,207 Okunma 0 Yorum 12/07/2007 19:42:06

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.

16,077 Okunma 0 Yorum 31/10/2008 15:44:41

(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

16,053 Okunma 0 Yorum 09/07/2007 00:11:42

Ş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

16,047 Okunma 1 Yorum 22/02/2008 09:18:59

CSS Classları Hakkında

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

16,024 Okunma 0 Yorum 05/09/2007 01:49:34

CSS ile kullanımdan kalkan özellikler

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

15,916 Okunma 0 Yorum 10/07/2007 23:59:27

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

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

15,740 Okunma 0 Yorum 28/11/2008 11:50:09

Background, Border, Dimension, Font, List And Marker, Margin

15,709 Okunma 0 Yorum 07/11/2008 15:48:27

CSS Shorthand(kısacası) Tenikleri

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

15,309 Okunma 0 Yorum 24/11/2007 12:21:03

CSS ve Filitreler

15,164 Okunma 0 Yorum 18/07/2007 19:06:25

Ö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

15,037 Okunma 0 Yorum 09/07/2007 14:20:52

Yükleniyor...