• Artykuł

          

Encyklopedia: Jak wskazać element w CSS - Kurs HTML i CSS   Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-09-28

Podczas tworzenia stron internetowych, z wykorzystaniem CSS, często zachodzi potrzeba zmiany wyglądu konkretnego elementu bądź grupy elementów. W CSS istnieje możliwość wskazania elementów, których styl ma zostać zmieniony na trzy sposoby:

  • poprzez zmianę ogólną wszystkich znaczników danego typu,
  • poprzez nadanie elementowi unikatowego identyfikatora za pomocą atrybutu id,
  • poprzez przypisanie elementu do wybranej klasy, reprezentującej grupę elementów o określonym stylu za pomocą atrybutu class.

Pierwsze rozwiązanie stosowane jest zwykle dla elementów formatujących tekst, takich jak np. znacznik <code>. Jest ono bardzo wygodne w przypadku odwołania się do elementów powtarzalnych, których nie musimy rozróżniać. Drugie rozwiązanie jest dość często stosowane w przypadku elementów unikalnych na stronie. Niestety właśnie ze względu na unikalność elementów jest mało elastyczne. Ostatni sposób wskazywania elementów w CSS stosowany jest w przypadku kilku elementów, zawierających identyczne style. Każdy element w HTML może posiadać kilka klas, wymienianych po spacji. Kolejność wypisania klas w elemencie nie ma znaczenia.

Przykład

Przykład zastosowania globalnej zmiany stylu wszystkich elementów danego typu na stronie (Rys. 1.):

<html>
<head>
    <style type="text/css">
    p {
    font-size: 20px;
    color: white;
    background-color: black; }
    </style>
</head>
<body>
    <p>Pierwszy akapit</p>
    <p>Drugi akapit</p>
</body>
</html>

Rys. 1. Przykład globalnej zmiany wyglądu znacznika z wykorzystaniem CSS.

Przykład zastosowania zmiany wyglądu elementu poprzez nadanie mu unikalnego identyfikatora id (Rys. 2.):

<html>
<head>
<style type="text/css">
    #akapitPierwszy {
    font-size: 20px;
    color: white;
    background-color: black; }

    #akapitDrugi {
    font-size: 15px;
    color: Blue;
    background-color: Gray; }
</style>
</head>
<body>
    <p id=akapitPierwszy>Pierwszy akapit</p>
    <p id=akapitDrugi>Drugi akapit</p>
</body>
</html>

Rys. 2. Przykład zmiany wyglądu znacznika w CSS za pomocą unikalnego identyfikatora id.

Przykład zastosowania zmiany wyglądu elementów za pomocą użycia klasy w CSS (Rys. 3.):

<html>
<head>
<style type="text/css">
    .akapityWstep {
    font-size: 20px;
    color: white;
    background-color: black; }

    .akapityZakonczenie {
    font-size: 15px;
    color: Blue;
    background-color: Gray; }
</style>
</head>
<body>
    <h1>Wstęp</h1>
    <p class=akapityWstep>Pierwszy akapit wstępu</p>
    <p class=akapityWstep>Drugi akapit wstępu</p>
    <h2>Zakończenie</h2>
    <p class=akapityZakonczenie>Pierwszy akapit zakończenia</p>
    <p class=akapityZakonczenie>Drugi akapit zakończenia</p>
</body>
</html>

Rys. 3. Przykład zmiany wyglądu elementu za pomocą wskazania go poprzez klasę w CSS.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać wskazywanie elementów w CSS w samouczku: