CSS3

CSS – prezentacja graficzna strony www

Każda reguła CSS składa się z selektora (np. kolor czcionki nagłówków) oraz deklaracji (np. niebieski). Co więcej, niezwykle przyspiesza pracę, ponieważ style (reguły opisu elementów HTML) zawarte w jednym dokumencie mogą być stosowane jednocześnie do wielu innych plików witryny. Takie rozwiązanie daje ogromną kontrolę nad wizualnym aspektem projektu, ponieważ poprzez zmianę stylów w nadrzędnym pliku kaskadowych arkuszy stylów można wprowadzić zmiany jednocześnie we wszystkich dokumentach, w których styl ten wystąpił. CSS razem z HTML i Java Script tworzą wielką trójkę języków, które pozwalają na stworzenie dynamicznej i interaktywnej strony www przez frontend developerów. Jest językiem kompatybilnym z wieloma przeglądarkami, dzięki czemu programiście nie muszą już kodować jednej witryny na wiele sposobów w zależności od typu przeglądarki.

JOB_LISTING

Dodatkowo język stylów umożliwia poprawne wyświetlanie się witryny w zależności od rozdzielczości urządzenia, na którym jest wyświetlana witryna, a zatem odpowiada za jej responsywność. Dzięki CSS można bardzo precyzyjnie określić pozycję względną i bezwzględną konkretnych elementów na stronie. Pozwala projektować bardzo efektowne i estetyczne witryny bogate w treści z wykorzystaniem minimalnej ilości kodu. Za pomocą kaskadowych arkuszy stylów można niezwykle uatrakcyjnić wygląd elementów, stosując subtelne cienie, zaokrąglenia rogów, a nawet całkowitą zmianę kształtu elementów lub też zastosować ciekawe gradienty. Język ten określa sposób zachowania się linków poprzez określony wygląd stanów: visited, active, hover czy focus. Z wykorzystaniem CSS kaskadowych arkuszy stylów można również wprowadzić ciekawą animację do statycznych elementów HTML, poprzez tworzenie płynnych przejść pomiędzy określonymi stanami.

Jednostki i wartości w CSS

W CSS istnieje wiele różnych jednostek, które pozwalają precyzyjnie określać rozmiary elementów, marginesy, odstępy i inne właściwości wizualne. Możemy podzielić je na jednostki absolutne i względne.

Jednostki absolutne to takie, które mają stałą wartość niezależnie od kontekstu. Do najczęściej używanych należą:

• px (piksele) – najpopularniejsza jednostka, określająca stałą liczbę pikseli na ekranie.
• cm, mm, in (cale) – rzadko używane jednostki drukarskie, przydatne w mediach o stałym rozmiarze.

Jednostki względne dostosowują się do innych elementów strony, co czyni je bardziej elastycznymi i przydatnymi w projektowaniu responsywnym. Przykłady:

• % (procenty) – wartość oparta na wielkości elementu nadrzędnego.
• em – jednostka zależna od rozmiaru czcionki rodzica; np. 2em to dwa razy większy tekst niż domyślny.
• rem – podobna do em, ale oparta na rozmiarze czcionki elementu html.
• vw, vh (viewport width/height) – określają szerokość i wysokość ekranu w procentach (1vw to 1% szerokości ekranu).

Dzięki różnorodności jednostek w CSS, projektanci mogą dostosowywać wygląd stron do różnych rozdzielczości i urządzeń, co jest kluczowe dla nowoczesnego, responsywnego designu.

Modele układu stron: Box Model

Model pudełkowy (Box Model) to fundamentalna koncepcja CSS, która określa sposób wyświetlania i rozmieszczania elementów na stronie. Każdy element w CSS jest traktowany jako prostokątne pudełko składające się z kilku warstw:

• Content (zawartość) – główna część elementu, w której znajduje się tekst lub inne treści.
• Padding (wewnętrzny odstęp) – przestrzeń wokół zawartości, zwiększająca rozmiar pudełka bez zmiany jego granic.
• Border (obramowanie) – linia otaczająca padding i content, może mieć różne style i grubości.
• Margin (zewnętrzny odstęp) – przestrzeń oddzielająca dany element od innych elementów na stronie.

Struktura Box Model pozwala na precyzyjną kontrolę nad rozmieszczeniem elementów. Na przykład, jeśli ustawimy szerokość elementu na 200px, a dodamy do niego 20px paddingu i 10px obramowania, jego całkowita szerokość wyniesie 260px (chyba że zastosujemy box-sizing: border-box, który zmienia sposób obliczania szerokości i wysokości).

Znajomość Box Model jest kluczowa dla każdego, kto chce efektywnie projektować układy stron w CSS. Pozwala lepiej kontrolować przestrzenie między elementami i unikać nieprzewidzianych zmian w wyglądzie strony.