CSS ile Bir Not Defteri Oluşturulan Web Sayfasını Biçimlendirme

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

tür = “kod”>

Sayfa Kenar Boşluklarını Düzeltin

Farklı tarayıcılar için XHTML yazarken, öğreneceğiniz bir şey, hepsinin farklı kenar boşluklarına ve bir şeyleri nasıl gösterdiklerine dair 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 şeylerin tarayıcı seçiminde varsayılan olarak ayarlanmasına izin vermemektir. Sayfaları, metni çevreleyen fazladan dolgu veya kenar boşluğu olmadan sol üst köşeden başlatmayı tercih ederiz. İçeriği dolduracak olsak bile, aynı boş sayfa ile başlamak için kenar boşluklarını sıfıra ayarlıyoruz. Bunu yapmak için, styles.css belgenize şunu ekleyin: html, body {
kenar boşluğu: 0px;
dolgu: 0px;
sınır: 0px;
sol: 0px;
üst: 0px;
}

tür = “kod”>

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 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 paragraflarda veya bazen tüm belgenin kendisinde yazı tipini değiştirirsiniz. Bu site için, yazı tipini başlık ve paragraf düzeyinde tanımlayacağız. Styles.css belgenize şunu 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;
}

type = “code”> Paragraflar ve liste öğeleri için temel boyut olarak 1em ile başladık ve sonra bunu başlıklarımın boyutunu ayarlamak için 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 Getirme

Bağlantılar için varsayılan renkler, ziyaret edilmemiş ve ziyaret edilmiş bağlantılar için sırasıyla mavi ve mordur. Bu standart olsa da sayfalarınızın renk şemasına uymayabilir, o halde değiştirelim. Styles.css dosyanıza şunu ekleyin: a: link {
yazı tipi ailesi: Arial, Helvetica, sans-serif;
renk: # FF9900;
metin süsleme: altı çizili;
}
a: ziyaret edildi {
renk: # FFCC66;
}
a: hover {
arka plan: #FFFFCC;
yazı tipi ağırlığı: kalın;
}

type = “code”> Üç bağlantı stili oluşturduk, a: bağlantı varsayılan olarak, a: ziyaret edildiğinde ziyaret edildi, rengi değiştiriyoruz ve a: hover. A: hover ile bir bağlantıya sahibiz bir arka plan rengi alır ve tıklanacak bir bağlantı olduğunu vurgulamak için kalın olur.

Gezinme Bölümünün Stilini Belirleme

HTML’de gezinti (id = “nav”) bölümünü ilk sıraya koyduğumuz için, önce ona stil verelim. Ne kadar geniş olması gerektiğini belirtmeli ve sağ tarafa daha geniş bir kenar boşluğu koymalıyız, böylece ana metin ona karşı çıkmayacaktır. biz de etrafına bir sınır koyuyoruz. Şu CSS’yi styles.css belgenize ekleyin: #nav {
genişlik: 225px;
sağ kenar boşluğu: 15px;
kenarlık: orta düz # 000000;
}
#nav li {
liste stili: yok;
}
.footer {
yazı tipi boyutu: .75em;
ikisini de temizle;
genişlik:% 100;
metin hizalama: merkez;
}

type = “code”> List-style özelliği, gezinme bölümünün içindeki listeyi madde işareti veya numara içermeyecek şekilde ayarlar ve .footer, telif hakkı bölümünü bölüm içinde daha küçük ve ortalanmış olacak şekilde biçimlendirir.

Ana Bölümü Konumlandırma

Ana bölümünüzü mutlak konumlandırma ile konumlandırarak, tam olarak web sayfanızda kalmasını istediğiniz yerde kalacağından emin olabilirsiniz. Daha büyük monitörleri yerleştirmek için 800 piksel genişliğinde yaptık, ancak daha küçük bir monitörünüz varsa, bunu daha dar yapmak isteyebilirsiniz. Şunu styles.css belgenize yerleştirin: #main {
genişlik: 800px;
üst: 0px;
konum: mutlak;
sol: 250 piksel;
}

tür = “kod”>

Paragraflarınızın Stilini Ayarlama

Yukarıda paragraf yazı tipini zaten ayarladığım için, her paragrafa daha iyi göze çarpması için biraz daha “vuruş” vermek istedim. Bunu, üst kısma yalnızca görüntüden çok paragrafı vurgulayan bir kenarlık koyarak yaptım. Şunu styles.css belgenize yerleştirin: .topline {
border-top: kalın düz # FFCC00;
}

type = “code”> Tüm paragrafları bu şekilde tanımlamak yerine “topline” adlı bir sınıf olarak yapmaya karar verdik. Bu şekilde, üstte sarı çizgi olmayan bir paragrafa sahip olmak istediğimize karar verirsek, paragraf etiketinde class = “topline” seçeneğini bırakabiliriz ve üst kenarlığı olmayacaktır.

Görüntüleri Stilize Etme

Görsellerin etrafında genellikle bir kenarlık vardır, bu görüntü bir bağlantı olmadığı sürece her zaman görünmez, ancak CSS stil sayfasında kenarlığı otomatik olarak kapatan bir sınıfa sahip olmak isteriz. Bu stil sayfası için “noborder” sınıfını oluşturduk ve belgedeki resimlerin çoğu bu sınıfın bir parçasıdır. Bu görsellerin diğer özel kısmı 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. Şunu styles.css belgenize yerleştirin: #main img {
şamandıra: sol;
sağ kenar boşluğu: 5px;
kenar boşluğu alt: 15px;
}
.sınır yok {
border: 0px yok;
}

type = “code”> Gördüğünüz gibi, paragraflarda yanlarında bulunan kayan metne karşı parçalanmadıklarından emin olmak için görüntüler üzerinde ayarlanmış kenar boşluğu özellikleri de vardır.

Şimdi Tamamlanmış Sayfanıza Bakın

CSS’nizi kaydettikten sonra, Pets.htm sayfasını Web tarayıcınızda yeniden yükleyebilirsiniz. Sayfanız, resimler hizalanmış ve gezinme bölümü sayfanın sol tarafına doğru şekilde yerleştirilmiş olarak bu resimde gösterilene benzer görünmelidir. Bu site için tüm dahili sayfalarınız için aynı adımları izleyin. Navigasyonunuzdaki her sayfa için bir sayfa olmasını istiyorsunuz.

Bu makaleden alıntı yapın

Biçim mla apa chicago Alıntıınız

Kyrnin, Jennifer. “CSS ile Bir Not Defteri Oluşturulan Web Sayfasını Biçimlendirme.” ThoughtCo, Mayıs. 14, 2021, thinkco.com/css-and-notepad-created-web-page-3466582.
Kyrnin, Jennifer. (2021, 14 Mayıs). Bir Not Defteri Oluşturulan Web Sayfasını CSS ile Biçimlendirme. Https://www.thoughtco.com/css-and-notepad-created-web-page-3466582 adresinden erişildi
Kyrnin, Jennifer. “CSS ile Bir Not Defteri Oluşturulan Web Sayfasını Biçimlendirme.” ThoughtCo. https://www.thoughtco.com/css-and-notepad-created-web-page-3466582 (18 Mayıs 2021’de erişildi).

alıntı kopyala