Harici bir stil sayfası, bir web sayfasının nasıl göründüğünü tanımlar. Metnin boyutu, rengi ve yazı tipi, düğmelerin rengi veya menülerin ve kenar çubuklarının konumu gibi şeyleri belirtmek için bir stil sayfası kullanabilirsiniz.
Harici Stil Sayfasında Kullanılan Kod
Temel bir web sayfası oluşturmak için kullanılan iki tür kod vardır:
- Köprü Metni İşaretleme Dili (HTML): Bir web sayfasının içeriğini tanımlar. Metin bölümlerinin paragraf mı, başlık mı yoksa liste mi olduğunu belirleyen bir işaretleme ile asıl metni içerir. Ayrıca sayfada görünen resimlere bağlantılar ve harici sayfalara köprüler içerir.
- Basamaklı Stil Şablonu (CSS): İçeriğin nasıl görüntüleneceğini belirtmek için kullanılan bir kodlama dili. Her tür metin öğesinin nasıl görüntüleneceğini tanımlar ve farklı sınıflara aitlerse veya farklı bir kimliğe sahiplerse aynı tür öğeyi farklı şekilde görüntüleyebilir. Bu, menüler ve listeler gibi şeylerin bir web sayfasının ana metni içinde çok farklı davranmasına olanak tanır.
Genel olarak, stili içerikten ayırmak iyi bir fikirdir, çünkü her seferinde tek bir şeye odaklanmanıza olanak tanır. Bu, bir ekipte daha da önemli hale gelir ve içerik ve sunumdaki uzmanların diğerlerinden bağımsız olarak çalışmasına olanak tanır. Belki daha da önemlisi, aynı zamanda tek bir stil talimatı setinin tüm web sitesinde eşit olarak uygulanmasına izin verir.
Web sitesinin görsel sunumu, her web sayfasını ayrı ayrı düzenlemeden tek bir stil sayfasından değiştirilebilir. Daha büyük karmaşık web siteleri için, sayfalardaki metni, menüleri ve bölümleri kontrol etmek için bir dizi stil sayfası kullanılabilir. Bu stil sayfaları koleksiyonuna "tema" denilebilir.
HTML'yi CSS'ye bağlamak için Harici CSS kullanma
CSS stilini doğrudan bir web sayfasının HTML'sine dahil etmek, her paragrafı ayrı ayrı biçimlendirmek ve farklı bir başlık oluşturmak için CSS kullanarak mümkündür. Bu çeşit satır içi stil genellikle iyi bir fikir değildir, çünkü stili içerikten ayırmanın tüm avantajlarını kaybedersiniz. En önemlisi, tüm web sitenizi tutarlı bir şekilde tek bir dosyadan güncelleme yeteneğinizi kaybedersiniz.
Bir web sitesine stil uygulamanın doğru yolu, uygulamak istediğiniz her stil türü için tek bir harici stil sayfası dosyası oluşturmak ve ardından bu dosyalara her HTML dosyasından referans vermektir. Örneğin, aşağıdaki harici stil sayfalarına sahip olabilirsiniz:
- metin.css
- menüler.css
- layout.css
Bu harici stil sayfalarında CSS kodunda değişiklik yapmadan değişiklik yapabilirsiniz. dosya adları, yani tüm web sayfalarınızın HTML'si içinde bu dosyalara yapılan referanslar değişti.
HTML ve CSS örnekleri
Çok basit bir HTML sayfası aşağıdaki kodu içerebilir:
Benim hakkımda herşey!
Bu sayfa benimle ve neden harika olduğumla ilgili.
Bunun bir web tarayıcısında nasıl göründüğünü görmek istiyorsanız, metni aşağıdaki gibi bir metin düzenleyiciye kopyalayın. not defteri. Dosyayı "index.html" gibi bir şey olarak kaydedin ve eski okul stilini görmek için tarayıcınıza sürükleyin.
Aşağıdaki kodu aşağıdaki kodu ekleyerek bu sayfaya basit bir harici stil sayfası bağlanabilir.
type = "metin/css"
href = "myStyle.css" />
index.html ile aynı klasörde bulunan ve aşağıdaki kodu içeren myStyle.css adlı başka bir metin dosyası oluşturun:
h1 {
renk: #FF7643;
yazı tipi yüzü: Arial'
}
p {
kırmızı renk;
yazı tipi boyutu: 1.5em;
}
CSS ile yapabileceğiniz daha çok şey var. Daha fazlasını öğrenmek istiyorsanız, W3 Okulları başlamak için harika bir yerdir.