CSS i publikacja strony internetowej

1.CSS (kaskadowe arkusze stylów)

Język opisu wyglądu dokumentu HTML: kolorów, czcionek, odstępów, rozmiarów i układu elementów. Oddziela wygląd strony od jej treści i struktury, które opisuje HTML.

2.Budowa reguły CSS

Reguła składa się z selektora i bloku deklaracji w nawiasach klamrowych. Każda deklaracja to para właściwość: wartość zakończona średnikiem, np. h1 { color: navy; font-size: 32px; }. Komentarz zapisuje się między /* a */.

3.Styl w atrybucie style (styl wpisany)

Deklaracje wpisane bezpośrednio w znacznik, np. <p style="color: red;">Uwaga</p>. Działają tylko na ten jeden element i mają pierwszeństwo przed regułami z arkuszy, ale mieszają wygląd z treścią, więc stosuje się je rzadko.

4.Wewnętrzny arkusz stylów (znacznik <style>)

Reguły CSS zapisane w znaczniku <style> w sekcji <head> dokumentu, np. <style> p { color: gray; } </style>. Działają na całą tę jedną stronę.

5.Zewnętrzny arkusz stylów

Osobny plik z rozszerzeniem .css, dołączany w sekcji <head> znacznikiem <link rel="stylesheet" href="style.css">. Plik zawiera same reguły CSS, bez znaczników HTML.

6.Zalety zewnętrznego arkusza stylów

Jeden plik CSS może obsługiwać wszystkie strony serwisu, więc zmiana w nim zmienia wygląd całej witryny naraz. Kod HTML jest krótszy i czytelniejszy, a przeglądarka może zapamiętać arkusz i nie pobierać go przy każdej stronie.

7.Selektor znacznika (typu)

Wybiera wszystkie elementy danego rodzaju, np. p { line-height: 1.5; } działa na każdy akapit na stronie.

8.Selektor klasy

Zaczyna się od kropki i wybiera elementy z atrybutem class o tej nazwie, np. .ostrzezenie { color: red; } działa na <p class="ostrzezenie">. Tę samą klasę może mieć wiele elementów, a element może mieć kilka klas.

9.Selektor identyfikatora

Zaczyna się od znaku # i wybiera jeden element z atrybutem id o tej nazwie, np. #menu { width: 200px; } działa na <nav id="menu">. Dany identyfikator może wystąpić na stronie tylko raz.

10.Selektor potomka

Dwa selektory oddzielone spacją wybierają elementy leżące wewnątrz innego elementu na dowolnym poziomie zagnieżdżenia, np. nav a { color: white; } działa tylko na odnośniki w nawigacji, a nie na pozostałe odnośniki strony.

11.Grupowanie selektorów

Selektory oddzielone przecinkami dostają te same deklaracje, np. h1, h2, h3 { font-family: Arial, sans-serif; }. Zastępuje to kilka osobnych reguł o tej samej treści.

12.Pseudoklasa :hover

Dopisana do selektora po dwukropku wybiera element wtedy, gdy wskaźnik myszy znajduje się nad nim, np. a:hover { color: orange; } zmienia kolor odnośnika po najechaniu kursorem.

13.Kaskadowość stylów

Sposób rozstrzygania, która reguła działa, gdy kilka reguł ustawia tę samą właściwość tego samego elementu. Decyduje najpierw ważność (deklaracja z !important), potem specyficzność selektora, a przy równej specyficzności - kolejność: wygrywa reguła zapisana później.

14.Specyficzność selektora

Siła selektora przy konflikcie reguł. Od najsilniejszego: styl w atrybucie style, selektor identyfikatora (#), selektor klasy lub pseudoklasy (., :hover), selektor znacznika. Np. reguła .wazne wygrywa z regułą p dla <p class="wazne">, niezależnie od kolejności.

15.Dziedziczenie w CSS

Niektóre właściwości ustawione dla elementu przechodzą na elementy w nim zawarte, np. color, font-family, font-size, text-align. Nie dziedziczą się m.in. margin, padding, border, width i height. Dlatego body { font-family: Verdana; } zmienia czcionkę całej strony.

16.Właściwości color i background-color

color ustawia kolor tekstu elementu, a background-color - kolor tła, np. body { color: #333333; background-color: white; }. Tekst musi mieć wyraźny kontrast z tłem, żeby był czytelny.

17.Sposoby zapisu kolorów w CSS

Nazwą angielską (red, navy), szesnastkowo #RRGGBB, gdzie każda para cyfr od 00 do FF oznacza ilość czerwieni, zieleni i niebieskiego (np. #FF0000), albo funkcją rgb() z wartościami od 0 do 255 (np. rgb(255, 0, 0)). Te trzy przykłady to ten sam czerwony.

18.Właściwość font-family

Ustala krój czcionki jako listę po przecinkach: przeglądarka użyje pierwszego kroju, który ma. Na końcu podaje się rodzinę ogólną, np. font-family: "Times New Roman", Georgia, serif;. Nazwę ze spacjami bierze się w cudzysłów.

19.Właściwości font-size i font-weight

font-size ustala wielkość tekstu, np. font-size: 18px;. font-weight ustala grubość: normal (to samo co 400) albo bold (to samo co 700).

20.Właściwość text-align

Wyrównuje tekst w poziomie wewnątrz elementu blokowego: left (do lewej), right (do prawej), center (do środka) albo justify (do obu krawędzi), np. h1 { text-align: center; }.

21.Jednostki px i %

px (piksel) to jednostka bezwzględna - rozmiar nie zależy od innych elementów. % to jednostka względna: np. width: 50%; to połowa szerokości elementu nadrzędnego, a font-size: 150%; to półtora rozmiaru czcionki rodzica.

22.Jednostki em i rem

Jednostki względne zależne od wielkości czcionki. 1em to rozmiar czcionki elementu (przy font-size - rodzica), więc w zagnieżdżonych elementach wartości się mnożą. 1rem to rozmiar czcionki elementu głównego html, w przeglądarkach domyślnie zwykle 16px, więc 1.5rem to wtedy 24px.

23.Model pudełkowy (box model)

Każdy element strony to prostokąt złożony z czterech warstw od środka: treść (content), wypełnienie (padding), obramowanie (border) i margines zewnętrzny (margin). Tło elementu sięga pod treść, padding i obramowanie, ale nie pod margines.

24.padding a margin

padding to wewnętrzny odstęp między treścią a obramowaniem i ma kolor tła elementu. margin to zewnętrzny odstęp między obramowaniem a sąsiednimi elementami i jest zawsze przezroczysty.

25.Skrócony zapis margin i padding

Jedna wartość działa na wszystkie boki. Dwie wartości: pierwsza - góra i dół, druga - lewo i prawo, np. margin: 10px 20px;. Cztery wartości podaje się zgodnie z ruchem wskazówek zegara: góra, prawo, dół, lewo. margin: 0 auto; wyśrodkowuje blok o ustalonej szerokości.

26.Skrót border: grubość, styl i kolor

Skrót ustawiający obramowanie: grubość, styl i kolor, np. border: 2px solid black;. Styl to m.in. solid (ciągła), dashed (kreskowana), dotted (kropkowana) albo none (brak). Bez stylu obramowanie się nie pojawi.

27.Szerokość widocznego pudełka (width, padding, border)

width i height ustalają domyślnie rozmiar samej treści. Szerokość widocznego pudełka to width + lewy i prawy padding + lewy i prawy border, np. width: 200px; padding: 10px; border: 2px solid; daje 224px. Margines dodatkowo zwiększa zajmowane miejsce.

28.display: block, inline i none

Określa sposób wyświetlania elementu: block - zaczyna nową linię i zajmuje całą szerokość (np. p, div), inline - stoi w linii tekstu i ignoruje width oraz height (np. a, span), inline-block - w linii, ale z rozmiarami, none - element znika i nie zajmuje miejsca, flex - kontener układu elastycznego.

29.Układ flex (Flexbox)

Kontener z display: flex; ustawia swoje bezpośrednie dzieci domyślnie obok siebie w wierszu. justify-content rozmieszcza je wzdłuż osi głównej (np. center, space-between), align-items wyrównuje w poprzek osi, a flex-wrap: wrap pozwala przenosić je do nowego wiersza.

30.Reguła @media (max-width) i strona responsywna

Strona responsywna dopasowuje układ do szerokości ekranu. Reguła @media (max-width: 600px) { … } stosuje zawarte w niej style tylko na ekranach o szerokości do 600px, np. ustawia menu w kolumnie. Potrzebny jest też znacznik <meta name="viewport" content="width=device-width, initial-scale=1">.

31.Domena internetowa

Nazwa, pod którą strona jest dostępna w internecie, np. mojaszkola.pl. Rejestruje się ją u rejestratora na określony czas. System DNS tłumaczy nazwę domeny na adres IP serwera, na którym leżą pliki strony.

32.Hosting i serwer WWW

Hosting to usługa udostępnienia miejsca na serwerze stale podłączonym do internetu, na którym umieszcza się pliki strony. Serwer WWW to program na tym komputerze, który na żądanie przeglądarki wysyła jej pliki strony.

33.FTP i menedżer plików

FTP to protokół przesyłania plików między komputerem a serwerem. W programie zwanym klientem FTP podaje się adres serwera, login i hasło. Zwykłe FTP przesyła hasło bez szyfrowania, dlatego lepiej używać SFTP albo FTPS. Pliki można też wgrać przez menedżer plików w panelu hostingu w przeglądarce.

34.Przygotowanie plików strony do publikacji

Strona główna ma zwykle nazwę index.html - serwer wysyła ją, gdy w adresie podano tylko domenę lub katalog. Odnośniki i obrazy powinny mieć ścieżki względne, np. img/logo.png, a nie ścieżki z dysku, np. C:/Users/…. Nazwy plików najlepiej pisać małymi literami, bez spacji i polskich znaków.

35.Adres URL

Jednolity adres zasobu w internecie. Składa się z protokołu, nazwy domeny i ścieżki do zasobu, np. w adresie https://www.mojaszkola.pl/galeria/index.html protokół to https, domena to www.mojaszkola.pl, a ścieżka to /galeria/index.html.

36.Protokół HTTPS

Szyfrowana wersja protokołu HTTP. Dane między przeglądarką a serwerem są szyfrowane, a certyfikat SSL/TLS potwierdza tożsamość serwera. HTTPS jest potrzebny zwłaszcza tam, gdzie przesyła się hasła i dane osobowe.