• Artykuł

          

Encyklopedia: Jak zmienić wygląd div w CSS - Kurs HTML i CSS Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-10-24

Znacznik div umożliwia grupowanie elementów blokowych w celu łatwiejszego ich formatowania na stronie. Definiuje podział lub sekcje na stronie i jest często używany do tworzenia układów stron internetowych. Użycie Kaskadowych Arkuszy Stylów (CSS) pozwala na zmianę wyglądu poszczególnych elementów div na stronie tak, aby strona WWW była atrakcyjna wizualnie.

W przypadku elementów div możemy wykorzystać większość właściwości CSS, takich jak opcje tła, ramek, pozycjonowania w dokumencie, wymiarów, fontów, tekstu czy marginesów.

Zmiany wyglądu, zarówno elementudiv jak i jego zawartości, możemy dokonać na trzy sposoby:

  • poprzez globalną zmianę wyglądu:

    —   możliwa poprzez dodanie następującej dyrektywny w kodzie stylu CSS: 

    div { własność_CSS: wartość; }

  • poprzez przypisanie wybranych elementów do klasy:

    —   w pliku HTML, do jednego lub więcej elementów div, przypisujemy własność class: 

    <div class="nazwaKlasy"></div>
    —   w kodzie CSS wybieramy klasę za pomocą: FakePre-47eaf2a28d844c5292351d6ead51264c-1c7b117934b745e2a03b597f925afce1

  • poprzez przypisanie unikalnego identyfikatora dla wybranego elementu div:
    —   w pliku HTML do jednego elementu div przypisujemy własność id: 

    <div id="identyfikatorDiv"></div>
    —   w kodzie CSS wybieramy go za pomocą: FakePre-ddf4c0e399ce4550a094b3a4f7f350f8-19d760cbb7f541ed990b9f1a6648a419

Więcej informacji o wskazywaniu elementów w CSS znajdziesz w części encyklopedii Jak wskazać element w CSS.

Przykład

Poniższy kod prezentuje przykładowe zastosowanie stylu CSS do zmiany wyglądu trzech elementów typu DIV, wynik użycia kodu został zaprezentowany na Rys. 1.

<html>
<head>
    <title>Jak zmienić wygląd div za pomocą CSS</title>
    <style type="text/css">
        div { text-align: center; }
        .wazne { font-size: 150%; }
        #pierwszy {
            background-color: Black;
            color: White;
            border-style: solid;
            border-bottom-color: Red;
            margin:20px;}
        #drugi {
            display: block;
            background-color: Blue;
            color: White;
            font-weight: bold;
            border-style: dashed; }
        #trzeci {
            margin-top: 50px;
            background-color: Silver;
            font-style: italic;}
    </style>
</head>
<body>
    <div id="pierwszy" class="wazne">
        <p>Pierwszy DIV</p>
    </div>
    <div id="drugi">
        <p>Drugi DIV</p>
    </div>
    <div id="trzeci" class="wazne">
        <p>Trzeci DIV</p>
    </div>
</body>
</html>

Rys. 1. Przykładowa zmiana wyglądu elementów DIV za pomocą użycia CSS.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać znacznik div w samouczkach: