Tweet

Makaleler » CSS

CSS | Söz Dizilimi

CSS Sözdizimi üç parçadan oluşmaktadır; seçici, özellik, değer.
seçici {özellik: değer}
Seçici normalde tanımlamak istediğiniz HTML elamanı veya etiketi, özellik seçicinin değiştirmek istediğiniz niteliğidir.
Her özellik bir değer alır. Özellik ve değer arasına iki nokta üst üste konulur ve süslü paragraf arasına alınır.

CODE:
p {color: black}


Eğer değer birden fazla kelimeden oluşuyorsa çift tırnak içine alınır.

CODE:
p {font-family: "sans serif"}


Eğer birden fazla özellik tayin etmek istiyorsanız aralarına noktalı virgül koyulur.
Alttaki örnekte sağa dayalı, yeşil renkli paragraf tanımlamasını görebiliriz.

CODE:
p {text-align:right;color:green}


Eğer özellik tayinlerinin daha rahat okunabilir yapmak istiyorsa her birini aşağıdaki örnekte olduğu gibi ayrı satırlarda yapılabilir.

CODE:
p 
{
text-align:right;
color:green;
font-family: verdena
}


Gruplandırma

Seçiciler aralarına virgül konularak gruplandırılabilir. Aşağıdaki örnekte paragraf ve başlık fontu arial olur.

CODE:
p,h1
{
font-family: arial
}


Seçici Sınıfı

Seçici sınıfı özelliği ile aynı HTML elemanına farklı özellikler verilebilir. Dökümanda biri sağa hizalı biri sol hizalı iki ayrı paragraf tanımlamak için

CODE:
p.sag {text-align: right}
p.sol {text-align: left}


HTML elemanlarında sınıf (class) özelliği kullanılır.

CODE:
<p class="sag">
Bu paragraf saga hizalıdır.
</p><p class="sol">
Bu paragraf sola hizalıdır.
</p>


Seçicide HTML etiket/eleman ismini kaldırırsanız dökümandaki bütün HTML etiket/elemanlarına kullanılabilecek ortak bir sınıf oluşturulur.
Aşağıda verilen örnekte class="sol" eklenen tüm HTML etiket/elemanları ortaya hizalanır.

CODE:
.sol {text-align: left} 

<h1 class="sol">
Başlık sola hizalıdır.
</h1><p class="sol">
Paragraf sola hizalıdır.
</p>

id Seçicisi

İd seçicisi sınıf seçicisinden farklıdır. Sınıf seçicisi sayfada bir çok elemana etki ederken, id seçicisi sadece bir elemana etki eder.
Id niteliği doküman içeriğinde tek olmalıdır.

Alttaki stil kuralı id değeri "ana1" olan p elamanına etki edecektir.

CODE:
p#ana1
{
text-align: left;
color: green
}

Alttaki stil kuralı id değeri "sag25" olan ilk elemana etki edecektir.

CODE:
*#sag25 {color: red}


Kural altta bulunana h1 elamanı ile eşleşir.

CODE:
<h1 id="sag25">Örnek yazı</h1>


Alttaki kural id değeri "sag25" olan p elemanı ile eşleşecektir.

CODE:
p#sag25 {color: red}


Kural aşağıdaki h2 elamanına etki etmez

CODE:
<h2 id="sag25">Örnek yazı</h2>



CSS Yorumları

CSS'nin içine kodları açıklayan yorumlar ekleyebilirsiniz. Yorum tarayıcı tarafından gözardıcedilecektir.
Bir CSS yorumu örnekte olduğu gibi "/*" ile başlar "*/" ile biter:
CODE:
/* Bu bir yorumdur */
{
text-align: left;
/* Bu da başka bir yorumdur */
color: red;
font-family: verdena
}


Dr.A.S.
Dia | 17 Mart 2006 13:29 | Yorum(0) | devamı »

CSS | Tarayıcıya css tanıtmak

Tarayıcı hangi css sayfası veya css elemanlarının belirtildiğini bilmek zorundadır. Bunu bildirmenin bir kaç yolu vardır:

1. Yol: Stili sayfaya yazmak.

Css kodları HTML sayfasının üzerine yazılabilir. Aşağıdaki etiket HTML dökümanının '<HEAD> </HEAD>' etiketleri arasına yazılmalıdır.
CODE:
<STYLE TYPE="text/css">
<!--

Css kodu buraya yazılır ...


-->
</STYLE>
Eğer Javascriptlerle uğraştıysanız eski tip tarayıcıları aldatmak için aynı tip etiket kullanılmıştır. HTML spesifikasyonu tarayıcılara anlamadığı etiketi dikkate almamalarını söyler. Böylece eski tür bir tarayıcı bunu okuyunca [stil etiketini HTML yorum etiketi ('<!-- -->') arasında görünce] atlayarak devam eder.

2. Yol: Ayrı bir Css sayfası (style sheet) dosyasına link vermek

Her bir HTML dosyasına css kodunu yazacağınıza, bütün css kodunu bir text dosyasına yazıp, Tüm HTML dökümanından link verilir. Aşağıdaki etiket ile css sayfası bağlanır ve buda HTML dökümanının '<HEAD> </HEAD>' etiketleri arasına yazılır.
CODE:
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

style.css sizin stil tariflerinizi (eksi etraflarındaki style etiketi olmadan) taşıyan bir text (metin) dosyasıdır.

3. Yol: Stil Sayfasını ithal etmek

Aynı zamanda yukardaki her iki maddeyi ayrı bir css sayfasını bir HTML sayfasına ithal etmede kullanılır. Örneğin esas bir sayayı ithal edip, üzerine css elemanları ilave edebilirsiniz. İthal komutu yukarda tarif edilen stil kısımınaki ilk yazı olmalıdır.
CODE:
<STYLE TYPE="text/css">
<!--

@ithal url(style.css);

css kodunun gerisi buraya yazılır.

-->
</STYLE>


4. Yol: Satır içinde css kullanmak

Css kodları her bir HTML elemanı için ayrı ayrı da belirtilebilir. Aşağıdaki kodu inceleyin.
CODE:
<P STYLE="margin: 1.0in">Bu paragrafın 1.0 inçlik marjinleri olacak</P>
Dia | 17 Eylul 2005 16:02 | Yorum(0) | devamı »

CSS | Sütunlar Eklemek

Adım1:Html Dosyasını Hazırlayalım
Bu dersde html sayfamızı kolonlar ile üçe böleceğiz. Öncelikle oluşturacağımız css dosyazını sayfamıza bağlayalım.

CODE:
<html>
<head>
<link href="kolon.css" rel="stylesheet" type="text/css">
</head>
<body>

</body>
</html>



html sayfamızı yukarıdaki şekilde hazırlayalım yukarıdaki kodun yaptığı iş kolon.css dosyasını
bularak html sayfamıza css dosyasında etiketlenmiş olan sitilleri yüklemektir. Şimdide Bu etiketleri kullanarak 3 adet div tagnı etiketleyelim.

CODE:
<html>
<head>
<link href="kolon.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="ortakol">Ortadaki Bilgiler</div>
<div id="solkol">Soldaki Bilgiler</div>
<div id="sagcol">Sağdaki Bilgiler</div>
</body>
</html>



Yukarıdaki kodda 3 div bloğu açarak etiketledik. <b>Div</b> tagına verilecek sitil etiketleri Div in <b>"id"</b> olayına yazılır.

Şimdide kolon.css dosyasını oluşturalım.

Adim2: Kolon.css dosyası
Kullandığımız text editör programında yeni bir css uzantılı dosua oluşturalım ve içerisine aşağıdaki blokları yazalım.

CODE:
#ortakol {
width: 60%;
margin: 0 20%;
font: 11px/16px verdana, arial, sans-serif;
text-align: center;
}

#solkol {
position: absolute;
background: #cef;
top: 5px;
left: 5px;
width: 18%;
font: 11px/16px verdana, arial, sans-serif;
}

#sagkol {
background: #cef;
position: absolute;
top: 5px;
right: 5px;
width: 18%;
float: right;
font: 11px/16px verdana, arial, sans-serif;
}



<b>Sitil özellikleri</b>

background: div tagına ait arkaplanı belirler.
position: konum özelliği belirler.
top: Sayfanın en üstü ile div in arasındaki mesafe.
right: Sayfanın en sağı ile div in aasındaki mesafe.
left: Sayfanın en solu ile div in aasındaki mesafe.
font: Div tag ının içerisinde geçerli olacak yazı özellikleri.
Dia | 14 Nisan 2005 13:25 | Yorum(0) | devamı »
« daha yeni 3 /


Online Coders
  Online (0)
  Ziyaretçi (0)

Desteklediklerimiz

Teknoloji


MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg