Kaskadowe Arkusze Styli Css Sprawdzian Nr 1 Rozwiązanie

Kaskadowe Arkusze Styli (CSS) to język opisujący wygląd stron internetowych. Mówiąc prościej, CSS kontroluje kolory, czcionki, układ i inne elementy wizualne.

Co to znaczy "Kaskadowe"?

Słowo "kaskadowe" oznacza, że style są stosowane w określonej kolejności. Jeśli pojawią się konflikty (np. dwie reguły próbują ustawić ten sam kolor tekstu), przeglądarka używa zasad kaskady do rozstrzygnięcia, która reguła wygra. Wyobraź sobie wodospad (kaskadę) - woda spływa od góry na dół, a ostatnia woda wpływa na to, co znajduje się poniżej. Podobnie w CSS, późniejsze reguły mogą nadpisywać wcześniejsze.

Co to są "Arkusze Styli"?

"Arkusze styli" to po prostu pliki (lub sekcje w plikach HTML), w których zapisujemy reguły CSS. Te reguły mówią przeglądarce, jak ma wyglądać dany element strony. Na przykład:

Must Read

p { color: blue; }

Ta reguła mówi przeglądarce, że wszystkie akapity (<p>) mają być niebieskie.

Struktura Reguły CSS

Każda reguła CSS składa się z dwóch głównych części: selektora i deklaracji.

Kaskadowe arkusze stylów – CSS - ppt pobierz

Selektor: Wybiera element HTML, do którego chcesz zastosować style. W przykładzie powyżej, selektorem jest p (akapit). Możemy wybrać elementy po tagu (np. h1, div), klasie (np. .wazny-tekst) lub ID (np. #naglowek).
Deklaracja: Określa, jakie style mają być zastosowane. Składa się z właściwości i wartości, oddzielonych dwukropkiem (:), a całość jest zamknięta w nawiasach klamrowych ({}). W przykładzie powyżej, deklaracją jest { color: blue; }, gdzie color jest właściwością, a blue jest wartością.

Gdzie Umieszczamy CSS?

Style CSS możemy umieścić w trzech miejscach:

Inline (w linii): Bezpośrednio w tagu HTML, używając atrybutu style. Na przykład: <p style="color: red;">Ten tekst będzie czerwony.</p>. To nie jest najlepsza praktyka, bo utrudnia zarządzanie stylami.
Internal (wewnętrzny): W sekcji <head> dokumentu HTML, wewnątrz tagu <style>. Dobre dla prostych stron, ale trudne w zarządzaniu dla większych projektów.
External (zewnętrzny): W osobnym pliku z rozszerzeniem .css. To najlepsza metoda. Dołącza się go do dokumentu HTML za pomocą tagu <link> w sekcji <head>. Na przykład: <link rel="stylesheet" href="style.css">. Ułatwia organizację i ponowne wykorzystanie styli.

Podsumowanie

CSS pozwala na oddzielenie treści strony od jej wyglądu. Ułatwia to aktualizację i modyfikację wyglądu strony bez zmiany jej struktury. Dzięki zrozumieniu zasad kaskadowości, selektorów i deklaracji, możesz tworzyć piękne i responsywne strony internetowe.