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

Estilitzar els Components

Següent ►
►

En aquesta secció, ens enfocarem en l'estilització dels components del nostre lloc web. Aquest pas és crucial per donar vida al disseny i assegurar-nos que cada element tingui l'aparença desitjada. Treballarem amb diversos components com botons, formularis, capçaleres, peus de pàgina, i altres elements visuals.

Objectius d'Aprenentatge

  • Aplicar estils personalitzats a diferents components del lloc web.
  • Utilitzar propietats CSS per millorar l'aparença i la funcionalitat dels components.
  • Implementar estils consistents per mantenir una coherència visual en tot el lloc web.

Components a Estilitzar

  1. Botons
  2. Formularis
  3. Capçaleres
  4. Peus de pàgina
  5. Targetes
  6. Menús de Navegació

  1. Botons

Exemples de Codi

<button class="btn-primary">Enviar</button>
<button class="btn-secondary">Cancel·lar</button>
/* Estils per al botó primari */
.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Estils per al botó secundari */
.btn-secondary {
    background-color: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

Explicació

  • .btn-primary: Defineix un botó amb un color de fons blau i text blanc. També inclou un efecte de transició per canviar el color de fons quan es passa el ratolí per sobre.
  • .btn-secondary: Defineix un botó amb un color de fons gris i text blanc, amb un efecte de transició similar.

  1. Formularis

Exemples de Codi

<form>
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name" class="form-input">
    
    <label for="email">Correu Electrònic:</label>
    <input type="email" id="email" name="email" class="form-input">
    
    <button type="submit" class="btn-primary">Enviar</button>
</form>
/* Estils per als inputs del formulari */
.form-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Estils per a les etiquetes del formulari */
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

Explicació

  • .form-input: Defineix estils per als camps d'entrada del formulari, incloent amplada completa, farciment, marges, i un contorn arrodonit.
  • form label: Assegura que les etiquetes del formulari es mostrin com a blocs amb un marge inferior i text en negreta.

  1. Capçaleres

Exemples de Codi

<header class="site-header">
    <h1>Benvingut al Nostre Lloc Web</h1>
    <nav class="main-nav">
        <ul>
            <li><a href="#">Inici</a></li>
            <li><a href="#">Sobre Nosaltres</a></li>
            <li><a href="#">Serveis</a></li>
            <li><a href="#">Contacte</a></li>
        </ul>
    </nav>
</header>
/* Estils per a la capçalera del lloc */
.site-header {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

/* Estils per a la navegació principal */
.main-nav ul {
    list-style: none;
    padding: 0;
}

.main-nav li {
    display: inline;
    margin: 0 10px;
}

.main-nav a {
    text-decoration: none;
    color: #007bff;
}

.main-nav a:hover {
    text-decoration: underline;
}

Explicació

  • .site-header: Defineix estils per a la capçalera del lloc, incloent un color de fons clar, farciment, alineació central i una línia de contorn inferior.
  • .main-nav: Estilitza la navegació principal amb una llista sense punts, elements en línia i enllaços amb colors i decoracions específiques.

  1. Peus de pàgina

Exemples de Codi

<footer class="site-footer">
    <p>&copy; 2023 El Nostre Lloc Web. Tots els drets reservats.</p>
</footer>
/* Estils per al peu de pàgina del lloc */
.site-footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Explicació

  • .site-footer: Defineix estils per al peu de pàgina, incloent un color de fons fosc, text blanc, alineació central i farciment. També assegura que el peu de pàgina es mantingui a la part inferior de la pàgina.

  1. Targetes

Exemples de Codi

<div class="card">
    <h2 class="card-title">Títol de la Targeta</h2>
    <p class="card-content">Aquesta és una descripció de la targeta. Conté informació rellevant i útil.</p>
</div>
/* Estils per a les targetes */
.card {
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
    margin-top: 0;
    font-size: 1.5em;
}

.card-content {
    font-size: 1em;
    color: #6c757d;
}

Explicació

  • .card: Defineix estils per a les targetes, incloent un contorn, contorn arrodonit, farciment, marge, color de fons i una ombra subtil.
  • .card-title i .card-content: Estilitza el títol i el contingut de la targeta amb mides de font i colors específics.

  1. Menús de Navegació

Exemples de Codi

<nav class="navbar">
    <ul>
        <li><a href="#">Inici</a></li>
        <li><a href="#">Sobre Nosaltres</a></li>
        <li><a href="#">Serveis</a></li>
        <li><a href="#">Contacte</a></li>
    </ul>
</nav>
/* Estils per a la barra de navegació */
.navbar {
    background-color: #007bff;
    padding: 10px;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.navbar li {
    margin: 0 15px;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.navbar a:hover {
    text-decoration: underline;
}

Explicació

  • .navbar: Defineix estils per a la barra de navegació, incloent un color de fons blau i farciment.
  • .navbar ul: Estilitza la llista de navegació amb elements flexibles centrats.
  • .navbar a: Defineix estils per als enllaços de navegació amb colors, decoracions i efectes de pas del ratolí.

Exercici Pràctic

Tasca

  1. Crea una pàgina HTML amb els components esmentats anteriorment.
  2. Aplica els estils CSS proporcionats.
  3. Personalitza els estils per adaptar-los a les necessitats del teu projecte.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lloc Web Responsiu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="site-header">
        <h1>Benvingut al Nostre Lloc Web</h1>
        <nav class="main-nav">
            <ul>
                <li><a href="#">Inici</a></li>
                <li><a href="#">Sobre Nosaltres</a></li>
                <li><a href="#">Serveis</a></li>
                <li><a href="#">Contacte</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Formulari de Contacte</h2>
            <form>
                <label for="name">Nom:</label>
                <input type="text" id="name" name="name" class="form-input">
                
                <label for="email">Correu Electrònic:</label>
                <input type="email" id="email" name="email" class="form-input">
                
                <button type="submit" class="btn-primary">Enviar</button>
            </form>
        </section>

        <section>
            <h2>Targetes d'Informació</h2>
            <div class="card">
                <h2 class="card-title">Títol de la Targeta</h2>
                <p class="card-content">Aquesta és una descripció de la targeta. Conté informació rellevant i útil.</p>
            </div>
        </section>
    </main>

    <footer class="site-footer">
        <p>&copy; 2023 El Nostre Lloc Web. Tots els drets reservats.</p>
    </footer>
</body>
</html>
/* Estils generals */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estils per a la capçalera del lloc */
.site-header {
    background-color: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

/* Estils per a la navegació principal */
.main-nav ul {
    list-style: none;
    padding: 0;
}

.main-nav li {
    display: inline;
    margin: 0 10px;
}

.main-nav a {
    text-decoration: none;
    color: #007bff;
}

.main-nav a:hover {
    text-decoration: underline;
}

/* Estils per als inputs del formulari */
.form-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Estils per a les etiquetes del formulari */
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Estils per al botó primari */
.btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Estils per a les targetes */
.card {
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 20px;
    margin: 20px 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-title {
    margin-top: 0;
    font-size: 1.5em;
}

.card-content {
    font-size: 1em;
    color: #6c757d;
}

/* Estils per al peu de pàgina del lloc */
.site-footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

Conclusió

En aquesta secció, hem après a estilitzar diversos components del nostre lloc web utilitzant CSS. Hem treballat amb botons, formularis, capçaleres, peus de pàgina, targetes i menús de navegació. Aquests components són essencials per crear un lloc web atractiu i funcional. En la següent secció, ens enfocarem en fer el lloc web responsiu per assegurar-nos que es vegi bé en tots els dispositius.

◄ 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