Oto kilka "sztuczek" umożliwiających wyróznianie tekstu.

Cytat

Aby wstawić cytat w treść artykułu należy zastosować klasę "cytat" w paragrafie z tekstem:

<p class="cytat">Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis</p>

efekt:

Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis

Inverse Box

Aby wyróżnić zdanie za pomocą ciemnego prostokąta o ciemnym tle należy zastosować paragraf:

<p class="inverse">Quisque sit <strong>amet</strong> turpis odio</p>

efekt:

Quisque sit amet turpis odio

Inverse Box w nagłówku h3 <h3 class="inverse">

Inverse Box w nagłówku h4 <h4 class="inverse">

Inverse Box w nagłówku h5 <h5 class="inverse">

Inverse Box w nagłówku h6 <h6 class="inverse">

Inverse Box Prawy

Aby wyróżnić zdanie za pomocą ciemnego prostokąta o ciemnym tle należy zastosować paragraf:

<p class="inverse-right">Quisque sit <strong>amet</strong> turpis odio</p>

efekt:

Quisque sit amet turpis odio

Phasellus eu enim odio. Vestibulum a mattis odio. Sed pulvinar tellus elit, eu posuere justo adipiscing nec. Vestibulum adipiscing dolor ligula, nec varius lectus lacinia in. Curabitur cursus velit sit amet mauris vulputate lobortis. Duis leo libero, interdum non pharetra id, fringilla cursus magna. Ut non venenatis mauris. Donec commodo, purus sed dictum pellentesque, purus purus pellentesque risus, iaculis venenatis ipsum magna eu orci. Praesent rutrum viverra aliquet. Integer dui tellus, vehicula in velit sed, tincidunt feugiat felis. Donec a magna mattis nunc fermentum mollis. Nulla sit amet placerat justo. Cras bibendum dictum dolor at tempus. Donec quis felis tincidunt, venenatis dui sed, ornare eros. Suspendisse potenti. Integer a eleifend diam.

Inverse Box Lewy

Aby wyróżnić zdanie za pomocą ciemnego prostokąta o ciemnym tle należy zastosować paragraf:

<p class="inverse-left">Quisque sit <strong>amet</strong> turpis odio</p>

efekt:

Quisque sit amet turpis odio

Phasellus eu enim odio. Vestibulum a mattis odio. Sed pulvinar tellus elit, eu posuere justo adipiscing nec. Vestibulum adipiscing dolor ligula, nec varius lectus lacinia in. Curabitur cursus velit sit amet mauris vulputate lobortis. Duis leo libero, interdum non pharetra id, fringilla cursus magna. Ut non venenatis mauris. Donec commodo, purus sed dictum pellentesque, purus purus pellentesque risus, iaculis venenatis ipsum magna eu orci. Praesent rutrum viverra aliquet. Integer dui tellus, vehicula in velit sed, tincidunt feugiat felis. Donec a magna mattis nunc fermentum mollis. Nulla sit amet placerat justo. Cras bibendum dictum dolor at tempus. Donec quis felis tincidunt, venenatis dui sed, ornare eros. Suspendisse potenti. Integer a eleifend diam.

Podświetlenie fragmentu tekstu

<p>To jest normalny akapit tekstu, natomiast<span class="highlight-text"> ten fragment jest wyróżniony </span>poprzez kolor tła i czcionki.</p>

efekt:

To jest normalny akapit tekstu, natomiast ten fragment jest wyróżniony poprzez kolor tła i czcionki.

Blok tekstu w ramce ver. 1

Poprzez zastosowanie stylu "block1""

<p class="block1">Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.</p>

uzyskujemy:

Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.

Blok tekstu w ramce ver. 2

Poprzez zastosowanie stylu "block2""

<p class="block2">Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.</p>

uzyskujemy:

Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.

Ikonki

Tekst można uatrakcyjnić także za pomoca małych grafik - ikon, w katalogu images/Icons znajdują się różne zestawy do wykorzystania, np.:

Oczywiście zastosowanie zalezy tylko od inwencji autora.

Styl Magazynowy

Powiększenie i pogrubienie pierwszej litery akapitu uzyskujemy poprzez zastosowanie stylu "dropcap":

<p class="dropcap">Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.</p>

efekt:

Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. Suspendisse imperdiet nunc at nibh bibendum, vitae lacinia elit mollis. Donec interdum justo vitae bibendum lacinia. Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.

Wyróżnienia

Wypunktowania

Łączenie styli

<div class="block2 dropcap">Quisque sit amet turpis odio. Aenean risus est, vestibulum eget scelerisque dapibus, commodo et nisl. Suspendisse luctus eleifend lorem sodales mollis. <span class="label label-inverse">Suspendisse imperdiet nunc</span> at nibh bibendum, vitae lacinia elit mollis.<br />
<p>Donec interdum justo vitae bibendum lacinia. <img src="/images/Icons/black/stickers/24x24/attachment.png" border="0" alt="" />Fusce euismod nunc a ligula mattis viverra. Phasellus porta augue rhoncus nunc tristique elementum.</p>
<ul class="tick">
<li>Phasellus</li>
<li>Phasellus eu</li>
<li>Phasellus eu enim odio</li>
</ul>
</div>

efekt:

Tytuły artykułów

Portal student.pl umożliwia sterowanie widokiem tytułu artykułu. Aby zmienić jego treść, którą widać na stronie mozemy użyć pole dodatkowe "Alternatywny tytuł".
 W polu tym można stosować znaczniki html jak np. "<br /> :

http://www.student.pl/charytatywne/motocyklowa-podroz-stefana-gbureck-a-dla-bezdomnych-dzieci-w-brazylii

<br /> zasosowano tutaj przed słowem "dzieci".

W polu tym można wprowadzić tytuł, który znacznie będzie się różnił od tego, który widać w innych miejscach serwisu (np. w widoku kategorii) jak to ma miejsce w artykule:

http://www.student.pl/aktualnosci/zdrowie/jak-przebiegaja-zabiegi-medycyny-estetycznej

Tytuł widoczny w widoku kategorii: "Jak przebiegają zabiegi medycyny estetycznej?" natomiast w widoku artykułu: "Jak w praktyce przebiegają zabiegi medycyny estetycznej oraz późniejsza rekonwalescencja?".

Linki do treści multimedialnych, tagów itp.

W treści artykułu często istnieje konieczność linkowania do treści multimedialnych lub tagów. Możemy w takim przypadku zastosować style, które zasugerują odbiorcy rodzaj treści:

• tutaj jest link do "piosenka lub film" - <a class="music" href=....
• tutaj jest link do etykiety - <a class="folder" href=....
• tutaj jest link do video - <a class="camera" href=....
• tutaj jest link do wykres/analiza - <a class="chart" href=....
• tutaj jest link do ulubione - <a class="favorite" href=....
• tutaj jest link do audio - <a class="headphones" href=....
• tutaj jest link do kontakt - <a class="telephone" href=....
• tutaj jest link do narzędzia - <a class="tool" href=....

W przypadku gdy potrzebne będą inne ikonki prosimy o kontakt.

Lista plakatów / grafik

<ul class="imgbox">
<li>"<a href="/wiki/filmy/art-and-craft-sam-cullman-usa-2014">Art and Craft"<br /><img src="/media/k2/items/cache/5d84b9c34359206b51646334e744fc5d_XL.jpg" border="0" alt="Art and Craft" title="Art and Craft" width="900" height="1335" /></a></li>
<li>"<a href="/wiki/filmy/the-case-against-8-ben-cotner-usa-2014">The Case Against 8"<br /><img src="/media/k2/items/cache/829965d15a096584928b932718ca6178_XL.jpg" border="0" alt="The Case Against 8" title="The Case Against 8" width="900" height="1391" /></a></li>
<li>"<a href="/wiki/filmy/the-internet-is-own-boy-brian-knappenberger-usa-2014">The Internet’s Own Boy"<br /><img src="/media/k2/items/cache/4aac527af742eb53306f79e88b78c1ab_XL.jpg" border="0" alt="The Internet’s Own Boy" title="The Internet’s Own Boy" width="900" height="540" /></a></li>
<li>"<a href="/wiki/filmy/citizen-koch-carl-deal-usa-2013">Citizen Koch"<br /><img src="/media/k2/items/cache/66bd3a42835171ced4fd59594ea6d3c0_XL.jpg" border="0" alt="Citizen Koch" title="Citizen Koch" width="900" height="681" /></a></li>
</ul> 

efekt:

• "Art and Craft"
  
• "The Case Against 8"
  
• "The Internet’s Own Boy"
  
• "Citizen Koch"
  

Tabela typu "plan"

Aby zbudować tabelę wraz z nagłowkami i legendą można zastosować następujące style:

<table class="plan">
<tbody>
<tr><th colspan="6">
<h4>16 November (Sunday) - 16 listopada (niedziela)</h4>
</th></tr>
<tr><th>Time<br />(Godzina)</th><th> </th><th>Title<br />(Tytuł)</th><th>Description<br />(Opis)</th><th>Q&amp;A</th><th>Venue<br />(Miejsce)</th></tr>
<tr>
<td><p>9:45</p></td>
<td><p>D</p></td>
<td><p><strong>„Night Will Fall”</strong></p></td>
<td><a href="/wiki/filmy/night-will-fall-andre-singer-wielka-brytania-2014">/wiki/filmy/night-will-fall-andre-singer-wielka-brytania-2014</a></td>
<td><p>~11:00</p></td>
<td><p>Opera Nova</p></td>
</tr>
<tr>
<td><p>10:00</p></td>
<td><p>C</p></td>
<td><p><strong>"Wild"</strong></p></td>
<td><a href="/wiki/filmy/wild-jean-marc-vallee-usa-2014" target="_blank">/wiki/filmy/wild-jean-marc-vallee-usa-2014</a></td>
<td> </td>
<td><p>Opera Nova</p></td>
</tr>
<tr>
<td><p>23:15</p></td>
<td><p>D</p></td>
<td><p><strong>"Jorge's Paths"</strong></p></td>
<td> </td>
<td> </td>
<td>
<p>Opera Nova</p>
</td>
</tr>
<tr><th colspan="6">Caption</th></tr>
<tr class="legenda">
<td colspan="2"><span class="badge badge-warning">C</span> - Main Competition</td>
<td colspan="2"><span class="badge badge-warning">CD</span> - Cinematographers Debuts Competition</td>
<td colspan="2"><span class="badge badge-warning">D</span> - Documentary Special Screening</td>
</tr>
<tr class="legenda">
<td colspan="2"><span class="badge badge-warning">DD</span> - Directors' Debuts Competition</td>
<td colspan="2"><span class="badge badge-warning">DF</span> - Documentary Feature Competition</td>
<td colspan="2"><span class="badge badge-warning">DS</span> - Documentary Short Competition</td>
</tr>
</tbody>
</table>

Efekt:

.