İçerikler :

At Rule Cascading Style Sheet - Çağlayan Biçim Sayfas.. CSS'de Font Kullanım Örneği CSS'de Inheritance Özelliği Gösteren Örnek CSS'de Yorum CSS'de Yorum Örneği CSS'te Genel Yapı ve Kavramlar CSS'te Inheritance Kavramı CSS (Cascading Style Sheet) Öncelik Kavramı H3 Başlığını Kırımızı Yapan CSS Örneği HTML'de Css Dosyasının Kullanımı Gösteren Örn.. HTML'de CSS Kullanım Çeşitleri HTML'de Elementin Kullanıldığı Yerde Biçim Ve.. HTML'de Style Etiketi Kullanım Örneği Normalize.css Selector (Seçici) Style Etiketi

Bu Sayfayı Paylaş:

Kavram

Cascading Style Sheet - Çağlayan Biçim Sayfası (CSS)

Tanım: HTML'de biçimlendirme için şablonlar oluşturulmasını sağlayan dil.

Kavram

Style Etiketi

Tanım: HTML'de style değerlerinin aynı yerde yaratılması için kullanılan etiket. Genellikle head etiketi içerisinde tanımlanır.

Kavram

Selector (Seçici)

Tanım: CSS'de belirtilen biçimlerin hangi elemente veya elementlere uygulanacağını belirten yapı. CSS'de genel seçici yapısı seçici { stiller.. } şeklindedir.

Veri

HTML'de CSS Kullanım Çeşitleri

HTML sayfasında üç farklı yolla CSS (Cascading Style Sheet) kullanılabilmektedir : 

 

  • Inline kullanım : Biçimler tek bir elementi veya o elementin içindekileri ekleyecek şekilde kullanılabilir. <p style="stiller burada"> şeklinde kullanılmaktadır. 
  • Style etiketi ile kullanım : Biçimler sayfada bir bölümde style etiketi ile tanımlanabilirler. Bu şekilde sayfa boyunca aynı stiller kullanılabilir. 
  • Ayrı bir stil dosyası ile : Stil özellikleri .css ile biten bir veya birden fazla dosyaya koyulabilir. Stilleri kullanmak istediğiniz sayfaya link etiketi ile css dosyası eklenir.  head etiketi içerisinde  <link href="test.css" type="text/css" rel="stylesheet"></link> ile css dosyası eklenebilir. 

 


Veri

CSS'de Yorum

CSS'de yorum için /* ve */ işareti kullanılmaktadır. /* ve */ arasında yazılan bölüm yorum kabul edilir ve dikkate alınmaz : 

a{
color:Red;/*burası yorumdur*/
font-size:10pt;
}

 


Kavram

At Rule

Tanım: CSS'de @ ile başlayan, ; işaretiye veya CSS blok ifadesiyle biten , CSS işleyicisine belirli bir komut veren ifadeler. @media, @import, @charset, @page , @font-face şeklinde ön tanımlı rule'lar (kurallar) bulunmaktadır. Örneğin @import url(morestyles.css); ifadesi CSS'i derleyen uygulamaya morestyles.css dosyası içindeki stilleri yüklemesi direktifini verir

Veri

CSS'te Genel Yapı ve Kavramlar

CSS'te basit bir rule aşağıdaki gibidir : 

selector {
property : value 1 value 2;
property2 : value 1 value 2 value 3;
}

Yukarıda görüldüğü gibi { işaretinden önceki bölüme selector adı verilmektedir. selector hangi elementlere,  { içindeki biçimlerin uygulanp uygulanmayacağını belirtmektedir. property:value şeklinde olan her satıra declaration (deklarayon) adı verilmektedir. Property ve bir property için alınabilecek değerler (value) belirlenmiştir. Basit bir örnek : 

p {
font-size : 10 pt;
}

Burada p selector ,  font-size property(özellik) 'tir. 10 pt ise değerdir. 


Veri

CSS'te Inheritance Kavramı

HTML'de hiyerarşi yapısı biçimlerin uygulanmasında da önemlidir. Örneği A elementi B elementi hiyerarşisi aşağıdaki gibi olsun : 

<A>
<B>....</B>
</A>

A elementi için verilen ve inheritance özelliği olan biçimler B içinde geçerli olacaklardır. Aynı biçim hem A hem B için verilmiş ise B içindeki bölüm için B'ye tanımlanmış biçim geçerli olacaktır. Örneğin A için renk kırımızı , B için mavi seçilmiş ise B içerisinde renkler mavi olacak , B dışında ve A içindeki diğer yerlerde kırmızı olacaktır. 

 

 


Veri

CSS (Cascading Style Sheet) Öncelik Kavramı

Önceliği etkileyen üç kavram,  User-Agent (Tarayıcı) , User (Kullanıcı) ve Author (Geliştirici veya Yazar) kavramlarıdır.  Biçimler important (önemli) ve normal olarak iki şekilde tanımlanabilmektedir. Biçimin önemli olup olmaması ve biçimi kimin veya neyin tanımladığına göre öncelik sırası düşük öncelikten yüksek önceliğe aşağıdaki gibi olmaktadır :

  • User-Agent (Tarayıcı) normal biçimleri
  • User (Kullanıcı) normal biçimleri
  • Author (Geliştirici veya Yazar) normal biçimleri
  • Author (Geliştirici veya Yazar) important (önemli) biçimleri
  • User (Kullanıcı) important (önemli) biçimleri

Yukarıda tanımlanan sıralardan aynı öncelik sırasında olanlar aşağıdaki kurallara göre düşükten yüksek önceliğe aşağıdaki gibi sıralanırlar : 

  • Element adı ve Pseude element ile yapılan biçimler
  • Class selector (seçici) ve Pseudo class ile yapılan biçimler
  • ID selector (seçici) ile yapılan biçimler
  • Elemente HTML içerisinde style property'si ile verilen biçimler

 


Örnek

HTML'de Style Etiketi Kullanım Örneği

Aşağıda Style etiketi ile kullanım örneği görülmektedir : 

<html>
<head>
<style>
        ...stiller buraya yazılır....
</style>
</head>
<body>
        ...stiller kullanılır....
</body>
</html>

Yukarıda görüldüğü gibi stil tanımlamaları head etiketi içerisinde style etiketi içerisine tanımlanır.  Style etiketi sadece head etiketi içerisinde olması gerekmemektedir ve başka bölgelerde de olabilir. 


Örnek

HTML'de Elementin Kullanıldığı Yerde Biçim Verilme Örneği

Aşağıda bir p elementi biçimlendirme örneği gözülmektedir :

<html>
<body>
	<p style="color:red;font-size:12pt">
		inline stil kullanılmış paragraf</p>
</body>
</html>

 görüldüğü gibi style özelliği ile p elementinin biçimleri verilmiştir. Yazının rengi kırmızı ve font boyu 12 punto olacaktır. 


Örnek

HTML'de Css Dosyasının Kullanımı Gösteren Örnek

Aşağıda ayrı bir CSS dosyasının nasıl kullanılacağını gösteren örnek görülmektedir :

<html>
<head>
	<link href="test.css" type="text/css" 
		rel="stylesheet"></link>
</head>
<body>
	...test.css dosyasındaki stiller kullanılır....
</body>
</html>

Head etiketi içerinde link etiketi ile test.css dosyası HTML sayfasına eklenmiştir. test.css dosyasındaki tüm stiller sayfada kullanılabilir. 

 


Örnek

CSS'de Yorum Örneği

Aşağıda CSS için bir yorum örneği görülmektedir : 

a{
color:Red; /*burası yorumdur*/
font-size:10pt;
}

Görüldüğü gibi /* ve */ işareti ile yorum yapılmıştır. 

 


Örnek

H3 Başlığını Kırımızı Yapan CSS Örneği

Aşağıda H3 ile olan tüm başlıkları kırmızı gösteren örnek görülmektedir : 

<html>
<head>
	<style>
		h3{
			color:red;
		}
	</style>
</head>
<body>
	<h3>Bu başlık kırmızı olur</h3>
	<h4>Bu başlık kırmızı olmaz</h4>		
</body>
</html>

head etiketi içerisinde style etiketi içinde H3 elementinin rengi kırmızı yapılıyor. Sayfa boyunca kullanılan tüm H3 elementlerinin rengi kırmızı olacaktır. 

 

 


Örnek

CSS'de Inheritance Özelliği Gösteren Örnek

Aşağıda CSS'de inheritance özelliğini gösteren örnek görülmektedir : 

<html>
<head>
<style>
        body{
                color:red;
        }
        h3{
                color:blue;
        }
</style>
</head>
<body>
        <h3>bu başlık mavi olur</h3>
        <p>bu yazı kırmızı olur</p>
</body>
</html>

h3 elementinin rengi mavi olur. p elementi içindeki yazı ise özel bir şekilde belirtilmediği için body'nin rengini alır ve kırmızı olur. 


Örnek

CSS'de Font Kullanım Örneği

Aşağıdaki örnekte font özelliklerini biçimlendiren örnek görülmektedir : 

<html>
<head>
	<style>			
	h1,h2,h3{
		font-weight:bold;
	}
	p{
		font-family:Times;
		font-size:10pt;				
	}
	.warning{
		font-style:italic;
		font-size:8pt;
		font-family:Arial;		
	}
</style>
</head>
<body>
	<h1>Css Kitabı</h1>
	<p>bu kitap çok önelidir. 
		İşe yarar. Kulnanması kolaydır</p>
	<p class="warning">
		dikkat dikkat bu bir uyarıdır</p>
</body>
</html>

Başlık (h1,h2,h3) biçimlerinin hepsi bold yapılmıştır. p paragraflarının hepsi Times fontu ve 10 pt olacaktır. .warning adıyla bir class yaratılmıştır ve özellik olarak italic, 8 pt, Arial yapılmıştır. Son paragrafın class özelliği warning verilmiştir. 


Kavram

Normalize.css

Tanım: Web tarayıcıların varsayılan biçimlerinin aynı hale gelmesini sağlayan, tarayıcın desteklemediği HTML5 standartlarını destekler hale getiren ve tek bir css dosyasından oluşan css biçimleri



Bu Sayfayı Paylaş:

İletişim Bilgileri

Takip Et

Her Hakkı Saklıdır. Bu sitede yayınlanan tüm bilgi ve fikirlerin kullanımından fibiler.com sorumlu değildir. Bu sitede üretilmiş , derlenmiş içerikleri, fibiler.com'u kaynak göstermek koşuluyla kendi sitenizde kullanılabilirsiniz. Ancak telif hakkı olan içeriklerin hakları sahiplerine aittir