Style class

Стиловете могат да се комбинират с атрибутите CLASS и ID.

  • Деклариране на стилове, чрез класове:
    Както вече видяхте в предишния урок, стиловете могат да се прилагат за почти всеки HTML елемент. Да кажем обаче, че искате да направите половината текст на страницата червен, а другата половина – син. Ето един пример, какво можем да направим с наученото дотук:

 <HEAD>
<STYLE>
<!– DIV { color: red }P { color: blue } –>
</STYLE>
</HEAD>
<DIV>Червен текст.</DIV> 
<BR>
<BR>
<P>Син текст.</P> 


Червен текст.
Син текст.

  • И така, постигнахме желания ефект. Но ако искате, например, на страницата да има и зелен, и оранжев цвят? Ще трябва да зададете стил за четири HTML елемента, което едва ли е много удобно. По-простият начин е да използвате класове. Вижте долният пример:

<HEAD>
<STYLE>
<!– .red { color: red }.blue { color: blue }–>
</STYLE>
</HEAD>
<P>Червен текст. </P>
<BR>
<BR>
<P class=“blue“>Син текст.</P>

  • Какво направихме? Създадохме два класа – „red“ и „blue“ – и им зададохме стил. След това указахме, елементът <P> веднъж да използва стила „red“ и после стила „blue“. Това е изключително удобно, защото може да използвате няколко различни класове с един и същи HTML елемент.
  • Класовете се задават в <STYLE></STYLE> елемента, в началото на страницата и се „извикват“ като се прибави атрибута CLASS към съответния HTML елемент. Например:

<P>Червен текст. </P>
<P>Син текст. </P>
<P>Син текст. </P>
<DIV>Син текст. </DIV>
<SPAN>Син текст.</SPAN>
Обърнете внимание на следния ред:
.red { color: red }
Класовете се задават с точка – . – последвана от името на класа. Например: .red; .blue, .blabla и тн.

 

Вашият коментар