Introduction to CSS

Kategori: CSS , 28 Ekim 2019 , JanFranco


CSS yazı serisinin ilk yazısında CSS syntax'ı hakkında bilgi edineceğiz. Başlayalım:


p {
	font-family: Arial;
}
Burada p bir selector, font-famil: Arial; ise declaration'dır. Bu şekildeki bir kullanımda, HTML'de tüm

etiketlerinin font-famil özelliği Arial olur.



h1, h2, h3 {
	font-family: Arial;
	color: yellow;
}
font-famil ve color burada property, Arial ve yellow ise value yani değerdir. Bu şekild bir kullanımda HTML'de h1, h2 ve h3 etiketleri içerisindeki yazıların fontu Arial, rengi sarı olur.

Web sayfalarımızda CSS kullanmamızın iki yolu vardır: iç ve dış kullanım. CSS dosyası oluşturup, bu dosyayı dışarıdan çağırabiliriz veya CSS kodlarını web sayfamızda tanımlarız. Dış kullanıma bir örnek:


<link href="css/styles.css" type="text/css" rel="stylesheet" />
href attribute'u ile dosyanın yolunu, type attribute'u ile dosyanın text içerikli bir css dosyası olduğunu, rel attibute'u ile HTML sayfası ile çağırılan dosyanın ilişkisini belirledik. CSS dosyası çağırdığımızda bu attribute'ın değeri stylesheet olmalıdır. İç kullanıma da bir örnek verelim:


<!DOCTYPE html>
<html>
	<head>
		<title>Using Internal CSS</title>
		<style type="text/css">
			body {
				font-family: arial;
				background-color: rgb(185,179,175);
			}
			h1 {
				color: rgb(255,255,255);
			}
		</style>
	</head>
	<body>
		<h1>Potatoes</h1>
		<p>There are dozens of different potato varieties. They are usually described as early, second early and maincrop.</p>
	</body>
</html>
HTML elementlerini kontrol etmek için selector kullanacağımızı biliyoruz. Tüm selector çeşitlerinin bir listesini paylaşayım:


Universal Selector		* {}			Tüm elementlere uygulanır.
Type Selector			h1, h2, h3 {}		Belirtilen element isimlerine uygulanır.
Class Selector			.note{}, p.note{}	Belirtilen sınıfa dahil olan elementlere uygulanır. İlk örnekte note sınıfına dahil olan elementleri seçtik, ilinci örnekte sınıfı note olan p elementlerini seçtik.
ID Selector			#introduction {}	Belirtilen ID'ye sahip elementlere uygulanır.			
Child Selector			li>a {}			Belirtilen elementin belirlenen alt elementine direkt uygulanır. Bu örnekte li elementlerinin içinde bulunan a elementlerini seçtik.
Descendant Selector		p a {}			Belirtilen elementin belirlenen alt elementine doğrudan uygulanır. Bu örnekte li elementlerinin içinde bulunan a elementlerini seçtik. Ancak arada başka elementler de olabilirdi li>p>a gibi.
Adjacent Sibling Selector	h1+p {}			Belirtitilen elementin sonrasındaki ilk belirtilen elementine uygulanır. İki element kardeş element olmalıdır. Örnekte h1 elementinden sonraki ilk p elementini seçtik.
General Sibling Selector	h1~p {}			Belirtilen elementin sonrasındaki belirtilen elementlere uygulanır. İki element kardeş element olmalıdır. Örnekte h1 elementinden sonra gelen p elementlerini seçtik.
Bir özellik tanımladığımızda, alt elementler bu özelliği miras alırlar. Ancak tüm özelliklede bu geçerli değildir. Örneğin bir yazının rengini, fontunu vs. ayarladığımızda bu özellik alt elementlere de geçer. Ancak arkaplan rengi, sınır özellikleri gibi özellikler alt elementlere geçmez. Geçmesini istiyorsak inherit anahtar kelimesi ile zorlayabiliriz:


<div class="page">
	<h1>Potatoes</h1>
	<p>There are dozens of different potato varieties.</p>
	<p>They are usually described as early, second early and maincrop potatoes.</p>
</div>

body {
	font-family: Arial, Verdana, sans-serif;
	color: #665544;
	padding: 10px;
	}
.page {
	border: 1px solid #665544;
	background-color: #efefef;
	padding: inherit;
	}
Bu örnekte div elementi body elementinin içinde olduğundan font ve renk özelliğini body elementinden alır. border, background-color özelliklerini zaten page sınıfını seçerek belirledik. Burada normalde padding: inherit; şeklinde bir özellik belirlemeseydik div elementinin böyle bir özelliği olmayacaktı çünkü bu özellik miras ile geçmez. Ancak inherit anahtar kelimesi ile body elementi ile ilişkisi olan padding özelliğini almış olduk.


Sonraki Yazı: Color
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın