Aprende CSS rápidamente: crea sitios web adaptables desde cero

1. INTRODUCCIÓN: Hola, y bienvenidos a esta serie de tutoriales CSS. Mi nombre es Sant Kumar, y seré tu guía en este viaje al mundo de las hojas de estilo en cascada CSS es el lenguaje que hace que la web sea hermosa. Si bien HTML proporciona la estructura, CSS agrega el diseño, los colores, los diseños, las fuentes e incluso las animaciones que hacen que sitios web cobren vida en esta serie, comenzamos con los fundamentos, selectores, propiedades, valores y construimos temas avanzados como el modelo de caja, posicionamiento, fondos, En el camino, aprendiste cómo CSS interactúa con HTML y cómo hacer que las páginas sean visualmente atractivas, accesibles Así que comencemos nuestro viaje hacia CSS, y juntos aprenderemos a transformar páginas web simples experiencia hermosa y fácil de usar. 2. ¿Qué es CSS?: CSS significa Hojas de estilo en cascada. Es un lenguaje especial utilizado para controlar cómo se ven y se sienten las páginas web. Mientras que HTML es como los huesos o la estructura de tu página web, CSS es como la piel, la ropa y las decoraciones. Hace que tu página sea hermosa, colorida y única. Piénsalo de esta manera. Si construyes una casa con HTML, CSS es como pintas las paredes, escoges las cortinas, arreglas los muebles y pones el ambiente con luces. CSS tiene que ver con el estilo. Por ejemplo, puedes ver este hermoso sitio web. Todo el estilo se crea usando CSS. Con CSS, puedes cambiar los colores, fuentes y el tamaño del texto, agregar espacios y márgenes, crear bordes y fondos, organizar elementos en diseños como columnas y cuadrículas, agregar efectos como sombras, transiciones e incluso animaciones Haga que su sitio web se vea genial en teléfonos, tabletas y computadoras Si eliminamos el CSS, notarás que es solo un diseño muy básico. Ahora, espero que entiendas la importancia del CSS. ¿Cómo funciona CSS? CSS funciona mediante el uso de reglas. Cada regla le dice al navegador cómo aplicar estilo a una parte específica de la página HTML. 3. Sintaxis de CSS: Esta lección, nos vamos a centrar en la sintaxis de CSS. Si puedes dominar la sintaxis CSS, podrás escribir y entender cualquier regla de estilo para tu sitio web. Entonces, vamos a desglosarlo paso a paso. Primero, escribimos el selector, por ejemplo, P, el selector es la parte que viene antes de las llaves Le dice al navegador qué elemento HTML desea aplicar estilo. A continuación, usamos llaves, llaves para definir el estilo Dentro de las llaves, escribimos propiedades y sus valores Por ejemplo, el color es la propiedad y el blanco es el valor. Todo dentro de las llaves se llama bloque de declaración Aquí es donde se enumeran todos los estilos que desea aplicar al elemento seleccionado. Cada instrucción de estilo dentro del bloque se llama declaración, y cada declaración termina con un punto y coma Se pueden incluir múltiples declaraciones en un solo bloque. CSS ignora espacios, tabulaciones y saltos de línea, por lo que puedes organizar tu código ordenadamente sin afectar su funcionamiento Errores comunes a evitar. No te olvides de los rizados. Siempre use dos puntos entre propiedad y valor. Toda declaración debe terminar con punto y coma. Utilice la ortografía correcta para las propiedades y los valores. No olvides usar unidades donde sea necesario. La sintaxis CSS es la forma en que escribimos instrucciones en CSS para que el navegador pueda leerlas y darle estilo a nuestras páginas web. Una instrucción CSS se denomina regla o conjunto de reglas. En resumen, las reglas CSS tienen un selector y un bloque de declaración. Dentro del bloque, escriba uno o más pares de valores de propiedad, cada uno terminando con un punto y coma Use llaves para envolver sus declaraciones. Agrega comentarios para mayor claridad y mantén tu código organizado. 4. Propiedades y valores en CSS: Ahora profundizemos en dos partes muy importantes de cada declaración CSS, la propiedad y el valor. Entender estos te ayudará a escribir cualquier estilo que quieras para tu sitio web. Una propiedad es como una instrucción de estilo o una opción que puedes cambiar sobre un elemento. Le dice al navegador qué aspecto del elemento quieres controlar. Por ejemplo, el color cambia el color del texto, color de fondo cambia el color de fondo. El tamaño de fuente establece qué tan grande es el texto. Margin agrega espacio fuera de un elemento, padding agrega espacio dentro de un elemento, border agrega un borde alrededor de un elemento, width y height controlan el tamaño de un elemento. Hay cientos de propiedades en CSS, cada una para diferentes tipos de estilo, como fuentes, colores, espaciado, posicionamiento, animación y mucho más. ¿Qué es un valor en CSS? Un valor es cómo se quiere establecer esa propiedad. Define el estilo exacto que deseas. Por ejemplo, para el color, los valores podrían ser rojo, azul, o código o formato RGB, y más. Para el tamaño de fuente, los valores podrían ser píxeles, EM y porcentaje, y más. Y también como centro, sólido, ninguno, números para cosas como opacidad o índice Z, funciones como URL, al, R, y a veces combinaciones de estos consejos para propiedades y valores Siempre deletrea los nombres de las propiedades exactamente como CSS espera un error tipográfico y el estilo no funcionará Muchas propiedades tienen valores predeterminados si no los establece. Siempre puedes anularlos con tus propios valores. 5. CSS: en línea, interno y externo: Tres formas principales de agregar CSS a tu HTML, CSS en línea, CSS interno y CSS externo. Entender estos te ayudará a decidir cómo organizar tus estilos para cualquier proyecto web. ¿Qué es el CSS en línea? CSS en línea significa agregar reglas de estilo directamente a un elemento HTML individual usando el atributo style dentro de la etiqueta de apertura. Ejemplo, esta es una página HTML básica, y tenemos cuatro párrafos. Déjame mostrarte el código en Bloc de notas plus plus. Aquí escribimos el atributo style, luego una propiedad como color, y un valor como el azul. Ahora, nuestro primer párrafo se vuelve azul. ¿Cuándo debería usar CSS en línea para cambios rápidos de una sola vez? Cuando necesitas aplicar estilo a un solo elemento específico solamente. Ahora vamos a discutir sobre CSS interno. CSS interno significa escribir tus reglas CSS dentro de una etiqueta de estilo en la sección principal de tu documento HTML. Por ejemplo, en la sección head, escribe las etiquetas de estilo de apertura y cierre. Dentro de las etiquetas de estilo. Usa un selector como P, seguido de la propiedad y el valor. Ahora, todo el texto del párrafo se vuelve azul. Con CSS interno, los estilos se aplican a toda la página HTML, todos los elementos coincidentes. ¿Cuándo debes usar CSS interno? Cuando quieres darle estilo a una sola página web y esos estilos son exclusivos de esa página para sitios pequeños con solo una o dos páginas, y no funciona bien para sitios web grandes con muchas páginas, estilos tienen que repetirse en cada archivo HTML. Tu archivo HTML puede desordenarse si agregas muchas reglas CSS Ahora CSS externo. CSS externo significa escribir todas tus reglas de estilo en un archivo separado, generalmente llamado algo así como estilos punto CSS y vincular ese archivo a tu documento HTML usando el elemento link. Primero, definimos la ruta del archivo CSS. Usamos la etiqueta Link con el atributo AL establecido en stylesheet Y luego especificar la ruta al archivo CSS como style dot CSS. Una cosa importante a recordar es que el archivo CSS debe tener la extensión CSS punto. Ahora, ve a tu carpeta de proyecto y crea un nuevo archivo en tu editor de código. En ese archivo, escriba el selector CSS P, luego defina el color y el valor. Guardar el archivo como estilo punto CSS. Ahora, cuando refresco la página, todo el texto del párrafo se vuelve verde. Se utiliza en casi todos los sitios web o proyectos del mundo real cuando quieres usar los mismos estilos en varias páginas, cuando quieres mantener tu código organizado y profesional. 6. Instalación de código de VS: Código de estudio o código VS. Es completamente gratis y muy fácil de usar. Pero si no quieres usar VS Code, no te preocupes. También puedes usar Bloc de notas plus plus. Es otro buen editor para archivos HTML. Primero, busca viscode en google.com. Ahora, da clic en el sitio web oficial de Visual Studio Code. En la página de descargas, verás opciones para diferentes sistemas operativos. Si eres usuario de Windows, descarga el archivo de instalación de Windows. Para los usuarios de Mac, elija la versión para Mac. Y para Linux, selecciona la versión que se ajuste a tu SO. Una vez completada la descarga, instala el software. Después de la instalación, abre VS Code y verás su interfaz. Eso para crear un nuevo archivo, solo tienes que ir al menú de archivos y hacer clic en Nuevo archivo de texto. Si desea abrir un archivo existente, haga clic en Abrir archivo y elija su archivo HTML desde su computadora. Ahora vamos a instalar una extensión útil que te permite previsualizar tu página HTML directamente dentro de VS Code. Haga clic en el icono de extensiones en la barra lateral. Parece un cuadrado con cuatro cajas. En la barra de búsqueda escribe HTML preview, y aquí verás la lista de plugins. Ahora, haga clic en esta extensión de vista previa HTML y luego haga clic en el botón Instalar. Una vez que cambia para desinstalar, significa que la extensión se ha instalado correctamente. Ahora, vamos a personalizar algunos ajustes para una mejor experiencia de codificación. Haga clic en el icono de engranaje en la esquina inferior izquierda y vaya a ajustes. Debajo de la sección de archivos, puedes elegir cuando tu archivo guarda, yo personalmente prefiero en el cambio de enfoque. También puede desplazarse hacia abajo para cambiar el tamaño de fuente y puede establecer cualquier tamaño de fuente. Y aquí también puedes elegir tu familia de fuentes favorita. Ahora, vuelve a hacer clic en el icono de engranaje, luego ve a tema y Tema de color. Aquí podrás explorar y elegir el tema que más te guste. Pero prefiero usar el tema oscuro moderno, pero también puedes seleccionar otro tema. Y eso es todo. Ahora estás listo para escribir, editar y previsualizar tu código HTML en VS Code. En el siguiente video, entenderemos la estructura básica de la página HTML. 7. Configuración de la pluma de código: Edita archivos HTML y CSS, voy a usar CodePen como editor Es gratis y fácil de usar. Simplemente haga clic en el botón de inicio de sesión para iniciar sesión. O si no tienes una cuenta, simplemente regístrate. Después de iniciar sesión, verá la interfaz predeterminada. Ahora, haga clic en su trabajo, luego cree e inicie un nuevo Pen. También puede hacer clic en este botón para cambiar el diseño de la interfaz. Ahora puedes pegar tu código aquí y empezar a trabajar. 8. Selectores básicos de CSS: Exploraremos uno de los temas más importantes en los selectores CSS Los selectores son cómo le dices CSS qué elementos diseñar en tu página web Vamos a sumergirnos en los tres selectores básicos que usarás todo el tiempo Selectores de elementos, selectores de clase y selectores de ID. Un selector de elementos selecciona todos los elementos HTML de un tipo dado, como todos los párrafos o todos los encabezados. Simplemente use el nombre de la etiqueta HTML como selector. Por ejemplo, en este código, tenemos múltiples etiquetas de encabezado, párrafos y un elemento span. En CSS, primero, escribe un selector como H dos y luego establece una propiedad y un valor, por ejemplo, color azul. Ahora, todo el texto del encabezado H dos se vuelve azul. Este método es útil cuando se quiere que cada elemento de cierto tipo tenga el mismo estilo. Ahora, hablemos del selector de clases. Un selector de clase le permite aplicar estilo uno o más elementos usando el mismo atributo de clase. Es muy flexible. Se puede aplicar la misma clase a muchos elementos. Usamos un punto permitido por el nombre de la clase en CSS. Por ejemplo, en el CSS, punto, luego usas cualquier nombre como color verde. Y establece el color en verde. Ahora, vamos a aplicarlo. Primero, cambiaremos color del texto del encabezado H tres en la etiqueta H three de apertura en el atributo class y lo estableceremos en la clase de color verde que acabamos de crear. El texto del encabezado H tres aparecerá ahora en verde. A continuación, apliquemos la misma clase al primer párrafo. Nuevamente, agrega color verde clase dentro de la etiqueta P. El primer párrafo también se vuelve verde. Como puedes ver, puedes reutilizar la misma clase en múltiples elementos cuándo usarla. Cuando desee aplicar el mismo estilo a varios elementos, incluso si son de diferentes tipos para patrones de diseño reutilizables como tarjetas, botones, alertas o diseños. Por último, vamos a discutir sobre el selector de ID. Un selector de ID selecciona un único elemento único con un atributo ID específico. Cada ID debe usarse solo una vez por página, y usamos un hash seguido del nombre de ID. En CSS, usamos el selector de ID escribiendo un símbolo hash seguido de cualquier nombre, por ejemplo, cabeza principal. Y luego establecer el color rojo. Ahora, en el encabezado H dos, escribe el atributo ID y ponlo en encabezado principal. Recuerde, a diferencia de las clases, un ID debe usarse solo una vez por página, no varias veces. Sin embargo, puedes crear varios ID diferentes en CSS y usarlos en diferentes elementos. Por ejemplo, puedes crear otro ID como texto rojo, y aplicarlo a un párrafo. Simplemente escriba ID, texto rojo dentro de la etiqueta P, y ese párrafo se diseñará con texto rojo y cuándo usarlo cuando desee darle estilo a un elemento único como un banner principal, barra de navegación o una sección específica para características únicas que deberían aparecer solo una vez en una página Y para concluir, revisemos rápidamente lo que hemos aprendido sobre los selectores básicos de CSS Los selectores de elementos, te permiten diseñar cada etiqueta de cierto tipo, como todos los párrafos o todos los encabezados Los selectores de clase son excelentes para reutilizar estilos en muchos elementos, sin importar qué etiqueta sean simplemente agregando el mismo nombre de clase Los selectores de ID apuntan solo a un elemento único en una página, lo que le brinda un control preciso sobre secciones o elementos individuales Comprender estos tres selectores básicos es la base de CSS Con ellos, puedes seleccionar y diseñar casi cualquier parte de tu página web, mantener tu código organizado y crear diseños de la manera que quieras. 9. Especificidad de CSS: La especificidad de CSS es el conjunto de reglas que utiliza el navegador para decidir qué estilo aplicar cuando más de una regla CSS se dirige al mismo elemento HTML. En otras palabras, si dos o más reglas pudieran darle estilo a un elemento, especificidad decide qué regla gana. Si alguna vez te preguntaste por qué tu estilo no está apareciendo, aunque escribiste la regla correctamente, suele ser por la especificidad. Cuanto más específico sea su selector, más potencia tendrá. Por ejemplo, en este código, tenemos encabezamientos y párrafos Primero, diseñemos el encabezado H dos. En el archivo CSS, escribe el selector H dos, luego establece el color en azul. Ahora el encabezado H dos se vuelve azul. A continuación, vamos a crear un selector de clase. Escribe un punto seguido de un nombre de clase como encabezado principal y establece el color en verde. A continuación, aplique esta clase al estilo de encabezado de la clase de etiqueta H two. Ahora el texto H dos se vuelve verde. Ahora usemos un selector de ID. Escribe un hash seguido de un nombre como encabezado principal uno y establece el color naranja aplícalo a la etiqueta H dos usando encabezado ID Estilo uno. Ah, y el texto del encabezado se vuelve naranja. A continuación, apliquemos CSS en línea. Dentro de la etiqueta H dos, agrega un atributo de estilo y establece el color en rojo. Ahora, el texto H dos se vuelve rojo. Quizás se esté preguntando por qué cada selector anula al anterior Esto se debe a la especificidad de CSS. Cuando se aplican múltiples reglas al mismo elemento, gana la que tenga la mayor especificidad. Analicemos cómo puntúan los diferentes selectores. Los estilos en línea escritos directamente en HTML tienen la mayor especificidad. Los selectores de identificación vienen a continuación. Después selectores de clase, selectores atributos y pseudo Los selectores de elementos y los pseudo elementos tienen la menor especificidad También puedes recordarlo usando puntos de especificidad. El selector con los puntos más altos anulará a otros. Espero que ahora entiendas cómo funciona la especificidad CSS y por qué es importante. Déjame mostrarte una condición más. En tu archivo CSS, vamos a crear otra clase con el mismo nombre punto Min encabezado. Y esta vez establecer el color en Cian. Ahora el texto del encabezado se vuelve cian. ¿Por qué? Porque cuando dos selectores tienen la misma especificidad, el que aparece último en el archivo CSS tiene prioridad Dominar la especificidad te ayudará a escribir CSS más limpio, evitar sorpresas de estilo y tener un control total sobre la apariencia de tu sitio web 10. Color en CSS: En esta lección, exploraremos cómo usar colores en CSS. Los colores son una de las herramientas de diseño más potentes. Crean contraste, expresan el estado de ánimo y guían el ojo del usuario. CSS nos proporciona numerosas formas de definir y controlar los colores, que van desde palabras clave simples hasta funciones avanzadas que soportan transparencia y gradientes. Propiedades de color CSS. Los colores se pueden aplicar a muchas propiedades CSS. Por ejemplo, color, establece color de texto, color fondo, establece relleno de fondo, borde establece color de borde, color de contorno, establece contornos, estilos de enfoque, sombra de texto de sombra de cuadro, usa color con sombras. Puedes usar nombres de colores simples como rojo, azul, verde, negro o blanco. Este método es sencillo pero tiene sus limitaciones. También puedes usar hexadecimal. Códigos rrggBB donde R es igual a rojo, G es verde, B Ejemplo, donde código FF cero, cero, cero, cero, rojo puro. También puedes usar la versión taquigráfica. F cero, cero es igual a FF cero, cero, cero. Otra opción es RGB. Y por último, se puede utilizar RGBA, donde el valor A representa transparencia canal Alpha Para encontrar códigos de color HTML, simplemente puede buscar en Google. Déjame mostrarte un ejemplo. Visite un sitio web de códigos de color HTML donde podrá encontrar el código para cualquier color. Allí podrás explorar muchas opciones. Simplemente seleccione un color y verá su código hexadecimal junto con el valor RGB. También puedes cambiar al modo RGB y explorar más opciones también. CSS ofrece muchas formas de definir colores, desde palabras clave simples y códigos hexadecimales hasta modelos avanzados como RGB, HSL y degradados. Con los canales Alpha, puedes agregar transparencia. Con el color actual, puede reutilizar el color del texto en otro lugar. Recuerda siempre elegir colores que no solo se vean bien sino que también mantengan la accesibilidad y legibilidad Con los colores en CSS, no solo diseñas, te comunicas. 11. Árbol genealógico en HTML: Hablar sobre el árbol genealógico HTML. Al igual que en una familia real, los elementos HTML tienen relaciones, padres, hijos, hermanos, antepasados y descendientes. Comprender estas relaciones te ayudará a usar selectores CSS de manera más efectiva, padre e hijo El padre es el elemento contenedor. El niño es el elemento directamente dentro del padre. Ejemplo, aquí, Div es el padre y P es el hijo. Hermanos hermanos son elementos que comparten el mismo padre. Ejemplo, los tres elementos LI son hermanos porque todos están dentro del mismo padre UL. Ancestros y descendientes. Un antepasado es cualquier elemento que está más arriba en la jerarquía Esto incluye al padre, abuelo, bisabuelo, y así sucesivamente Un descendiente es cualquier elemento que se anida dentro de un antepasado, no importa cuán Ejemplo, body es un antepasado de P, y también lo son DIV y sección P es un descendiente de sección, div y cuerpo. Echemos un vistazo a este código HTML. Aquí, la etiqueta corporal es nuestro punto de partida. Es el padre de todo lo que hay dentro de él. En el archivo HTML completo, HTML sería la raíz real, pero para este fragmento, nos centraremos en body Niños de primer nivel, hijos directos del cuerpo R, sección, artículo. Estos dos elementos son hermanos porque comparten el mismo padre. Dentro de la sección, sección es un hijo de cuerpo. Dentro de la sección, tenemos H dos y P. Tanto H dos como P son hijos de sección, y son hermanos entre sí. Dentro de la sección P interior. Esta P contiene algún texto, pero también incluye dos elementos, itálica, subrayado Estas etiquetas, yo y somos hijos de la P y hermanos entre sí. Dentro del artículo. El artículo es otro hijo de cuerpo. Dentro del artículo hay H tres y P. Nuevamente, H tres y P son hijos de artículo y hermanos. Dentro de la P dentro del artículo. Esta P contiene texto y elementos fuertes y span. Strong y Span son hijos de esta P y hermanos entre sí. Ahora, entendamos este código con la ayuda de una infografía Parent, un elemento que contiene directamente otros elementos. Ejemplo, cuerpo es el padre de sección y artículo. Niño. Un elemento directamente dentro de otro. Ejemplo, H dos es hijo de sección. Hermanos, elementos con el mismo padre. Ejemplo, sección y artículo son hermanos. H dos y P sección interior son hermanos. Ancestro. Un elemento por encima de otro en el árbol , padre, abuelo, etcétera. Ejemplo, el cuerpo es un antepasado de cada elemento dentro de él. Descendiente, cualquier elemento dentro otro elemento en cualquier ejemplo, U dentro de P, sección interior, dentro del cuerpo Todos son descendientes del cuerpo. 12. Anchura y altura en CSS: Si quieres crear diseños geniales, alinear las cosas perfectamente o entender por qué los elementos se ven como lo hacen, debes entender el modelo de caja. ¿Qué es el modelo de caja CSS? Imagina que cada elemento de una página web es una caja, ya sea un párrafo, un botón, una imagen o un encabezado. El modelo de caja CSS describe cómo se construyen, dimensionan y espacian estas cajas. Controla el diseño y el espacio alrededor de cada elemento HTML. Las propiedades width y height en CSS permiten controlar el tamaño del área de contenido de un elemento. Esa es la zona donde se encuentra tu texto, imágenes u otro contenido. ancho y la altura generalmente afectan a los elementos de nivel de bloque como DIV, P, sección e IMG También se pueden aplicar a elementos de bloque en línea y flex o cuadrícula, pero no a elementos en línea puros como span a menos que cambie su visualización. Puede usar muchas unidades para ancho y alto, como píxeles, porcentajes, unidades de ventana gráfica, Ms, REMs, auto, ancho máximo, Mnwidth max height y Mnhight Por ejemplo, en el HTML, primero escriba la apertura la etiqueta DIV con un atributo de clase. Por ejemplo, cuadro de clase y luego cerrar la etiqueta DIV. Ahora en el CSS, escribe un selector de clase usando un punto seguido del cuadro de nombre de clase. Establezca el ancho en 600 píxeles. Altura hasta 400 píxeles. Y el color de fondo a verde claro. Ahora puedes ver la caja. Los píxeles son fijos. Unidades absolutas. Un píxel equivale a un punto en tu pantalla. El beneficio de usar píxeles es que sabes exactamente qué tan grande será tu elemento. Son ideales para imágenes, iconos y bordes donde quieres un tamaño específico sin cambiar, y el tamaño no cambiará a menos que lo modifiques en el CSS Sin embargo, los tamaños de píxeles no responden a los cambios en el tamaño de la pantalla, lo que puede hacer que los diseños se rompan en dispositivos más pequeños. Por ejemplo, si arrastro la barra del navegador, puede ver aparecer una barra de desplazamiento horizontal. Entonces, cuando necesitas dimensiones exactas, como para botones, logotipos o avatares, los píxeles son una buena opción. Ahora, hablemos de unidades porcentuales. Establezca el ancho de la caja en 80%. Los porcentajes definen el tamaño relativo al tamaño del elemento padre. Esto significa que el elemento crecerá o se encogerá junto con su padre, haciendo que su diseño sea más receptivo. Use ancho porcentual para columnas o contenedores flexibles. Es ideal para crear diseños fluidos, sin importar el tamaño de la pantalla, el elemento permanece en proporción. Ahora probemos VH para la altura. VH significa altura de ventana gráfica, y una VH equivale al 1% de la altura de las ventanas del navegador Esta unidad es verdaderamente receptiva. La altura de los elementos cambia a medida que se cambia el tamaño de la ventana del navegador. Es ideal para crear secciones de altura completa, pancartas o imágenes de fondo. Recuerde, VH se basa en la ventana del navegador, no en el elemento padre. Ahora usemos Max Set Maxwidth 800 pixeles. Esto significa que si la ventana principal o del navegador se hace más grande, el elemento puede crecer, pero no más allá de los 800 píxeles. Ayuda a mantener la capacidad de respuesta a la vez que mantiene un límite máximo A continuación, vamos a aplicar MnWidth set Mnwidth 700 pixeles. Ahora bien, si el contenido o padre intenta hacer que el elemento sea más pequeño que 700 píxeles, dejará de encogerse Intenta cambiar el tamaño de la ventana. La caja no se encogerá por debajo de 700 píxeles. Elegir la unidad correcta hace que sus diseños sean más flexibles, accesibles y modernos. Intente combinar unidades para obtener aún más potencia como Ancho máximo en píxeles ancho en porcentaje o relleno en EM. 13. CSS para rellenos y margen: Explora dos conceptos fundamentales en el relleno y margen del modelo de caja CSS. pesar de que estos dos a veces se confunden, hacen trabajos muy diferentes cuando se trata espaciado y maquetación en sus páginas web. Vamos a desglosarlo todo . ¿Qué es el relleno? Relleno es el espacio dentro una caja de elementos entre el contenido y el borde. El acolchado aumenta el espacio dentro de la caja misma. El relleno tiene cuatro valores, padding top, y aquí puedes usar cualquier valor como diez píxeles. Relleno derecho, diez píxeles, relleno inferior diez píxeles, relleno a la izquierda diez píxeles. También podemos escribir relleno más en breve. Primer tipo. Aquí, el primer valor es para arriba, el segundo para la derecha, el tercero para el inferior y el último para la izquierda. Segundo tipo. Aquí, el primer valor se aplica a la parte superior e inferior, y el segundo se aplica a la izquierda y a la derecha. Y tercer tipo, esto establece el mismo acolchado para arriba, derecha, abajo e izquierda. Ahora, en este ejemplo, tenemos un elemento div. Vamos a crear tres elementos div más copiando el primero y pegándolo tres veces Renomíbralos como la caja dos, la caja tres y la casilla cuatro. En el CSS, haz lo mismo. Para la caja dos, cambie el fondo a rojo, para la caja tres, use amarillo, y para la caja cuatro, use naranja. Ahora mismo, en cada cuadro, el texto está muy cerca de los bordes de la caja de contenido. Para este tipo de situaciones, utilizamos relleno. Primero, hagámoslo el largo camino en CSS, padding top, diez píxeles. Relleno derecho, diez píxeles. Relleno inferior de diez píxeles. Relleno a la izquierda, diez píxeles. Ahora, el segundo tipo relleno diez píxeles, diez píxeles, diez píxeles, diez píxeles. Aquí, el primer valor es para arriba, el segundo para la derecha, el tercero para el inferior y el último para la izquierda. El tercer tipo, acolchado. Diez píxeles, diez píxeles. Aquí, el primer valor se aplica a la parte superior e inferior, y el segundo valor se aplica a la izquierda y a la derecha. El cuarto tipo, relleno de diez píxeles. Esto establece el mismo acolchado para la parte superior, derecha, inferior e izquierda. Se puede ver que el resultado visual de todos estos métodos de relleno es el mismo. Simplemente depende de tus necesidades y de qué estilo de escritura prefieras. Ahora, el espacio entre el texto y el cuadro de contenido ha aumentado, y se ve mucho mejor. Hablemos de Margen. Margen es el espacio fuera una caja de elementos entre el borde y otros elementos. Piense en el margen como el espacio que deja entre su caja y las cajas que la rodean, como la brecha entre las imágenes que cuelgan de una pared. Margen crea espacio entre diferentes elementos en la página. El margen tiene cuatro valores. Margen arriba aquí usa cualquier valor como diez píxeles. Margen derecho, diez píxeles. Margen inferior diez píxeles. Margen izquierdo, diez píxeles. También podemos escribir Margin de una manera más corta. Primer tipo. Aquí, el primer valor es para arriba, el segundo para la derecha, el tercero para el inferior y el último para la izquierda. Segundo tipo. Aquí, el primer valor se aplica a la parte superior e inferior, y el segundo se aplica a la izquierda y a la derecha. Tercer tipo, esto establece el mismo margen para arriba, derecha, abajo e izquierda. Ahora usemos margen en estas cajas. Primero, hagámoslo el largo camino en CSS. En CS, derecha, margen superior, dos puntos diez píxeles. Margen derecho, diez píxeles. Margen inferior diez píxeles. Margen a la izquierda diez píxeles. Ahora segundo tipo. Margen, diez píxeles, diez píxeles, diez píxeles, diez píxeles. Aquí, el primer valor es para arriba, el segundo para la derecha, el tercero para el inferior y el último para la izquierda. Después tercer tipo margen, diez píxeles, diez píxeles. Aquí, el primer valor se aplica a la parte superior e inferior, y el segundo se aplica a la izquierda y a la derecha. Y cuarto tipo margen, diez pixeles. Esto establece el mismo margen para arriba, derecha, abajo e izquierda. Se puede ver que el resultado visual de todos estos métodos de margen es el mismo. Simplemente depende de tus necesidades y de qué estilo de escritura prefieras. Los valores de margen también pueden ser negativos, lo que acerca los elementos o incluso los superpone. Por ejemplo, usemos margen negativo en este cuadro y podrás ver el resultado. Una cosa más importante, el margen puede tener un valor automático. Si queremos centrar una caja horizontalmente, podemos usar Margen cero píxeles auto. El margen vertical de cero píxeles superior e inferior, y Auto centra horizontalmente la caja dentro de su contenedor. Ahora, esta caja verde claro está alineada horizontalmente en el centro. ¿Por qué son importantes el relleno y el margen? Te dan un control preciso sobre cómo se ven y se sienten tus diseños. Puedes hacer botones, tarjetas, imágenes o secciones más legibles y atractivas. Un buen uso del espaciado hace que un sitio web se vea limpio, equilibrado y profesional. Dominar el relleno y el margen te ayudará a construir hermosos diseños equilibrados en cada proyecto 14. Borde CSS: Vamos a hablar de la frontera, una de las partes clave del modelo de caja CSS. El borde es la línea que rodea el relleno y el contenido de un elemento, y actúa como un marco alrededor de tu caja. Puede controlar su ancho, estilo y color, y los bordes son visibles a menos que los establezca en ninguno o los haga transparentes. Los bordes se pueden aplicar individualmente a cada lado. Borde superior, borde derecho, borde inferior, borde izquierdo. Las fronteras también tienen una propiedad de estilo. Esto define cómo se ve la frontera. Los estilos comunes son sólidos, una línea continua, discontinua una línea discontinua, punteada, una línea punteada, doble, una línea doble, surco, cresta, recuadro, principio, tres efectos D, no, sin Después de eso, usamos el color del borde. Ahora, usemos bordes en estas cajas. Para la primera caja, usaremos el método long. En CSS, derecha, borde top diez píxeles negro sólido. Borde derecho, diez píxeles negro sólido. Borde inferior, diez píxeles negro sólido. Borde izquierda diez pixeles negro sólido. Ahora, en la primera caja, se puede ver un borde negro sólido que tiene diez píxeles de grosor. Aquí hay algo interesante. Vamos a copiar estos cuatro estilos de borde y pegarlos en el segundo cuadro es CSS. Puede cambiar los estilos de borde a punteado, punteado, doble o incluso ninguno También puedes cambiar los colores del borde, por ejemplo, verde, magenta o morado ahora vamos a usar el método short simplemente escribir, borde derecho, dar ancho de borde como diez pixeles, luego estilo sólido y color negro. Esto establece el ancho, el estilo y el color en una línea. Dominar la propiedad border le permite agregar estructura, énfasis y detalles de diseño a los diseños de su sitio web Ahora, hablemos del radio fronterizo. La propiedad de radio de borde permite crear esquinas redondeadas para los elementos. Se puede utilizar en cajas, imágenes, botones, y casi cualquier elemento HTML. Funciona si el elemento tiene un borde o no. En CSS, radio del borde derecho, y dar valor, y el valor puede ser píxeles o un porcentaje también. Demos 20 pixeles. Y se puede ver la esquina redonda. Ahora el segundo método, el radio del borde derecho. Y dar valor diez píxeles, diez píxeles, diez píxeles, diez píxeles. Y también puedes usar un valor diferente como 50 píxeles y 40 píxeles, y usar Px para un control preciso, signo de porcentaje para formas como círculos. Si quieres un rectángulo completamente redondeado, haz que el radio sea al menos la mitad de la altura de los elementos. Así es como funcionan las fronteras y el radio fronterizo en CSS. 15. Sombras en CSS: En esta lección, vamos a aprender sobre la sombra de caja, una propiedad CSS que te permite crear sombras para cualquier elemento, agregando profundidad, contraste y estilo a tu diseño. Y la propiedad box shadow permite aplicar una o más sombras de caída a los elementos. Se puede utilizar para hacer que los elementos se vean levantados de la página, dar un brillo suave o crear efectos creativos. Puedes aplicar sombras de caja a cajas, botones, tarjetas, imágenes y casi cualquier elemento HTML. La estructura básica de la sombra caja es sombra de caja, luego desplazamiento X, posición horizontal de la sombra, movimientos positivos hacia la derecha, movimientos negativos hacia la izquierda y desplazamiento Y, posición vertical de la sombra. positivo se mueve hacia abajo, el negativo se mueve hacia arriba, luego el radio de desenfoque, opcional qué tan borrosa se ve la sombra, los valores más altos equivalen a una sombra más suave Y puedes usar radio de propagación, opcional, cuánto crece o se contrae la sombra, positivo equivale a mayor, negativo igual a menor, luego color opcional, el color de la sombra puede usar el nombre HEX RGB o RGBA para transparencia Ahora tenemos dos cajas. Se puede ver el CSS. En primer cuadro, usamos sombra única en CSS, sombra de caja derecha, luego offset X cuatro píxeles, desplazamiento Y, seis píxeles, radio de desenfoque diez píxeles y RGBA de color negro, usamos cero, cero, cero y opacidad 0.3 Ahora se puede ver la sombra en la primera caja. Estos valores se pueden aumentar o disminuir dependiendo del tipo de estilo de sombra que desee. En el segundo cuadro, usemos múltiples sombras en CSS, derecha, sombra de caja y demos valor cero, 14 píxeles, 16 píxeles, RGBA, 0,000.5 Use, luego dé segundo valor cero, 025 pX rg BA 2550, cero, cero, 0.5 Aquí, la primera sombra aparece en la parte inferior de la caja. La segunda sombra aparece alrededor la caja con un color rojo claro. Una cosa más. Por defecto, las sombras aparecen fuera del elemento. Si los quieres dentro, usa la palabra clave inset Por ejemplo, escribe recuadro y ve la sombra dentro de la caja. Para la segunda caja, si quieres insertar esta sombra roja clara, entonces usa el recuadro aquí Ahora, la sombra de color rojo claro está dentro de la caja. Las sombras de caja te permiten agregar profundidad, énfasis y un aspecto pulido a tus diseños, ya sea una sombra simple o un efecto creativo de sombra múltiple. Usa sombras suaves para una apariencia natural, menor opacidad, mayor desenfoque Coincide con la dirección de la fuente de luz a través de su diseño para mayor consistencia y evita el uso de sombras fuertes, pueden hacer que un diseño se sienta pesado. 16. Caja de contenido CSS vs. caja de borde: En esta lección, exploraremos dos tamaños importantes de caja en CSS, contenido y cuadro de borde y veremos cómo afectan la forma en que se calculan la anchura y la altura. Tenga en cuenta que, por defecto, todos los elementos en HTML utilizan el modelo de tamaño de caja de contenido, por lo que no es necesario agregar cuadro de contenido en su CSS. Pero para fines de aprendizaje, te voy a mostrar cómo configurarlo explícitamente en CSS. Ahora tenemos dos cajas con el mismo ancho y alto. Para la primera caja, agreguemos la caja de contenido de tamaño de caja. Para la segunda caja, agreguemos cuadro de borde de dos puntos de tamaño de caja. Ahora, vamos a aplicar el mismo relleno a ambas cajas. Resultado para el primer cuadro de contenido. El cuadro real se vuelve más grande que el ancho establecido porque el relleno y el borde se agregan al ancho del contenido. Cálculo de ancho total, contenido, 400 píxeles. Relleno 20 píxeles más 20 píxeles equivale a 40 píxeles. Borde, cinco píxeles más cinco píxeles, equivale a diez píxeles. El ancho total es igual a 400 más 40 más diez es igual a 450 píxeles. Resultado para la segunda caja, caja fronteriza. La caja se mantiene exactamente con 400 píxeles de ancho, sin importar el relleno o el borde. El área de contenido se reduce automáticamente para dejar espacio para el relleno y el borde, manteniendo el ancho total fijo en 400 píxeles. Conclusión, caja de contenido. El ancho es solo para el contenido y borde de relleno se agregan fuera de él. Cuadro de borde, Ancho incluye contenido, relleno y borde en conjunto. Si desea un control preciso sobre el tamaño total del elemento, especialmente en diseños receptivos, use Boarder Box Si prefieres el enfoque tradicional donde anchura y la altura se refieren solo al contenido, quédate con el cuadro de contenido. Muchos desarrolladores establecen el tamaño de la caja colon boarder Box globalmente para una administración más fácil del diseño 17. Pantalla con CSS: bloque en línea, bloque y bloque en línea: Habla sobre la propiedad display, una de las propiedades CSS más importantes porque controla cómo se aplica el modelo de caja a un elemento y cómo ese elemento participa en el diseño de página. Cada elemento HTML es una caja en el modelo de caja CSS, pero no todas las cajas se comportan de la misma manera. La propiedad display indica al navegador cómo tratar ese cuadro en el diseño. Controla si el elemento comienza en una nueva línea o se asienta en línea con otras, ya sea que siga reglas de modelo de bloque o de caja en línea. En nuestro código, tenemos dos elementos DIV y cuatro elementos span. Por defecto, los elementos DIV son elementos de nivel de bloque. Comienzan en una nueva línea y ocupan todo el ancho de su padre a menos que establezca un ancho. Los elementos Span son elementos en línea. Solo ocupan tanto espacio como sea necesario y se muestran lado a lado con otro contenido en línea. Si establecemos ancho y alto en un div, funciona como se esperaba. Pero si tratamos de establecer ancho y alto en un lapso, no hay ningún efecto visible. El navegador aún lo mide en función del texto que contiene. ¿Por qué? Porque los elementos en línea son parte del flujo de texto, no cajas independientes. Vamos a usar relleno. En un DIV, relleno funciona como se esperaba. En un lapso. El acolchado horizontal izquierda y derecha funciona normalmente. Agrega espacio dentro del elemento y aleja horizontalmente otro contenido en línea. El relleno vertical superior e inferior se agrega visualmente dentro del elemento, pero no separa las líneas verticalmente. En cambio, se superpone dentro de la altura de la línea. Margen. En un div, el margen funciona como se esperaba. En un lapso. Margen horizontal izquierdo y derecho funciona normalmente. Empuja el contenido en línea vecino lejos. El margen vertical superior e inferior no tiene ningún efecto sobre el espaciado entre líneas. La altura de línea permanece igual y no se crea ningún hueco vertical. Podemos cambiar el comportamiento de un elemento mediante el uso de la propiedad display Los tres valores principales de visualización son elementos de bloque que comienzan en una nueva línea y pueden tener ancho, alto, margen y relleno aplicados completamente. El elemento en línea fluye con texto, ignora el ancho alto, pero relleno horizontal y el margen funcionan El elemento de bloque en línea se comporta como contenido en línea, pero admite ancho, margen de altura y relleno completamente. Si quieres que un elemento se comporte como un elemento en línea, pero aún así permitir que el ancho, la altura, margen y el relleno funcionen, usa el bloque en línea de visualización. Ahora, los elementos span funcionarán como elementos de nivel de bloque, pero seguirán manteniendo su comportamiento similar en línea. O si quieres que funcione solo como un elemento de nivel de bloque, entonces usa el bloque de visualización. Si quieres que un div aparezca en línea con otro texto, puedes usar display inline. Elegir el valor de visualización correcto es esencial para controlar cómo se comporta el modelo de caja CSS Comprender esto es clave para crear diseños precisos y predecibles. 18. Color y degradados de fondo en CSS: En esta lección, aprenderemos sobre las propiedades de fondo CSS que le permiten controlar cómo se ve y se comporta el fondo de un elemento fondos pueden ser colores, imágenes, degradados o incluso una combinación de ellos. Tenemos cuatro cajas con los mismos estilos. En CSS, caja uno, escribir color de fondo y dar color valor y valor puede ser nombres HEX, RGB, RGBA, HSL, o HLA Primero, usemos nombre como rojo y veamos el resultado. Ahora use el código FF 0000 y vea el resultado y use RGB y luego valore 250 500. Y podemos agregar Alpha también para transparencia, usa A aquí y darle valor Alpha 0.5. Y ver el resultado. Y podemos usar fondo también. Ahora, vamos a discutir sobre gradientes y los gradientes en CSS son imágenes generadas por funciones y establecidas a través de imagen de fondo Hay tres tipos principales, gradientes lineales, mezcla a lo largo de una línea Gradientes radiales, mezcla desde un punto central hacia afuera. Los gradientes cónicos se mezclan alrededor de un punto central como una rueda de colores Dado que los gradientes son imágenes, puedes colocarlos en capas, repetirlos, colocarlos y combinarlos con imágenes reales Sintaxis para gradientes lineales. La imagen de fondo, luego el gradiente lineal, luego la dirección y con la dirección, pueden especificar palabras clave como a la derecha o al fondo o usar ángulos como 45 grados o 180 grados. Luego las paradas de color significan una lista de sus colores, y puede incluir posiciones opcionales en porcentajes o píxeles para controlar dónde aparece cada color. Puede usar múltiples paradas de color en CSS justo en el cuadro dos, imagen de fondo luego gradiente lineal. Entonces colores como el amarillo y el azul. Y verás un degradado de amarillo a azul. Para agregar un tercer color, simplemente incluirlo y ver el resultado. Para cambiar la dirección, utilice un ángulo. También puedes probar diferentes ángulos. Para controlar dónde aparece cada color, agrega porcentajes después de cada color. Ajusta esas paradas y mira cómo cambia el degradado. También puede crear gradientes repetidos con degradado lineal repetido Usa repetir aquí y ver el resultado, y usemos dos colores. Ver el resultado. Ahora para gradientes radiales, use gradiente radial con opciones adicionales Forma, círculo o elipse, tamaño, palabras clave como lado más cercano, esquina más alejada o Posición, uso seguido de posiciones como centro, izquierda 30%, top 40%, etcétera. El color se detiene. Para gradientes radiales, enumere sus colores y posiciones opcionales Ejemplo, ahora en la casilla tres, derecha, imagen de fondo luego gradiente radial. Luego forma círculo y color rojo, amarillo. Ver el resultado y utilizar círculo en dar valores. O prueba diferente también. Y agrega use color, deje de usar aquí y aquí. También prueba diferente también. Y usa repetir también y ver el resultado. Ahora para gradientes cónicos, conceptos básicos de sintaxis, gradiente cónico luego desde ángulo, y en posición, luego En la casilla cuatro, imagen de fondo. Después gradiente cónico. Después de 90 grados, luego los colores rojo, verde, amarillo. Azul. El color de fondo es la forma más sencilla de darle a un elemento un relleno sólido y consistente. Funciona con cualquier formato de color CSS válido, palabras clave, códigos hexagonales, RGB, HL, y puede servir como capa base detrás de imágenes o texto. Siempre establezca un color de fondo de respaldo para accesibilidad y compatibilidad con el navegador 19. Imagen de fondo con CSS: Esta lección, nos sumergimos profundamente en la propiedad de imagen de fondo en CSS. Aprenderás a agregar imágenes detrás de tu contenido, posicionarlas exactamente donde quieras y hacerlas receptivas. Exploraremos consejos prácticos, efectos creativos y los controles esenciales como el tamaño, la repetición y el apego. Al final, sabrás exactamente cómo convertir un fondo liso en un elemento de diseño visualmente impresionante sin ralentizar tu sitio web La sintaxis CSS comienza con imagen de fondo seguida de la URL. Después usa la repetición de fondo donde los valores se pueden repetir, por defecto, ambos ejes, repetir X, repetir Y. Sin repetición, espacio o redondo. A continuación, establezca la posición de fondo para definir dónde comienza la imagen. Las posiciones pueden ser izquierda, centro, derecha, superior o inferior, y también puedes usar longitudes o porcentaje luego usar el tamaño de fondo para definir cómo se escala la imagen. Las opciones incluyen tamaño original automático, cubrir, llenar el área, puede recortar, contener, encaja dentro, puede dejar huecos o valores explícitos. Después de eso, use el archivo adjunto en segundo plano para controlar el comportamiento de desplazamiento. Los valores posibles son scroll, default, fixed, parallax like effect, o scrolls locales con el elemento Por último, establece el color de fondo. En este ejemplo, usaremos imágenes en el elemento body en CSS, primero escribiremos imagen de fondo. Y luego especificar la URL. La URL puede apuntar a un archivo local o a un enlace externo. Para CodePen, usaré una URL y verás aparecer la imagen Luego usa la repetición de fondo. Por defecto, las imágenes de fondo se repiten en ambas direcciones. Para mostrar la imagen una sola vez, no use repetición. También puedes probar otros valores como repetir X para repetir horizontalmente y repetir Y para repetir verticalmente. Para la posición de fondo, puede especificar uno o dos valores para posicionar la imagen. El primer valor es para izquierda o derecha, y el segundo es para arriba o abajo. Se puede utilizar uno o ambos valores. Por ejemplo, derecha y arriba. Ahora, la imagen está alineada a la parte superior y derecha o izquierda. También puedes usar valores exactos en píxeles o porcentajes, como 150 píxeles a la izquierda y 100 píxeles desde la parte superior. Para el tamaño de fondo, los valores posibles incluyen auto, contener y cubrir. Con el valor de cobertura, la imagen de fondo se escalará para cubrir toda el área visible del elemento del cuerpo. Para la fijación de fondo, los valores posibles son scroll, local y fijo. Con fijo, la imagen permanece fija en su lugar mientras se desplaza Y también podemos usar el color de fondo. También podemos escribir en breve. Para esto, primero copia el CSS, luego comenta el código usando Control más barra diagonal hacia adelante y pégalo Para abreviar, utilizamos fondo en lugar de imagen de fondo. Podemos escribir así en una línea. Y la propiedad de fondo también admite múltiples imágenes. Para ello basta con copiar este código. Usa coma y pégala. Aquí puedes usar diferente imagen. Se pueden ver ambas imágenes. Para concluir, la propiedad de imagen de fondo es una de las herramientas visuales más poderosas en CSS. Te permite crear diseños en capas, combinar fotos con gradientes y ajustar el posicionamiento, escala y el comportamiento de desplazamiento Puedes usarlo para texturas sutiles, secciones de héroes audaces o incluso sprites de iconos optimizados para el rendimiento El secreto de los grandes resultados es el equilibrio. Combina la creatividad con la claridad y siempre ten en mente el rendimiento y la legibilidad Domina esta propiedad y podrás transformar la sensación de todo tu sitio web con solo unas pocas líneas de CSS. 20. Float en CSS: En esta lección, exploraremos cómo funciona la flotación, su comportamiento, problemas comunes y mejores prácticas modernas. Float es una de las propiedades de diseño más antiguas en CSS. Originalmente fue diseñado para envolver texto alrededor de imágenes, pero durante mucho tiempo, los desarrolladores también lo usaron para crear diseños. La propiedad float permite un elemento se mueva hacia el lado izquierdo o derecho de su contenedor. El contenido que sigue se envolverá alrededor del elemento flotante Por defecto, los elementos de nivel de bloque ocupan todo el ancho. Flotador cambia este flujo. Hay cuatro valores principales para la propiedad float. Flotador izquierdo flota el elemento a la izquierda de su contenedor Flotador derecho flota el elemento a la derecha de su contenedor Flotador, ninguno, valor predeterminado, el elemento no flota. Loat hereda hereda el valor flotante de su padre. Tenemos tres divs. El primer div es el contenedor, mientras que los otros dos son divs anidados, también llamados elementos secundarios El contenedor tiene un ancho máximo de 900 píxeles, altura establecida en auto, relleno de 30 píxeles y un fondo gris claro. Ambas cajas infantiles tienen el mismo estilo. Con 45% de altura automática, relleno de 15 píxeles con uno que tiene un fondo verde claro, y el otro un fondo amarillo claro. Por defecto, los elementos de nivel de bloque comienzan en una nueva línea, y su posición siempre está por debajo del elemento anterior. Aquí, queremos alinear ambas cajas lado a lado, es decir, el cuadro verde claro a la izquierda y el cuadro amarillo claro a la derecha. Para este tipo de situación, utilizamos la propiedad float. Para la caja uno, utilizamos flotador izquierdo. Y para la caja dos, utilizamos flotación derecha. Ahora ambas casillas están alineadas a izquierda y derecha, pero aparece un problema. La altura de la caja contenedora no se expande. Tenemos que arreglar esto. Voy a explicar dos métodos, uno viejo y otro moderno. Método antiguo. Utilizamos la propiedad clara. La propiedad clara tiene cuatro valores posibles, claro a la izquierda. No se permiten elementos flotantes a la izquierda, claro a la derecha, no se permiten elementos flotantes a la derecha, claros ambos, no se permiten elementos flotantes en ninguno de los lados. Borrar ninguno, por defecto permite elementos flotantes en ambos lados. Primero, creamos una clase clara con ambas claras. Después en HTML, agregamos un div con esa clase. Y verás que el problema de altura de la caja contenedora está solucionado. Si usamos claro a la izquierda, despeja el flotador para el lado izquierdo, y puedes notar espaciado en la parte superior e inferior Si usamos claro, derecho, despeja el flotador en el lado derecho, y verás espaciado a la derecha, pero ignorará la posición izquierda Es por eso que la mayor parte del tiempo usamos claro ambos. Método moderno en el contenedor CSS, simplemente escriba display colon flow root. Este enfoque moderno contiene limpiamente flotadores sin necesidad de hacks adicionales Déjame mostrarte un ejemplo más. He agregado dos iconos, y quiero que el icono en el cuadro uno aparezca en el lado izquierdo y el icono en cuadro dos que aparezca en el lado derecho. Crearemos dos clases diferentes para ambos íconos. Para el primer icono, vamos a crear una clase llamada icon one. Lo flotaremos a la izquierda. Y establece los márgenes, los diez píxeles superiores, 20 píxeles a la derecha, el cero inferior y el cero izquierdo. En la etiqueta de imagen, aplicaremos el icono de clase uno, y verás que el icono del cuadro uno está alineado correctamente. Se puede ajustar el margen según sea necesario. Si eliminamos el margen, la imagen y el texto aparecerán demasiado juntos, por lo que usamos el margen para crear espacio entre el icono y el texto. Ahora hagamos lo mismo con el segundo icono. Probablemente ya lo adivinaste. Para el segundo icono, crearemos una clase llamada icon two. Esta vez, la flotamos hacia la derecha y establecemos márgenes, los diez píxeles superiores, el cero derecho, cero inferior y los 20 píxeles izquierdos. Marque la vista previa y verá que el icono en la casilla dos está alineado correctamente. Alternativas modernas, Flexbox para alineación y diseños unidimensionales Rejilla para diseños bidimensionales. Flotador no es un reemplazo para Flexbox o rejilla. Es mejor para ajustar texto alrededor de imágenes, insignias y rótulos. Float mueve un elemento hacia la izquierda o hacia la derecha para que el contenido en línea fluya a su alrededor. Maneje siempre los flotadores con métodos claros o de contención como la raíz de flujo Use float para el ajuste de texto, pero recuerde, para diseños reales, Flexbox y grid son ahora las soluciones modernas 21. Desbordamiento de CSS: Flow controla lo que sucede cuando contenido no cabe dentro de su contenedor, ya sea texto, imágenes u otros elementos. Al dominar el desbordamiento, puedes manejar el desplazamiento, el recorte e incluso crear efectos especiales como menús ocultos o cuadros de desplazamiento controlados Cada elemento en CSS tiene una caja definida con ancho y alto. Si el contenido es más grande que la caja, puede desbordarse. La propiedad overflow le dice al navegador qué hacer con ese contenido extra. Tiene cuatro valores principales desbordamiento, visible default. El contenido extra no está recortado. Se derrama fuera de la caja. Bueno para diseños naturales, pero puede romper el diseño. Desbordamiento oculto. Se recorta contenido extra. Todo lo que no encaja está oculto. Útil para banners, marcos de imágenes u ocultar texto de desbordamiento. barras de desplazamiento de desbordamiento Las barras de desplazamiento de desbordamiento siempre se muestran tanto si el contenido se desborda como si no, garantiza que los usuarios puedan acceder a todo el contenido, pero pueden parecer innecesarias si no hay desbordamiento Desbordamiento automático. Agregue barras de desplazamiento solo cuando sea necesario, lo mejor para diseños receptivos porque se adapta al tamaño del contenido. Por ejemplo, tenemos dos cajas con alturas fijas. Y tenemos que arreglar esta imagen y texto. En la primera caja, la imagen desborda su contenedor. Para solucionar esto, agregamos desbordamiento oculto. Ahora, la imagen está recortada y cuidadosamente contenida dentro de la caja. En el segundo cuadro, agreguemos desbordamiento automático. Esto agregará una barra de desplazamiento solo cuando el contenido supere la altura de la caja, o si usamos scroll overflow aquí. Y las barras de desplazamiento aparecen en ambas direcciones horizontal y vertical, aunque no siempre sea necesario. O si solo queremos una barra de desplazamiento vertical, usamos desbordamiento Y scroll. Ahora, déjenme mostrarles un ejemplo más. Tenemos una tabla que crea tanto una barra de desplazamiento vertical como una horizontal en la página. Pero en muchos casos, no queremos que toda la página se desplace. Sólo queremos que la mesa misma se desplace. En CSS, cree una clase llamada table y establezca el ancho en 95%, la altura en 550 píxeles, agregue relleno de 20 píxeles y use overflow auto luego envuelva la tabla dentro un div de tabla Ahora, se eliminan las barras de desplazamiento de la página. En su lugar, las barras de desplazamiento aparecen solo dentro del contenedor de la tabla. La tabla se vuelve desplazable dentro de su propio cuadro mientras que el resto del diseño de página se mantiene limpio y fijo Este enfoque hace que la tabla sea mucho más fácil de usar, especialmente cuando se trata de grandes conjuntos de datos, informes o paneles propiedad de desbordamiento CSS decide cómo se comporta el contenido adicional cuando no cabe en su caja Con opciones como desplazamiento visible, oculto y automático, puedes controlar si el contenido se derrama, se recorta o se Recuerda, elige sabiamente dependiendo del diseño y la experiencia del usuario desbordamiento puede parecer pequeño, pero es potente para controlar diseños, recortes de texto y regiones desplazables 22. Posición de CSS: La propiedad Position es una de las herramientas más importantes en CSS para controlar cómo se colocan los elementos en una página. Con él, puedes mover elementos, fijarlos a la pantalla o crear diseños superpuestos. Al final de esta lección, comprenderá completamente los cinco valores de posición principales, estáticos, relativos, absolutos, fijos y pegajosos. Cada elemento de una página web es parte de un flujo normal de documentos. Por defecto, los elementos se apilan de arriba a abajo. La propiedad position cambia este comportamiento predeterminado. Junto con la posición, puede usar el índice superior, derecho , inferior, izquierdo y z para controlar la ubicación. Por ejemplo, primero, déjame mostrarte el código. Creé el primer div llamado container one. Entonces creé un segundo div llamado container. Y dentro de este contenedor, hay seis divs anidados llamados caja uno, caja dos, caja tres, caja cuatro, caja cinco y desp Después de eso, vuelvo a usar el contenedor one div. Ahora, primero, hablemos de la posición predeterminada, estática. Cada elemento de una página web ya tiene un valor de posición. Se llama posición estática. Piense en los elementos estáticos como que están en el flujo natural normal del documento. Se apilan uno encima del otro en función del orden de su código HTML. Si tienes un párrafo, luego una imagen, luego un botón en tu HTML, así es exactamente como aparecerán en la página. Y no se puede mover un elemento estático usando las propiedades superior, derecha, inferior o izquierda. Esas propiedades no tendrán ningún efecto. Es como intentar empujar un edificio. No va a ceder. Entonces estática es el valor por defecto y es por donde empezamos. Ahora posición relativa, el elemento ajustable. Hagamos las cosas más interesantes. Un elemento con posición relativa aún vive en el flujo normal del documento. El espacio que ocupaba originalmente todavía está reservado para ello. No se ha quitado. Sin embargo, y esta es la parte clave, ahora puedes moverla desde su posición original usando arriba, derecha, abajo e izquierda Déjenme darles un ejemplo. Usar posición relativa. Y top 20 pixeles e izquierda 50 pixeles. Esto le dice al navegador, mueva esta caja 20 píxeles hacia abajo de donde normalmente estaría y 50 píxeles a la derecha de donde normalmente estaría. Y recuerda, calcula la posición relativa a los elementos lugar original, no a toda la página. Use relativo cuando necesite realizar ajustes ajustados a un elemento sin interrumpir el diseño a su alrededor. Posición absoluta, el elemento break free. Cambia completamente el juego. Cuando se establece un elemento en absoluto, se elimina del flujo de documentos normal. Se ha ido. Los elementos circundantes colapsan inmediatamente y actúan como si el elemento absolutamente posicionado ya no existiera. El elemento absolutamente posicionado utilizará los bordes de ese contenedor padre para colocarse usando arriba, derecha, abajo e izquierda. Déjenme darles un ejemplo. Usar posición absoluta. Y top 20 pixeles e izquierda 50 pixeles. Esto le dice al navegador, coloque este cuadro 20 píxeles hacia abajo desde la parte superior de la página y 50 píxeles a la derecha desde el borde izquierdo de la página. Una cosa más. Ahora bien, este elemento flotante libre necesita algo contra lo que posicionarse. Busca a su antepasado posicionado más cercano. Si configuro la posición relativa en la caja contenedora, ahora usará los bordes de ese contenedor padre para colocarse usando arriba, derecha, abajo e izquierda, y connount top 20 pixels para aquí e izquierda 50 aquí Ahora, posición fija. Esto es similar al absoluto en que el elemento se elimina del flujo normal. Pero la diferencia clave es que un elemento fijo se posiciona con relación a la propia ventana del navegador, también conocida como la ventana de visualización Ignora por completo el desplazamiento. En la caja cuatro, use la posición fija. Con cero superior y derecho, cero. Ahora la casilla cuatro se fija a la esquina superior derecha. Posición pegajosa. Por último, tenemos la posición moderna y muy útil. Pegajoso. Un elemento pegajoso es un híbrido. Actúa como un elemento relativo hasta que te desplazas más allá de cierto punto de umbral, y luego se pega en su lugar y se comporta como un elemento fijo Debe definir el borde pegajoso usando al menos uno de arriba, derecha, abajo o izquierda. Por ejemplo, en la casilla cinco, use la posición pegajosa y la parte superior cero A medida que se desplaza hacia abajo, y se desplazará normalmente hasta que su borde superior alcance cero píxeles desde la parte superior de la ventana En ese momento, se vuelve fijo y permanece visible en la parte superior a medida que continúas desplazándote por el resto del div. Es increíblemente potente para encabezados de sección, menús pegajosos dentro de una barra lateral o cualquier cosa que quieras bloquear a vista después de cierto punto de desplazamiento Para recapitular, la propiedad de posición CSS nos da un control fino sobre dónde aparecen los elementos Estático son los empujones relativos predeterminados. Absolute elimina elementos del flujo, pega fija a la pantalla y mezcla pegajosa ambos Al dominar estos, puedes crear diseños potentes, encabezados pegajosos, ventanas pop ups o elementos flotantes Recuerde siempre, elija la posición correcta para el trabajo correcto. 23. Índice Z de CSS: Ahora aprenderemos qué es el índice Z, cómo funcionan los contextos de apilamiento, cómo aplicar y manipular el orden de apilamiento, trampas comunes a evitar y ejemplos del mundo real para solidificar su Al final de esta sesión, podrás controlar las capas de elementos con confianza La propiedad índice Z especifica el orden de pila de los elementos posicionados, aquellos con posición establecida en relativo, absoluto, fijo o pegajoso, y permite llevar los elementos hacia adelante o enviarlos hacia atrás a lo largo del eje Z, controlando qué elemento aparece en la parte superior cuando se superponen. Por ejemplo, tenemos tres cajas. He usado la posición relativa con los valores superior e izquierdo en la casilla dos y la casilla tres. Las cajas se superponen, y si queremos llevar la caja dos al frente, utilizamos la propiedad índice Z. En CSS, establezca un valor de índice Z para la casilla dos, por ejemplo, un punto. Ahora la casilla dos aparece al frente y la casilla tres va atrás. Si queremos volver a llevar la caja tres al frente, establecemos un valor de índice Z más alto para la casilla tres, como diez. Ahora la caja tres viene al frente y la caja dos va detrás. Y el índice Z es su herramienta para administrar el orden de adelante hacia atrás de los elementos posicionados. Recuerde establecer una posición, comprender los contextos de apilamiento y usar una escala bien definida para mantener sus diseños mantenibles Practica con ejemplos de superposición y modales para ver el índice Z en acción. Gracias por escuchar y hacer capas felices. 24. Proyecto de tarjeta CSS: Vamos a crear una tarjeta de aspecto agradable en CSS. Empezaré de cero. Primero, fijemos el color de fondo de los elementos del cuerpo a un azul suave muy claro usando un código de color. En HTML, crea un div con la tarjeta de nombre de clase. I Estilo CSS la tarjeta con un ancho de 320 píxeles, altura establecida en auto, un fondo blanco, radio de borde de 12 píxeles. Y una sombra de caja con valores como cero, ocho píxeles, 20 píxeles, RGBA 0,000.1 Tenga en cuenta que la tarjeta DIV funciona como contenedor, por lo que colocaremos todos los demás divs dentro de la tarjeta Div A continuación, en HTML, agregue una imagen usando la etiqueta IMG con el atributo SRC La imagen puede ser de un archivo local o de una ruta externa. Para Code Pen, usaré una URL externa. Aquí, he usado una URL dinámica. Entonces, cuando se actualiza la página, la imagen cambia automáticamente Notarás que la imagen tiene esquinas afiladas y se desborda fuera de la tarjeta Para solucionar esto, utilizamos desbordamiento oculto, lo que le da a la imagen esquinas redondeadas suaves. Ahora usemos margen para crear algo de espacio en la parte superior y centrar la tarjeta. Establezca el margen en 40 píxeles automático. A continuación, vamos a crear una insignia. En HTML, cree una nueva clase llamada insignia y agregue el texto nuevo producto. A en estilo CSS la insignia con un relleno de fondo rojo de diez píxeles superior e inferior y 20 píxeles izquierda y derecha, un radio de borde de 20 píxeles y texto blanco. Para colocarlo en la esquina superior derecha sobre la imagen, use la posición absoluta con superiores y los diez píxeles a la derecha. Y posición relativa en tarjeta CSSS. Ahora, pasemos a la sección de información. En HTML, crea un div llamado info. En su interior, agregue un encabezado H tres con algún texto y un párrafo con algún texto. En estilo CSS la sección Info con relleno de 25 píxeles y para el encabezado. Para H tres, encabezando punto InfoH tres y usar Márgenes 0010 píxeles cero A continuación, configuraremos la información del autor. En HTML, crea un div con el autor de la clase. En su interior, agregue la imagen de perfil del autor usando la etiqueta IMG Con un avatar de clase. Y luego agregar un span con el nombre del autor, por ejemplo, John Dio. Además, agrega un botón con el texto Léeme. Y un botón de clase. En estilo CSS la sección de autor. Para la clase de autor, flotó a la izquierda. Para la imagen del avatar, autor derecho Avatar estableció el ancho y la altura en 42 píxeles. Dale un efecto circular con radio de borde, 50%. Agrega algo de margen derecho. Y flotar a la izquierda, también. Ahora, tal vez te estés preguntando por qué escribí info H tres y dot author dot avatar en CSS en lugar de solo H tres o dot Avatar. Si usas solo H three o Avatar en CSS , seguirá funcionando, pero actuará como CSS global. Esto significa, supongamos que estás trabajando en un proyecto grande y usas los mismos nombres de elementos en otras páginas. Posteriormente, si quieres cambiar el estilo por H tres u otro elemento en tan solo esta sección, esos cambios también afectarán a todas las páginas en las que se use H tres o Avatar. Déjenme darles un ejemplo. Supongamos que tenemos dos cartas Y en la primera, el div se renombra a Info, autor uno Y también estilo Si autor uno en CSS. Si intentamos cambiar el color del texto del encabezado en la primera carta, el color también cambiará en la segunda carta porque el selector no es lo suficientemente específico. El mismo problema puede ocurrir con la imagen del avatar también. I Por eso la mejor práctica en CSS es ser específicos. Por ejemplo, en lugar de usar solo H tres, puedes escribir Info uno para la primera tarjeta. De esta manera, el estilo se aplicará únicamente a la primera tarjeta. El mismo enfoque se aplica también a las clases de Avatar. Para la segunda tarjeta, puedes usar solo info. El mismo enfoque se aplica también a las clases de Avatar. Espero que ahora entiendas la idea de escribir selectores CSS de manera más efectiva Y si quieres aprender CSS con mucho más detalle, puedes unirte a mi curso de selectores CSS Lo encontrarás en mi sección de perfil. Ahora volvamos a nuestro tema principal. Para el span que contiene el nombre, agregue relleno superior. Pero como span es un elemento en línea, relleno no funciona como se esperaba. Para solucionar esto, cambie la propiedad de visualización a bloque en línea. Y ahora el nombre del autor se alinea correctamente. Por último, estile el botón, flotarlo hacia la derecha, establecer el margen superior a cero. Usa un fondo azul. Texto en blanco. Relleno de diez píxeles por 16 píxeles. Sin borde y un radio de borde de seis píxeles. En este punto, casi lo hemos completado todo, pero todavía hay un problema. Falta el espaciado inferior, pesar de que agregamos relleno en la clase info. Para solucionar esto, use el flujo de salida de la pantalla. Y el problema está resuelto. Ahora hemos creado una hermosa tarjeta en CSS S en la siguiente lección. 25. Fuentes CSS: En esta lección, exploraremos las fuentes en CSS. fuentes definen el estilo del texto en una página web, y CSS nos brinda muchas herramientas para controlar la tipografía, el tamaño, el espaciado y la legibilidad Cada página web tiene texto y el texto necesita fuentes. Las fuentes determinan cómo se ven los personajes, su forma, peso y estilo. La fuente predeterminada del navegador suele ser veces nueva romana o aérea. CSS le permite anular los valores predeterminados para hacer que los diseños sean profesionales y específicos de la marca Primero, escribimos el selector, luego la familia de fuentes y la propiedad. Se trata de fuentes que existen en casi todos los sistemas San Serif Arial, Verdana, Trebuche MS, Serif Times New Roman, Georgia Garamond, Monospace, Coria Nu, consola Lucida, cursiva, guión de pincel, emt Comic Sans, fantasía, papiro, Impact casi todos los sistemas San Serif Arial, Verdana, Trebuche MS, Serif Times New Roman, Georgia Garamond, Monospace, Coria Nu, consola Lucida, cursiva, guión de pincel, emt Comic Sans, fantasía, papiro, Impact. Tenemos dos cartas Div, tarjeta uno y carta dos, cada una con encabezamientos y párrafos Por defecto, la página utiliza la fuente HTML default times New Roman. Ahora queremos cambiar el estilo de fuente. En CSS, escribe el selector de cuerpo y establece la familia de fuentes en Arial San Cerif ahora toda la página utilizará la fuente Arial También podemos usar diferentes fuentes como Verdana o Georgia. También es posible usar múltiples fuentes. Por ejemplo, en el encabezado H one, podemos aplicar la fuente Lucida Console Ahora ambos encabezados H one tienen el estilo de fuente de consola Lucida Son seguros para el respaldo, pero no muy únicos Puede enumerar varias fuentes en orden. El navegador utiliza el primero disponible. Siempre termina con una familia genérica Serif, Sanserif, monospace, cursiva 26. Tamaños de fuentes en CSS: La propiedad de tamaño de fuente controla el tamaño del texto en una página web. Es una de las propiedades CSS más importantes porque afecta la legibilidad, el diseño y la capacidad de respuesta Primero, escribimos selector, luego tamaño de fuente, y luego el valor y el valor pueden ser PX absoluto común, EM relativo al padre, REM relativo al tamaño de fuente HTML raíz, porcentaje relativo al padre, VW VH relativo a la ventana gráfica En CSS, establezca el tamaño de fuente en 50 píxeles. Ahora puedes ver el encabezado H one con el tamaño de fuente actualizado. Déjame decirte algún valor posible , unidades de longitud absoluta, fijas y no cambian dependiendo de padre o pantalla, unidades, píxeles, más comunes, confiables entre dispositivos. Puntos. Un punto equivale a 1/72 pulgada utilizado en la impresión CM, pulgadas PC, unidades físicas, no práctico para pantalla. Unidades de longitud relativa, Munit. La unidad EM es relativa al tamaño de fuente de los elementos actuales padre. Por defecto, la mayoría de los navegadores comienzan con una raíz, tamaño de fuente HTML de 16 píxeles a menos que sea cambiado por el usuario o en tu CSS. Eso significa que por defecto, este párrafo tiene un tamaño de fuente de 16 píxeles. El tamaño EM siempre depende de su antepasado más cercano. Una vez 16 equivale a 16 píxeles. Entonces el tamaño de uno es igual a 16 píxeles. Si cambio el tamaño de fuente en el elemento HTML a 20 píxeles, entonces un EM equivale a 20 píxeles. Por ejemplo, pongamos H uno a dos. Al principio, no verás mucho efecto porque por defecto, el tamaño de fuente del navegador es de 16 píxeles, lo que hace que H sea igual a 32 píxeles. Pero si cambio el tamaño de fuente HTML raíz a 25 píxeles, notarás que tanto el tamaño de encabezado H one como el tamaño del párrafo aumentan. Eso es porque ahora un RM equivale a 25 píxeles. Entonces H dos es igual a 50 píxeles. El párrafo uno M equivale a 25 píxeles. Espero que hayas entendido que el tamaño depende totalmente del tamaño de fuente de sus ancestros más cercanos. Aquí hay algo importante. Si configuro el tamaño de fuente de su contenedor padre, por ejemplo, una tarjeta uno a dos M entonces ¿cuál será el tamaño de fuente real del h1b La respuesta dos M por dos M equivale a cuatro M, lo que equivale a 64 píxeles. En tanto, el texto del párrafo dentro de la tarjeta será M igual a 32 píxeles. Entonces, si el tamaño de fuente principal cambia, el hijo se ajusta automáticamente. También puedes usar valores decimales como 2.12 EM. Ahora, vamos a discutir sobre la unidad REM. La unidad REM es relativa al tamaño de fuente de los elementos raíz, HTML. Eso significa que es consistente en todas partes de la página. Siempre es relativo al tamaño de fuente calculado del elemento raíz. Si el navegador predeterminado es de aproximadamente 16 píxeles, y mantiene el tamaño de fuente HTML R 100%, entonces un REM equivale a 16 píxeles, 1.25 REM es igual a 20 píxeles. A REM es igual a 32 píxeles. También respeta zoom del navegador del usuario y la configuración de accesibilidad. A veces los desarrolladores establecen el tamaño de fuente HTML en 62.5%. ¿Por qué? Porque 0.625 por 16 píxeles equivale a diez píxeles Esto facilita las matemáticas. Un REM equivale a diez píxeles, 1.6 REM equivale a 16 píxeles. Dos REM equivalen a 20 píxeles. Por ejemplo, si establecemos el HTML raíz en 62.5%, establecemos el H un tamaño de fuente a cuatro REM Párrafo tamaño de fuente a 1.6 REM y H dos encabezando tamaño de fuente a 2.5 REM y ver los tamaños de fuente en la página. Si luego establecemos un contenedor de tarjetas en dos REM notarás que el tamaño del encabezado permanece 40 píxeles porque REM siempre multiplica con el elemento raíz, no con el elemento padre Resumen. M es relativo al tamaño de fuente de los elementos padres, por lo que se compone. REM es relativo al tamaño de fuente TML raíz, por lo que se mantiene estable y predecible Use REM para dimensionar texto consistente, escalas de tipo global, tokens de espaciado y mantener el ritmo. Utilice el para relaciones proporcionales dentro los componentes donde desea que los tamaños se adapten al padre. Los nombres predefinidos de valor de palabra clave son XX, pequeño , X, pequeño, pequeño, mediano , grande, X grande, XX grande. Las palabras clave relativas son más grandes, más grandes que las principales, más pequeñas que las principales. Ahora, pongamos el grande en el párrafo. Inicial y heredar. Los inicios se restablecen a los valores predeterminados del navegador generalmente de 16 píxeles. Heredar toma el tamaño de fuente del padre. Si establece el tamaño de fuente del párrafo para heredar dentro de la tarjeta uno, entonces el párrafo tomará el tamaño de fuente de su elemento padre Dado que el padre en última instancia hereda del HTML raíz, seguirá el tamaño de fuente raíz El tamaño de fuente hace que el texto sea legible y escalable. Utilice unidades relativas MRM por ciento signo para accesibilidad y la capacidad de respuesta, mientras que Px es útil para el control perfecto de píxeles 27. Propiedades de CSS: Discutamos sobre el peso de la fuente y establece el grosor, la audacia del texto Los valores en las palabras clave son normales, negrita, audaces, más claros, numéricos, 100 a 900 Tenga en cuenta la propiedad de peso de la fuente. Depende del tipo de fuente. En el párrafo de la tarjeta uno, pongamos al peso de la fuente en negrita. Ahora el párrafo se volvió negrita. También se puede utilizar el valor numérico. Estilo de fuente utilizado para hacer que el texto sea cursiva u oblicua. Los valores son normales, cursiva, oblicua. Aquí, escribe dos, estilo fuente cursiva. Párrafo girado en cursiva. Variante de fuente utilizada para el efecto de mayúsculas pequeñas. Escriba la variante de fuente, luego una pequeña tapa. Y ver el efecto. Altura de línea, controla el espaciado entre líneas de valores de texto R. Número sin unidad, relativo al tamaño de fuente recomendado Unidades de longitud, píxeles, M, ejemplo, usan altura de línea y ven la diferencia de altura de línea en estos dos párrafos. También puedes probar otro valor. Espaciado entre letras. Ajusta el espacio entre caracteres. Escriba el espaciado entre letras dos píxeles. Y se puede ver el espaciado en este párrafo. Espaciado entre palabras, ajuste el espacio entre palabras. Escribe espaciado entre palabras cinco píxeles. Y ver la brecha entre las palabras. Texto, transformar. Controla el estilo de mayúsculas, y los valores son mayúsculas, todas las mayúsculas, minúsculas, todas las letras minúsculas, mayúsculas, primera letra, mayúsculas Escribir texto, transformar, mayúsculas. Ahora ambos textos de párrafo se convierten a mayúsculas. También puedes probar otros valores. Decoración de texto. Agrega líneas decorativas al texto. Valores ninguno, subrayado, sobrelínea, línea a través, escritura de decoración de texto y uso Ahora bien, ambos textos de párrafo están subrayados, y es posible que pruebes otros valores también como overline. Línea a través. Propiedad de taquigrafía de fuentes. CSS permite combinar múltiples propiedades de fuente en una sola línea. Selector derecho entonces. Fuente, estilo de fuente, variante de fuente, peso de fuente, tamaño de fuente altura de línea diagonal, familia de fuentes Fuente, Itálica minúsculas mayúsculas negrita 16 pixeles 1.5 Georgia Serif. 28. Cara de fuente con CSS: Por defecto, los sitios web utilizan fuentes del sistema como Aerial times New Roman Verdana Pero, ¿y si quieres usar una fuente personalizada que puede no existir en el dispositivo del usuario? solución es fontface que te permite importar y definir tus propias fuentes para su uso en CSS, familia de fuentes, el nombre que asignes a la fuente Usarás este nombre en tu CSS posteriormente fuente URL de Pathlash del archivo de fuente más tipo de formato Formatos de fuente compatibles. Los navegadores admiten diferentes formatos de fuente, por lo que proporcionar múltiples fuentes garantiza la compatibilidad entre navegadores. WAF dos web formato de fuente abierta dos, navegadores modernos, más eficientes Formato de fuente abierta web WOF, respaldo ampliamente compatible, fuente TTF TrueType, navegadores más antiguos, fuente de tipo abierto OTF, buena calidad, tipo abierto integrado Eot necesario para svg de punto más antiguo, fuente buena calidad, tipo abierto integrado Eot necesario para svg de punto más antiguo, vectorial escalable, vectorial escalable Y como generar y el mejor sitio es Font Squirrel. Es un sitio web gratuito que proporciona fuentes amigables con licencia de uso comercial. También ofrece un generador de fuentes web, que convierte pons dottf dot OTF en formatos amigables para la web como dot WOF y WOFT con un código CSS de fase de fuente generado automáticamente Esto facilita a los desarrolladores agregar fuentes personalizadas a sus proyectos. Tienes dos opciones para usar fuentes personalizadas. Primer método, si tienes tu propia fuente personalizada, simplemente ve a un generador de fuentes web y sube tu fuente. Y. Elija óptimo y acepte el acuerdo. Después haz clic en Descarga tu kit. Ve a tu carpeta Descargas. Descomprime el paquete y tendrás listo tu kit de fuente web. Segundo método. También puedes elegir cualquier fuente gratuita, por ejemplo, abrir SAS. Descarga el kit de fuentes web. Lo descomprimo, y ahora tendrás otro conjunto de archivos de fuentes web Primero, déjame mostrarte la estructura de carpetas. He creado una carpeta de tipografía dentro de la carpeta CSS. Dentro de la carpeta Tipografía, tenemos fontfac dot HTML y En esa carpeta CSS, tenemos un archivo CSS de punto de estilo externo vinculado a fontfac dot Ahora vamos a abrir este archivo en código VS. Aquí puedes ver la vista previa de los archivos. Cuando hago clic en estilo punto CSS, se abre el archivo CSS. Primero, usaremos la fuente Bibas. Para ello, vamos a abrir la carpeta de fuentes. Primero, copia los dos archivos de fuente requeridos y pegarlos en tu carpeta CSS, luego abre la hoja de estilo proporcionada en el kit. Copia el código de la fuente y pegarlo en tu propio archivo CSS. A continuación, aplicarlo a un encabezado H uno. Copia esta línea y pegarla aquí y no olvides agregar una fuente general como alternativa Ahora el encabezado está estilizado con la fuente Bibas. Aquí hay una cosa más importante sobre las rutas de fuentes. Si quieres mantener tus fuentes dentro de una carpeta separada llamada fuentes, Luego en tu CSS, debes escribir la ruta como fuente slash Ahora actualiza la página y todo funciona bien. Si cometes un error u olvidas actualizar la ruta, la fuente no funcionará. Por eso es muy importante la ruta de la fuente. Si coloca la carpeta de fuentes fuera de la carpeta CSS, entonces la ruta será dot dot slash fonts slash Ahora actualiza la página y todo funciona bien. Esto se llama ruta relativa, y buscará automáticamente la carpeta de fuentes en la ubicación correcta. También puedes usar múltiples fuentes. Por ejemplo, vayamos a la carpeta Open Sans que creamos anteriormente. Aquí puedes elegir entre múltiples estilos de fuente. Escojamos Macroman OpenSanRGular. Copia este archivo y pega en la carpeta de fuentes. Luego abre la hoja de estilo proporcionada en el kit. Copia el código de la fuente y pegarlo en tu propio archivo CSS. En este punto, solo tenemos el formato WOffFont. Entonces, eliminemos los formatos de fuente innecesarios y mantengamos solo la ruta URL de Woff Actualiza la ruta. Ahora aplica esta fuente al cuerpo en tu CSS. Y verás el resultado. Las fuentes web le permiten usar letra personalizados más allá de los valores predeterminados del sistema, haciendo que los sitios web sean más únicos, profesionales y 29. Fuentes de Google en CSS: Google Fonts es un servicio gratuito de Google que proporciona cientos de fuentes de código abierto. Puede utilizarlos fácilmente en sitios web sin descargar archivos de fuentes. Es rápido, confiable, con SEO y compatible con todos los navegadores modernos. Vamos a discutir la sección de filtros. En la sección de idioma, puedes elegir tu propia fuente de idioma, por ejemplo, el inglés. Sección de sensación, puedes elegir cualquier estilo. Bajo apariencia, puedes elegir el estilo. Y también puedes probar otras opciones disponibles. Primero, seleccionemos una fuente. Y cambiar el estilo también. A continuación, haz clic en Obtener fuente, luego elige Obtener código incrustar. Hay dos métodos. Puede vincular la hoja de estilo o importarla. Usar el método Link es la mejor opción y más fácil de usar. Así que vamos a elegir el Estilo de Enlace. Copia este código y pegarlo en la sección head de tu HTML. Ahora copia el apellido de la fuente y úsalo en tu CSS. Verás el nuevo estilo de encabezado aplicado y las ventajas de Google Fonts, gratis y de código abierto, fácil de integrar, admite muchos idiomas, optimizado para la velocidad, servido desde Google CDN, amplia variedad de estilos, Serif, Sant Serif, display, escritura a mano, monoespacio Google Fonts es la forma más fácil usar fuentes personalizadas con estilo. Siempre use fuentes de respaldo y limite el número de estilos de pesos de fuente para el rendimiento 30. Alineación y envoltura de texto en CSS: En esta lección, aprenderemos a controlar la alineación del texto dentro de los elementos y cómo el texto se ajusta o no se ajusta cuando llega al borde de un contenedor. Estas propiedades son esenciales para la legibilidad y el diseño de maquetación. Define la alineación horizontal de contenido en línea como texto, bloques en línea, imágenes dentro de un contenedor de bloques. Valores R izquierda alinea el texto a la izquierda, por defecto en idiomas LTR Derecha, alinea el texto a la derecha. Centro centra el texto dentro de su contenedor. Justificar preds texto, así cada línea tiene igual ancho, ajustando espacios entre palabras, iniciar N valores lógicos que respeten la dirección de escritura, LTR o RTL en CSS, vamos a alinear al encabezado Escribir texto alinear centro. Ahora, el rumbo está alineado con el centro. También puedes probar otro valor. Ahora, vamos a discutir sobre el ajuste de texto. Por defecto, los navegadores ajustan el texto automáticamente cuando llega al borde del contenedor, pero CSS nos da el control. Propiedad de espacio en blanco, por defecto normal contrapa espacios, ajusta el texto Sin flecha de envoltura impide envolverlo. El texto continúa en una línea, útil para los menús NAV, pero puede causar desbordamiento. Pre respeta todos los espacios y saltos de línea como pre tag. Pre rap arrow conserva espacios y permite envolver. La línea previa contravisa múltiples espacios, pero respeta los saltos de línea Y usemos espacios en blanco sin rap en el párrafo. Se puede ver que este párrafo ahora aparece en una sola línea sin envolver. También puedes probar otro valor. Utilice alineación de texto para controlar la alineación horizontal, izquierda, derecha, centro, justificar. Utilice los espacios en blanco para administrar si el texto se contrasta, conserva espacios o evita el ajuste Use envoltura de desbordamiento y salto de palabras para manejar palabras largas y evitar desbordamiento. Juntas, estas propiedades le dan un control completo sobre cómo el texto fluye, alinea y encaja dentro de su contenedor 31. Selector de grupo CSS: En esta lección, aprenderemos sobre el selector de grupos CSS, una forma muy práctica de diseñar múltiples elementos a la vez sin repetir código. Al final, sabrás cómo usar el selector de grupo de manera eficiente en tus proyectos web. ¿Qué es un selector de grupo? Un selector de grupo en CSS le permite aplicar las mismas reglas de estilo a múltiples selectores al mismo tiempo Esto significa que en lugar de escribir el mismo código CSS para cada elemento por separado, puedes agruparlos, ahorrando tiempo y haciendo que tu CSS sea más limpio y fácil de mantener. Cómo escribir un selector de grupo. Se crea un selector de grupo separando varios selectores con comas Por ejemplo, en el código, tenemos múltiples encabezados como H dos, H tres, H cuatro, así como varios párrafos, un botón y un elemento span He agregado un ID a uno de los encabezados, un nombre de clase al botón, un nombre de clase llamado highlight to the span y otro nombre de clase llamado notice to the last paragraph Primero, agrupemos los selectores de elementos. Si queremos que todos los encabezados sean verdes en el CSS, escriba H dos, H tres, H cuatro y establezca el color en verde Ahora, todos esos encabezamientos aparecerán en verde. Siguiente para selectores de clase. Si queremos que el botón, el span, y el último párrafo tengan texto rojo, escriba la clase separada por comas y establezca el color en rojo Ahora, tenemos esos elementos en texto rojo. Ahora, agruparemos a todos los selectores. Escribir aviso de punto y coma por hora. Encabezar el color y establecer el tamaño de fuente en 30 píxeles. Ahora, puedes ver que el encabezado H four, el párrafo con la clase notice y el encabezado principal con el ID de color de encabezado tienen un tamaño de fuente de 30 píxeles cuando usar un selector de grupo, cuando quieres aplicar el mismo estilo a múltiples elementos o clases para mantener tu CSS más corto, limpio y más fácil de leer al diseñar encabezados, botones o secciones consistentes , consejos mejores prácticas Utilice siempre comas para separar los selectores en un grupo Asegúrate de que no haya erráticos. Una coma faltante puede romper tu CSS. Utilice selectores de grupo para reducir la duplicación de código y realizar cambios más rápido Eso es todo para el selector de grupos en CSS. Es una manera simple pero poderosa mantener su código limpio y eficiente. Practica agrupando diferentes selectores en tu próximo proyecto y observa cuánto más rápido puedes aplicar estilo a tus páginas En la siguiente lección, exploraremos los selectores compuestos. 32. Enlace de pseudoelementos en CSS visitado (Hover Activ) //: Centrémonos en las cuatro pseudo clases clave para hipervínculos, no visitados, visitados, florecidos y activos Estos son esenciales para hacer que tus enlaces sean interactivos, informativos y visualmente atractivos. Analicemos lo que hace cada uno, veamos ejemplos y aprendamos las mejores prácticas para usarlos. ¿Qué son los estados de enlace? Cuando se crea un hipervínculo en HTML, ese enlace puede aparecer en diferentes estados CSS nos proporciona pseudo clases especiales para apuntar a cada uno de estos estados, lo que nos permite estilizarlos de manera diferente. Ahora para el enlace no visitado nunca se hizo clic antes. Por ejemplo, tenemos dos hipervínculos en HTML en CSS, nosotros, enlace de dos puntos Establezca el color azul y la decoración del texto en ninguno. Y apunta a todos los enlaces no visitados, aquellos en los que aún no has hecho clic Usa esto para el aspecto predeterminado de tu hipervínculo. Ahora para el enlace visitado, ya lo has hecho clic. Escribe dos puntos visitados y dale al texto color morado. Y se dirige a los enlaces visitados, aquellos en los que ya has hecho clic Bueno para dar comentarios a los usuarios sobre dónde han estado. Ahora para flotar, el puntero del mouse está sobre él. Escribe un cursor de dos puntos y dale color naranja y subrayado de decoración de texto Se dirige a un enlace cuando el mouse está sobre él o cuando los usuarios del teclado lo enfocan. Ideal para agregar comentarios interactivos como cambios de color o subrayados Para enlace activo, estás presionando, haciendo clic en él en ese momento. Escribe dos puntos activos y establece el color rojo y la decoración del texto subrayado ondulado Y apunta a un enlace en el mismo momento en que se le está haciendo clic, botón del ratón hacia abajo antes de soltarlo Se puede utilizar para un efecto prensado o un flash de color. El orden del enlace pseudoclases es muy importante en CSS. Para recordar el orden correcto, puedes usar la frase amor odio regla. Esto significa L para Enlace, para visitado, H para hover, A para activo e Y. Porque los navegadores aplican la última regla de coincidencia, y este orden asegura que cada estado aparezca como se esperaba Por ejemplo, si pones colon hover antes de dos puntos visitados, tus estilos de hover podrían anularse en los enlaces visitados y Cuando ves un enlace, nunca has hecho clic, aparecerá como se define en un enlace de dos puntos, por ejemplo, azul y no subrayado Si haces clic en el enlace y luego vuelves a la página, ahora coincide con dos puntos visitados. A lo mejor es morado. mueve el mouse sobre cualquier enlace, instantáneamente obtiene los estilos A colon hover A lo mejor se vuelve anaranjado y subrayado. De hecho, presionas y mantienes presionado el enlace, se aplica un colon activo. A lo mejor se vuelve rojo con un subrayado ondulado por sólo una fracción de segundo mientras haces clic Asegúrese de que los enlaces visitados y no visitados sean fáciles de distinguir para sus usuarios Siempre proporcione suficiente contraste de color para legibilidad. Considera usuarios de teclado. El uso del enfoque de colon junto con el desplazamiento de colon puede facilitar la navegación para todos No confíes únicamente en el color. Considera subrayados o iconos para mayor claridad. 33. Selector universal CSS: El selector universal en CSS está representado por un asterisco. Se dirige a cada elemento de la página, sin importar cuál sea la etiqueta, clase o ID de elementos . Piense en el selector Universal como un comodín que dice, seleccione todos los elementos del documento Típico usa reinicio de CSS, borrar los márgenes y rellenos predeterminados del navegador para un diseño consistente, aplicar estilos globales como establecer una fuente predeterminada o tamaño de caja, depurar, probar rápidamente un estilo en cada elemento Por ejemplo, podemos restablecer todos los márgenes y rellenos para todos los elementos a cero Y también establece el tamaño de la caja, punto y coma del cuadro de borde de dos puntos para cada elemento, lo que facilita el control de los diseños Escribe un selector de asterisco en CSS y establece el margen cero, relleno cero y el tamaño de la caja Y establece el margen y relleno de todos los elementos en cero. Ahora, tal vez se esté preguntando que podemos usar esta regla con el elemento body. Si aplicamos estos estilos al selector de cuerpo, solo afectarán al elemento del cuerpo en sí. Esto significa que no afecta a otros elementos como inmersiones, encabezamientos o párrafos dentro del cuerpo Déjame explicarte si agregas borde dos píxeles rojo sólido al cuerpo en tu CSS, verás un borde rojo alrededor solo del cuerpo en la vista previa. Pero si usas el mismo código con el selector universal, verás un borde alrededor de cada elemento de la página. Espero que ahora entiendas la diferencia entre diseñar el cuerpo y usar el selector universal. 34. Consulta de medios con CSS: En esta lección aprenderemos sobre las media queries CSS, una de las herramientas más importantes para crear diseños web responsive. Consultas de medios, apliquemos estilos condicionalmente basados en el tamaño de la pantalla, tipo de dispositivo o incluso las preferencias del usuario como el modo oscuro Al final de este tutorial, sabrás cómo escribir consultas de medios, cuándo usarlas y las mejores prácticas para crear sitios web receptivos modernos. Una media query permite a CSS aplicar estilos solo si ciertas condiciones son ciertas. Comúnmente utilizado para el diseño receptivo, cambiando los diseños para dispositivos móviles, tabletas y computadoras de escritorio. Y la sintaxis es primero, escribimos medios, luego la condición. La mayoría de las condiciones de consulta de medios de uso son Max Width y MinWidth Ancho máximo significa que aplica estilos solo cuando la pantalla es menor o igual a cierto tamaño. Útil en el primer diseño de escritorio, comienzas con estilos de escritorio y luego encoges hacia abajo para tabletas y móviles Esto significa, supongamos que establecemos el ancho máximo en 800 píxeles. Entonces la media query funcionará en 800 píxeles o menos. MnWidth significa que aplica estilos solo cuando la pantalla es mayor o igual a cierto tamaño Lo mejor para el primer diseño móvil, comienzas con estilos de pantalla pequeña, luego agregas estilos a medida que crece la pantalla. Esto significa, supongamos que establecemos el Mnwidth en 800 píxeles, entonces la media query funcionará en 800 píxeles o más, no por debajo de 800 píxeles Espero que hayas entendido la diferencia entre ancho máximo y Mnwidth y alguna otra R. Altura, Altura mínima, altura máxima, misma idea, pero para las vistas altura, orientación, comprueba si el dispositivo es vertical u horizontal Por ejemplo, orientación retrato. La resolución apunta a la resolución de pantalla como Resolución mínima 300 DPI para pantallas de alto DPI. relación de aspecto verifica la relación de ancho a alto, como la relación de aspecto 16 slash nine El color apunta a los dispositivos en función las capacidades de color como el color para las pantallas a color, prefiere el esquema de color, detecta si el usuario prefiere el modo claro u oscuro, como prefiere el esquema de color, oscuro, y también podemos establecer los tipos de medios de pantalla y tipo de medios de pantalla de impresión que aplica a pantallas como monitores, tabletas, laptops y teléfonos inteligentes. Este es el tipo de medio predeterminado para sitios web generalmente combinado con condiciones para el diseño responsive, y podemos combinarlos también. tipo de soporte de impresión se aplica cuando la página se imprime o se ve en vista previa de impresión, útil para hacer versiones de páginas web amigables con la impresora , tareas comunes, eliminar colores de fondo, ocultar navegación o anuncios. Usa texto negro sobre blanco para legibilidad. Normal dejamos en blanco, entonces funcionará para ambas condiciones. 35. Punto final de la consulta de medios en CSS: Ahora hablemos del punto de ruptura. Los puntos de interrupción son los tamaños de pantalla específicos donde el diseño de su sitio web cambia para verse bien en diferentes dispositivos como móviles, tabletas y Un punto de interrupción es el punto en el que tu diseño se rompe o ya no se ve bien En ese ancho, se utiliza una consulta de medios para aplicar nuevos estilos. Aquí, 768 píxeles es un punto de interrupción. Puntos de interrupción comunes, estándares de la industria. No hay reglas fijas, pero muchos desarrolladores utilizan estas populares. Dispositivos extra pequeños, teléfonos, hasta 480 píxeles. Dispositivos pequeños, teléfonos grandes, tabletas pequeñas, 481 píxeles a 767 píxeles, dispositivos medianos, tabletas, 768 píxeles a 1023 Dispositivos grandes, computadoras de escritorio, 1024 píxeles a 1279 píxeles, escritorios extragrandes, televisores, 1280 píxeles Ahora vamos a discutir en meta viewport etiquetar una pequeña línea de código que juega un papel muy importante en el diseño web responsive Sin él, sus consultas de medios y diseños móviles no se comportarán correctamente en teléfonos inteligentes y tabletas. La etiqueta va dentro de la cabeza de su ancho HTML es igual al ancho del dispositivo, establece el ancho de página igual al ancho de la pantalla de los dispositivos. Asegúrese de que un píxel CSS sea igual a un píxel del dispositivo en pantallas normales. La escala inicial es igual a 1.0, establece el nivel de Zoom inicial en 100%. Evita que la página se acerque o aleje la página cuando se carga por primera vez Atributos opcionales, la escala máxima es igual a 1.0 evita el acercamiento Señor escalable es igual a no, desactiva pellizcar para hacer zoom, no es bueno para la accesibilidad 36. Proyecto de consulta de medios con CSS: El código, tenemos un div contenedor y cuatro cajas anidadas Establezco el ancho máximo de los contenedores en 1,200 píxeles y el ancho de cada caja en 100 píxeles. Primero, déjame mostrarte una cosa. Abrí la página en Mozilla Firefox, y necesitamos verificar el tamaño de la pantalla. Haga clic derecho y elija inspeccionar o presione F 12 para abrir la ventana del inspector. Ahora, da clic en el icono de Responsive Design. Aparecerá una barra superior donde podrás ver el ancho y alto de la pantalla. También puede cambiar la orientación haciendo clic en el icono de rotar. En modo responsivo, puede probar la página en diferentes dispositivos con varios tamaños de pantalla. En la lista de edición, incluso puedes agregar más dispositivos. También puedes aumentar o disminuir la resolución arrastrando la barra o simplemente tecleando el tamaño de la pantalla En la parte inferior del inspector, verás código en el lado izquierdo y CSS en el lado derecho. Cuando haces clic en cualquier DIV, puedes ver su código CSS resaltado. Ahora, pasemos al tema. Para el diseño móvil, todo se ve bien, pero para dispositivos pequeños, necesitamos dos cajas una al lado de la otra. Entonces, escribamos una consulta mediática. Puedes escribir media queries directamente en tu archivo CSS o en una hoja de estilo separada. Derecha, media Ancho mínimo 768 pixeles. Establecer caja con a 48% y margen a 1%. Ahora, cuando el ancho de la pantalla sea de 768 píxeles o mayor, verás dos cajas. Cuando el ancho de la pantalla se reduce a 767 píxeles o menos, vuelve a cambiar a una caja A continuación, para pantallas más grandes, necesitamos cuatro cajas. Derecha, de ancho medio, 1024 píxeles. Establezca el ancho de la caja en 23% y el margen en 1%. Ahora verás cuatro cajas en pantallas más grandes. Por último, agreguemos estilos de color entre rangos de pantalla específicos. Queremos que las cajas sean rojas entre 768 píxeles y 1024 píxeles. Derecha, media, ancho mínimo 768 pixeles. Y ancho máximo 1024 píxeles. Y establece el color de fondo de la caja en rojo. Y el color del texto al blanco. Pruebe la consulta, y verá que las cajas se vuelven rojas solo entre 768 píxeles y 1024 píxeles. Déjame decirte una cosa más. En los navegadores, se puede cambiar el tema, como el modo oscuro o el modo de luz. Podrías haber notado que en algunos sitios web, el tema cambia automáticamente cuando cambias de modo, mientras que en otros, no es ejemplo, en Firefox, si cambio el tema a luz y reviso nuestra página, nada cambia. Si cambio al modo oscuro, aún no cambia nada. ¿Por qué? Porque no hemos establecido la media query para esquemas de color. Para cambiar los colores de un sitio web en función de su tema, utilizamos la consulta de medios de combinación de colores preferida en CSS, justo a la velocidad media. A prefiere el esquema de color, oscuro. Establecer el color de fondo oscuro del cuerpo. Fuente de color claro. Y el color de fondo de la caja. Vamos a establecer el color de fondo en púrpura como ejemplo. Ahora, cuando configuramos el navegador en tema oscuro, la página cambiará automáticamente al estilo oscuro. Y cuando vuelvas a cambiar al modo de luz, la página volverá a su estilo original de color claro Las consultas de medios son la clave para el diseño responsivo. Permiten adaptar diseños, fuentes, colores e incluso animaciones dependiendo del tamaño de la pantalla, orientación o las preferencias del usuario. Al seguir un enfoque móvil primero y escribir puntos de interrupción limpios, puede asegurarse de que sus sitios web se vean hermosos y utilizables en cualquier dispositivo 37. Crear un diseño web responsivo, parte1: Crearemos este diseño web desde cero. En este diseño, tenemos un encabezado, una barra de navegación, una sección de héroe, y en nosotros, una sección de características, una sección de galería, una sección nueva, una sección contacto y, por último, el pie Este diseño web será totalmente receptivo, y lo construiré usando solo las propiedades CSS normales que te he enseñado a lo largo de este curso. No voy a usar ninguna técnica avanzada de CSS como Flexbox o grid Entonces espero que este diseño te dé una idea clara de cómo crear un diseño de sitio web básico usando solo CSS. Ahora, comencemos. Ahora tenemos una página básica donde he agregado un archivo CSS externo y uso la fuente Roboto Google Déjame mostrarte la estructura de carpetas. Aquí he creado una carpeta de diseño web de proyecto dentro de la carpeta CSS y dentro de esa. Tenemos una carpeta Imágenes donde se colocan todas las imágenes. En la carpeta CSS, guardamos el archivo CSS. Primero, construiremos el layout usando un primer enfoque móvil. Ahora, en HTML, primero, comentemos el texto para referencia. En el código VS, puedes comentar pulsando Control más forwardslash Vamos a agregar el elemento header. Dentro del encabezado, agregue un elemento NAV. Dentro del NAV, primero cree una sección de logotipo. Escribe un div con el logo del nombre de la clase y agrega el texto del sitio web CSS. También puede reemplazar el texto con una imagen de logotipo real si lo desea. A continuación, crearemos la sección de menú usando elementos de lista. Escriba un UL con elementos LI para cada elemento del menú. Inicio. Una galería y contacto. Y agrega un hash en el HREF. Vamos a movernos en CSS. En CSS, comienza con el selector universal, escribe un asterisco, luego establece Margen cero relleno cero. Caja de borde de tamaño de caja. Ahora para el cuerpo vamos a agregar fuente Roboto. I y tamaño de fuente uno RM. Altura de línea 1.6, fondo gris claro y color negro claro. Para una imagen responsive, usamos width 100% y presionamos auto en el elemento IMG Entonces en CSS, escribe IMG y establece el ancho en 100% y la altura en auto Ahora, vamos a crear una clase para un encabezado H dos y establecer el tamaño de fuente dos REM, margen inferior, 0.5 REM. Color seis c63ff, y para el encabezado H tres, tamaño de fuente 1.5 REM, margen inferior, 0.5 Y por último, párrafo. Margen inferior, un REM. Primero, crearemos CSS para el encabezado. En el encabezado, usamos un fondo blanco y agregamos una sombra de caja. Ahora, revisa la vista previa. Ahora para Nav establecer el ancho, 90%. Máx con 1,100 píxeles. Margen, auto, desbordamiento oculto. Relleno un REM cero y para el logo. Tamaño de fuente, 1.4 rem Color azul claro. Fontwet negrita. Alinear el texto al centro. Veamos la vista previa y para la barra de menús. Nav derecho, luego UL. Estilo de lista, ninguno. Centro de alineación de texto. Relleno de diez píxeles, cero píxeles y para el elemento de la lista Nav. Nosotros NAV luego LLI. Muestre el bloque en línea y para la etiqueta de anclaje. Nav ULLIA luego configuró la decoración del texto, ninguno. Color 1e1f 26, relleno 0.3 R 0.2 RM para Nav ULLIAHA. Borde inferior, dos píxeles sólidos. Seis c63ff. Ahora hemos completado la sección de encabezado. Pasemos a la sección de héroes. En HTML, agrega una sección con el héroe de clase. Dentro de esta sección, agregue un encabezado. Un párrafo. Y un botón. Yo CSS, escribo los estilos para la sección, relleno cero REM. Ahora, clase héroe. Centro de alineación de texto. Antecedentes. Tamaño de fondo, cubierta. Color, blanco. A continuación, agregue relleno. Después principal H un encabezado y agregar tamaño de fuente tres REM. Margen inferior, un REM. Después sección de párrafo. Ancho máximo 640 píxeles, margen cero automático y botón. Mostrar bloque en línea. Relleno 0.8 REM, 1.8 REM. Fondo 6c63 FF, ColclonFFF decoración ColclonFFF Ninguno. Radio de borde, 0.6 REM. Y botón Ja. Opacidad, 0.9. Ahora bien, el párrafo y el botón están demasiado cerca, así que aumentemos el tamaño de la fuente y agreguemos algún margen inferior. La vista previa se ve perfecta ahora, pero todavía tenemos un problema, pero la imagen de fondo es demasiado brillante, así que vamos a oscurecerla Para arreglar esto, crearemos una clase de superposición. Primero, escribe un div con la superposición de clase y luego estilízala en CSS. Posición absoluta. Arriba, cero, izquierda, cero, derecha, cero, abajo, cero. Antecedentes, RGBA, 303-01-3080 0.75. Establece la clase de héroe en posición relativa. Pero en la vista previa, el encabezado, párrafo y botón aparecieron debajo de la superposición. Entonces en CSS, apunte al encabezado, párrafo y botón. Después establece su posición en relativo y el índice Z en uno. Ahora por fin hemos completado la sección de héroes. Ahora vamos a crear la sección Acerca de nosotros. Escribe una sección con la clase sobre. Dentro de la sección about, agregue una clase de contenedor. Después agregue un encabezado H dos y un párrafo. A continuación, agregaremos dos secciones, una para la imagen y otra para el texto, escribiremos un div con la clase coal, dos para la imagen. Y otro div con la clase carbón, dos para el encabezado y el texto. Ahora pasemos al CSS. Ahora, vamos a crear una clase contenedor, que usaremos en cada sección. Escribe contenedor y establece el ancho 90%, ancho máximo 1,100 píxeles, margen cero auto Escribe sobre y establece el fondo en blanco. Ahora necesitamos agregar algún margen inferior a este párrafo. Así que vamos a crear un nombre de clase lead y establecer margin bottom two REM. Y agregue una clase de plomo en este párrafo. Para el CSS de Cl dos, establezca el ancho en 100%. Agregar un margen de 2%. A continuación, necesitamos redondear las esquinas de la imagen y establecer el radio del borde en 0.5 rem. Ahora, agregue algo de margen superior al encabezado. Escribir sobre H tres y establecer margen top dos REM. Ahora hemos completado la sección Acerca de nosotros. 38. Crear un diseño web responsivo. Parte 2: Vamos a crear la sección de características. En HTML, escriba una sección con la entidad de clase. En su interior, agregue un div contenedor dentro del contenedor. Agrega un encabezado H dos con algún texto. Luego crea tres secciones. Para cada sección, escribe un div con la clase col tres. Dentro de Cl tres div, agregue un icono. Un encabezamiento, algún texto. Y por último, un botón. Ahora, copia el frío tres div y pegarlo dos veces más. Después cambia el contenido en cada uno de forma individual. I CSS. Primero, movamos el texto del encabezado al centro y agreguemos algún margen inferior. En CSS, objetivo característica H dos, establecer el texto alinear centro, y añadir margen inferior. Ahora, vamos a crear una clase para la col tres div escribir col tres y establecer El W 100%, relleno de dos REM, radio de borde, uno REM, sombra de caja, 04 píxeles 20 píxeles, RGBA, 0,000.1 Texto un centro de línea, margen inferior, tres M y clase para icono y establecer el ancho 90 píxeles. Altura, 90 pixeles. Margen uno RM. Hemos completado la sección de características. Ahora, vamos a crear la sección de galería. En HTML, escribe una sección con la galería de clases. En su interior, agregue un contenedor div. Dentro del contenedor, agregue un texto de encabezado. Seguido de un párrafo con el plomo de clase. A continuación, crea un div con la clase llamada tres G y coloca una etiqueta IMG dentro Copia este col tres G div y pegarlo cinco veces. Entonces tienes seis en total y reemplazas las imágenes por otras diferentes. Y pasemos al CSS. Escribir clase galería y establecer el fondo blanco texto alinear centro y llamar a tres G con 100%. Radio de borde, uno REM, margen inferior, dos REM. Ahora necesitamos redondear la esquina de la imagen. Escribe galería IMG, luego establece el radio del borde 0.50 REM. Ahora tenemos completa la sección de galería. Ahora vamos a crear la nueva sección. En HTML, escribe una sección con las noticias de la clase. En su interior, agregue un contenedor div. Dentro del contenedor, agrega un encabezado H dos con tu texto. Seguido de un párrafo con el plomo de clase. A continuación, crea un elemento artículo. Dentro del artículo, agregue un encabezado H tres. Después agrega un párrafo con la meta de clase. Después de eso, agregue otro párrafo para el texto principal. Copia el elemento artículo y pegarlo dos veces más. Entonces tienes tres en total y actualizas el contenido para cada uno. Y vamos a crear un CSS para la sección de noticias. Escribir artículo de noticias y establecer el fondo FFF, relleno 1.5 M margen inferior, dos REM, radio de borde, uno RM Entonces noticias H tres. Color colon, 6c63 FF, margen inferior, 0.5 Y luego meta de noticias. Tamaño de fuente 0.85 REM. Color, 555. Margen inferior, 0.7 REM. Ahora ya hemos completado la nueva sección. Vamos a crear una sección de contacto. Escribir una sección con el contacto de clase. En su interior, agregue un contenedor. A continuación, agregue un encabezado. Y un párrafo con el liderato de clase. A continuación, agregue los elementos del formulario. Primero, escribe una etiqueta. Y un texto de tipo entrada. En nombre, use nombre con un marcador de posición como nombre completo. Luego cree una entrada de correo electrónico, y escriba es igual a correo electrónico. El nombre es igual al correo electrónico. Con un marcador de posición, ingrese su correo electrónico. Después de eso, agregue una Texaria. Recuerda, Texaria tiene tanto una etiqueta de apertura como de cierre. Establece las filas cuatro y un marcador de posición como escribir algo. Y por último, crear un botón con clase BTN. Ahora, vamos a crear el CSS para el formulario de contacto. Contacto derecho y establecer el fondo blanco, y para el formulario de fondo FFF, relleno, dos REM, radio de borde, uno REM Sombra de caja, 04 píxeles, 16 píxeles, RGBA, 0,000.1 Yo y finalmente, vamos a crear la clase para el cuadro de entrada y el ancho del área de texto 100%. Relleno 0.8 REM uno REM, borde, dos píxeles sólidos. Radio de borde CCC, 0.6 REM, herencia de familia de fuentes, margen inferior, un RM Ahora hemos completado la sección del formulario. Por fin vamos a crear la sección de pie de página. Escribe un pie de página y agrega un contenedor dentro de él. Luego crea un div con la clase llamada tres G. Luego agrega un encabezado H four y crea tres enlaces usando elementos de lista. Copia este div, pegarlo y luego cambiar el contenido. A continuación, crea un nuevo div. Y en su interior, H cuatro rumbo. Entonces crea un div social. Y en su interior, agregue dos etiquetas de anclaje. Por último, crea otro div con la copia de clase y escribe el texto de copyright. Ahora vamos a crear CSS para Pie de página. Pie de página derecho, y luego establecer el fondo 1e1f 26. Después color del texto, C ocho, c9d, relleno cero, tres REM, Y luego para pie de página H cuatro márgenes inferior, uno REM, tamaño de fuente 1.1 RM. Entonces para los elementos de lista de pie de página, estilo de lista ninguno. Entonces los pies son UI. Margen inferior, 0.5 REM Luego los pies son ULA. Color C 8c9d0 decoración de texto , ninguno. Entonces los pies son ULA Hover Texto subrayado de decoración. Después sociales A, Mostrar en bloque de línea Ancho 38 píxeles. Altura 38 pixeles. Altura de línea 38 pixeles. Texto un centro de línea, radio de borde, 50%. Fondo 30,313 A, decoración de texto en color, ninguno. Margen derecho 0.5 rem. Y sociales un hover. Colon de fondo, 6c63 FF. Entonces, finalmente, copia. Centro de alineación de texto. Margen top dos REM y tamaño de fuente. Por último, establece el color del texto en gris. Después de refrescar la página, nada cambió. Oh, me di cuenta que olvidé agregar el punto antes de la clase de copia. Así que agreguemos el punto y actualicemos nuevamente la página. Ahora hemos completado el pie de página, y con eso, también hemos terminado todo el diseño web. Déjame mostrarte todo el diseño. Se ve perfecto en pantallas móviles, pero a medida que aumentamos el ancho, no encaja correctamente en pantallas medianas y grandes. Para solucionar este problema, utilizaremos media queries. En la siguiente parte, crearemos un layout responsive. 39. Usa las consultas de medios en el diseño web: Vamos a convertir este diseño web en un diseño responsive. Utilizaremos 768 píxeles como primer punto de interrupción. A 768 píxeles, necesitamos que el logotipo se alinee a la izquierda y el menú para alinear a la derecha. En CSS, derecha, Ma Media Min Con 768 píxeles. Después logo y establecer el ancho W 48%. Margen 1%, flotar a la izquierda, línea de texto a la izquierda. Y Nav UL N con 48% de margen 1%, flotar a la derecha. El texto se alinea a la derecha. Ahora que el logotipo y el menú están bien establecidos, los textos de los enlaces de navegación están demasiado cerca, así que aumentemos el espaciado. Y establecer el relleno 0.3 REM, 0.5 M, margen, cero, 0.2 REM. El menú se ve bien, y el héroe y sobre las secciones también se ven bien. En la sección de características, necesitamos que todas las secciones se muestren una al lado de la otra. I CSS, escribir col tres y establecer el W 30%, flotar a la izquierda, margen 1.66% La sección de características se ve bien, pero el área de fondo gris no se expandió. Solucionemos este problema agregando una clase clearfix. Escriba clearfix, muestre la raíz de flujo y en el uso de HTML en la sección de características Ahora se ha solucionado el problema, y en la sección de galería, necesitamos tres imágenes una al lado de la otra. Derecha llama tres G Ancho 30% flotar a la izquierda. Margen 1.66%. Y ahora las imágenes se muestran una al lado de la otra. Pero volvimos a tener el mismo problema para arreglarlo en HTML. Agrega la clase clearfix a la sección de galería, y el problema queda resuelto Ahora vamos a revisar las otras secciones. Todo se ve genial, pero en el pie de página, necesitamos arreglar el texto de copyright. Escribe copy y establece el flotador a la izquierda. Ahora, agregue la clase clearfix en la sección de pie de página. El problema está solucionado. Ahora hemos completado el diseño responsive a 768 píxeles. A continuación, vamos a comprobarlo a 1024 píxeles. A 1024 píxeles en la sección A, necesitamos que la imagen y el texto se muestren lado a lado en CSS, medios min ancho 1024 píxeles y derecha, columna dos, ancho 48% margen 1%, flotar a la izquierda, y se ve bien, pero en el encabezado, vamos a disminuir algo de espacio superior, justo sobre H tres, margen superior cero REM. Ahora la parte superior se ve bien. Y nuevamente, tenemos el problema de clearfix. Ahora, en HTML, agregue la clase clearfix. Y hemos completado este diseño para ser totalmente receptivos. Espero que tengas una idea clara de cómo crear un diseño receptivo. 40. Conclusión: Enhorabuena. Has completado la serie de tutoriales CSS. Comenzamos con los fundamentos, selectores, propiedades, valores y construimos temas avanzados como el modelo de caja, posicionamiento, antecedentes y En el camino, aprendiste cómo CSS interactúa con HTML y cómo aprender media queries para hacer un diseño responsive A continuación, necesitas aprender selectores avanzados, que son esenciales porque te dan precisión, reducen el desorden, agregan interactividad sin Javascript, y hacen que tu CSS sea más escalable y La diferencia entre escribir un estilo básico y construir diseños verdaderamente pulidos y mantenibles. Recuerda, CSS es a la vez un arte y una ciencia. Cuanto más practiques, mejor obtendrás al combinar la creatividad con la precisión técnica. No tengas miedo de experimentar, probar diferentes diseños y seguir aprendiendo nuevas características medida que CSS continúa evolucionando. Gracias por acompañarme en este viaje. Sigue practicando, sigue creando y lo más importante, sigue construyendo hermosas experiencias web con CSS. Nos vemos en el siguiente tutorial y codificación feliz.