Dökümanın tipini göstermek için kullanılır.HTML kodunun başına bir veya 2 satır olarak eklenir.Web tarayıcıları kullanılan döküman tip tanımlamasına göre sayfayı analiz eder.Dosya tipini belirler.
CSS Nedir?
CSS kısaltmasının ingilizce açılımı Cascading Style Sheets,Türkçe açılımı ile Stil Şablonları
demektir. CSS sayfalarımızda kullanacağımız font,renk,font boyutu,arkaplan düzenlemeleri,satır yükseklikleri gibi bir çok farklı düzenlemeyi sadece bir kaç satır CSS kodu yazarak düzenleme imkanı sunar.CSS tanımlamaları ile defalarca yazmamız gereken Html taglarını sadece birkaç tanımlamadan sonra sorunsuz ve defalarca kullanabiliriz.
HTML Tagları
<html> :Web sayfasında bulunan ilk koddur. Html kodları bu taglar arasına yazılır.Bu kod hiç bir parametre almaz.
<head>: Web sayfasının temel özelliklerinin bulunduğu koddur.Yani sayfa başlığını ,link özelliklerini ,yazı karakterleri özellikleri vb. özellikler bu kodun içine yazılır.
<link>: Dökümana dışardan bir kaynak bağlar.
<div>: Dökümanda bir bölümü temsil eder.Div'leri birer kutu olarak düşünüp bunları tek olarak veya iç içe girmiş bir yapı olarak düşünebiliriz.
<span>: Dökümanda bir bölümü temsil eder.Div etiketinden farkı bir satır içi elementi olduğu için metnin içinde kullanılması ilgili metni kesmez.style ve css özellikleri ayrıca belirtilmelidir.
<h1>ile<h6>: Başlık yazısını belirler.
<ul>: Sırasız listeler yapmak için kullanılan tagdır.
<li>: Listeleme tagıdır.
<a>: Link atmak için kullanılır.
<b>: Metnin koyu görünmesini sağlar.
<p>: Paragraf yapmak için kullanılır.
<strong>: Kalın yazı yapmak için kullanılır.
<label>: Form içindeki text'e etiket vermeye yarar.
<form>: Kullanıcıdan veri almaya yarar.
<input>: Form için bilgi alanı almak için.
<textarea>: Form için uzun bilgi alanı.
<footer>: Alt bilgi elementi.Sayfanın en altında yer alan kısımdır.
<header>:Başlık etiketidir.Üst bilgi elementidir.
<article>: Siteye içerik eklemek için kullanılır.
<aside>: Sayfa içerisinde bölümlendirme yapabildiğimiz bir alan belirler.
CSS Komutları
background: Arka planı değiştirmek için kullanılır.
border: Çerçevenin kalınlığını belirler.
width: Resmin genişliğini belirler.
height: Resmin yüksekliğini belirler.
font-size: Yazı büyüklüğünü piksel cinsinden büyüklüğünü belirler.
font-weight: Yazının bold(<b>) olup olmamasını belirler.
text-decoration: Metne şekil vermek için kullanılır.Bu özellik genelde linklerin altındaki çizgiyi kaldırmak için kullanılır.
list-style: Listelerin biçimini belirler. örn: list-style-image: liste biçiminin resim olmasını sağlar.
overflow: Katmanın belirtilen yüksekliğe ve genişliğe sığamayan kısmına ne olacağını belirler.
float: Birbiri ardına sıralanan elemanların yan yana sıralanmasını sağlar.
margin: Dıştan içe boşluk vermeye yarar.Yani dış boşluk.Tablo ile pencere arasındaki boşluğu belirler.
display: Çok amaçlı kullanılır. örn: <img display:none; kodu herhangi bir nesneyi yok sayar.
padding: İçten dışa sayfaya boşluk vermeye yarar.Yani iç boşluktur.
ÖRNEK:
HTML.html
<html>
<head>
<title>Web sayfam</title>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ust">
<h1>
<img src="komik.jpg" border="2" alt="Komik resim">
</h1>
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
</div>
<div class="ortablok1">
<ul>
<li><a href="javascript:void(0)">Ana Sayfam</a></li>
<li><a href="javascript:void(0)">Hakkinda</a></li>
<li><a href="javascript:void(0)">Blogum</a></li>
<li><a href="javascript:void(0)">Resimler</a></li>
<li><a href="javascript:void(0)">Sosyal Aglar</a></li>
</ul>
<h1>
<img src="komik.jpg" border="2" alt="komik resim :)">
</h1>
</div>
<div class="alt">
<center>
<h3>COPY RIGHT CSS</h3>
</center>
</div>
</body>
</html>
CSS.css
body {}
.ust{background:red;width:1410px;height:140px;}
.ust h1{float:left;}
.ust h1 img{width:100px;height:100px;}
.ust ul{float:right;}
.ust ul li {float:left;list-style:none;margin:40px 5px 0 0;}
.ust ul li a{color:#333;font-size:16px;text-decoration:none;}
.ust ul li a:hover{color:pink;}
.ortablok1{background:blue; overflow:hidden; border:2px;width:120px;}
.ortablok1 img{width:100px; height:100px;}
.ortablok1 ul{float:right;}
.ortablok1 ul li a{color:pink;font-size:16px;}
.ortablok1 ul li {float:left;list-style:none;margin:40px 5px 0 0;}
.ortablok1 ul li a:hover{color:#333;}
.alt {background:red;width:1410px;height:140px;}
EKRAN GÖRÜNTÜSÜ
Hiç yorum yok:
Yorum Gönder