Jak nadać stronie wygląd z arkusza egzaminacyjnego

Każdy arkusz INF.03 ma część „Styl CSS”: lista wymagań w rodzaju „nagłówki pierwszego stopnia: kolor SteelBlue, wyrównanie do środka”, „obraz: zaokrąglenie 10px”, „wiersz tabeli po najechaniu: tło LightGray”. Ten kurs uczy zamieniać takie zdania na reguły CSS.

/* wymaganie: „nagłówek h1: kolor SteelBlue, wyśrodkowany, rozmiar 30px” */
h1 {
  color: SteelBlue;
  text-align: center;
  font-size: 30px;
}

Jak korzystać z kursu

• Lekcje idą po kolei: najpierw składnia i selektory, potem kolory i tekst, model pudełkowy, a na końcu odnośniki, listy, tabele, obrazy, formularze, przejścia i strona na telefonie.
• W wielu lekcjach są dema: wybierasz deklarację z listy i od razu widzisz zmianę na stronie.
• Każda lekcja ma ćwiczenie. HTML strony jest gotowy, ty piszesz CSS. Podgląd odświeża się w trakcie pisania, a „Sprawdź” mierzy wynik w przeglądarce. Pod zadaniem możesz rozwinąć listę potrzebnych właściwości.
• Ustawianie bloków obok siebie (float, flex, grid) jest w osobnym kursie „Układ strony: float i flex”.
• Postęp i twoje szkice zapisują się w tej przeglądarce.

Reguła CSS i dołączanie stylów

Arkusz stylów to lista reguł. Reguła ma selektor, czyli to, czego dotyczy, i blok deklaracji w klamrach. Deklaracja to para właściwość i wartość, zakończona średnikiem.

h1 {                    /* selektor: wszystkie nagłówki h1 */
  color: DarkGreen;     /* deklaracja: właściwość color, wartość DarkGreen */
  text-align: center;
}

• Brak średnika między deklaracjami albo brak klamry psuje regułę i często kolejne reguły. Przeglądarka nie pokazuje błędu, styl po prostu nie działa.
• Komentarz w CSS ma postać /* … */. Zapis // z JavaScriptu tu nie działa.
• Wielkość liter w nazwach właściwości nie ma znaczenia, ale przyjęło się pisać małymi literami, ze słowami łączonymi myślnikiem: font-size, background-color.

Trzy sposoby dołączenia stylów

Selektory

Selektor mówi, do których elementów stosuje się reguła. Pięć rodzajów wystarcza do prawie każdego arkusza:

• Klasa może być na wielu elementach, a element może mieć kilka klas: class="karta wazne".
• Id jest jedno na stronie. W CSS poprzedza go #, w HTML piszesz samo id="menu".
• Spacja ma znaczenie. p.wazne to akapit z klasą wazne. p .wazne to element z klasą wazne wewnątrz akapitu.

Kaskada, waga selektora i dziedziczenie

Gdy kilka reguł ustawia tę samą właściwość tego samego elementu, wygrywa jedna. Przeglądarka rozstrzyga to w tej kolejności:

1. Waga selektora. Id jest mocniejszy od klasy, klasa od znacznika. #komunikat wygra z .info, a .info z p, niezależnie od kolejności w pliku. Selektor złożony sumuje wagi: nav .link jest mocniejszy od samego .link.
2. Kolejność. Przy równej wadze wygrywa reguła zapisana później.
3. !important wygrywa ze wszystkim. Używaj tylko w ostateczności, bo potem trudno coś zmienić.

p { color: black; }
.info { color: blue; }        /* mocniejsza od p */
#komunikat { color: red; }    /* mocniejsza od .info, nawet gdyby stała wyżej */

Dziedziczenie

Część właściwości przechodzi z rodzica na dzieci: kolor i czcionka tekstu, rozmiar, wyrównanie. Dlatego body { font-family: Verdana; } zmienia czcionkę całej strony. Nie dziedziczą się marginesy, dopełnienia, obramowania, tło ani wymiary.

Kolory

color to kolor tekstu, background-color kolor tła. Kolor można zapisać na kilka sposobów i wszystkie dają ten sam wynik:

Arkusz może podać kolor jako trzy liczby, np. „kolor tła: RGB 46, 139, 87”. Wtedy wpisujesz rgb(46, 139, 87) albo przeliczasz na #2E8B57.

Czcionki

Nazwę kroju z kilku słów zapisz w cudzysłowie: font-family: "Times New Roman", serif;. Ogólne rodziny to serif (szeryfowa), sans-serif (bezszeryfowa), monospace (o stałej szerokości), cursive.

Jednostki rozmiaru

• px: stała liczba pikseli. Najprostsza i najczęstsza w arkuszach.
• em: wielokrotność rozmiaru czcionki rodzica. 2em w akapicie o 16px to 32px.
• rem: wielokrotność rozmiaru czcionki dokumentu (zwykle 16px), niezależnie od rodzica.
• %: procent rozmiaru rodzica, jak em razy 100.

Tekst

Marginesy i dopełnienia

Każdy element to prostokąt złożony z czterech warstw: treść, dopełnienie (padding, wewnętrzny odstęp, ma kolor tła elementu), obramowanie (border) i margines (margin, zewnętrzny odstęp, zawsze przezroczysty).

Skróty z 1–4 wartościami

Obramowania, zaokrąglenia i cienie

Obramowanie ma trzy cechy: grubość, styl i kolor. Najczęściej zapisuje się je razem: border: 3px solid DarkOrange;. Bez stylu ramka się nie pokaże, bo domyślny styl to none.

Wymiary i box-sizing

• width i height ustalają szerokość i wysokość. Procent liczy się od rodzica.
• min-width, max-width, min-height, max-height ograniczają wymiar z jednej strony. max-width: 600px pozwala blokowi się zwężać, ale nie rozrasta go ponad 600px.
• height: auto przy obrazie zachowuje proporcje, gdy ustawisz samą szerokość.
• vw i vh to procent szerokości i wysokości okna: height: 100vh to cały ekran.

box-sizing

Domyślnie width to szerokość samej treści, a dopełnienie i ramka są doliczane. Blok z width: 300px i padding: 20px zajmuje 340px. Po box-sizing: border-box szerokość obejmuje dopełnienie i ramkę, więc blok ma dokładnie 300px. Wiele stron zaczyna arkusz od * { box-sizing: border-box; }.

Tło

W ćwiczeniach kursu zamiast prawdziwych zdjęć pokazuje się plansza z nazwą pliku.

Odnośniki i pseudoklasy

Pseudoklasa wybiera element w określonym stanie albo miejscu. Zapisuje się ją po dwukropku: a:hover.

a { color: DarkBlue; text-decoration: none; }
a:hover { color: Orange; text-decoration: underline; }
li:nth-child(even) { background-color: #eeeeee; }   /* paski co drugi wiersz */

Pseudoelementy

::before i ::after dodają treść przed elementem i po nim, np. .cena::after { content: " zł"; }. ::first-letter i ::first-line stylują pierwszą literę i pierwszy wiersz akapitu.

Listy

Menu z listy

Menu w arkuszach to często lista ul z odnośnikami. Żeby pozycje stanęły w rzędzie, usuń punktory i domyślne wcięcie, a pozycjom daj display: inline-block (więcej o display w lekcji „Wyświetlanie i widoczność”):

#menu { list-style-type: none; margin: 0; padding: 0; }
#menu li { display: inline-block; margin-right: 15px; }

Tabele

Tabela bez stylów nie ma żadnych linii. Typowe wymagania arkusza to ramki komórek, odstęp w komórkach, kolorowy nagłówek i paski co drugi wiersz.

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #999999; padding: 8px; }
th { background-color: SteelBlue; color: white; }
tr:nth-child(even) { background-color: #f0f0f0; }
tr:hover { background-color: LightYellow; }

• border-collapse: collapse scala sąsiednie ramki w jedną linię. Bez tego każda komórka ma osobną ramkę z odstępem.
• padding ustawia się na komórkach (td, th), nie na tabeli.
• text-align i vertical-align wyrównują zawartość komórek w poziomie i w pionie.

Obrazy

.miniatura { width: 200px; height: auto; filter: grayscale(100%); }
.miniatura:hover { filter: grayscale(0%); }

Formularze

Pola formularza mają własny, systemowy wygląd: inne czcionki i ramki w każdej przeglądarce. Arkusze często każą je ujednolicić. Kilka pól stylujesz naraz, grupując selektory.

input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  font-family: inherit;     /* czcionka strony zamiast systemowej */
}
input:focus { border-color: DodgerBlue; outline: none; }
button {
  background-color: ForestGreen;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;          /* rączka zamiast strzałki */
}
button:hover { background-color: DarkGreen; }

• input[type="text"] to selektor atrybutu: tylko pola tekstowe, bez pól wyboru i przycisków.
• cursor: pointer pokazuje rączkę nad elementem; arkusze wymagają jej czasem przy przyciskach i obrazach.

Wyświetlanie i widoczność

visibility: hidden też ukrywa element, ale zostawia puste miejsce w układzie. opacity: 0 robi element przezroczystym, ale nadal można go kliknąć.

Przejścia i transformacje

transition sprawia, że zmiana wyglądu (np. po najechaniu) dzieje się płynnie, a nie skokowo. Ustawia się ją na elemencie w zwykłym stanie, nie w :hover.

.karta {
  transition: transform 0.3s, box-shadow 0.3s;   /* co i w jakim czasie */
}
.karta:hover {
  transform: scale(1.1);                          /* powiększenie o 10% */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

Animacje z wieloma krokami robi się regułą @keyframes i właściwością animation, np. animation: mruganie 1s infinite;. Na egzaminie wystarczają zwykle przejścia.

Strona na telefonie: media queries

Reguły wewnątrz @media działają tylko przy spełnionym warunku, najczęściej przy szerokości okna. Dzięki temu ta sama strona ma inny wygląd na telefonie i na komputerze.

h1 { font-size: 24px; }
#panel { display: none; }             /* na telefonie ukryty */

@media (min-width: 768px) {           /* od 768px w górę */
  h1 { font-size: 36px; }
  #panel { display: block; }
}

• min-width: od tej szerokości w górę. Piszesz najpierw styl na telefon, potem zmiany dla większych ekranów.
• max-width: do tej szerokości. @media (max-width: 600px) działa tylko na wąskich ekranach.
• Strona potrzebuje w head znacznika <meta name="viewport" content="width=device-width, initial-scale=1">, inaczej telefon udaje szeroki ekran i warunki nie działają tak, jak się spodziewasz.

Wymagania arkusza a właściwości CSS

Arkusz opisuje wygląd słowami. Ta tabela tłumaczy najczęstsze sformułowania na CSS.

Jak pisać arkusz na egzaminie

1. Utwórz plik o nazwie z arkusza i podłącz go w head. Sprawdź jedną regułą, że działa.
2. Przepisuj wymagania po kolei, każde jako osobną regułę albo deklarację. Selektor wybieraj taki, jak w treści: „blok o id menu” to #menu, „elementy klasy cena” to .cena.
3. Po każdych kilku regułach odśwież stronę i porównaj z obrazem w arkuszu.
4. Na koniec sprawdź w narzędziach przeglądarki (F12), czy żadna deklaracja nie jest przekreślona albo oznaczona jako błędna.

Quiz

Pytania w stylu części pisemnej egzaminu. Po kliknięciu odpowiedzi zobaczysz wyjaśnienie.

Ściąga

Selektory

p znacznik · .klasa · #id · h1, h2 kilka naraz · nav a potomek · ul > li dziecko · input[type="text"] atrybut · a:hover · tr:nth-child(even) · li:first-child · .cena::after

Waga: #id > .klasa, :hover > znacznik. Przy równej wadze wygrywa reguła niżej. Dziedziczą się m.in. kolor i czcionka, nie dziedziczą marginesy, ramki i tło.

Tekst i kolor

Pudełko i tło

Elementy strony