CSS ile Oluşturulmuş Bir Web Sayfası Oluşturma

10'dan 10

CSS Stil Sayfası Yaratın

Aynı şekilde HTML için ayrı bir metin dosyası oluşturduğumuzda, CSS için bir metin dosyası oluşturacaksınız. Bu işlem için görsellere ihtiyacınız varsa, lütfen ilk eğiticiye bakın. CSS stil sayfanızı Not Defteri'nde oluşturma adımları:

1. Boş bir pencere almak için Dosya> Not Defteri'nde Yeni'yi seçin.
2. Dosyayı
3. Sabit sürücünüzdeki my_website klasörüne gidin
4. "Farklı Kaydet": "Tüm Dosyalar" olarak değiştirin.
5. Dosyanızı "styles.css" olarak adlandırın (tırnak işaretlerini bırakın) ve Kaydet'i tıklayın.

02/10

CSS Stil Sayfasını HTML’nize Bağlayın

Web siteniz için bir stil sayfanız olduğunda, Web sayfasının kendisini ilişkilendirmeniz gerekir. Bunu yapmak için bağlantı etiketini kullanın. Aşağıdaki bağlantı etiketini pets.htm belgenizin etiketlerine yerleştirin:

10/10

Sayfa Kenar Boşluklarını Düzelt

Farklı tarayıcılar için XHTML yazarken, öğreneceğiniz bir şey, hepsinin farklı marjlara ve bunların nasıl görüntülendiğine ilişkin kurallara sahip olduğudur. Sitenizin çoğu tarayıcıda aynı göründüğünden emin olmanın en iyi yolu, kenar boşlukları gibi öğelerin tarayıcı seçimine varsayılan olarak izin vermemesidir.

Sayfalarımı sol üst köşede, metni çevreleyen fazla dolgu veya kenar boşluğu bırakmadan kullanmayı tercih ederim. İçeriği dolduracak olsam bile, kenar boşluklarını sıfıra ayarlıyorum, böylece aynı boşlukla başlıyorum. Bunu yapmak için, styles.css belgenize aşağıdakileri ekleyin:

html, vücut {
kenar boşluğu: 0px;
dolgu malzemesi: 0px;
kenarlık: 0px;
sol: 0px;
üst: 0px;
}

04/10

Sayfadaki Yazı Tipini Değiştirme

Yazı tipi genellikle bir Web sayfasında değiştirmek isteyeceğiniz ilk şeydir. Bir Web sayfasındaki varsayılan yazı tipi çirkin olabilir ve aslında Web tarayıcısının kendisidir, dolayısıyla yazı tipini tanımlamazsanız, sayfanızın nasıl görüneceğini gerçekten bilmezsiniz.

Genellikle, yazı tipini paragraflarda veya bazen tüm belgenin kendisinde değiştirirsiniz. Bu site için fontu başlık ve paragraf düzeyinde tanımlayacağız. Aşağıdakileri styles.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 boyutum olarak 1em ile başladım ve ardından başlıklarımın boyutunu ayarlamak için kullandım. H4'ten daha derin bir başlık kullanmayı beklemiyorum, ancak eğer siz de planlıyorsanız, bu stili de stilinize uyarlayabilirsiniz.

05/10

Bağlantılarınızı Daha İlginç Yapmak

Bağlantılar için varsayılan renkler, sırasıyla görünmeyen ve ziyaret edilen bağlantılar için mavi ve mor renktedir. Bu standart olsa da, sayfalarınızın renk düzenine uymayabilir, bu yüzden değiştirelim. Styles.css dosyanıza şunları ekleyin:

bir bağlantı {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
renk: # FF9900;
metin-dekorasyon: alt çizgi;
}
a: ziyaret edildi {
renk: # FFCC66;
}
a: hover {
arkaplan: #FFFFCC;
font ağırlığı: kalın;
}

Üç bağlantı stili oluşturdum, a: bağlantı varsayılan olarak, a: ziyaret edildiğinde ziyaret edildi, rengi değiştirdim ve: vurgulu. A: hover ile bağlantıyı arka plan rengini aldım ve tıklanması gereken bir bağlantı olduğunu vurgulamak için kalın kalın.

06/10

Gezinme Bölümü'nü şekillendirmek

HTML’de gezinme (id = "nav") bölümünü ilk defa koyduğumuzdan önce, ilk olarak stil uygulayalım. Ne kadar geniş olması gerektiğini belirtmeli ve sağ tarafa daha geniş bir marj koymalıyız, böylece ana metin buna karşı çıkmayacak. Ayrıca etrafına bir sınır koyuyorum.

Styles.css belgenize aşağıdaki CSS'yi ekleyin:

#nav {
genişlik: 225px;
kenar boşluğu: 15 piksel;
kenarlık: orta katı # 000000;
}
#nav li {
liste stili: yok;
}
.footer {
yazı tipi boyutu: 0,75em;
ikisini de temizle;
genişlik:% 100;
metin hizalaması: merkez;
}

Liste stili özelliği, gezinme bölümündeki listeyi mermi veya sayı içermeyecek şekilde ayarlar ve .footer, telif hakkı bölümünü bölüm içinde daha küçük ve ortalanmış olarak biçimlendirir.

07/10

Ana Bölümü Konumlandırma

Ana bölümünüzü mutlak konumlandırma ile konumlandırarak, Web sayfanızda kalmasını istediğiniz yere tam olarak kalacağından emin olabilirsiniz. Daha büyük monitörlere uyum sağlamak için 800 piksel genişliğimi yaptım, ancak daha küçük bir monitörünüz varsa, daha da dar yapmak isteyebilirsiniz.

Aşağıdakileri styles.css belgenize yerleştirin:

#ana {
genişlik: 800 piksel;
üst: 0px;
pozisyon: mutlak;
sol: 250 piksel;
}

08/10

Paragraflarınızı Şekillendirin

Yukarıdaki paragraf fontunu zaten belirlediğimden beri, her paragrafa daha iyi gözükmesini sağlamak için biraz fazladan "tekme" vermek istedim. Bunu, paragrafı sadece görüntüden daha fazla vurgulayan tepeye bir kenar koyarak koyarak yaptım.

Aşağıdakileri styles.css belgenize yerleştirin:

.üst çizgi {
kenarlık: kalın katı # FFCC00;
}

Tüm paragrafları bu şekilde tanımlamak yerine, bunu "topline" adlı bir sınıf olarak yapmaya karar verdim. Bu şekilde, eğer üst sarı çizgisi olmayan bir paragrafa sahip olmak istediğime karar verirsek, paragraf etiketinde class = "topline" ı bırakabilirim ve üst kenarlığa sahip olmaz.

09/10

Görüntülerin Şekillendirilmesi

Görüntüler genellikle etraflarında bir kenarlığa sahiptir, bu resim bir bağlantı olmadıkça her zaman görünür değildir, ancak CSS stil sayfamda kenarlığı otomatik olarak kapatan bir sınıfa sahip olmayı severim. Bu stil sayfası için "noborder" sınıfını oluşturdum ve belgedeki görüntülerin çoğu bu sınıfın bir parçası.

Bu görüntülerin diğer özel kısmı, sayfadaki konumlarıdır. Onları hizalamak için tablo kullanmadan içinde bulundukları paragrafın bir parçası olmalarını istedim. Bunu yapmanın en basit yolu şamandıra CSS özelliğini kullanmaktır.

Aşağıdakileri styles.css belgenize yerleştirin:

#main img {
yüzer: sol;
kenar boşluğu hakkı: 5px;
kenar boşluğu: 15px;
}
.sınır yok {
kenarlık: 0 piksel yok;
}

Gördüğünüz gibi, paragraflarda yanında bulunan süzülmüş metne göre parçalanmadıklarından emin olmak için resimlerde belirlenen kenar boşlukları da vardır.

10/10

Şimdi Tamamlanmış Sayfanıza Bakın

CSS'nizi kaydettikten sonra, web tarayıcınızda pets.htm sayfasını yeniden yükleyebilirsiniz. Sayfanız, bu resimde gösterilene benzer görünmelidir; resimler hizalanmış ve gezinme, sayfanın sol tarafında doğru şekilde yerleştirilmiş olmalıdır.

Bu site için tüm dahili sayfalarınız için aynı adımları izleyin. Navigasyonunuzdaki her sayfa için bir sayfaya sahip olmak istersiniz.