21 Kasım 2013 Perşembe

HTML CSS (Cascading Style Sheets)


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 ile HTML Styling

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)
External Style Sheet (Harici Stil Kullanımı)
İ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.
<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>
örnekte background-color özelliği bir öğe için arka plan rengini tanımlamaktadır.

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

Hiç yorum yok:

Yorum Gönderme

Copyright 2013-2017 | İbrahim BAYRAKTAR /dev/null Web Günlüğü