Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Apuntes CSS - Estilos

    Cargado por

    gxnzo.aburto
    4 vistas7 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, 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 DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas7 páginas

    Apuntes CSS - Estilos

    Cargado por

    gxnzo.aburto

    Copyright:

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

    CSS Repaso 6/4/23

    Formas de Invocación CSS:


    Existen 3 formas de invocar CSS en un documento HTML:

     Mediante la etiqueta “<style>” dentro del elemento <head> de nuestro documento.


     Vinculándolo a nuestro documento mediante la etiqueta ‘<link src = ”styles.css”>’.
     O escribiendo el código CSS directamente sobre los elementos HTML.

    Utilizar la primer y última forma se considera mala práctica.

    Selectores Básicos:
    Los selectores nos permiten aplicar estilos a nuestros elementos HTML mediante clases, id o
    elemento.

    Selector por ID: El selector ID nos permite seleccionar un elemento HTML por su
    atributo “id”. Para llamarlo utilizaremos el símbolo “#” antes del nombre asignado.

    Selector por Clases: El selector por clases nos permite seleccionar nuestros elementos
    web mediante el nombre de clase. Para seleccionarlo utilizaremos un punto “.” seguido por el
    nombre de clase.

    Selector por elemento: El selector por elemento hace una selección global y aplica los
    estilos a todos los elementos del mismo tipo en el documento. Para utilizarlo usaremos el
    nombre de la etiqueta.
    CSS Repaso 6/4/23

    Selector de herencia:
    El selector de herencia selecciona la descendencia del elemento padre establecido y le aplica
    los estilos. Utilizando asterisco “*” haremos una selección global, y agregando un símbolo
    mayor “>” seleccionaremos los elementos hijos.

    Pseudo Clases:
    Pseudo clases de estado:
    Las Pseudo clases de estado seleccionan elementos dependiendo del estado en el que se
    encuentran. Por ejemplo, cuando el puntero del mouse esta sobre un enlace, estaría en estado
    “: hover”.

    Pseudo clases por posición y tipo:


    Las Pseudo clases por posición y tipo seleccionan elementos por la posición de herencia en la
    que están y/o por el tipo de elemento que son. Se aplica con dos puntos previos la posición en
    la que están o por su elemento.
    CSS Repaso 6/4/23

    Pseudo elementos:
    Los pseudoelementos permiten añadir estilos a una zona en específico del documento HTML.

    Agrupación de selectores:
    Los selectores CSS se pueden agrupar en la hoja de estilos para dar el mismo estilo a múltiples
    elementos HTML. Para agrupar los selectores debemos de espaciarlos por una coma “,”.

    Algoritmo CSS:
    El Algoritmo de CSS es la forma en la que el navegador web aplica los estilos al documento
    HTML.

    1) Cascada: La cascada es el mecanismo en el que el navegador aplica los estilos. Esta toma
    en cuenta el origen del código: User agent (estilos por defecto del navegador),
    personalización del navegador del usuario y los estilos del autor.
    2) Especificidad: La Especificidad es el peso del selector cuando hay conflicto de estilos. El
    selector con más peso (especificidad) siempre se va a aplicar sobre los demás. Los
    selectores con mayor especificidad son:
    1. Selector ID
    2. Selector attribute
    3. Selector Class
    4. Selector de tipo (etiqueta)
    3) Herencia: Es la capacidad de los elementos hijos para heredar los estilos de los
    elementos padres. No todos los estilos se heredan, pero los estilos de fondo, texto y
    fuente sí se heredan.
    CSS Repaso 6/4/23

    Box Model:
    El Box Model es la forma en que se modela y se calcula el espacio ocupado por un elemento en
    una página web. Cada elemento tiene cuatro propiedades que lo definen:

     margin: Espacio alrededor del borde del elemento.


     border: Borde que rodea el contenido y el padding del elemento.
     padding: Espacio entre el contenido del elemento y su borde.
     content: El contenido real del elemento.

    Por defecto, el tamaño de un elemento se calcula a partir del borde exterior. Sin embargo, se
    puede cambiar este comportamiento estableciendo la propiedad box-sizing en border-box.
    Con box-sizing: border-box, el tamaño del elemento incluye su padding y su border.

    Propiedad Display:
    La propiedad display muestra cómo se va a comportar un elemento:

     block: el elemento se muestra como un bloque y ocupa todo el ancho disponible,


    mostrándose en una línea aparte.
     Inline: el elemento se muestra en una línea como con el texto, ocupa solamente el
    espacio que necesita.
     Inline-block: el elemento se muestra como en block, pero solo ocupa lo necesario y no
    se extiende a lo ancho.
     None: el elemento no se muestra en el documento.
     flex: el elemento altera sus dimensiones para llenar el espacio disponible.
     grid: permite organizar y distribuir elementos en filas y columnas.

    Propiedad Visibility:
    La propiedad visibility define si un elemento es visible o no en el documento HTML. Tiene 2
    valores:

     visible: el elemento es visible.


     hidden: el elemento esta oculto.
    CSS Repaso 6/4/23

    Propiedad Overflow:
    La propiedad overflow define el comportamiento de un elemento cuando su contenido excede
    su tamaño, recortar contenido, dibujar barras de desplazamiento o mostrar el contenido
    excedente en un elemento a nivel de bloque; Recibe los siguientes valores:

     visible: muestra el contenido fuera de los límites del elemento.


     hidden: oculta el contenido excedente.
     scroll: genera una barra de desplazamiento para ver todo el contenido.
     auto: se muestra una barra de desplazamiento solo si es necesario.

    Propiedad Position:
    Define la posición en la que va a estar ubicado nuestro elemento HTML. Recibe los siguientes
    valores:

     static: el elemento se posiciona según el flujo normal de la página.


     relative: el elemento se posiciona de forma relativa a su posición normal. Es decir, se
    desplaza una cantidad determinada desde su posición original.
     absolute: el elemento se posiciona de forma absoluta, en relación a su primer
    ancestro posicionado (es decir, que tenga position diferente a static).
     fixed: el elemento se posiciona de forma fija en relación a la ventana del navegador.
     sticky: el elemento se comporta como si fuera relative hasta que se desplaza fuera de
    la pantalla, momento en el que se fija a su posición actual.

    Colores:
    Los colores en CSS se pueden aplicar de 4 formas:

     Por nombres
     Por código Hexadecimal
     Por RGB
     Por sistema HSL

    Por nombres:

    Para aplicar los colores por nombres simplemente debemos de escribir el nombre del color en
    base a los nombres que tiene por defecto CSS. Para obtener una lista completa, revisar CSS
    Color.

    Por código Hexadecimal:


    El código HEX se basa en el clásico RGB pero por pares de dígitos, teniendo 6 dígitos de largo
    para color y 2 más para el canal Alpha, que regula la opacidad del color.

    Este se compone de 16 símbolos, los primeros 10 son del 0 al 9 y los restantes de la “A” hasta
    la “F”.

    Las letras representan la intensidad del color, teniendo a “F” como la más fuerte, ya que
    representa el número 15 y “A” la menos intensa debido a que representa el número 10.
    CSS Repaso 6/4/23

    Para regular la opacidad del color, debemos de agregar 2 dígitos al final del número, estos
    pueden ir del 0% al 99%, ya que no tiene sentido agregar el canal Alpha si vamos a poner el
    100% del color, y además nos tiraría error.

    Colores RGB:
    Los colores por código RGB se basan en los colores: Rojos (Red), Verde(Green) y Azul(Blue).

    Los valores van del 0 hasta el 255, siendo este último el tope máximo de cantidad del color.

    Colores HSL:
    Los colores HSL se basan en el sistema de circulo cromático y el grado en el que se encuentra el
    color que queremos. Los valores que se utilizan son: Matiz (Hue, valor en grados), Saturación
    (Saturation, valor porcentual) y brillo(Lightness, valor porcentual).

    Valores Transparent & currentColor:


    Los valores transparent y currentColor son valores que podemos aplicar a la propiedad
    “background-color”.

    El valor transparent quita el fondo del elemento y lo vuelve transparente, convirtiendo su


    valor rgba en 0, 0, 0, 0.

    El valor currentColor hereda el color del ancestro más cercano, la mayoría de veces del texto,
    y lo convierte en su “background-color”.

    Opacidad:
    La opacidad en CSS podemos ajustarla utilizando la palabra “opacity” y un valor del 0% al 100%
    o de 0% a 1%.

    Unidades de medidas CSS:


    Las unidades de medidas existentes en CSS son:

     Absolutas: Su valor no cambia y son medidas físicas como: cm, mm, in, pc, Q, Pixeles,
    Puntos.
     Relativas: Su valor es relativo a un contexto en específico. Em, rem, ex, ch; Cambian
    dependiendo al tamaño de la fuente. Y vw, vh, vmin, vmax; Cambian dependiendo del
    viewport. Y por último el porcentaje (%) depende del tamaño del contenedor.

    Dependiendo al tamaño de la fuente:

     Em: Se basa en el ancho de la “m” de la fuente del elemento.


     Rem: Se basa en el ancho de la “m” de la fuente del elemento raíz (HTML)
     Ex: Se basa en la altura de la “x” de la fuente del elemento.
     Ch: Basada en el ancho del “0” de la fuente del elemento.

    Dependiendo del ViewPort:

     Vw: Se basa en el ancho del Viewport. Su valor va desde el 1 hasta el 100.


     Vh: Se basa en el alto del Viewport. Su valor va desde el 1 hasta el 100.
    CSS Repaso 6/4/23

     Vmin: Se refiere al valor mínimo entre el ancho y la altura de la ventana gráfica del
    navegador. Se ajusta automáticamente al tamaño más pequeño de la ventana gráfica
    del navegador.
     Vmax: Se refiere al valor máximo entre el ancho y la altura de la ventana gráfica del
    navegador. Se ajusta automáticamente al tamaño más grande de la ventana gráfica del
    navegador.

    También podría gustarte