Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guiacss

    Cargado por

    Lionel Frate
    5 vistas3 páginas

    Título original

    guiacss

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    ODT, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como ODT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas3 páginas

    Guiacss

    Cargado por

    Lionel Frate

    Copyright:

    © All Rights Reserved
    Descargue como ODT, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    ¡Por supuesto!

    Aquí tienes una guía completa de CSS que incluye una lista de comandos y sus
    funciones:

    ## Guía Completa de CSS

    ### Introducción a CSS


    CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación y el estilo de
    un documento HTML. Permite controlar la apariencia de los elementos HTML, como el color, la
    fuente, el tamaño y la disposición. A continuación, se presentan algunos conceptos fundamentales
    antes de comenzar:

    - **Regla CSS**: Una regla CSS está compuesta por un selector y un bloque de declaración. El
    selector selecciona los elementos a los que se aplicará el estilo, y el bloque de declaración define las
    propiedades y los valores del estilo. Por ejemplo:
    ```css
    h1 {
    color: blue;
    font-size: 24px;
    }
    ```
    - **Selector**: Indica qué elementos HTML serán estilizados y se coloca antes del bloque de
    declaración. Puede ser un nombre de etiqueta, una clase, un ID u otros selectores más avanzados.
    - **Propiedad**: Especifica el aspecto que se desea cambiar, como el color o el tamaño de fuente.
    - **Valor**: Define el valor de la propiedad que se está modificando.

    ### Comandos y Funciones CSS

    #### 1. Selector de etiqueta


    ```css
    h1 {
    color: blue;
    }
    ```
    - `h1`: Selecciona todos los elementos `<h1>` y les aplica el estilo especificado.

    #### 2. Selector de clase


    ```css
    .mi-clase {
    color: red;
    }
    ```
    - `.mi-clase`: Selecciona todos los elementos que tienen asignada la clase "mi-clase" y les aplica el
    estilo especificado. En el HTML, se agrega la clase utilizando el atributo `class` en la etiqueta.

    #### 3. Selector de ID
    ```css
    #mi-id {
    background-color: yellow;
    }
    ```
    - `#mi-id`: Selecciona el elemento con el ID "mi-id" y le aplica el estilo especificado. En el HTML,
    se agrega el ID utilizando el atributo `id` en la etiqueta.
    #### 4. Estilos de texto
    ```css
    p{
    color: #333;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: underline;
    }
    ```
    - `color`: Define el color del texto.
    - `font-size`: Especifica el tamaño de la fuente.
    - `font-family`: Define la fuente utilizada para el texto.
    - `font-weight`: Especifica el grosor de la fuente (normal, bold, etc.).
    - `text-decoration`: Agrega una decoración al texto (subrayado, tachado, etc.).

    #### 5. Estilos de fondo


    ```css
    body {
    background-color: #f0f0f0;
    background-image: url("imagen.jpg");
    background-repeat: no-repeat;
    background-position: center;
    }
    ```
    - `background-color`: Define el color de fondo.
    - `background-image`: Especifica la imagen de fondo.
    - `background-repeat`: Controla la repetición de la imagen de fondo.
    - `background-position`: Establece la posición de la imagen de fondo.

    #### 6. Estilos de caja


    ```css
    .mi-caja {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 10px;
    padding: 20px;
    }
    ```
    - `width`: Define el ancho de la caja.
    - `height`: Especifica la altura de la caja.
    - `border`: Establece el estilo, el ancho y el color del borde.
    - `margin`: Define el espacio alrededor de la caja.
    - `padding`: Especifica el espacio dentro de la caja entre el contenido y el borde.

    #### 7. Estilos de posicionamiento


    ```css
    .mi-elemento {
    position: relative;
    top: 20px;
    left: 30px;
    z-index: 2;
    }
    ```
    - `position`: Controla el tipo de posicionamiento del elemento (relative, absolute, fixed, etc.).
    - `top`: Desplaza el elemento hacia arriba desde su posición original.
    - `left`: Desplaza el elemento hacia la izquierda desde su posición original.
    - `z-index`: Define el orden de apilamiento de los elementos superpuestos.

    Estos son solo algunos de los comandos más utilizados en CSS. Existen muchas más propiedades y
    selectores disponibles para personalizar el estilo de tus páginas web. Recuerda enlazar tus archivos
    CSS con tu documento HTML utilizando la etiqueta `<link>` en la sección `<head>` para aplicar
    los estilos correctamente. Además, puedes utilizar selectores avanzados, pseudoclases y
    pseudoelementos para estilizar elementos específicos en diferentes situaciones. ¡Diviértete
    explorando y experimentando con CSS para crear diseños web únicos y atractivos!

    También podría gustarte