A H2 elem színének megváltoztatása

A kódolás során gyakran sokféle megoldás létezik egy adott problémára. Ez különösen igaz egy HTML elem stílusának kialakításakor.

Az egyik legkönnyebben változtatható dolog a szöveg színe. De néha úgy tűnik, hogy semmi, amit megpróbálsz, nem működik:

 h2 .red-text { color: red; }  

CatPhotoApp

Tehát hogyan lehet megváltoztatni a H2 elem színét pirosra?

1. lehetőség: Inline CSS

Az egyik mód az inline CSS használata lenne az elem közvetlen stílusának megtervezéséhez.

A többi módszerhez hasonlóan a formázás is fontos. Vessen egy pillantást a fenti kódra:

CatPhotoApp

A belső stílus használatához ne felejtse el használni az styleattribútumot, és a tulajdonságokat és az értékeket dupla idézőjelekbe csomagolja ("):

CatPhotoApp

2. lehetőség: CSS-választók használata

Az inline stílus használata helyett elválaszthatja a HTML-t vagy az oldal struktúráját és tartalmát a stílustól vagy a CSS-től.

Először is, szabaduljon meg a belső CSS-től:

 h2 .red-text { color: red; }  

CatPhotoApp

De óvatosnak kell lennie a használt CSS-választóval kapcsolatban. Vessen egy pillantást az elemre:

h2 .red-text { color: red; }

Ha van szóköz, a választó h2 .red-textazt mondja a böngészőnek, hogy célozza meg az elemet azzal az osztállyal, red-textamelynek gyermeke h2. A H2 elemnek azonban nincs gyermeke - maga a H2 elem stílusát próbálja meg stilizálni.

Ennek kijavításához távolítsa el a helyet:

h2.red-text { color: red; }

Vagy csak red-textközvetlenül az osztályt célozza meg :

.red-text { color: red; }