Sizinde bildiğiniz gibi Html yazım şekli olarak etiket türünde bir yazım dili. Bu yüzden pek fazla özelliklere sahip değil. Bu sahip olamadığı özellikler nedeniyle sayfanın dizaynında bize tam esneklik veremiyor. CSS bu amaçla üretilmiş bir dil. Kullanım kolaylığı ve kullanışlılığı ile Html’e eklenmesinden itibaren çoğu web tasarımcısının gözdesi oldu. Çünkü her türlü sayfa dizaynını bize bırakarak müthiş bir esneklik sağlıyor, HTML de veremediğimiz bi çok özelliği CSS yardımı ile Sayfalarımıza verebiliyoruz. Ayrıca isteğe bağlı olarak tek bir sayfaya etki ettirmek yerine bir çok sayfaya etki ettirerek hem zamandan hemde iş gücünden tasarruf etmemize olanak sağlıyor.
CSS'nin şu anda kullanımda olan iki versiyonu var, 3. versiyonuda kodlandı şu zamanlarda piyasada kullanımda olduğunu sanıyorum fakat CSS 3deki bazı özellikleri şu anki Browserler desteklemediği için pek randımanlı sonuçlar elde edilemiyor(MSIE (Internet Explorer) ve NN (Netscape Navigator) tarayıcıları aynı kodları kabul etmiyorlar.) CSS'nin şu anda göreceğimiz özellikleri browserlerin genelinde algılanan, text özelleikleri olacak. Ayrıca Css 3 yeni özellikleri ile geliyor, daha özgür bir tablo biçimi fakat bir dezavantajı sadece i.e. 7 ile görülebiliyor olması, firefox zaten Css ile iyi anlaşıyor fakat internet explorer Css özelliklerine pek alışacak gibi değil.
1. Stil Şablon çeşitleri :
İhtiyaca göre Tüm Siteye, Tüm sayafaya veya Sayfa içinde tek bir öğeye etkiyen şablon biçimidir bunuda id,class gibi belirteçlerle halledeceğimizi ilerki anlatımlarda göreceksiniz
2. Html etiketleri ile Css :
Bu konuda, HTML deki özelliklerin Css dosyası içersinde nasıl belirlendiğini, kullanıldığını göreceğiz
Css’in 3 farklı kullanım alanı vardır. Bunlar ;
Yerel kullanım, ki sadece sayfa içersinde belirlenen tek bir öğeye uygulanır
Global kullanım, bu da sadece belirtilen bir tek sayfada kullanım için geçerlidir
Bağlantılı kullanım, bu bir tek css dosyasının içinden bir çok HTML sayfanın özelliğini kontrol etmeye yarar
Yerel CSS
Yerel kullanım; Bir HTML sayfasının içindeki sadece bir öğeye etki etmek için kullanılan bir biçimdir, mesela bir text açıklama içinde sadece bir kelime veya kelime grubunun özelliğini değiştirmek için kullanılırlar.
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>R10 Css</h1><br>
<h2 style=”font-size:10pt; font:Arial, Helvetica, sans-serif; color:red;”>deli</h2>dana
</body>
</html>
Burada deli dana yazınısının özelliklerine dikkat ediniz, deli yazısına HTML style özellikleri ile değişiklik verdik, Css de aynı işi farklı yöntemler ile daha özgür olarak yapar.
Global CSS
Global CSS bütün sayfaya etkiyen Css biçimidir, dikkat ederseniz yukarıdaki örnekte sadece belirli bir alana özellik verebildik, onu da <h2> tagının içine belirlediğimiz bir özellik ile yaptık. <h2> tagının özelliklerini <head> tagının içersinde belirtirsek sayfa içersindeki bütün <h2> taglarının özlelliğinin kendi belirlediğimiz gibi olduğunu görebiliriz. örnek olarak;
<html>
<head>
<title>sayfa başlığı </title>
<style type="text/css">
<!--
h2 {font-size:10pt; font:Arial, Helvetica, sans-serif; color:#ff6600}
-->
</style>
</head>
<body>
<h2>deli</h2> dana
R <h2>10</h2>
</body>
</html>
Bu örnekte HTML sayfa içindeki bütün <h2> taglarının özelliklerinin aynı olmasını sağladık,dikkat ederseniz
<style type="text/css">
<!--
h2 {font-size:10pt; font:Arial, Helvetica, sans-serif; color:#ff6600}
-->
</style>
şeklinde bir yapı kullandık, buradaki <style type="text/css"> </style> yapısı, arasındaki dökümanın Css belgesi olduğunu browsere iletiyor,<!-- | --> yapılarını kullanma amacımız ise; internet explorer gibi browserler css belgelerini tanımaz ve onlar yokmuş gibi hareket ederler, fakat css kodlerını yukarda belirttğimiz yapının içine alırsanız kodları browserden saklayıp, görüntü bölümünün içersine iletiyoruz.
Bağlantılı CSS
Global Css'de ise CSS kodlarını <head> </head> tagları arasına almak yerine ayrı bir css dosyasında açıyoruz. Dikkat edin kodları kaydettiğiniz dosyanın uzantısı *.css şeklinde olmalıdır. Genellikle bu dosyada stil.css ismi kullanılır. Bağlantılı CSS dosyasının avantajı; Bir anda binlerce HTML dosyasının özelliğini bir hareketle değiştirebilme kolaylığını bize sunmasıdır.
kullanım şekli;
<link rel="stylesheet" type="text/css" href="*.css"> ile CSS dosyasının ismini ve yerini belirterek o dosyanın içindeki komutları dışardan çağırıyoruz ve sayfa içersinde etki göstermesi için *.css ismi ile kaydedeceğimiz belgenin içine;
body { background-color:#00CCFF}
h1 {font-size:10pt; color:yellow}
h2 {font:15pt; color:#ffffff}
h3 {font-size:25pt; color:#993300}
Bu dosyayı stil.css olarak kaydedin.
daha sonra yeni bir HTML sayfasının içersine dışarıya kaydettiğimiz CSS dosyasını çağırarark özellikler vereceğiz.
<html>
<head>
<title>Saya Başlığı</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1>deli</h1>
<h2>dana</h2>
<h3>R10</h3>
</body>
</html>
bunun gibi anlatımlara devam edeceğim ilerleyen günlerde
Css
2
●1.518
