CSS
CSS – Kaskadowe Arkusze Stylów
Na początek kluczowy element usługi WWW, a w zasadzie wyglądu strony, czyli CSS (Cascading Style Sheets – Kaskadowe arkusze stylów).
Jest to opis sposobu wyświetlania poszczególnych elementów: rozmiar, kolor, tło, wyrównania, …. 🙂.
Kluczowym słowem jest słowo kaskadowy 🙂.
W tym przypadku oznacza usystematyzowany, w pewnym porządku:D.
Powoduje to, że przeglądarka wie jakie wartości stylu zastosować dla konkretnego elementu działając zgodnie z logiką.
Definicja Stylu
Definicja Stylu zawiera różne parametry, kilka przykładów poniżej:
- dla tekstów: rodzaj i wielkość czcionki, kolor, rodzaj wyrównania …
- dla bloków: rozmiar, położenie, tło (kolor, ale może być również obrazek 🙂 ) …
- związane z akcję: najechanie myszką, przewijanie strony …
Logika CSS
Logika definiowania specyficznych ustawień jest prosta, możemy podać definicję dla:
- pojedynczego elementu
- typu elementu, np. paragraf, tabelka, ramka, … 🙂
- poprzez nazwę class, wpływa na wszystkie elementy, które mają przypisaną we właściwościach daną class=”nazwa”
i możemy podawać tylko te cechy stylu, które chcemy zmodyfikować 😮.
Powoduje to, iż przeglądarka dla konkretnego elementu i konkretnej cechy szuka wartości sprawdzając czy ten konkretny element ma przypisany specyficzny styl 😮.
W przypadku braku przypisania weryfikuje czy na poziomie typu lub class ma zdefiniowaną wartość 🙂.
Brak specyficznej definicji powoduje poszukiwanie jej na poziomie rodzica, kontynuując dalej dziadka, pra-rodzica, pra-pra- … 🙂.
Jeżeli poszukiwanie nie zakończy się sukcesem, bo dokument nie ma tej definicji to przeglądarka zastosuje swoje ustawienia domyślne 😛.
Błąd W CSS
Większość przeglądarek nie zareaguje na błąd w definicji lub logice – zignoruje to 😳.
Oczywiście wynik renderowania zostanie zaprezentowany użytkownikowi 🙂, ale to co zostanie wyświetlone zazwyczaj nie odpowiada temu co planował autor (programista html) 🙁.
Ostrzeżenie a nie błąd można znaleźć w zaawansowanych opcjach przeglądarki ale to już zupełnie inny temat 🙂.
Jeżeli ktoś chce się dokładniej zapoznać z możliwościami CSS proponuje odwiedzić https://www.w3schools.com/css/, jest tam również możliwość spróbowania efektów zmian poprzez opcję Try it Yourself 😀.
Można również definiować cechy wyświetlania bezpośrednio w HTML podając je jawnie dla poszczególnych elementów/bloków.
Jednakże takie podejście znacząco ogranicza elastyczność.
Przykład: zmiany koloru lub czcionki powoduje konieczność zmiany kodu w każdym punkcie zamiast tylko w jednym pliku css 😛.