CSS Kullanımı

Class : css’de birden fazla etikete özellik vermek için kullanılır.
css kullanımında,
class tanımlaması yapmak istersek;
. (nokta) ile başlayan bir isim verilir. ve isme ait özellikler tanımlanır.
örnek

.header{
/*özellik yada özellikler burada yazılır*/
}

tanımlaması yapılan class’ ın bir etikete atanması ise

<h1 class="header">içerik</h1>

şeklinde yapılır.

class tanımlaması yapmak istersek;
# (diyez) ile başlayan bir isim verilir. ve isme ait özellikler tanımlanır.
örnek

#header{
/*özellik yada özellikler burada yazılır*/
}

tanımlaması yapılan id’ nin bir etikete atanması ise

<h1 id="header">içerik</h1>

şeklinde yapılır.

Not : tanımlanan id bir sayfada sadece bir elemente atanmalıdır.

css tanımlaması 3 şekilde yapılır.

birincisi doğrudan etiket üzerine

 style="" 

kodu içerisinde yazılır.
dezavantajları
(class yada id isimlendirmesi yapılamaz, yazdığınız özellik sadece o etiketi bağlar)

ikincisi head tagları arasında

<style type="text/css"></style>
  

kodları arasına yazılır.
(ikinci en çok kullanılan yöntemdir. dezavantajı ise genellikle sadece bulunduğu sayfada kullanılabilir.)

üçüncüsü ise boş harici bir sayfada doğrudan css kodları yazılır. head tagları arasında bu css dosyası belgeye dahil edilir.
(en çok kullanılan ve en uygun yöntemdir. )

<link rel="stylesheet" href="style.css" />

css kodlarından örnekler


#ornek_etiket {
/* bir elementin kendinin üst dışının bir nesneden uzaklığı */
margin-top:10px; 
/* bir elementin kendinin sağ dışının bir nesneden uzaklığı */
margin-right:20px; 
/* bir elementin kendinin alt dışının bir nesneden uzaklığı */
margin-bottom:30px; 
/* bir elementin kendinin sol dışının bir nesneden uzaklığı */	
margin-left:40px; 
/* 
üstteki kullanımın kısa yazılışı */	
margin:10px 20px 30px 40px; 
margin-top:10px; 
margin-right:20px; 
margin-bottom:10px; 
margin-left:20px; 	
/* 
üstteki kullanımın kısa yazılışı */	
margin:10px 20px; 
}
Facebooktwittergoogle_pluslinkedin

You may also like...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir