18 lutego 2020

The power of CSS

Zapewne wielu z Was obiło się o uszy słowo CSS w kontekście stron internetowych. Dzisiejszy wpis będzie właśnie o kaskadowych arkuszach stylów (ang. Cascading Style Sheets), dzięki którym możecie zmieniać wygląd swojej strony bez zmian w HTML-u!

Przejdę od razu do konkretów, czyli przykładu. Weźmy pod uwagę HTML-ową listę TODO:

<div>
  <ul>
    <li>wytrzeć kurze</li>
    <li>znieść graty do piwnicy</li>
    <li>odkurzyć</li>
    <li>umyć podłogę</li>
    <li>nastawić pralkę</li>
  </ul>
</div>

Jest to prosta lista, która będzie wyglądać mniej więcej tak:

  • wytrzeć kurze
  • znieść graty do piwnicy
  • odkurzyć
  • umyć podłogę
  • nastawić pralkę

Jeśli jednak zachce nam się zmian, nie trzeba niczego modyfikować w HTML-u. Wystarczy odpowiednio "ostylować" listę.

  • wytrzeć kurze
  • znieść graty do piwnicy
  • odkurzyć
  • umyć podłogę
  • nastawić pralkę

Za pomocą prostego CSS-a uzyskaliśmy kompletnie inny wygląd listy.

<style>
  div {text-align: center;}
  ul li {
    display: inline;
    box-shadow: 0 .5rem 1rem #00ccff;
    white-space: nowrap;
    padding: 10px;
    margin: 10px;}
  ul {
    padding: 0;
    list-style-type: none;
    line-height: 60px;
    font-weight: 300;}
</style>

Kto jest spostrzegawczy, ten zauważy, że w pierwszej liście pojawiły się przecinki po każdym elemencie, a po ostatnim nawet kropka, choć w HTML-u ich nie było. Oczywiście i tu nie obyło się bez styli:

<style>
  li::after {content: ',';}
  li:last-child::after {content: '.';}
</style>

Za pomocą stylów można zmieniać nie tylko kolory, ale również położenie elementu na stronie, zachowanie elementu po najechaniu na niego myszką (tzw. hover), a nawet dodawać animacje.

Pozdrawiam i życzę odkrywania wspaniałego świata CSS!