HTML ve CSS kullanarak renkli metin nasıl vurgulanır
Bir web sayfasındaki metnin vurgulanması, önemli bilgilerin hemen okuyucunun dikkatine sunulmasına yardımcı olur. Örneğin, bu metin sarı renkle vurgulanmıştır ve muhtemelen ilk gözünüze çarptı. Metni vurgulamanın birkaç yöntemi vardır. Devam etmek için aşağıdaki listeden bir yöntem seçin ve talimatları izleyin.
HTML5 etiketini kullanarak vurgulayın
Bir HTML5 sayfası üzerinde çalışıyorsanız, etiketi metni hızlı bir şekilde vurgulayabilir. Aşağıda işaret etiketinin nasıl kullanılacağına ve sonucuna bir örnek verilmiştir. Tarayıcınız etiketini destekliyorsa, “vurgulanan metin” sarı bir arka plana sahip olmalıdır.
Örnek kod
Here is an example of <mark>highlighted text</mark> using the <mark> tag.
Örnek sonuç
İşte bir örnek vurgulanan metin etiketini kullanarak.
Metni yalnızca HTML koduyla vurgulayın
Metni HTML koduyla vurgulamak ve tüm tarayıcıları desteklemek için, HTML etiketini kullanarak aşağıdaki örnekte gösterildiği gibi arka plan rengi stilini ayarlayın.
Örnek kod
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>
Örnek sonuç
Bu metin sarı renkle vurgulanmış metindir.
Yukarıdaki örnekte, HTML etiketinin, sarı olan #FFFF00 arka plan rengi kodu vardır. Bu durumda, renk kodu veya bu konuyla ilgili başka herhangi bir renk adı yerine “sarı” kelimesi kullanılabilir.
Aynı kodla, bir paragraf içinde bir veya daha fazla kelimeyi vurgulayarak dikkat çekmek metnin belirli bir bölümüne
Metni CSS ve HTML ile vurgulayın
Ayrıca aşağıdaki örnekte gösterildiği gibi bir CSS sınıfı oluşturabilir ve “background-color” niteliğini ayarlayabilirsiniz.
Örnek kod
<style> body { background-color:blue; } .highlightme { background-color:#FFFF00; } p { background-color:#FFFFFF; } </style>
Yukarıdaki CSS kodunda tanımlanan üç öğe vardır. İlk olarak, gövde arka plan rengi mavi olarak ayarlanır, ikincisi, sarı bir arka plana sahip “highlightme” adlı yeni bir sınıf ve son olarak, paragraf etiketi beyaz bir arka plana sahiptir.
Metninizi vurgulamak için “highlightme” sınıfını kullanmak istiyorsanız, HTML’nizde CSS sınıfına başvuran bir etiketi oluşturabilirsiniz.
Örnek kod
<span class="highlightme">test</span>
Tam bir paragraf nasıl vurgulanır
Aşağıda gösterildiği gibi tam bir paragrafı vurgulamak istiyorsanız, yukarıda bahsedilen CSS sınıfı veya stil sınıfı bir paragraf etiketine de uygulanabilir.
Örnek kod
<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>
Örnek sonuç
Bu metin paragrafının tamamı sarı renkle vurgulanmıştır.