)
Dış Stil Sayfası
Stil çok sayıda sayfaya uygulanacaksa, dış stil sayfası kullanmak uygun bir yöntemdir. Dış stil sayfasıyla, bütün web sayfasının görünümünü sadece bir tek dosyayla oynayarak gerçekleştirebilirsiniz. Her sayfa, <link> etiketiyle, stil sayfasına gönderen bir bağlantı içermelidir; <link> etiketi head bölümünün içinde olmalıdır.
Kod:
<head>
<link rel="stylesheet" type="text/css" href="https://www.webailesi.com/yonlendir.php?link=stil.css">
</head>Kod:
"stil.css":
body {
background-color: lightgreen;
}
h1 {
color: red;
padding-left: 15px;
}İç Stil Sayfası
Bir iç stil sayfası, tek bir belgenin kendine özgü tek bir biçimde stil tanımı olacaksa kullanılmalıdır. İç stiller, HTML sayfasının head kısmında yer almalıdır. Burada <style> etiketi içine yerleştirilir.
Kod:
<head>
<style>
body {
background-color: white;
}
h1 {
color: blue;
padding-left: 30px;
}
</style>
</head>Kod:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: white;
}
h1 {
color: blue;
padding-left: 30px;
}
</style>
</head>
<body>
<h1>BASLIK-STIL TANIMI VAR</h1>
<p>PARAGRAF-STIL TANIMI YOK</p>
</body>
</html>
Inline Stiller
Bu yöntem CSS dosyalarının avantajını ortadan kaldıran bir yöntemdir; içerik ile stil karıştırılır. Bu nedenle kullanılması tavsiye edilmez.
Kod:
<h1 style="color:red;padding-left:40px;">BASLIK </h1>Çoklu Stil Sayfaları (Multiple Style Sheets)
Şayet bazı özellikler aynı seçici için farklı stil sayfalarına yerleştirilmişse, değerler en özel stile göre oluşturulur. Örneğin, h1 seçicisi için aşağıdaki özellikler bir dış stil sayfasına yüklenmiş olsun:
Kod:
h1 {
color: green;
padding-left: 30px;
}Kod:
h1 {
color: blue;
}Kod:
color: blue;
padding-left: 30px;Kod:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.webailesi.com/yonlendir.php?link=stil.css">
<style>
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>BASLIK</h1>
<p>DIS-IC STIL KOMBINASYONU</p>
</body>
</html>
