El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Propietat de Visualització de CSS

Següent ►
►

La propietat display de CSS és una de les més importants i fonamentals per controlar el comportament dels elements HTML en una pàgina web. Aquesta propietat determina com es mostren els elements i com es disposen en el flux del document.

Tipus de Valors de la Propietat display

Els valors més comuns de la propietat display són:

  1. block: L'element es mostra com un bloc. Ocupa tot l'ample disponible i comença en una nova línia.
  2. inline: L'element es mostra en línia amb el text. Només ocupa l'ample necessari i no comença en una nova línia.
  3. inline-block: Combina característiques de block i inline. L'element es mostra en línia però es comporta com un bloc pel que fa a les dimensions.
  4. none: L'element no es mostra en absolut. No ocupa espai en el flux del document.

Taula de Comparació dels Valors display

Valor Comportament Exemple d'ús
block Ocupa tot l'ample disponible, comença en una nova línia. <div>, <p>, <h1>
inline Ocupa només l'ample necessari, no comença en una nova línia. <span>, <a>, <strong>
inline-block Ocupa només l'ample necessari, però permet definir amplada i alçada. Botons, icones amb text
none L'element no es mostra i no ocupa espai. Elements ocults temporalment

Exemples Pràctics

Exemple 1: block

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de display block</title>
    <style>
        .block-element {
            display: block;
            background-color: lightblue;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="block-element">Aquest és un element block.</div>
    <div class="block-element">Aquest és un altre element block.</div>
</body>
</html>

Exemple 2: inline

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de display inline</title>
    <style>
        .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
    <span class="inline-element">Aquest és un element inline.</span>
    <span class="inline-element">Aquest és un altre element inline.</span>
</body>
</html>

Exemple 3: inline-block

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de display inline-block</title>
    <style>
        .inline-block-element {
            display: inline-block;
            background-color: lightcoral;
            width: 100px;
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">Element 1</div>
    <div class="inline-block-element">Element 2</div>
</body>
</html>

Exemple 4: none

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de display none</title>
    <style>
        .none-element {
            display: none;
        }
    </style>
</head>
<body>
    <div class="none-element">Aquest element no es mostra.</div>
    <div>Aquest element sí que es mostra.</div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Canviar el Comportament d'un Element

  1. Crea un document HTML amb tres elements div.
  2. Assigna a cada div una classe diferent: block, inline i inline-block.
  3. Utilitza CSS per aplicar la propietat display corresponent a cada classe.
  4. Observa com canvia el comportament dels elements en la pàgina.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de display</title>
    <style>
        .block {
            display: block;
            background-color: lightblue;
            margin: 10px 0;
        }
        .inline {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
        }
        .inline-block {
            display: inline-block;
            background-color: lightcoral;
            width: 100px;
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="block">Element block</div>
    <div class="inline">Element inline</div>
    <div class="inline-block">Element inline-block</div>
</body>
</html>

Exercici 2: Ocultar un Element

  1. Crea un document HTML amb dos elements div.
  2. Assigna a un dels div la classe hidden.
  3. Utilitza CSS per aplicar la propietat display: none a la classe hidden.
  4. Observa com l'element amb la classe hidden no es mostra en la pàgina.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici de display none</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="hidden">Aquest element no es mostra.</div>
    <div>Aquest element sí que es mostra.</div>
</body>
</html>

Resum

La propietat display de CSS és essencial per controlar com es mostren i es disposen els elements en una pàgina web. Els valors més comuns són block, inline, inline-block i none, cadascun amb un comportament específic que afecta la disposició dels elements. Comprendre i utilitzar correctament aquesta propietat és fonamental per crear dissenys web efectius i atractius.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats