Kod CSS

Mamy nadzieję, że po lekturze ostatnich rozdziałów język HTML stał się Wam bliski. Teraz pora na zaznajomienie się z CSS-em, dzięki któremu wreszcie będziecie mogli nadać swojej stronie wymarzony wygląd.

Przypomnijmy sobie, jak wygląda składnia języka CSS:

selektor {
  właściwość: wartość;
}

Za pomocą selektorów wybieramy elementy strony, którym chcemy nadać określony wygląd. Na przykład:

p {
  color: blue;
}

W powyższy sposób ustawiamy niebieski kolor tekstu dla wszystkich akapitów na stronie. Z tego przykładu łatwo wysnuć wniosek, że za pomocą CSS-a możemy wybierać elementy podając nazwy znaczników. Nie jest to jednak jedyny sposób. Zapoznajmy się z kilkoma podstawowymi rodzajami selektorów CSS.

Podstawowe selektory

Elementy na stronie można wybierać na bardzo różne sposoby. W tym rodziale poznamy podstawowe i najczęściej używane selektory CSS, czyli:

nazwę tagu (tagname),
klasę (.classname),
ID (#idname),
atrybut ([attr=value]).

Selektor wybierający element na podstawie tagu już przed chwilą widzieliśmy. Patrząc na selektory ID oraz atrybutu zapewne zaczyna już coś Wam świtać. Oznacza to, że możemy wybierać elementy również bazując na wartościach ich atrybutów id oraz obecności innych atrybutów. Jedyny rodzaj, który pewnie wydaje się w tej chwili tajemniczy to klasa.

Klasa

Przyjrzyjmy się przykładowemu elementowi strony:

<input type="email" id="myEmail" class="awwwesome-input">

Obok znanych już Wam atrybutów type oraz id pojawił się nowy: class. Jest on bardzo ważny w kontekście stylowania.

W zasadzie jedynym celem atrybutu class jest nadanie naszemu elementowi identyfikatora, który będzie służył jako selektor. Pewnie pomyślicie teraz "ale przecież on ma już identyfikator id!". Słusznie, jednak wartość atrybutu class nie musi być unikalna w zakresie dokumentu. Tę samą wartość możemy nadać więcej niż jednemu elementowi, nie muszą też być one tego samego rodzaju.

<body>
  <h1 class="awwwesome">Tytuł stronyh1>

  <p class="awwwesome">Jestem paragrafem tekstu. Nadano mi atrybut class, aby umożliwić stylowanie.p>
  <p>Jestem paragrafem tekstu.p>

  <form name="myForm">
    <label for="name">Twoje imię:label>
    <input id="name" type="text" class="awwwesome">
  form>
body>

Nadajmy tekstowi każdego elementu z powyższego przykładu posiadającego klasę awwwesome kolor zielony:

.awwwesome {
  color: green;
}

Tytuł strony

Jestem paragrafem tekstu. Nadano mi atrybut class, aby umożliwić stylowanie.

Jestem paragrafem tekstu.

Twoje imię:

ID

Wróćmy jeszcze na chwilę do elementu z naszego poprzedniego przykładu:

<input type="email" id="myEmail" class="awwwesome-input">

Nadajmy tekstowi w naszej kontrolce kolor czerwony, odnosząc się do niego po id. Możemy to zrobić w ten sposób:

Przypomnijmy, że w jednym dokumencie wartości atrybutu id powinny być unikalne. W związku z tym style zawarte wewnątrz tego selektora nie są zbyt reużywalne – możemy je zastosować tylko dla jednego, konkretnego elementu na stronie.

Important::Ważne
Choć stylowanie po atrybucie id jest możliwe, od dawna jest uważane za złą praktykę.

Atrybut

Stylować można również elementy zawierające konkretny atrybut. Dobrym przykładem jest np. tag . W tym wypadku deklaracja CSS będzie dotyczyła kontrolek input typu text.

input[type="text"] {
  border: 2px solid blue;
}

W wyniku powyższego kodu do kontrolki zostanie dodana ramka o grubości 2px i kolorze niebieskim.

Warto tutaj dodać, że zapis border: 2px solid blue; jest zapisem skrótowym. Właściwości ramki możemy zdefiniować także osobno:

border-width: 2px;
border-style: solid;
border-color: blue;

Podstawowe właściwości CSS i ich wartości

CSS umożliwia przypisanie do HTML-owych elementów całej palety różnych właściwości: od koloru tekstu, tła, przez zastosowanie dowolnego kroju pisma, dodania cieniowania, gradientu, aż do definiowania pozycji. W tym rozdziale zajmiemy się tymi najbardziej podstawowymi. Inne poznamy na kolejnych zajęciach. Wszystkich chętnych, którzy już teraz chcą zagłębić się w temacie CSS-owych właściwości, zapraszamy na stronę QuackIt.com, choć podobnych źródeł w tym temacie znajdziecie jeszcze więcej.

Kolorowanie tekstu (`color`)

Służy nam do tego właściwość color. Najczęściej wartości kolorów definiuje się w kodzie heksadecymalnym (hex), czyli szestnastkowym z charakterystycznym znakiem #. Kody te pobiera się z tzw. color pickerów, np. na stronie HTMLColorCodes.com, w programach graficznych lub innych narzędziach. Jeśli zainteresowaliście się kodem heksadecymalnym, więcej do poczytania na Wikipedii.

W CSS istnieją też predefiniowane kolory które możemy przypisać do elementów po prostu podając ich nazwę, np. color: blue; lub color: salmon;. Poza kodem heksadecymalnym i predefiniowanymi nazwami, możemy także przypisywać kolory poprzez zapis rgb (kanały red, green oraz blue), hsl (hue – barwa, saturation – nasycenie, lightness – jasność) czy nawet rgba i hsla (z uwzględnionym kanałem alfa, czyli kanałem odpowiadającym za stopień przezroczystości).

p {
  color: #f14b5c ; /* kolor pomarańczowy */
  color: rgb(241, 75, 92); /* ten sam kolor w zapisie rgb */
}

To jest akapit o kolorze pomarańczowym.

Important::Ważne
W CSS-owych kolorach występuje również wartość transparent, czyli przezroczysty.

Kolorowanie tła (`background-color`)

Służy do tego właściwość background-color, np.:

p {
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}

To jest paragraf o kolorze pomarańczowym na jasnoróżowym tle.

Important::Ważne
Zauważyliście już z pewnością, że wewnątrz kodu danego selektora możemy podać wartości więcej niż jednej właściwości. Pamiętajcie o tym, aby każdą linijkę kodu z deklaracją właściwości kończyć średnikiem – ;.

/* deklaracja poprawna */ .good { color: red; border: 1px solid blue; }

>
> ```css
/* deklaracja niepoprawna */
.bad {
  color: red
  border: 1px solid blue
}

Niedomknięcie linii średnikiem spowoduje błąd w interpretacji arkusza stylów i w takiej sytuacji przeglądarka zignoruje źle zapisane deklaracje.
Żeby uniknąć sytuacji, kiedy łamiecie sobie głowę zastanawiając się "czemu mój kod nie działa?", bądźcie bardzo skrupulatni w domykaniu linii średnikami!

Obramowanie (`border`)

Za obramowanie odpowiada właściwość border, której przypisać możemy grubość, rodzaj/styl linii (przerywana, ciągła, kropkowana…) i kolor. Przy nadawaniu wartości powinna być zachowana powyższa kolejność, czyli: grubość, styl, kolor:

 border: 2px solid #f14b5c;

Dostępne style linii to m.in.: solid (ciągła), dotted (kropkowana), dashed (przerywana) czy double (podwójna).

p {
  border: 2px solid #f14b5c;
  color: #f14b5c; /* kolor pomarańczowy */
  background-color: #FFE7EC; /* kolor jasnoróżowy */
}