HTML Dersleri
HTML Stil Dosyalarıyla Çalışmak
CSS (Cascading Style Sheets - Basamaklı Stil Şablonları ya da Basamaklı Biçim Sayfaları) HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir. Sayfalarımızın ve içindeki bileşenlerin görünüm kalitesini artırmak amacıyla bizlere birçok biçimlendirme özelliği sağlar. HTML Head başlıklı yazımda HTML elementlerinin alt nesnesi olarak anlatılan style nesnesi ile doküman üzerinde herhangi bir HTML elementinin kenar dolgusu (padding), arka plan (background), kenarlık (border), renk (color), yazı tipi (font) ve yerleşim (position) gibi farklı CSS özelliklerini dinamik olarak okumak ve değiştirmek mümkündür. Bir Web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılabilir ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir kez tanımlayıp bütün sayfalarımızda ortak olarak kullanabiliriz. Bu bize hem görünümde ortak stil uygulanmasını hemde sayfaların hafızadaki boyutu küçüldüğü için yüklenme ve güncellemede hızı sağlayacaktır.
CSS stil HTML öğeleri için HTML4 ile birlikte tanıtılmıştır. CSS kodları HTML kodlarının içine yazılabildiği gibi harici bir CSS dosyası oluşturularak da kullanılabilirler. Türüne göre <body> veya <head> bölümlerinde yer alabilirler.
CSS aşağıdaki şekillerde HTML eklenebilir:
- Harici Stil Kullanımı (External Style Sheet)
- Dahili Stil Kullanımı (Internal Style Sheet)
- Etiket İçinde Stil Kullanımı (Inline Style)
İsminden de anlaşılacağı gibi CSS kodlarımız ayrı bir dosyada olacaktır. Bu kullanım tarzı birçok sayfa için idealdir. Harici bir stil sayfası ile, bir dosya değiştirerek bir Web sitesinin tamamının görünümünü değiştirebilirsiniz. Her sayfada <link> etiketini kullanarak stil sayfası bağlanmalıdır.<link> etiketi <head> bölümünün içinde olmalıdır.
<head>
<link rel="stylesheet" type="text/css" href="mavistil.css">
</head>
Internal Style Sheet (Dahili Stil Kullanımı)
Bu kullanım tarzında CSS kodlarımızı <head> etiketi altında <style> etiketi içine yerleştirmeliyiz.
Inline Style (Etiket İçinde Stil Kullanım)
Bu kullanım tarzında ise CSS kodlarımızı HTML etiketleri içine "style" özniteliği ile birlikte yazmalıyız.
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
Inline Style (Etiket İçinde Stil Kullanım)
Bu kullanım tarzında ise CSS kodlarımızı HTML etiketleri içine "style" özniteliği ile birlikte yazmalıyız.
<p style="color:blue;margin-left:20px;">etiket icinde stil kullanımı ornek.</p>
HTML Stil Örneği : Sayfa Arkaplanı
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Baslık arkaplanı kırmızı</h2>
<p style="background-color:green;">Paragraf arkaplanı yesil</p>
</body>
</html>
Sayfamızda birden fazla kullanım tarzını kullanmak istersek öncelik sıralamasışu şekilde olacaktır :
Etiket İçinde - Dahili Kullanım - Harici Kullanım
HTML Stili Etiketleri
<style> stil bilgilerini tanımlamak için kullanılır.
<link> sayfa ve harici kaynak arasındaki ilişkiyi tanımlamakta kullanılır.
HTML CSS (Cascading Style Sheets) Kaynaklar :
http://www.w3.org/Style/Examples/011/firstcss
http://www.csstutorial.net/
http://www.htmldog.com/guides/css/beginner/
http://www.yourhtmlsource.com/stylesheets/introduction.html
HTML CSS (Cascading Style Sheets) Kaynaklar :
http://www.w3.org/Style/Examples/011/firstcss
http://www.csstutorial.net/
http://www.htmldog.com/guides/css/beginner/
http://www.yourhtmlsource.com/stylesheets/introduction.html
Hiç yorum yok:
Yorum Gönder