CSS Nedir ?
CSS bir kısaltmadır. "Cascading Style Sheets" kelimesinin baş harflerinden oluşur. Dilimizdeki anlamı: Basamaklı Stil Sayfası.Stiller, bir HTML elementinin nasıl görüneceğini belirleme olanağı sağlar. HTML dosyamızın daha anlaşılır olmasını sağlar. Stillerimiz tek bir dosyada toplanır ve kolaylıkla okunur - değiştirilir.Stil dosyalarımızın uzantısı *.css dir. CSS Dosyası birçok stil barındırabilir.Basit CSS Anlatımı
Şimdi Basit Bir Şekilde CSS'nin Mantığını Öğrenelim.Öncelikle HTML Dosyamız İle CSS Dosyamızı Bağlamayı Öğrenelim.
CSS Dosyamızı Oluşturduktan Sonra HTML Dosyasında Sitemizin İskeletini Oluşturduktan Sonra Yani;
<html>
<head>
<title></title>
</head>
<body></body>
</html><html>
<head>
<title></title>
<link href="cssdosyanizinadi.css" rel="stylesheet" type="text/css"/>
</head>
<body></body>
</html> Şeklinde CSS Dosyamızı Bağladıktan Sonra CSS Kodlarınızı CSS Dosyasınıza Yazmaya Başlayabilirsiniz.
Basit CSS Kodları
Aşağıdaki Kodların Hepsini CSS Dosyanızın İçine Yazarak Deneyebilirsiniz.
| Etiketler | Kullanımı |
| color | Değişkeninizin İçine color:red; Şeklinde Yazarsanız Değişkeni Belirlediğiniz Alandaki Yazı Kırmızı Renkte Yazar. |
| background-color | Değişkeninizin İçine background-color:red; Şeklinde Yazarsanız Değişkeni Belirlediğiniz Alanın Arkaplanı Kırmızı Olur. |
| font-family | Değişkeninizin İçine font-family:Tahoma; Şeklinde Yazarsanız Değişkenin Yazı Tipini Belirler. |
| width | Değişkeninizin İçine width:100px; Şeklinde Yazarsanız Değişkenin Genişliğini 100 Piksel Belirlersiniz. |
| height | Değişkeninizin İçine height:100px; Şeklinde Yazarsanız Değişkenin Yüksekliğini 100 Piksel Belirlersiniz. |
| font-size | Değişkeninizin İçine font-size:15pt; Şeklinde Yazarsanız Değişkenin Yazı Boyutunu 15 Punto Belirlersiniz. |
| text-align | Değişkeninizin İçine text-align:center; Şeklinde Yazarsanız Değişkenin Hizasını Belirlersiniz. Left Sola, Right Sağa, Center Ortalanmış, Justify İki Yana Hizalar. |
Şimdi Konuyu Toparlayalım
HTML Sayfamız<html>
<head>
<title></title>
<link href="stil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="degisken"></div>
</body>
</html> CSS Sayfamız.degisken{
color:blue;
background-color:red;
font-family:Arial;
width:250px;
height:250px;
text-align:right;
}
0 yorum:
Yorum Gönder
Konu Hakkındaki Yorumlarınız Ve Düşünceleriniz Bizim En Değerli Kaynağımızdır. Lütfen Bir Yorumlarınızı Ve Düşüncelerinizi Eksik Etmeyin... :)