Bir tarayıcı bir stil sayfası okuduğunda, stil sayfasında bilgilere göre HTML belgesini biçimlendirir.
CSS eklemek için üç yol
Bir stil sayfası ekleme üç yolu vardır:
Harici Stil Sayfası
Harici stil sayfasındaki ile, sadece bir dosya değiştirerek bir web sitesinin tamamı görünümünü değiştirebilirsiniz!
Her sayfa, iç dış stil sayfası dosyası için bir başvuru içermelidir <link> elemanı. <link> elemanı içinde gider <head> bölümünde:
Harici bir stil sayfası herhangi bir metin editörü yazılabilir. dosya herhangi html etiketlerini içermemelidir. Stil sayfası dosyası ile kaydedilmiş olması gerekir .css uzantısı.
Burada nasıl "myStyle.css" görünür:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} Özellik değeri ve birim arasında bir boşluk ekleme (such as margin-left:20 px; ) . Doğru bir şekilde: margin-left:20px;
İç Style Sheet
tek sayfa kendine özgü bir tarzı varsa ilgili iç stil sayfası kullanılabilir.
İç stilleri içinde tanımlanır <style> elemanı içinde <head> HTML sayfasının bölümü:
Örnek
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Kendin dene " Inline Stilleri
Bir satır içi stil tek element için benzersiz bir stil uygulamak için kullanılabilir.
Satır içi stilleri kullanmak için, eklemek style ilgili elemana niteliğini. style niteliği herhangi bir CSS özelliği içerebilir.
Aşağıdaki örnek rengini ve sol kenar boşluğu nasıl değiştirileceği gösterilmektedir <h1> elemanı:
Bir satır içi stili (sunumuyla içeriği karıştırılarak) bir stil sayfası avantajları çok kaybeder. idareli bu yöntemi kullanın!
Çoklu Stil Sayfaları
Bazı özellikler aynı seçicinin için tanımlanmış ise (element) farklı stil dosyasını, son okuma Biçembendin değeri kullanılacaktır.
Örnek
Harici stil sayfası için aşağıdaki tarzı vardır olduğunu varsayalım <h1> elemanı:
h1
{
color: navy;
}Daha sonra, bir iç stil sayfası da için aşağıdaki tarzı vardır varsayalım <h1> elemanı:
h1
{
color: orange;
}Iç stil dış stil sayfasına bağlantı sonra tanımlanırsa, <h1> elemanları olacak "orange" :
Örnek
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Kendin dene " Iç stil dış stil sayfasına bağlantı öncesi tanımlanır Ancak, <h1> elemanları olacak "navy" :
Örnek
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Kendin dene " Basamaklı al
Bir HTML elemanı için birden fazla stil var belirtildiğinde ne tarz kullanılacak?
Genellikle söyleyebiliriz konuşan tüm stilleri olacak "cascade" yeni içine "virtual" bir numaralı en yüksek önceliğe sahip aşağıdaki kurallara tarafından stil sayfasının:
- Satır içi stil (inside an HTML element)
- Dış ve iç stil sayfaları (in the head section)
- Tarayıcı varsayılan
Yani, bir satır içi stil (inside a specific HTML element) bir iç tanımlanan stili geçersiz olacağı anlamına gelir en yüksek önceliğe sahiptir <head> etiketi veya harici stil sayfasındaki veya bir tarayıcı varsayılan değer.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»