HTML ve CSS kullanarak renkli metin nasıl vurgulanır

0
15

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 &lt;mark&gt; 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here