Dodatek

Wstęp

Lekcja ta jest właściwie dodatkiem do całego kursu. Zawiera opis elementów, które z różnych powodów nie zostały umieszczone w poprzednich lekcjach, a są one na tyle ważne, że warto o nich wspomnieć i się z nimi zapoznać.

box-sizing: border-box;

Ta właściwość wraz z wartością jest bardzo przydatna. Głównie przypisuje się ją do wszystkich znaczników selektorem -*. Sprawia ona, że gdy dodasz wypełnienie (padding) to element, który ma przypisaną wysokość i szerokość nie zwiększy się. Można powiedzieć, że w takim przypadku właściwościwidthiheightokreślają wymiar zawartości elementu wraz z wypełnieniem.

Załóżmy, że mamy dwa elementy, których szerokość określono na200pikseli, a wysokość na100pikseli. Każdy z nich posiada wypełnienie po25pikseli z każdej strony. Następnie jednemu elementowi przypisanobox-sizing: border-box;oznacza to, że jego rzeczywiste wymiary wynoszą200pikseli szerokości i100pikseli wysokości. Drugi element nie ma przypisanej wartości dlabox-sizing, czyli jest używane domyślnecontent-box. Jego rzeczywiste wymiary wynoszą250pikseli szerokości i150pikseli wysokości, składa się na to określony wymiar zawartości orazpadding.

Powyżej opisana sytuacja jest pokazana w kolejnym przykładzie.

1 2 3 4 5 6 7 8 910111213 .border-box-div{box-sizing:border-box;}.content-box-div{box-sizing:content-box;}div{background-color:teal;margin:10px;width:200px;height:100px;padding:25px;}

Uruchom przykład

Jednostki

W CSS istnieje kilka jednostek miary:

  • px- piksel;

  • %- procent;

  • em-1emjest relatywny do wielkości czcionki rodzica;

  • rem-1remjest relatywny do wielkości czcionki dokumentu (html);

  • vw-1vwto 1% szerokości okna przeglądarki;

  • vh-1vhto 1% wysokości okna przeglądarki;

  • cm- centymetr;

  • mm- milimetr;

  • in- cal.

Poniżej znajduje się przykład użycia tych jednostek.

1 2 3 4 5 6 7 8 91011121314151617 <p>10 px</p><divstyle="width: 10px; height: 10px;"></div><p>1 em</p><divstyle="width: 1em; height: 1em;"></div><p>1 vw</p><divstyle="width: 1vw; height: 1vw;"></div><p>1 cm</p><divstyle="width: 1cm; height: 1cm;"></div><p>1 mm</p><divstyle="width: 1mm; height: 1mm;"></div><p>1 in</p><divstyle="width: 1in; height: 1in;"></div>

Uruchom przykład

Pseudoklasy

Pseudoklasy zapisuje się w postaci: selektor dwukropek pseudoklasa. Na przykład:

123 p:hover{/* Kod CSS */}

Poniżej znajduje się tabela najczęściej używanych pseudoklas wraz z przykładami użycia.

Pseudoklasa Przykład Opis
:link a:link Wybiera linki, które nie zostały odwiedzone
:visited a:visited Wybiera linki, które zostały odwiedzone
:active p:active Wybiera wszystkie elementy, które są klikane
:empty p:empty Zaznacza elementy, które nie mają dzieci
:first-child p:first-child Wybiera pierwsze dziecko elementup
:last-child p:last-child Wybiera ostatnie dziecko elementup
:hover p:hover Wybiera elementu gdy znajduje się na nim kursor myszki
:not :not(p) Wybiera wszystkie elementy poza p, oczywiście zamiastpmożna użyć innego selektora
:nth-child p:nth-child(1+2n) Wybiera co drugi(1+2n)elementpzaczynając od pierwszego(1+2n)- nieparzyste. Parzyste -(2+2n)co drugi elementpzaczynając od drugiego(2+2n)

Zadanie 1

W tym zadaniu Twoim celem jest ustawienie tła#0FFdla każdegop, które nie posiada klasy.without-bg.

Rozwiąż zadanie

Pseudoelementy

Pseudoelementy pozwalają sytlować pewną część wybranego elementu, pozwalają one również dodać zawartość do strony. Szczegóły znajdują się w poniższej tabeli.

Pseudoelement Przykład Opis
::before p::before Pozwala dodać zawartość przed każdym elementemp
::after p::after Pozwala dodać zawartość po każdym elemenciep
::first-letter p::first-letter Wybiera pierwszą literę każdego znacznikap
::first-line p::first-line Wybiera pierwszą linię każdego znacznikap
::selection p::selection Pozwala zmienić wygląd zaznaczenia tworzonego przez użytkownika na każdym elemenciep

Dla pseudoelementów::beforei::afterzawartość, która ma zostać wstawiona określamy poprzez wartość właściwościcontent. Widać to dobrze w poniższym przykładzie.

1 2 3 4 5 6 7 8 9101112131415161718 p::before{content:"Początek ";}p::after{content:"Dodane 'coś'";font-weight:bold;}p::first-line{color:green;}p::first-letter{font-size:30px;font-weight:bold;color:red;}p::selection{background-color:#5D98FF;}

Uruchom przykład

Ukrywanie elementów

Ukryć elementy możemy na dwa sposoby:

  • display: none

  • visibility: hidden

Istnieje jednak pewna istotna, z punktu widzenia strony, różnica pomiędzy tymi dwoma elementami. Przypisaniedisplay: nonesprawia, że element po prostu nie jest wyświetlany w przeglądarce. Strona wygląda tak, jakby tego elementu nie było w kodzie HTML. Natomiast przypisanievisibility: hiddendaje następujący efekt: element nie jest widoczny, jednak zajmuje on taką ilość miejsca, jak gdyby był standardowo wyświetlany. Miejsce to jest puste. Efekt jest podobny jak przypisaniaopacity: 0.

1 2 3 4 5 6 7 8 9101112 div{width:60px;height:30px;border:1pxsolidred;background-color:#cacaca;}.not-display{display:none;}.hidden{visibility:hidden;}

Uruchom przykład

Elementy blokowe w linii

W HTML występują dwie główne grupy elementów, są to elementy blokowe (np.div,p) oraz elementy liniowe (span,a). Więcej na ten temat możesz poczytać w naszym kursie HTML.

W tej chwili jest dla nas istotne to, iż elementy blokowe zajmują standardowo całą dostępną szerokość, nawet w przypadku, gdy w bloku lub w akapicie wyświetlamy tylko jedno słowo. Aby spowodować wyświetlenie kilku elementów blokowych obok siebie, w jednej linii, można skorzystać z dwóch pokazanych poniżej sposobów.

  • Do elementów dajemyfloat: leftaby były w linii, a dla rodzica w pseudoelemencie::afterustawiamyclear: bothaby kolejne elementy były pod nimi. Sposób ten jest już rzadko używany.

  • Użyciedisplay: inline-block- ten sposób jest nowszy, prostszy, nie trzeba modyfikować rodzica, wystarczy przypisać do elementówdisplay: inline-block.

W swoich projektach staraj się używać drugiego, nowszego i wygodniejszego sposobu.

1234567 div{display:inline-block;width:50px;height:50px;background-color:#6EEFFF;margin:20px;}

Uruchom przykład

Podsumowanie

W tej lekcji miałeś okazję poznać kolejne ważne i ciekawe elementy języka CSS. Rozpoczęliśmy od omówienia właściwościbox-sizing, następnie zajęliśmy się dostępnymi jednostkami miary, pseudoklasami oraz pseudoelementami. Miałeś również okazję poznać dwa sposoby na ukrywanie elementów, a na koniec dowiedziałeś się jak wyświetlić kilka elementów blokowych w jednej linii.

Jest to ostatnia lekcja tego kursu. Warto, żebyś teraz samodzielnie stworzył stronę, na której wykorzystasz poznany w tym kursie materiał. Pozwoli Ci to jeszcze lepiej go przyswoić i zapamiętać. Powodzenia.

Zrobiłeś

0

z 1 zadań.

Zakończ kurs

results matching ""

    No results matching ""