Przeczytaj

Identyfikatory i klasy

Identyfikatory i klasy pozwalają na odróżnienie od siebie poszczególnych elementów html i nadanie im stylów. Atrybut id może być użyty tylko raz na stronie, ale już taką samą klasę może mieć kilka elementów.

Przykład użycia identyfikatorów i klas:

Linia 1. otwórz nawias ostrokątny wykrzyknik minus minus section4 minus minus zamknij nawias ostrokątny. Linia 2. otwórz nawias ostrokątny div class znak równości cudzysłów wrapper wrapper minus minus wide cudzysłów zamknij nawias ostrokątny. Linia 3. otwórz nawias ostrokątny div id znak równości cudzysłów part1 cudzysłów zamknij nawias ostrokątny. Linia 4. otwórz nawias ostrokątny div class znak równości cudzysłów inside center cudzysłów zamknij nawias ostrokątny. Linia 5. otwórz nawias ostrokątny p zamknij nawias ostrokątny. Linia 6. Lorem ipsum dolor sit amet przecinek consectetur adipiscing elit kropka Vivamus ut dignissim tortor przecinek in efficitur risus kropka Praesent. Linia 7. ultrices felis mauris przecinek ac sagittis ante condimentum id kropka Sed venenatis non eros un molestine kropka Nam placerat dui urna przecinek non. Linia 8. consectetur tellus ullamcorper eu kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny Nullam tempor massa non massa consequat przecinek ut mattis ex maximus kropka Maecenas bibendum erat. Linia 9. in est semper condimentum kropka Vestibulum id ligula arcu kropka Morbi placerat przecinek ante in interdum dictum przecinek est sem aliquam augue przecinek. Linia 10. vel congue metus metus nec urna kropka Proin venenatis cursus ornare kropka. Linia 11. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 12. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 13. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 14. otwórz nawias ostrokątny div id znak równości cudzysłów part2 cudzysłów zamknij nawias ostrokątny. Linia 15. otwórz nawias ostrokątny div class znak równości cudzysłów inside right minus side cudzysłów zamknij nawias ostrokątny. Linia 16. otwórz nawias ostrokątny p zamknij nawias ostrokątny. Linia 17. Donec suscipit elit blandit cursus convallis kropka Morbi fringilla massa sed nuc gravida iaculis kropka Praesent eget nisl a lorem luctus. Linia 18. sollicitudin kropka Phasellus ac metus dui kropka Etiam sit amet rhoncus sapien kropka Ut id augue id nisi blandit accumsan kropka Fusce aliquet urna nec. Linia 19. rhoncus pretium kropka Praesent tristique ante eget ipsum bibendum przecinek a pharatera dui elementum kropka Mauris eget pulvinar sapien kropka Suspendisse. Linia 20. eget quam est kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny In fringilla porttitor erat ec imperdiet kropka Cras consequat vel mauris non aliquam kropka Proin nec massa tristique neque. Linia 21. ornare porttitor ut et augue kropka Sed enim lacus przecinek dictum a sapien vitae przecinek imperdiet semper nunc kropka Curabitur retrum faucibus falis eu. Linia 22. luctus kropka Quisque libero dui przecinek feugiat eget rhoncus sit amet przecinek ornare ac nibh kropka. Linia 23. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 24. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 25. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 26. otwórz nawias ostrokątny div id znak równości cudzysłów part3 cudzysłów zamknij nawias ostrokątny. Linia 27. otwórz nawias ostrokątny div class znak równości cudzysłów inside left minus side cudzysłów zamknij nawias ostrokątny. Linia 28. otwórz nawias ostrokątny p zamknij nawias ostrokątny. Linia 29. Proin vestibulum velit venenatis congue tincidunt kropka Proin dapibus condimentum hendrarit kropka Vivamus rhoncus vestibulum. Linia 30. sodales kropka Donec odio eros przecinek ultricies sed tortor non przecinek faucibus cursus dolor kropka Duis ac cursus urna przecinek id varius dui kropka Nulla et. Linia 31. facilisis orci kropka Suspendisse consectetur est id facilisis feugiat kropka Cras finibus magna in neque pretium hendrerit ac quis. Linia 32. elite kropka otwórz nawias ostrokątny br zamknij nawias ostrokątny otwórz nawias ostrokątny br zamknij nawias ostrokątny Cras lacinia purus ut lorem dignissim tincidunt kropka Ut non arcu quis nulla consequat lobortis kropka Fusce egestas quis. Linia 33. tortor et scelerisque kropka Integer fermentum lectus eu sodales consectetur kropka Phasellus sit amet nisl non lorem pelentesque. Linia 34. pretium ut eu enim kropka Integer vestibulum urna magna przecinek ac consequat dui pretium ac kropka Nam nulla nulla przecinek rhoncus a mollis a przecinek. Linia 35. condimentum vel lectus kropka. Linia 36. otwórz nawias ostrokątny prawy ukośnik p zamknij nawias ostrokątny. Linia 37. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 38. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny. Linia 39. otwórz nawias ostrokątny prawy ukośnik div zamknij nawias ostrokątny.

<!-- section4 -->
<div class="wrapper wrapper--wide">
	<div id="part1">
    	<div class="inside center">
        	<p>
            	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut dignissim tortor, in efficitur risus. Praesent 
                ultrices felis mauris, ac sagittis ante condimentum id. Sed venenatis non eros un molestine. Nam placerat dui urna, non
                consectetur tellus ullamcorper eu. <br><br> Nullam tempor massa non massa consequat, ut mattis ex maximus. Maecenas bibendum erat
                in est semper condimentum. Vestibulum id ligula arcu. Morbi placerat, ante in interdum dictum, est sem aliquam augue, 
                vel congue metus metus nec urna. Proin venenatis cursus ornare.
            </p>
        </div>
    </div>
	<div id="part2">
    	<div class="inside right-side">
        	<p>
            	Donec suscipit elit blandit cursus convallis. Morbi fringilla massa sed nuc gravida iaculis. Praesent eget nisl a lorem luctus
                sollicitudin. Phasellus ac metus dui. Etiam sit amet rhoncus sapien. Ut id augue id nisi blandit accumsan. Fusce aliquet urna nec
                rhoncus pretium. Praesent tristique ante eget ipsum bibendum, a pharatera dui elementum. Mauris eget pulvinar sapien. Suspendisse
                eget quam est. <br><br> In fringilla porttitor erat ec imperdiet. Cras consequat vel mauris non aliquam. Proin nec massa tristique neque 
                ornare porttitor ut et augue. Sed enim lacus, dictum a sapien vitae, imperdiet semper nunc. Curabitur retrum faucibus falis eu
                luctus. Quisque libero dui, feugiat eget rhoncus sit amet, ornare ac nibh.
            </p>
        </div>
    </div>
    <div id="part3">
    	<div class="inside left-side">
        	<p>
            	Proin vestibulum velit venenatis congue tincidunt. Proin dapibus condimentum hendrarit. Vivamus rhoncus vestibulum
                sodales. Donec odio eros, ultricies sed tortor non, faucibus cursus dolor. Duis ac cursus urna, id varius dui. Nulla et
                facilisis orci. Suspendisse consectetur est id facilisis feugiat. Cras finibus magna in neque pretium hendrerit ac quis
                elite. <br><br> Cras lacinia purus ut lorem dignissim tincidunt. Ut non arcu quis nulla consequat lobortis. Fusce egestas quis
                tortor et scelerisque. Integer fermentum lectus eu sodales consectetur. Phasellus sit amet nisl non lorem pelentesque
                pretium ut eu enim. Integer vestibulum urna magna, ac consequat dui pretium ac. Nam nulla nulla, rhoncus a mollis a,
                condimentum vel lectus.
            </p>
        </div>
    </div>
</div>

W celu nadania stylów elementom mającym atrybut id i class w pliku cssCSScss stosujemy odnośniki. Dla atrybutu id będzie to hash (#), a dla class – kropka (.).

#part1 {
	background: url("../assets/image1.jpg") center 0 no-repeat fixed;
    border-radius: 6px;
}

.inside {
	text-align:justify;
    max-width: 500px;
    padding: 50px 0;
    height: 1200px;
}

Przyjrzyjmy się od razu elementom i ich stylom. W pierwszym mamy zdefiniowane własności background i border. Zdjęcia na stronie możemy załączać na różne sposoby. Jednym z nich jest umieszczenie tagu <img> w kodzie html.

<a href="#">
	<img src="assets/image2.jpg">
</a>

Ważne!

Dobrą praktyką jest umieszczanie tekstu alternatywnego, który w tagu <img> jest zawarty w atrybucie alt. Więcej na ten temat przeczytasz w e‑materiale WCAG, dostępność, treści alternatywnePctfW8BvZWCAG, dostępność, treści alternatywne.

Innym sposobem jest określenie źródła zdjęcia w pliku css. Korzystając z właściwości css, możemy definiować różne elementy związane z tłem i kolorami na stronie poprzez wybranie odpowiednich atrybutów.

Przykładowe elementy:

background‑color – najszybsze i najprostsze wypełnienie tła kolorem,
background‑image – wskazanie adresu obrazka,
background‑position – ustawienie pozycji tła,
background‑size – określenie wielkości tła.

Wszystkie te elementy możesz też zdefiniować w jednej linii.

Style drugiego elementu (klasy .inside) określają wysokość i szerokość.

Efekt Parallax

Parallax Scrolling to efekt płynnego przewijania strony. Jak go wykorzystać w swoim projekcie?

Pierwszym krokiem jest stworzenie sekcji div, która ma określony identyfikator. Ustanawiamy w niej wybrane tło. W tej sekcji umieszczamy kolejną (również div), która określa szerokość oraz wysokość tła.

Na końcu umieszczamy paragraf zawierający opisy. Załóżmy, że przy każdym zdjęciu powinny wyświetlać się one w innym miejscu.

Style na przykładzie pierwszego elementu w pliku css wyglądają następująco:

#part1 {
	background: url("../assets/image1.jpg") center 0 no-repeat fixed;
    border-radius: 6px;
}

.inside {
	text-align:justify;
    max-width: 500px;
    padding: 50px 0;
    height: 1200px;
}
.inside.center {
	margin: 0 auto;
    padding-top: 4rem;
}

.inside p {
	color: #000000;
    background: rgba(255,255,255, 0.8);
    font-size: 1.125rem;
    padding: 2rem;
    border-radius: 6px;
}

`@keyframe`

W zaprezentowanym projekcie zamieszczona została również animacja. Bazuje ona na stylach zdefiniowanych w pliku css.

.fa-hamburger {
	color: #dfcec4;
    animation: myanimation 2s infinite;
    padding-bottom: 1rem;
}

@keyframes myanimation {
	0% {
    	color: #293462
    }
    50% {
    	color: #dfcec4;
    }
}

Animujemy zmieniający się w określonym rytmie kolor. W @keyframe zawarta została nazwa animacji, połączonej później z elementem, na którym chcemy ją wywołać oraz animowanym atrybutem (color). Przy implementacji animacji możemy również określać różne atrybuty, m.in.:

animation‑name: myanimation,
animation‑duration – określa, ile trwa animacja,
animation‑delay – opóźnienie rozpoczęcia się animacji,
animation‑iteration‑count – liczba wywołań animacji.

Możemy zdefiniować wszystkie wartości w jednej linii.

Stosowanie zmiennych w pliku css

Elementy stylowanej strony zmieniamy w dowolny sposób. Możemy edytować kolorystykę, jednak zmiana wielu tak prostych atrybutów może być czasochłonna. Jak rozwiązać ten problem?

Można zdefiniować podstawowe wartości i przypisać je do zmiennych. Zobaczmy to na przykładzie.

W sekcji body mamy zdefiniowane dwa główne kolory.

html, body {
	background-color: #dfcec4;
    color: #293462;
    font-family: 'Nunito',sans-serif;
    font-size: 16px;
}

Możemy jednak zdefiniować je jako zmienne w poniższy sposób.

:root {
	--primary-color: #dfcec4;
    --secondary-color: #293462;
}

Następnie należy wskazać je w sekcji body.

html, body {
	background-color: var(--primary-color);
    color: var(--secondary-color);
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
}

Kolejnym krokiem jest wprowadzenie tej zmiennej. Jeśli chcemy zmienić kolorystykę, stosujemy ją tylko w jednym miejscu.

Stosowanie kolorów w css

Kolory w pliku ze stylami opisujemy na kilka różnych sposobów:

nazwa,
rgb lub rgba,
hsl lub hsla,
hex.

Jeśli decydujemy się na pierwszy sposób, zazwyczaj IDE podpowiada propozycje. Pełna lista jest dostępna w specyfikacji CSS.

Informacje na temat modelów barw znajdziesz w e‑materiale Modele barwPkKvUsd4IModele barw.

Warto pamiętać, że choć mamy wiele dróg do osiągnięcia danego celu, warto w ramach jednego projektu konsekwentnie trzymać się jednej ścieżki.

CSS reset

CSS reset likwiduje domyślne style niektórych elementów, np. marginesu, który pojawia się domyślnie przy elemencie <body>.

Przykład prostego resetu:

* {
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Słownik

adres URL

usługa pozwalająca publikowanie treści (stron, witryn, serwisów) w sieci internet

certyfikat SSL

szyfrowanie, które zabezpiecza dane pozostawiane na stronie www, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność

CMS

oprogramowanie do zarządzania treścią strony (ang. Content Management System)

CSS

język opisujący formy wyświetlania strony www

dokument HTML

dokument (strona www) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach

domena

adres strony internetowej, np. www.zlompol.pl

home page (strona główna)

strona, na którą kieruje domyślnie adres witryny internetowej

hosting

przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony

kreator stron www

narzędzie to tworzenia stron internetowych; znajdują się tam gotowe szablony

link

zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy

post

wpis na stronie

responsywność

automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie wyświetlana; responsywna strona to taka, która poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach

single page (podstrona lub pojedyncza strona)

unikalna strona internetowa stanowiąca odrębny dokument zawierający treść

serwer internetowy

urządzenia do obsługi technicznej stron www (przechowywanie plików strony WWW, poczty, multimediów itp.)

strona internetowa

zbiór dokumentów HTML; połączone są ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)

witryna internetowa/serwis internetowy

zbiór połączonych ze sobą pojedynczych stron internetowych

Wprowadzenie

Film edukacyjny