CSS Stil Sayfasını Oluşturun
Aynı şekilde ayrı bir metin dosyası oluşturduk. HTML, CSS için bir metin dosyası oluşturacaksınız. Bu işlem için görsellere ihtiyacınız varsa lütfen ilk öğreticiye bakın. Not Defteri'nde CSS stil sayfanızı oluşturma adımları şunlardır:
- Seç Dosya > Yeni boş bir pencere almak için Not Defteri'nde
- Tıklayarak dosyayı CSS olarak kaydedin Dosya < Farklı Kaydet...
- Sabit sürücünüzdeki my_website klasörüne gidin
- Değiştir "Türü Olarak Kaydet:" için "Tüm dosyalar"
- Dosyanıza bir ad verin"stiller.css" (tırnakları bırakın) ve tıklayın Kayıt etmek
CSS Stil Sayfasını HTML'nize Bağlayın
Bir kez sahip olduğunuzda stil sayfası web siteniz için, onu Web sayfasının kendisiyle ilişkilendirmeniz gerekir. Bunu yapmak için bağlantı etiketini kullanırsınız. Aşağıdaki bağlantı etiketini içinde herhangi bir yere yerleştirin.
Sayfa Kenar Boşluklarını Düzeltin
sen yazarken XHTML farklı tarayıcılar için öğreneceğiniz bir şey varsa, hepsinin bir şeyleri nasıl görüntüledikleri konusunda farklı kenar boşlukları ve kuralları olduğudur. Sitenizin çoğu tarayıcıda aynı göründüğünden emin olmanın en iyi yolu, tarayıcı seçiminde kenar boşlukları gibi şeylerin varsayılan olmasına izin vermemektir.
Sayfaları, metni çevreleyen fazladan dolgu veya kenar boşluğu olmadan sol üst köşeden başlatmayı tercih ediyoruz. İçeriği dolduracak olsak bile, aynı boş sayfa ile başlamak için kenar boşluklarını sıfıra ayarladık. Bunu yapmak için aşağıdakileri style.css belgenize ekleyin:
html, gövde {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
sınır: 0 piksel;
sol: 0 piksel;
üst: 0 piksel;
}
Sayfadaki Yazı Tipini Değiştirme
Yazı tipi genellikle bir web sayfasında değiştirmek isteyeceğiniz ilk şeydir. Varsayılan bir web sayfasındaki yazı tipi çirkin olabilir ve aslında web tarayıcısının kendisine bağlıdır, bu nedenle yazı tipini tanımlamazsanız, sayfanızın nasıl görüneceğini gerçekten bilemezsiniz.
Tipik olarak, yazı tipini paragraflarda veya bazen tüm belgenin kendisinde değiştirirsiniz. Bu site için yazı tipini başlık ve paragraf düzeyinde tanımlayacağız. Aşağıdakileri style.css belgenize ekleyin:
p, li {
yazı tipi: 1em Arial, Helvetica, sans-serif;
}
h1 {
yazı tipi: 2em Arial, Helvetica, sans-serif;
}
h2 {
yazı tipi: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
yazı tipi: 1.25em Arial, Helvetica, sans-serif;
}
Paragraflar ve liste öğeleri için temel boyut olarak 1em ile başladık ve ardından başlıklarım için boyutu ayarlamak için bunu kullandık. h4'ten daha derin bir başlık kullanmayı beklemiyoruz, ancak planlıyorsanız, onu da şekillendirmek isteyeceksiniz.
Bağlantılarınızı Daha İlginç Hale Getirmek
Bağlantılar için varsayılan renkler, ziyaret edilmeyen ve ziyaret edilen bağlantılar için sırasıyla mavi ve mordur. Bu standart olsa da sayfalarınızın renk düzenine uymayabilir, o yüzden değiştirelim. style.css dosyanıza aşağıdakileri ekleyin:
bir bağlantı {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
renk: #FF9900;
metin-dekorasyon: altı çizili;
}
a: ziyaret edildi {
renk: #FFCC66;
}
a: üzerine gelin {
arka plan: #FFFFCC;
yazı tipi ağırlığı: kalın;
}
Üç bağlantı stili kurduk, varsayılan olarak a: bağlantısı, ziyaret edildiğinde a: ziyaret edildi, rengini değiştirdik ve a: üzerine gelin. Bir: vurgulu ile bağlantının bir arka plan rengi elde etmesini ve tıklanacak bir bağlantı olduğunu vurgulamak için kalın yazıya sahip olmasını sağlarız.
Gezinme Bölümünün Stilini Oluşturma
Gezinme (id="nav") bölümünü HTML'de ilk sıraya koyduğumuz için, önce onu stillendirelim. Ana metnin ona çarpmaması için ne kadar geniş olması gerektiğini belirtmemiz ve sağ tarafa daha geniş bir kenar boşluğu koymamız gerekiyor. Biz de etrafına bir sınır koyuyoruz.
Style.css belgenize aşağıdaki CSS'yi ekleyin:
#nav {
genişlik: 225 piksel;
sağ kenar boşluğu: 15 piksel;
kenarlık: orta katı #000000;
}
#nav li {
liste stili: yok;
}
.altbilgi {
yazı tipi boyutu: .75em;
ikisini de temizle;
genişlik: %100;
metin hizalama: merkez;
}
Liste stili özelliği, gezinme bölümünün içindeki listeyi madde işareti veya sayı içermeyecek şekilde ayarlar ve .footer, telif hakkı bölümünü daha küçük ve bölüm içinde ortalanmış olacak şekilde ayarlar.
Ana Bölümü Konumlandırma
Ana bölümünüzü mutlak konumlandırma ile konumlandırarak, web sayfanızda tam olarak olmasını istediğiniz yerde kalacağından emin olabilirsiniz. Yerleştirmek için 800 piksel genişliğinde yaptık daha büyük monitörler, ancak daha küçük bir monitörünüz varsa, bunu daha dar hale getirmek isteyebilirsiniz.
Aşağıdakileri style.css belgenize yerleştirin:
#ana {
genişlik: 800 piksel;
üst: 0 piksel;
pozisyon: mutlak;
sol: 250 piksel;
}
Paragraflarınızı Şekillendirme
Yukarıda paragraf yazı tipini zaten ayarladığımdan, daha iyi öne çıkması için her paragrafa biraz fazladan "tekme" vermek istedim. Bunu, paragrafı yalnızca görüntüden daha fazla vurgulayan üste bir kenarlık koyarak yaptım.
Aşağıdakileri style.css belgenize yerleştirin:
.üst çizgi {
üst kenarlık: kalın katı #FFCC00;
}
Tüm paragrafları bu şekilde tanımlamak yerine "topline" adlı bir sınıf olarak yapmaya karar verdik. Bu şekilde, üst sarı çizgisi olmayan bir paragrafa sahip olmak istediğimize karar verirsek, paragraf etiketinde class="topline" öğesini bırakabiliriz ve üst kenarlığı olmaz.
Görüntüleri Şekillendirme
Görüntülerin genellikle etraflarında bir kenarlık vardır, bu görüntü bir bağlantı olmadığı sürece her zaman görünür değildir, ancak içinde bir sınıf olmasını seviyoruz. Kenarlığı otomatik olarak kapatan CSS stil sayfası. Bu stil sayfası için "noborder" sınıfını oluşturduk ve belgedeki resimlerin çoğu bu sınıfın parçası.
Bu görsellerin bir diğer özel yanı ise sayfadaki konumlarıdır. Tabloları hizalamak için kullanmadan içinde bulundukları paragrafın bir parçası olmalarını istedik. Bunu yapmanın en basit yolu, float CSS özelliğini kullanmaktır.
Aşağıdakileri style.css belgenize yerleştirin:
#ana resim {
yüzer: sol;
sağ kenar boşluğu: 5px;
kenar boşluğu-alt: 15 piksel;
}
.sınır yok {
sınır: 0px yok;
}
Gördüğünüz gibi, paragraflarda yanlarında bulunan kayan metne karşı parçalanmadıklarından emin olmak için resimler üzerinde ayarlanmış kenar boşluğu özellikleri de vardır.
Şimdi Tamamlanan Sayfanıza Bakın
CSS'nizi kaydettikten sonra, Web tarayıcınızda pets.htm sayfasını yeniden yükleyebilirsiniz. Sayfanız, resimler hizalanmış ve sayfanın sol tarafına doğru yerleştirilmiş gezinme ile bu resimde gösterilene benzer görünmelidir.
Bu site için tüm dahili sayfalarınız için aynı adımları izleyin. Navigasyondaki her sayfa için bir sayfanız olsun istiyorsunuz.