Css’ye Başlayalım…

CSS Nasıl Çalışır?

Bu makalemizde ilk style sheet dosyamızı oluşturacazğız. Temel CSS kullanımı için kod yapısını ve gerekli html yapısnı görecezğiz. HTML bilgimiz var ise CSS'te sıkıntı yaşamayacağımızı söyleyelim önce.

 Basit CSS Sözdizimi.

Söz dizimini görmek açısından aşağıdaki örnekleri inceleyelim…Kullanıcının sayfa arkaplan olarak kırmızı renk istediğini düşünelim.

HTML ile bunu aşağıdaki şekilde yapabiliriz..;

<body bgcolor="#FF0000">

CSS ile aynı şeyi aşağıdaki şekilde yaparız.

body {background-color: #FF0000;}

Bu örneğe bakarak html'in daha kısa bir kod yapısına sahip olduğunu düşünebiliriz. Ama bunun daha başlangıç olduğunu belirtelim öncelikle. Sadece söz dizimini görmemiz açısından verdiğimiz bir örnek.

 

Şimdi örneklerimizi biraz daha detaylandıralım ve somutlaştıralım.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<link href="deneme.css" rel="stylesheet" type="text/css" />
</head>

<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis elementum quam, ac condimentum risus elementum quis.
 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus consequat magna ac varius faucibus.
 Vivamus sollicitudin aliquet augue, sit amet imperdiet sem bibendum quis. Nullam imperdiet quis lorem sit amet feugiat. Proin non orci euismod,
 ultrices mi quis, malesuada lacus. Cras luctus et tortor rutrum blandit. Nam nisi lorem, euismod et ornare in, venenatis vel tortor. Sed ut nisi ac augue tincidunt dictum.
 Morbi sed velit odio. Vestibulum eu augue et sapien mollis consequat at sodales dui. Aenean porta diam ut pharetra egestas. Ut vel auctor libero, sit amet vulputate justo.
 <br><br>
<a href="serkaniozgun.com" >serkaniozgun</a>
<br><br>
<div class="ilksınıf">Burası harici olarak eklenmiş css dosyası içindeki  ilksınıf class'ı ile biçimlendirilmiştir.  </div><br><br>
<div style="color:gray;">Burası  html kodları içinden style ile biçimlendirildi.</div>
</body>

Aynı şekilde farklı bir Notepad dosyasının içine aşağıdaki kodları yapıştırdıktan sonra bu dosyayıda css dosyası olarak aynı dizine kaydedelim.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:red;
font-size:1em;}
a {
text-decoration:none;
color:green;}

.ilksınıf{
color:blue;
font-family: Georgia, "Times New Roman", serif;
border: 2px solid #000;
border-color:red;
text-align:center;
}

Dışardan css dosyası eklenmemiş şekliyle çalışmamız.

Dışardan css dosyası eklenmiş şekliyle çalışmamız.

Yukarıda 2 linkte göstermiş olduğumuz gibi iki sayfadanda farklı sonuçlar elde ettik.Peki bu farklılık neden kaynaklanıyor. İki sayfayıda sağ tıklayıp çıkan seçeneklerden "Kaynağı Görüntüle"yi seçersek sayfa içeriğini görebiliriz. İkinci sayfadaki <head></head> tagları arasındaki

<link href="deneme.css" rel="stylesheet" type="text/css" />

kodlarına dikkat edelim. İki sayfa arasındaki tek fark bu satır. İlk sayfada bu satır yok. Bu kod ile harici olarak oluşturduğumuz style dosyasının yerini gösterdik ve style dosyamızdaki css biçimlerimizi html dosyamıza uyguladık.

Umarım örneğimiz kafanızda bazı şeyleri somutlaştırmıştır. Bundan sonra konunun detayına inmeye çalışacağız.

Related posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.