Przeznaczenie danej właściwości CSS

W jednej z poprzednich części kursu CSS poznaliśmy różnicę pomiędzy elementami wyświetlanymi w bloku, a elementami wyświetlanymi w linii, dzięki czemu dowiedzieliśmy się, że niektóre właściwości CSS są przeznaczone tylko dla danego typu elementów HTML. Nie są to jedyne ograniczenia w stosowaniu różnych właściwości CSS, na różnych typach elementów HTML lub różnych układach elementów HTML, dlatego przeglądając różne właściwości CSS należy uważnie zapoznać się z przeznaczeniem danej właściwości CSS. Informację o przeznaczeniu danej właściwości CSS możemy znaleźć w tabeli, która została dołączona do szczegółowego opisu każdej właściwości CSS w tym serwisie.

Zazwyczaj właściwości CSS mogą być stosowane, bez ograniczeń, na wszystkich elementach HTML, przeważnie na elementach blokowych, lecz czasami mogą pojawić się dodatkowe "wymogi", aby móc poprawnie skorzystać z danej właściwości CSS lub uzyskać pożądany efekt, dlatego w tej części kursu CSS poznamy niektóre dodatkowe "wymogi", dla danych właściwości CSS lub grup właściwości CSS.

Za pomocą właściwości text-overflow oraz wartości ellipsis możemy sprawić, że do blokowego elementu HTML zostaną dodane trzy kropki, które będą świadczyć o niemieszczącym się tekście w granicy szerokości danego elementu HTML.

Problem polega na tym, że gdy dodamy właściwość text-overflow wraz z wartością ellipsis do elementu HTML, to nie uzyskamy żadnego widocznego efektu, ponieważ najpierw musimy sprawić, aby zawartość elementu HTML nie mieściła się w granicy jego szerokości, ponieważ właśnie w tym momencie zobaczymy efekt działania właściwości text-overflow:ellipsis; czyli widoczne trzy kropki w miejscu ukrywanego oraz niemieszczącego się tekstu w granicy szerokości danego elementu HTML. Czas na przykład, który zilustruje nam wspomniane zależności.

Pod spodem został umieszczony przykładowy element p, do którego został dodany przykładowy tekst, który zajmuje kilka wierszy, ponieważ wspomniany tekst nie mieści się (w całości) w jednym wierszu, w naszym przykładowym blokowym elemencie HTML. W takiej sytuacji w normalnych (domyślnych) okolicznościach tekst zostaje przełamany na końcu szerokości blokowego elementu HTML, dlatego znajduje się on w kilku wierszach.

to jest przykładowy element - p - do którego został dodany przykładowy tekst, który nie mieści się w jednym wierszu

Za pomocą właściwości white-space oraz wartości nowrap możemy sprawić, że tekst umieszczony w blokowym elemencie HTML zawsze będzie wyświetlony w jednym wierszu.

Rezultat:

to jest przykładowy element - p - do którego został dodany przykładowy tekst, który nie mieści się w jednym wierszu

Od tej pory tekst w naszym przykładowym elemencie HTML nie mieści się w granicy jego szerokości, dlatego został on wyświetlony poza nią.

Gdybyśmy w tym momencie dodali naszą docelową właściwość text-overflow wraz z wartością ellipsis, do naszego przykładowego elementu HTML, to nie ujrzelibyśmy żadnego efektu, ponieważ jednym z dodatkowym wymogów na to, aby zobaczyć efekt właściwości text-overflow jest to, aby tekst nie tylko nie mieścił się w granicy szerokości elementu HTML, lecz również jest to, aby wspomniany tekst był ukryty w danym elemencie HTML. Aby ukryć niemieszczącą się zawartość elementu HTML należy użyć do tego celu właściwość overflow wraz z wartością hidden.

Rezultat:

to jest przykładowy element - p - do którego został dodany przykładowy tekst, który nie mieści się w jednym wierszu

Od tej pory nasz tekst, który znajduje się w przykładowym elemencie HTML, jest nie tylko niemieszczącym się tekstem, ale również jest ukrytą zawartością elementu HTML, dlatego gdy w tym momencie dodamy do naszego przykładowego elementu HTML właściwość text-overflow wraz z wartością ellipsis to zobaczymy trzy kropki, które pojawią się w miejscu, w którym nasz przykładowy tekst nie mieści się w granicy szerokości elementu HTML oraz jest on ukrywany w danym elemencie HTML.

Rezultat:

to jest przykładowy element - p - do którego został dodany przykładowy tekst, który nie mieści się w jednym wierszu

Kod dokumentu HTML omawianego przykładu:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        width:300px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        background-color:lightblue;
      }
    </style>
  </head>

  <body>

    <p>
      to jest przykładowy element - p - do którego został dodany przykładowy tekst, który nie mieści się w jednym wierszu
    </p>

  </body>
</html>

Czasami niektóre grupy właściwości CSS możemy użyć tylko i wyłącznie na danych typach elementów HTML. Przykładem mogą być właściwości CSS, które należą do grupy Listy, ponieważ oddziałują one tylko i wyłącznie na elementy HTML, które są listą ul, listą ol lub elementem HTML, który jest interpretowany przez przeglądarkę internetową jako element listy HTML, czyli element li.

Kolejnym przykładem mogą być właściwości CSS, które należą do grupy Tabela, ponieważ oddziałują one tylko i wyłącznie na dane elementy HTML, które są interpretowane przez przeglądarkę internetową jako tabela HTML lub jako elementy tabeli HTML.

Czasami może zdarzyć się, że musimy wykonać dodatkowe czynności, które sprawią, że będziemy mogli wykorzystać właściwości CSS należące do danej grupy. Przykładem mogą być właściwości należące do grupy Animacja, ponieważ aby zobaczyć jakikolwiek efekt ich stosowania należy pierw utworzyć animację za pomocą specyficznej reguły @keyframes, o której będzie mowa w późniejszej części tego działu.

Kolejnym przykładem mogą być właściwości CSS, które należą do grupy Przekształcenie, ponieważ gdy zapragniemy wykonać na elemencie HTML przekształcenie w przestrzeni 3D, to pierw będziemy musieli taką przestrzeń utworzyć. Z przekształceniami w przestrzeni zapoznamy się w późniejszych częściach tego działu.

Z innymi wymogami, które należy spełnić, aby zobaczyć efekt działania różnych właściwości CSS, zapoznasz się, gdy przejrzysz każdą z dostępnych właściwości CSS oraz prześledzisz kolejne działy tego kursu CSS.

Przeglądając dostępne właściwości CSS możemy natknąć się na właściwość clip, którą możemy wykorzystać tylko na elemencie HTML, który jest wyświetlony w pozycji absolutnej lub ustalonej, dlatego w następnej części kursu CSS poznamy zależności pomiędzy elementami HTML wyświetlanymi w pozycji statycznej, relatywnej, absolutnej oraz ustalonej.