Programación -CSS estilos con DevTools

Vista previa del material en texto

Las DevTools son conjuntos de utilidades y funciones que proporcionan los navegadores para ayudar a los desarrolladores a depurar y modificar el código HTML, CSS y JavaScript de una página web en tiempo real.
En relación a los estilos de CSS, las DevTools ofrecen varias características útiles:
Inspección de estilos: Puedes seleccionar y examinar cualquier elemento de una página web para ver los estilos aplicados a ese elemento. Simplemente haz clic derecho en un elemento y selecciona "Inspeccionar" (o una opción similar según el navegador) para abrir las DevTools y ver los estilos aplicados en la pestaña "Elements" (Elementos) o "Styles" (Estilos).
Modificación en tiempo real: Puedes modificar los estilos de un elemento directamente en las DevTools y ver los cambios aplicados en la página en tiempo real. Esto te permite experimentar con diferentes valores de propiedades CSS para ajustar la apariencia de una página web.
Búsqueda y navegación en estilos: Las DevTools te permiten buscar y navegar por los estilos aplicados en una página web. Puedes buscar una propiedad específica, ver dónde se aplica un estilo en particular o deshabilitar temporalmente estilos para ver cómo afectan a la página.
Comparación de estilos: Puedes comparar diferentes estilos aplicados a un elemento y ver cómo se superponen o se heredan. Esto es especialmente útil cuando hay conflictos entre estilos que pueden afectar la apariencia de la página.
Prueba de cambios temporales: Puedes realizar cambios temporales en los estilos en las DevTools para ver cómo se vería la página con esas modificaciones sin afectar permanentemente el código fuente.
Estas son solo algunas de las características disponibles en las DevTools relacionadas con los estilos de CSS. Cada navegador puede tener algunas diferencias en la forma en que se accede y se utilizan estas herramientas, pero la funcionalidad básica es similar.
Aquí tienes algunos ejemplos de cómo puedes realizar modificaciones de CSS utilizando las DevTools:
Edición en línea de propiedades existentes:
En la pestaña "Elements", selecciona el elemento que deseas modificar y busca la propiedad CSS que quieres editar en la sección "Styles" o "Estilos". Haz clic en el valor de la propiedad y edítalo directamente en línea. Por ejemplo, si deseas cambiar el color de fondo de un elemento a rojo, puedes hacer lo siguiente:
Simplemente haz clic en el valor de background-color y modifícalo a blue o cualquier otro valor de color.
2_ Agregar nuevas reglas CSS:
En la pestaña "Elements", haz clic derecho en el panel "Styles" o "Estilos" y selecciona "Add Rule" (Agregar regla). Se abrirá un nuevo campo donde puedes escribir una nueva regla CSS. Por ejemplo, si deseas agregar un borde a un elemento, puedes hacer lo siguiente:
 
En la pestaña "Elements":
 
Haz clic derecho en el panel "Styles" o "Estilos" y selecciona "Add Rule" (Agregar regla), luego escribe la siguiente regla:
 
Haz clic derecho en el panel "Styles" o "Estilos" y selecciona "Add Rule" (Agregar regla), luego escribe la siguiente regla:
 
Esto agregará una nueva regla de borde al elemento seleccionado.
3_ Deshabilitar o modificar reglas existentes:
En la pestaña "Elements", puedes deshabilitar o modificar las reglas existentes simplemente haciendo clic en la casilla de verificación junto a la regla o editando directamente el valor de una propiedad existente. Por ejemplo:
 
En la pestaña "Elements":
 
Para deshabilitar temporalmente la regla de background-color, haz clic en la casilla de verificación junto a la propiedad background-color. Esto desactivará temporalmente esa regla y el color de fondo se eliminará.
Para modificar la regla de background-color, haz clic en el valor actual de la propiedad y edítalo directamente en línea. Por ejemplo, cambia red a blue para cambiar el color de fondo.
Recuerda que estas modificaciones son temporales y se aplican solo en el contexto de las DevTools. Para hacer cambios permanentes, debes copiar las modificaciones en tu código CSS real.
CSS: Modelo de caja
El modelo de caja de CSS describe cómo se estructura y dimensiona un elemento en una página web. Cada elemento HTML se representa como una caja rectangular, y el modelo de caja define las propiedades y características de esa caja. El modelo de caja de CSS se compone de cuatro componentes principales:
Contenido (Content): El contenido de un elemento, como texto, imágenes o cualquier otro elemento HTML que esté contenido dentro de él. El tamaño del contenido está determinado por las propiedades de ancho (width) y alto (height).
Relleno (Padding): El espacio adicional entre el contenido y los límites de la caja se conoce como relleno. El relleno se especifica mediante las propiedades padding-top, padding-right, padding-bottom y padding-left. Afecta al tamaño total de la caja.
Borde (Border): El borde es una línea que rodea el contenido y el relleno de una caja. Se puede establecer su grosor (border-width), estilo (border-style) y color (border-color).
Margen (Margin): El margen es el espacio vacío que rodea la caja. Es el espacio entre la caja y otros elementos adyacentes. Se especifica mediante las propiedades margin-top, margin-right, margin-bottom y margin-left.
El tamaño total de la caja de un elemento se calcula sumando el ancho y alto del contenido, el tamaño del relleno, el tamaño del borde y el tamaño del margen. Esto se conoce como "modelo de caja de contenido en bloque" (block-level content box model). Sin embargo, hay una variante llamada "modelo de caja de contenido en línea" (inline-level content box model) que se aplica a elementos de línea, como el texto.
En el modelo de caja, también se pueden aplicar propiedades como box-sizing para controlar cómo se calcula el tamaño total de la caja, y display para controlar el tipo de caja que se utiliza (bloque, en línea o en línea con bloques).
Aquí tienes un ejemplo básico de cómo se vería el modelo de caja aplicado a un elemento:
En este ejemplo, el elemento <div> tendría un tamaño total de 244px (200px de ancho del contenido + 2x20px de relleno + 2x2px de borde + 2x10px de margen).
El modelo de caja de CSS es fundamental para comprender cómo se posicionan y se estructuran los elementos en una página web. Con el uso de propiedades como el ancho, el alto, el relleno, el borde y el margen, puedes controlar el diseño y el aspecto de los elementos en tu sitio.
Elementos HTML
existen dos elementos en HTML que se utilizan comúnmente para envolver contenido, pero no tienen ningún valor semántico específico.
 Estos elementos son <div> y <span>.
<div>:
 El elemento <div> se utiliza como un contenedor genérico y se utiliza para agrupar y dividir secciones de contenido en bloques. Es un elemento de bloque que ocupa todo el ancho disponible por defecto. Puedes aplicar estilos y atributos a los elementos <div> para darles un aspecto y comportamiento específicos. Debido a su falta de significado semántico, es útil para crear estructuras de diseño y contenedores sin agregar ninguna implicación semántica adicional al contenido.
Ejemplo de uso de <div>:
<span>:
 El elemento <span> se utiliza para envolver un fragmento de texto o contenido en línea sin agregar ningún significado semántico adicional. A diferencia del elemento <div>, el elemento <span> es un elemento en línea, lo que significa que ocupa solo el ancho necesario para contener su contenido y no genera saltos de línea.
Ejemplo de uso de <span>:
Ambos elementos, <div> y <span>, son elementos flexibles y ampliamente utilizados en HTML para ayudar a estructurar y estilizar el contenido sin agregar ninguna implicación semántica específica. Puedes aplicar estilos, clases y atributos a estos elementos para personalizar su apariencia y comportamiento según sea necesario.
Propiedades - Parte 2
Opacity:
 Esta propiedad en CSS se utiliza para establecer la transparencia de un elemento. Permite controlar el nivel de opacidad de un elemento y puede tomar valores entre0 y 1, donde 0 indica que el elemento es completamente transparente y 1 indica que el elemento es completamente opaco.
Aquí tienes un ejemplo de cómo puedes utilizar la propiedad opacity:
En este ejemplo, se aplica una opacidad del 50% al elemento <div>, lo que lo hace semitransparente.
Es importante destacar que cuando se aplica la propiedad opacity, esta afecta tanto al contenido del elemento como a cualquier contenido que se encuentre dentro del mismo. Esto significa que si un elemento tiene una opacidad menor a 1, también afectará la visibilidad de los elementos secundarios.
Es posible combinar la propiedad opacity con otras propiedades CSS, como el color de fondo o el color del texto, para crear efectos visuales interesantes. Por ejemplo:
En este caso, se utiliza la función rgba() para establecer un color de fondo y un color de texto con una opacidad específica. El primer parámetro es el valor RGB del color, mientras que el último parámetro define la opacidad.
Recuerda que la propiedad opacity afecta a todo el contenido del elemento, incluyendo texto, imágenes y elementos secundarios. Si solo deseas hacer que el fondo de un elemento sea transparente sin afectar al contenido interno, puedes utilizar otras técnicas como background-color: transparent o background: none.
2_ border-width: 
Esta propiedad se utiliza para establecer el ancho del borde de un elemento. Puedes especificar diferentes anchos para los lados superior, derecho, inferior e izquierdo del borde utilizando las siguientes propiedades:
border-top-width: ancho del borde superior.
border-right-width: ancho del borde derecho.
border-bottom-width: ancho del borde inferior.
border-left-width: ancho del borde izquierdo.
También puedes establecer el ancho del borde en todos los lados a la vez utilizando la propiedad abreviada border-width. Puedes asignar un valor único para aplicar el mismo ancho a todos los lados o puedes especificar cuatro valores separados por espacios para establecer diferentes anchos para cada lado.
Ejemplos:
div {
 border-width: 1px; /* Borde de 1 píxel en todos los lados */
 border-top-width: 2px; /* Borde superior de 2 píxeles */
 border-bottom-width: 3px; /* Borde inferior de 3 píxeles */
 border-width: 2px 1px 3px 1px; /* Borde superior e inferior de 2 píxeles, bordes derecho e izquierdo de 1 píxel */
}
border-style:
 Esta propiedad se utiliza para establecer el estilo del borde de un elemento. Puedes elegir entre diferentes estilos de borde, como sólido (solid), punteado (dotted), discontinuo (dashed), doble (double), entre otros. Al igual que con border-width, puedes especificar diferentes estilos para cada lado del borde o utilizar la propiedad abreviada border-style para establecer el estilo en todos los lados a la vez.
Ejemplos:
div {
 border-style: solid; /* Borde sólido en todos los lados */
 border-top-style: dashed; /* Borde superior discontinuo */
 border-bottom-style: dotted; /* Borde inferior punteado */
 border-style: dashed solid dotted double; /* Borde superior discontinuo, borde derecho sólido, borde inferior punteado, borde izquierdo doble */
}
border-color: Esta propiedad se utiliza para establecer el color del borde de un elemento. Puedes especificar diferentes colores para cada lado del borde utilizando las siguientes propiedades:
border-top-color: color del borde superior.
border-right-color: color del borde derecho.
border-bottom-color: color del borde inferior.
border-left-color: color del borde izquierdo.
También puedes establecer el color del borde en todos los lados a la vez utilizando la propiedad abreviada border-color. Puedes asignar un valor único para aplicar el mismo color a todos los lados o puedes especificar cuatro valores separados por espacios para establecer diferentes colores para cada lado.
Ejemplos:
div {
 border-color: red; /* Borde rojo en todos los lados */
 border-top-color: blue; /* Borde superior azul */
 border-bottom-color: green; /* Borde inferior verde */
 border-color: red blue green black; /* Borde superior rojo, borde derecho azul, borde inferior verde, borde izquierdo negro */
}
border: Esta propiedad abreviada se utiliza para establecer de forma combinada el ancho, estilo y color del borde en un solo valor. Puedes especificar estos tres valores en ese orden, separados por espacios. También puedes omitir alguno de los valores si deseas mantener el valor predeterminado.
div {
 border: 1px solid red; /* Borde de 1 píxel, estilo sólido y color rojo en todos los lados */
 border: 2px dashed blue; /* Borde de 2 píxeles, estilo discontinuo y color azul en todos los lados */
 border: 2px solid; /* Borde de 2 píxeles y estilo sólido en todos los lados, color por defecto */
}
Recuerda que puedes combinar estas propiedades y ajustar sus valores según tus necesidades para crear bordes personalizados para tus elementos HTML.
Modificar una lista Lista (List): 
list-style-image: Esta propiedad te permite especificar una imagen que se mostrará como marcador antes de cada elemento de la lista. Puedes proporcionar la URL de la imagen utilizando la función url() o utilizar una imagen en formato de datos codificados en base64.
Ejemplo:
ul {
 list-style-image: url('marcador.png'); /* Utiliza una imagen como marcador de la lista */
}
list-style-type: Esta propiedad se utiliza para establecer el formato de marcador que precede a cada elemento de la lista cuando no se ha especificado una imagen a través de list-style-image. Hay varios valores predefinidos que puedes utilizar, como disc (puntos), circle (círculos vacíos), square (cuadrados), decimal (números decimales), lower-alpha (letras minúsculas) y muchos más.
Ejemplo:
ul {
 list-style-type: square; /* Utiliza cuadrados como marcadores de la lista */
}
list-style: Esta propiedad es un atajo que te permite establecer simultáneamente el tipo de lista, la imagen del marcador y el formato del marcador en un solo valor. Puedes especificar estos valores en cualquier orden y separarlos por espacios.
Ejemplo:
ul {
 list-style: disc url('marcador.png') inside; /* Utiliza puntos como marcadores, una imagen personalizada y los marcadores dentro del contenido */
}
En este ejemplo, disc establece el formato de marcador, url('marcador.png') especifica la imagen personalizada y inside coloca los marcadores dentro del contenido de la lista.
Recuerda que estas propiedades se aplican a elementos HTML de lista, como <ul> (lista desordenada) y <ol> (lista ordenada). Puedes utilizar estas propiedades para personalizar el aspecto de las listas y hacer que se adapten a tu diseño.
Propiedad position
en CSS se utiliza para controlar el posicionamiento de un elemento en relación con su contenedor o con otros elementos. Hay cuatro valores principales para la propiedad position:
static (estático): Es el valor predeterminado para todos los elementos. Un elemento con position: static se posiciona de acuerdo con el flujo normal del documento y no se ve afectado por las propiedades de posicionamiento. No se puede utilizar con las propiedades de desplazamiento (top, right, bottom, left).
Ejemplo:
relative (relativo): Un elemento con position: relative se posiciona en relación con su posición original en el flujo normal del documento. Puedes utilizar las propiedades de desplazamiento (top, right, bottom, left) para mover el elemento desde su posición original, sin afectar al resto del contenido.
Ejemplo:
absolute (absoluto): Un elemento con position: absolute se posiciona en relación con su ancestro posicionado más cercano. Si no hay ancestros posicionados, se posiciona en relación con el documento o la ventana del navegador. El elemento se elimina del flujo normal del documento, lo que significa que no afectará a otros elementos. Puedes utilizar las propiedades de desplazamiento (top, right, bottom, left) para establecer la posición exacta del elemento.
Ejemplo:
fixed (fijo): Un elemento con position: fixed se posiciona en relación con la ventana del navegador y permanece fijo incluso cuando se desplazala página. Este tipo de posicionamiento es útil para elementos que deben permanecer en una ubicación fija, como barras de navegación o anuncios. Puedes utilizar las propiedades de desplazamiento (top, right, bottom, left) para establecer la posición exacta del elemento.
Ejemplo:
Recuerda que al utilizar los valores relative, absolute o fixed, el elemento se considera posicionado y se coloca en una capa separada del flujo normal del documento, lo que puede afectar la forma en que interactúa con otros elementos.
Estos son solo algunos ejemplos de cómo puedes utilizar la propiedad position para posicionar elementos en CSS. Puedes experimentar con diferentes valores y combinaciones de propiedades para lograr el posicionamiento deseado.
z-index :
La propiedad z-index en CSS se utiliza para establecer el orden en el que las cajas o elementos se apilan en el eje Z, que representa la profundidad. Es un valor numérico entero que determina qué elemento se muestra encima de los demás cuando se superponen.
Aquí tienes una explicación y ejemplos de cómo funciona:
El valor de z-index más bajo se muestra detrás de los elementos con valores más altos de z-index.
Si dos elementos tienen el mismo valor de z-index, el orden en el que aparecen en el HTML determina cuál se muestra encima.
Solo se aplica el ordenamiento en el eje Z a elementos que tienen una propiedad position establecida en relative, absolute o fixed.
Ejemplo 1:
En este ejemplo, elemento2 se superpondrá a elemento1 porque tiene un valor de z-index mayor.
Ejemplo 2:
En este caso, el orden en que aparecen los elementos en el HTML determinará cuál se mostrará encima. Si elemento1 aparece antes que elemento2, se mostrará encima.
Ejemplo 3:
En este ejemplo, elemento2 se mostrará encima de elemento1 debido a que tiene un valor de z-index mayor y se ha establecido como un elemento posicionado.
Recuerda que z-index solo tiene efecto en elementos que tienen una propiedad position establecida en relative, absolute o fixed. Además, el valor de z-index solo es válido en relación con los elementos hermanos o padres que también tienen un contexto de apilamiento (es decir, una propiedad position establecida).
CSS: Refinando el diseño
en CSS puedes refinar el diseño de tus elementos utilizando diversas propiedades y técnicas. A continuación, te presento algunas de ellas:
padding y margin: Estas propiedades te permiten ajustar los espacios internos (padding) y externos (margin) de un elemento. Puedes especificar valores para cada uno de los cuatro lados (superior, derecho, inferior e izquierdo) o utilizar la propiedad abreviada para establecer los valores en un solo paso.
Ejemplo:
div {
 padding: 10px; /* Establece un padding de 10px en todos los lados */
 margin: 20px 10px; /* Establece un margin de 20px en el eje vertical y 10px en el eje horizontal */
}
width y height: Estas propiedades te permiten establecer el ancho y la altura de un elemento. Puedes utilizar valores absolutos (píxeles, porcentajes) o relativos (por ejemplo, auto para que el elemento se ajuste automáticamente a su contenido).
Ejemplo:
div {
 width: 200px; /* Establece un ancho de 200px */
 height: 100px; /* Establece una altura de 100px */
}
background: Esta propiedad te permite establecer el fondo de un elemento. Puedes utilizar colores sólidos, imágenes de fondo, gradientes y otros valores para personalizar el aspecto del fondo.
Ejemplo:
div {
 background-color: #f1f1f1; /* Establece un color de fondo */
 background-image: url('imagen.jpg'); /* Establece una imagen de fondo */
}
box-shadow: Esta propiedad te permite agregar sombras a un elemento. Puedes especificar el desplazamiento horizontal y vertical de la sombra, el desenfoque, el color y otros valores para lograr el efecto deseado.
Ejemplo:
box-shadow: Esta propiedad te permite agregar sombras a un elemento. Puedes especificar el desplazamiento horizontal y vertical de la sombra, el desenfoque, el color y otros valores para lograr el efecto deseado.
Ejemplo:
div {
 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Agrega una sombra al elemento */
}
border-radius: Esta propiedad te permite establecer esquinas redondeadas en un elemento. Puedes especificar un valor para cada una de las cuatro esquinas o utilizar la propiedad abreviada para establecer valores iguales en todas las esquinas.
Ejemplo:
div {
 border-radius: 10px; /* Establece esquinas redondeadas de 10px */
}
Estas son solo algunas de las propiedades que puedes utilizar para refinar el diseño de tus elementos en CSS. Recuerda que hay muchas más propiedades y técnicas disponibles para lograr el efecto visual deseado.
Tipografia:
Las tipografías son una parte fundamental del diseño web, y en CSS tienes varias propiedades que te permiten personalizar la apariencia del texto. A continuación, te presento algunas de las propiedades más comunes para trabajar con tipografías:
font-family: Esta propiedad se utiliza para especificar la familia de fuentes que se utilizará para el texto. Puedes proporcionar una lista de fuentes separadas por comas en caso de que la primera opción no esté disponible en el dispositivo del usuario.
Ejemplo:
body {
 font-family: "Arial", sans-serif; /* Utiliza la fuente Arial, si no está disponible, utiliza una fuente genérica sans-serif */
}
font-size: Esta propiedad establece el tamaño del texto. Puedes utilizar unidades de medida como píxeles (px), porcentajes (%), em (em) o puntos (pt).
Ejemplo:
h1 {
 font-size: 24px; /* Establece un tamaño de fuente de 24 píxeles */
}
font-weight: Esta propiedad define el grosor de la fuente. Puedes utilizar valores como normal, bold, bolder, lighter o números específicos para establecer el peso de la fuente.
Ejemplo:
p {
 font-weight: bold; /* Establece una fuente en negrita */
}
text-align: Esta propiedad se utiliza para alinear el texto dentro de su contenedor. Puedes utilizar valores como left, right, center o justify para establecer la alineación deseada.
Ejemplo:
p {
 text-align: center; /* Centra el texto dentro del contenedor */
}
text-decoration: Esta propiedad se utiliza para agregar decoración al texto, como subrayado, línea a través del texto, resaltado, etc.
Ejemplo:
a {
 text-decoration: none; /* Elimina la decoración de enlaces */
}
Estas son solo algunas de las propiedades más utilizadas para trabajar con tipografías en CSS. Hay muchas más propiedades disponibles, como line-height (espaciado entre líneas), text-transform (transformación de texto), letter-spacing (espaciado entre letras), entre otras.
Recuerda elegir combinaciones de fuentes legibles y considerar la accesibilidad al diseñar la tipografía de tu sitio web. Además, ten en cuenta que algunos estilos de fuentes pueden no estar disponibles en todos los dispositivos, por lo que es importante proporcionar fuentes de respaldo genéricas.