Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Herencia
26/55Recursos
Aportes 144
Preguntas 31
Ordenar por:
Herencia y sus valores:
Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa “Usa el valor de mi padre”, si el elemento padre no tiene definido dicho valor el navegador seguirá el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ningún elemento superior se aplicara el valor por defecto.
Initial. Este valor pertenece a la especificación CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuestión.
Upset. Este valor unset es una combinación entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser así este valor colocará el valor de la propiedad en su valor inicial, como si usáramos inherit e initial juntos.
Mis notas juntando también la de los compañeros 😄
Algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto:
body {
color: green; /* Color de texto verde */
}
Aplicamos a la etiqueta HTML <body> el color de texto verde. En principio, esta propiedad aplicará dicho color a los textos que estén dentro de dicha etiqueta <body>.
Sin embargo, si tenemos más etiquetas dentro, como por ejemplo una etiqueta <div> con texto en su interior, si no tenemos aplicada una propiedad color a dicho elemento, veremos que también aparece en color verde. Esto ocurre porque la propiedad color es una de las propiedades CSS que, en el caso de no tener valor específico, hereda el valor de su elemento padre.
Ojo, porque esto no ocurre si lo hacemos con otras propiedades CSS, como por ejemplo, con los bordes de un elemento HTML:
body {
border-width: 2px;
border-style: solid;
border-color: red;
}
Si esta propiedad aplicará herencia, todos los elementos HTML situados en el interior de <body> tendrían un borde rojo, comportamiento que no suele ser el deseado. Por esa razón, la herencia no ocurre con todas las propiedades CSS, sino sólo con algunas propiedades como color o font, donde si suele ser deseable.
Valores especiales
Además de los valores habituales de cada propiedad CSS, también podemos aplicar ciertos valores especiales que son comunes a todas las propiedades existentes. Con estos valores modificamos el comportamiento de la herencia en dicha propiedad:
- inherit Hereda el valor de la propiedad del elemento padre.
- initial Establece el valor que tenía la propiedad inicialmente.
- unset Combinación de las dos anteriores: Hereda el valor de la propiedad del elemento padre, y en caso de no existir, su valor inicial.
El siguiente ejemplo para forzar la herencia en una propiedad que no la aplica por defecto:
body {
border-width: 2px;
border-style: solid;
border-color: red;
}
div {
border: inherit;
}
Si tenemos un elemento <div> dentro del <body>, el primero heredará los estilos del elemento <body>, ya que le hemos especificado el valor inherit en la propiedad border.
Fuente Herencia en CSS
Buenas noches! Unas cositas que pude conseguir y para complementar nuestro conocimiento en esta parte. Además del concepto de especificidad (que nos ayudan bastante el momento de implementar selectores) existe el concepto de cascada que también debemos de tener en mente, el cual es básicamente que cuando existe un conflicto de dos o más estilos en un mismo elemento se toma el que se encuentre de último 😀. En un segundo lugar, tenemos que USUALMENTE (no siempre) los valores heredados son valores computados, que no necesariamente son los valores especificados para un estilo determinado ya que si no se encuentra el mismo entonces el navegador es obligado a implementar los estilos por default como explico Diego. Link para consulta: https://www.w3.org/TR/css-cascade-3/
Atenta a sus observaciones!
La herencia en CSS es algo muy útil cuando quieres “reciclar” los estilos del padre, pero recuerda que todos lo que cambies en el padre también afectará a los hijos que estén heredando estilos de el
Trataré de hacer ENTENDIBLE la herencia:
•inherit: ya sabemos
•initial: fuerza a no aplicar la herencia, lo contrario a inherit, es parte de especificidad, un tema que veremos adelante.
•Unset: Es como un inherit flojo, ya que inherit inspecciona hasta encontrar un padre con un estilo, unset solo inspecciona el padre próximo, si encuentra estilo lo hereda, si no lo hay se resetea al su valor natural.
• Revert: Pone su valor a la capa de estilo por defecto del navegador.
SI cometí un error, diganlo, si lo explique bien denme ese corazón
Algo no me cuadraba en la explicacion del ejemplo del <html> font-size = 75%, y es que que @degranda indica que el font-size de <h1> no heredaba del seteado en <html>, creo yo sin embargo creo que si lo hace pero de una manera muy particular que paso a explicar
primero indicar los valores por default segun mi navegador Chrome (sin el <html> font-size = 75%):
- <html> font-size 16px
- <h1> font-size 32px (2em)
- <p> font-size inherited (16px)
una vez seteado el <html> font-size = 75%:
- <html> font-size 12px
- <h1> font-size 24px
- <p> font-size inherited (12px)
Como lo indico, todos los font-size’s de <html> y elementos debajo de este son el 75% de sus valores por default, inclusive <h1> es afectado por ese 75%, y aqui es donde viene lo particular y es que no esta heredando el valor de 12px de <html> si no mas bien esta aplicando el porcentaje que indica <html> font-size sobre su valor original de 32px
Cuando @degranda ya setea explicitamente <h1> font-size = inherit el valor es diferente al “inherited” anterior
- <h1> font-size 12px
y es que parece ser que aca no toma el 75% sino mas bien directamente el valor en pixeles del <html>
Se pueden aplicar estos 3 valores a las propiedades en css.
Si quieres leer mas aqui les dejo este Link
• Herencia: La herencia es el mecanismo mediante el cual, determinadas propiedades de un elemento padre son transferidas a un elemento hijo, no todas la propiedades son trasferidas de padre a hijo, ya que hay muchas que no tienen sentido que lo fueran ( por ejemplo los bordes)
Es importante tener bien en claro a lo que nos referimos cuando hablamos de etiquetas padres e hijo, cuando una etiqueta contiene a otra, se dice que esta es su etiqueta padre.
Tenemos que entender que hay muchos valores que se heredaran, por ejemplo, si cambio el color de fuente de en una etiqueta, todos sus hijos heredaran esta propiedad, pero si le asigno un borde negro a una etiqueta padre seria ilógico que todos sus hijos heredaran esta propiedad.
• Controlar la herencia: CSS nos brinda 4 valores que nos permite tener control de la herencia de una propiedad, todas las propiedades de CSS aceptan estos valores.
• Inherit: Establece que el valor de la propiedad sea heredado de la etiqueta padre.
• Initial: Establece que el valor de esa propiedad será establecida por la hoja de estilos del navegador.
• Unset: El valor Unset es como usar Inherit e Initial al mismo tiempo, tiene dos casos.
-
En caso de que el valor se herede de forma natural, el valor de esta propiedad será heredado.
-
En caso de que el valor no se herede de forma natural funcionara como Initial.
Mas información sobre el tema de herencia en el siguiente link:
1. Cascada y Herencia
2. Herencia_MDN Web Docs
Un concepto muy importante de CSS salió a la luz en el minuto 1:39. Si se dan cuenta el margin-bottom del <h1> y el margin-top de <p> se estan “combinando”.
Esto es un fenómeno de CSS llamado margin collapsing. Es básicamente cuando los márgenes verticales de elementos adyacentes se combinan.
En este enlace pueden ver algunas reglas que se deben cumplir para que ocurra el margin collapsing
Resumen y grafico
- h1 recibe por el navegador un tamaño especifico
- h1 está dentro del html pero no está tomando el 75%
de tamaño de fuente que le indicamos a todo nuestro
html solo está tomando el tipo de fuente, así que
usamos inherit en h1 para que herede esa propiedad 😅
Herencia
Herencia es el código CSS que se le va a pasar de un padre a un hijo.
INHERIT: Especifica que el valor que usemos herede el valor del elemento padre.
INITIAL: Este valor da el valor inicial y predefinido por el navegador en uso.
UNSET: Este es la combinación de inherit e initial, este valor se usa cuando una propiedad quiere heredar el valor de su elemento padre si este es disponible, en caso de no ser disponible este valor pondrá el valor de la propiedad en su valor inicial como si usaramos inherit e initial juntos.
Hola alguien saber porque en mi inspector cuando aplico el 75% en la fuente no me sale el tamaño en pixeles solo me sale el porcentaje
vi el video 3 veces para entenderlo poco a poco vamos avanzado!!
Clase 26 - Herencia
¿Qué es la herencia en CSS?
- Es el código CSS que se le pasa de un elemento padre a un elemento hijo.
¿De dónde hereda un elemento <p> su propiedad font-size?
- Del elemento padre más cercano que tenga.
¿El elemento <html> puede dar en herencia a otros elementos estilos que le pongamos a él?
- Sí.
¿Para qué nos sirve la propiedad font-family?
- Para cambiar la fuente del elemento.
¿Cuál es el tamaño de fuente que tiene definido el elemento <html>?
- 16px.
¿Por qué un elemento <h1> no hereda el font-family del elemento <html>?
- Porque el navegador está sobreescribiendo los estilos de este elemento con sus propios estilos.
¿Para qué nos sirve el valor inherit en una propiedad de CSS?
- Este valor fuerza que el elemento herede dicha propiedad de su elemento padre más cercano.
Herencia
En CSS existe el concepto de la herencia en el cual podemos sacar información de los “padres” para copiarla o hacer algo con ella. En este caso los padres pueden ser las etiquetas contenedoras que contienen a nuestros elementos
- Herencia, es código css que el elemento padre heredará al hijo.
- Inherit, Indica que heredará los estilos de su elemento padre
- Initial, Indica que obtendrá los valores predeterminados del navegador.
- upset, combinación de inherit + initial, intentará heredar los estilos de su elemento padre, si no esta disponible obtendrá los valores predeterminados.
Por defecto el navegador tiene un font-size:16px
@degranda estoy muy contento de tomar este curso. Ahora comienzo a entender CSS y ya no tendré que hacer experimentos hasta lograr lo que quiero. Me dio cuenta de que es un tema de tener una buena base.
TIP: Si se trabaja con rem (recomendable en fonts), aplicar en el body la propiedad font-size: 62.5%, para que 1rem valga 10px y se haga un poco más fácil el control de tamaño.
Notas de la clase
Y nunca lo olviden, amiguitos: tanto la palabra “título” como la palabra “párrafo”, llevan tilde. 😉
Recomiendo este juego, excelente para practicar selectores
html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herencia</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main>
<h1>Manchis está loco</h1>
<p>Y está chiquito</p>
</main>
</body>
</html>
html{
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1{
font-size: inherit;
}
Herencia
la herencia es la capacidad de los padres de heredar estilos a los hijos de un contenedor
Herencia
Es el código CSS que pasa de un padre a un hijo. Por defecto html viene con estilos como el tipo de fuente y el tamaño.
html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
html por defecto usa 16px como tamaño de fuente. Al pedirle el 75% la pondrá en 12px. Además cambiamos el tipo de fuente. Sin embargo, observamos que solo se aplican a la etiqueta p. Aunque h1 cambió el tipo de fuente, no lo hizo el tamaño. Esto porque no lo está heredando ya que el navegador no toma el tipo de fuente como padre.
h1 {
font-size: inherit;
}
Aquí aplicamos la propiedad herencia al h1. Lo que hará será tomar el tamaño de fuente de su padre más cercano. Como ni main o body tienen tamaño de fuente definido (en ese orden), lo tomará de la etiqueta html, que sí tiene.
Hay ciertos estilos que nuestra etiquetas van a heredar de sus contenedoras, por lo que es importante decidir cuando esto nos conviene o no.
Propiedades Heredadas VS Propiedades No Heredadas
Las propiedades heredadas obtienen la propiedad de su padre y no del elemento raíz. Mientras que las propiedades no heredadas siempre tendrán el valor de raíz. En otras palabras el valor por defecto de una propiedad heredada es inherit mientras que en una no heredada es initial.
La herencia en CSS es un mecanismo en el cual determinadas propiedades de un elemento padre se transmiten a sus hijos. … Por ejemplo, los márgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos márgenes que su padre. Es por eso que entra en juego el valor inherit.
Herencia es el mecanismo en el que algunas propiedades CSS se heredan desde los elementos padres a los elementos hijos, modificando el valor que tienen por defecto. Por ejemplo:
CSS
html {
color: red;
}
HTML
<body>
<main>
<h1>Soy un titulo</h1>
<p>Soy un parrafo</p>
</main>```
La propiedad color aplicada es heredada, por esto todos los elementos hijos de la raíz html tendrán un color rojo. Ahora, existen distintas propiedades las cuales manipulan el comportamiento de la herencia:
• Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa “Usa el valor de mi padre”, si el elemento padre no tiene definido dicho valor el navegador seguirá el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ningún elemento superior se aplicara el valor por defecto.
• Initial. Este valor pertenece a la especificación CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuestión.
• Unset. Este valor unset es una combinación entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser así este valor colocará el valor de la propiedad en su valor inicial, como si usáramos inherit e initial juntos.
Clase 26 - Herencia
Nos menciona que El navegador tiene como font size 16px por predeterminado, lo que significa que todo contenido vendrá así por defecto
lo que esta heredando el html es el tipo de fuente
al utilizar font size inherit hacemos que herede de su padre el valor del size
la herencia es básicamente tomar características de las clases padres y así poderlas utilizar en otras posteriormente
elemento
{
atributo: inherit;
}
Lo que hacemos es indicar que se herede el estilo DEL ATRIBUTO QUE ESTAMOS INDICANDO del elemento padre, si el elemento padre no tiene definido un estilo al atributo que estamos buscando. Este irá a buscar este estilo en los elementos superiores de la etiqueta padre hasta encontrar uno. Ya si no se encontró este estilo en los elementos superiores, se le definira un estilo por defecto al atributo que estabamos buscando herredar.
Hasta ahora muy satisfecho con este curso, tenía confusión con muchos conceptos del CSS, @degranda debería estar en los demás cursos de la carrera arquitectura frontend.
No entendía la herencia hasta este vídeo, muy bien explicado!
Tres conceptos muy importantes en CSS, cascada, herencia y especificidad.
RESUMEN CLASE 26:
HERENCIA
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herencia</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<h1>Soy un titulo</h1>
<p>Soy un parrafo</p>
</main>
</body>
</html>
CSS
html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: inherit;
}
Ante la pésima explicación de esta clase “es el código que se la pasa de un padre a un hijo” ¿y quién carajos es el padre y quién el hijo? (después de todos los términos que enseñan, no son capaces de usar el término preciso) pues tuve que recurrir a Google para entender esto bien: La herencia ayuda a evitar reglas CSS duplicadas, aplicando automáticamente CSS a todos los descendientes de un elemento.
Algunos ejercicios sobre herencia
https://francescricart.com/ejercicio-css-sobre-forzar-y-romper-la-propiedad-de-herencia/
Considero que el curso seria mas eficiente si reciclaras el HTML y te enfocaras en CSS, puedes aprovechar eso para que cada clase conecte con la anterior y al aprender lo nuevo se relacione con lo anterior, es mi recomendacion para este modulo del curso, esta muy bien explicado eso no lo discuto.
Hay propiedades que se heredan y otras que no.
.
color, background, _font-family _son solo algunas que si se pueden heredar.
.
padding, margin, border son propiedades que no se heredan automaticamente a menos de que forcemos la herencia con el keyword inherit.
.
En este artículo hay una lista de cuáles atributos son heredables.
Por acá os dejo una página donde viene una lista de las etiquetas de las cuales si aplican HERENCIA y cuáles no. https://www.w3.org/TR/css-2010/#properties
Herencia: Es el código CSS que se le pasa a un padre a un hijo
Herencia.
Es el código que se le va a pasar de un padre a un hijo.
Información resumida de esta clase
#EstudiantesDePlatzi
-
La herencia es el código de CSS que se le va a pasar de un padre a un hijo, es decir, si tengo una etiqueta 2 dentro de una etiqueta 1, significa que etiqueta 2 es hijo de etiqueta 1. Yo puedo aplicar un estilo a la etiqueta 1 y hacer que este estilo lo herede la etiqueta 2
-
Esto lo logro dentro de CSS utilizando la línea inherit para especificar que debe heredar
Aqui dejo mi resumen de la clase 🤗️ espero y les sea de utilidad
Cuando damos algunas propiedades a un elemento padre estas en algunos casos (no en todos) se heredarán a las propiedades de los elementos hijo, a esto se le conoce como herencia en css y es muy importante conocerlo para poder tener control de los estilos de nuestro sitio. CSS nos permite tener un mayor control de esta herencia y nos ofrece 3 opciones para manejarla, la primera opción es inherit que le indica a la propiedad del elemento hijo que tome la propiedad del elemento padre más cercano, el valor initial que fuerza a que tome el valor valor por defecto que el navegador tiene definido y por último la etiqueta unset que es una mezcla entre la etiqueta inherit y initial, le dice a la propiedad del elemento que tome el valor del elemento padre más cercano y si no lo encuentra, a diferencia de lo que haría inherit qué es pasarse al próximo elemento padre y asi hasa encontrar un valor en un elemento padre que tenga establecida esa propiedad, unset se va directo a tomar el valor por default del navegador.
INFORMACION ADICIONAL
Herencia
La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.
Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.
Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!
fuente: https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
Resumen del Capitulo en Notion
https://cutt.ly/9lgUe2r
el valor que me permite heredar caracteísticas es inherit
Algo importante a tener en cuenta son los controles de herencia.
Aclaración: el parrafo tiene 16 px de font-size no por que html tenga 16px, si no por que 16 px también es el valor por defecto de parrafo, por lo tanto el titulo <h1> tiene por defecto el tamaño de 32 px. Lo que vemos en la clase es que por defecto al colocarle que html tenga como tamaño el 75%, hace que por defecto las etiquetas hijos hereden la misma REGLA y no el mismo tamaño, disminuyendo en un 75% su tamaño de cada etiqueta proporcionalmente, y lo que hace la propiedad “inherit” es que herede el mismo Tamaño y no las mismas reglas.
Herencia: es una caracteristica que le permine a una etiqueta contenido heredar (inherit) los atibutos de su etiqueta contenedora mas sercana.
En este caso la etiqueta <p> heredo el tamaño y fuente de <h1> la cual a su vez heredo su tamaño y fuente de <html> por lo tanto al cambiar el tamaño o fuente de html cambia automaticamente el resto.
🤔 La herencia en CSS permite transferir propiedades de un elemento padre hacia sus hijos.
La unica etiqueta que no me entra es la del meta con viewport, ese si de plano ando batallando para memorizarmelo, pero ahi va ah va
Aqui encontrarás que estilos si se heredan
https://www.w3.org/TR/CSS22/propidx.html
Además de sus valores
Muy buena explicacion, ya con esto consolido mi conocimiento sobre HTML y CSS
Novedades de CSS: Dr. CSStrange en el multiverso de la locura
https://www.youtube.com/watch?v=0sFtRnbe0fo
TIMELINE:
00:00 Introducción
00:56 Los diferentes universos de CSS
UNIVERSO ROJO (Organización CSS)
03:18 Variables CSS nativas
05:53 Función calc()
06:57 Cálcular max() y min()
08:00 Función de ajuste clamp()
09:52 Funciones trigonométricas CSS
11:07 CSS Nesting nativo (anidado)
UNIVERSO ROSA (Colores y efectos)
13:28 Gradientes CSS
15:20 Colores relativos CSS
17:48 Acentuar temas de colores
18:30 Modos de fusión CSS
UNIVERSO VERDE (Maquetación y 3D)
22:00 Flex, Grid o Transform
22:57 Centrar en CSS (Flex o Grid)
25:11 Atajos: place-items y place-content
25:50 Subgrid CSS
27:10 Ignorar contenedores con CSS
29:22 3D con CSS: Perspectivas
UNIVERSO LILA (Soporte y compatibilidad)
32:29 Herramientas CSS
34:00 La regla @supports
35:00 La regla @when / else
35:50 Selector :has()
37:10 Toggles CSS
38:07 TypeCSScript: La regla @property
UNIVERSO AMARILLO (Especificidad y encapsulación)
40:13 ¿Qué es la especificidad CSS?
43:58 Capas @layer
46:25 Pseudoclases :is() y :where()
48:20 La regla @scope
49:20 Pseudoclase :defined
50:48 Pseudoclases :host
52:05 Declarativa Shadow DOM
UNIVERSO CELESTE (Media Queries)
54:24 Preferencias de usuario
56:04 Rangos de Media Queries
57:29 Custom Media Queries
58:29 Visibilidad de contenido
1:00:00 Container Queries CSS
Hoy exploraremos dos conceptos cruciales en CSS: herencia y especificidad. Estos aspectos son fundamentales para comprender cómo se aplican y anulan los estilos en diferentes partes de tu documento.
Herencia en CSS
La herencia es la capacidad de un elemento para recibir estilos de sus elementos padre. Cuando un estilo no está definido en un elemento específico, se hereda del elemento padre más cercano. Veamos un ejemplo práctico:
html {
font-size: 75%;
font-family: 'Verdana', sans-serif;
}
h1 {
font-size: inherit; /* Hereda el tamaño de fuente del elemento padre */
}
p {
font-size: 14px; /* Tamaño de fuente específico para párrafos */
}
En este caso, el elemento h1 hereda el tamaño de fuente del elemento html, mientras que el elemento p tiene un tamaño de fuente específico.
Especificidad en CSS
La especificidad es la regla que determina qué conjunto de reglas se aplica a un elemento en particular. Se basa en la combinación de selectores utilizados y la importancia de los estilos. La siguiente escala muestra la prioridad de la especificidad, de menor a mayor:
- Selector de tipo y pseudoelementos (
p,div,::before) - Clases, atributos y pseudoclases (
.clase,[atributo],:hover) - ID (
#id) - Estilos en línea (
style="...")
Cuando dos reglas entran en conflicto, se aplica la regla con mayor especificidad. Veamos un ejemplo:
/* Estilo 1 */
p {
color: blue;
}
/* Estilo 2 */
#identificador .clase {
color: red;
}
En este caso, si un elemento p tiene la clase .clase y un identificador, se aplicará el “Estilo 2” porque tiene una especificidad mayor.
Rompiendo la Herencia y Ajustando la Especificidad
En ocasiones, es necesario romper la herencia o ajustar la especificidad para lograr el diseño deseado. Esto se puede lograr mediante estilos específicos. Por ejemplo:
/* Romper herencia */
h1 {
font-size: 24px; /* Tamaño específico para h1, no hereda */
}
/* Ajustar especificidad */
#identificador h1 {
color: green; /* Aplicará el color verde solo a h1 dentro de #identificador */
}
Es importante utilizar estas técnicas con moderación para mantener un código CSS claro y mantenible.
Con estos conceptos, estarás mejor equipado para gestionar y comprender cómo se aplican los estilos en tu proyecto web. En la próxima clase, exploraremos más sobre la especificidad y cómo resolver conflictos de estilos. ¡Nos vemos allí!
Fuentes Específicas:
Puedes especificar fuentes específicas por nombre. Asegúrate de proporcionar una lista de fuentes alternativas en caso de que la primera no esté disponible:
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
Fuentes Genéricas:
Puedes utilizar fuentes genéricas que son categorías amplias de fuentes. Algunos ejemplos son:
css
body {
font-family: serif; /* Fuentes con serifs, como Times New Roman */
}
h1 {
font-family: sans-serif; /* Fuentes sin serifs, como Arial o Helvetica */
}
p {
font-family: monospace; /* Fuentes de espaciado fijo, como Courier New */
}
La propiedad font-family en CSS se utiliza para especificar la fuente o fuentes de texto que se deben aplicar a un elemento. Puedes proporcionar una lista de fuentes preferidas, y el navegador utilizará la primera fuente disponible en esa lista. Si ninguna de las fuentes especificadas está disponible, el navegador utilizará la fuente predeterminada del sistema.
La herencia en CSS se refiere a la capacidad de los elementos secundarios de heredar propiedades y valores de estilo de sus elementos padres. Esto significa que si aplicas un estilo a un elemento padre, esos estilos pueden propagarse a los elementos hijos, a menos que se anule explícitamente.
Algunas propiedades de estilo se heredan de forma predeterminada, mientras que otras no. Aquí hay algunas propiedades comunes que se heredan de padres a hijos:
Texto:
font-family
font-size
font-weight
font-style
color
Caja:
line-height
text-align
color (solo si no se ha establecido en el hijo)
Enlaces:
text-decoration
color
¿por que el comportamiento de CSS es ditinto dependiendo de la ubicacion del archivo style.css? es deciryo cree una carpera CSS y dentro de esta coloque el archivo style.css, fuera de la carpera CSS cree mi archivo index.html, cuando me refiero al comportamiento distinto es que la herencia no la aplica.
el entendienmiento del funcionamiento de herencia
Muchisimas Gracias por las clases profe…
Muy interesante para heredar estilos y ahorrar tiempo.
La herencia en CSS es un mecanismo que permite que los elementos hijos hereden ciertas propiedades de los elementos padres. En otras palabras, si se establece un estilo en un elemento padre, los elementos hijos pueden heredar ese estilo sin necesidad de establecerlo explícitamente en cada elemento hijo.
Por ejemplo, si se establece un color de fuente en el elemento padre, todos los elementos hijos heredarán ese color de fuente a menos que se anule explícitamente en un elemento hijo. Lo mismo se aplica a otras propiedades, como tamaño de fuente, fondo, margen, relleno, etc.
La herencia en CSS puede ser muy útil para simplificar el código y evitar tener que escribir estilos redundantes. Sin embargo, no todas las propiedades se heredan automáticamente, y algunas propiedades pueden heredarse de manera impredecible en diferentes navegadores. Por lo tanto, es importante comprender qué propiedades se heredan y cómo afectan a los elementos hijos en su sitio web.
html{
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/inherit heredar el tamaño de letra mas cercano/
h1{
font-size: inherit;
}
html(h1)
Ahora le daré un buen uso al inherit. Aunque no se si el concepto de herencia quiero pensar que el declarar a un padre algo y que esto le afecte a los hijos que declare dentro de este.
La herencia en CSS es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos.
No todas las propiedades CSS son heredadas, porque algunas de ellas no tendría sentido que lo fueran. Por ejemplo, los márgenes no se heredan porque es poco probable que un elemento hijo necesite los mismos márgenes que su padre.
Por lo tanto, si yo hago cambios en la etiqueta html que es la que contiene todo, esas propiedades las va a heredar a todos sus hijos. (Por ejemplo el tipo de fuente).
HERENCIA, como el código es en cascada y se lee de arriba a abajo, son hijos los elementos que se encuentran dentro de otro, por ejemplo head es hijo de la etiqueta html. Así como main es hijo de body que a su vez es hijo de html
Es decir que putas quedarse con explicar que la herencia es el código que le pasa el padre al hijo. No pueden usar los términos de programación y explicar las cosas bien con definiciones serias?
Es decir, es el código que le pasa un contenedor a otro o un selector a otro o una clase a sus clases subsiguientes?
Al final, sin entender un cu*** de esta clase, me fui a Google y ahí sí explican bien.
me gustaría haber visto como es el uso del sidebar , con html y css
pues menos mal que existe esto = *{, porque para mi lo del padding… me parecio medio confuso…!!!
Es interesante ver que en el Inspector web podemos ver la jerarquía. Y que html está hasta arriba.
En esta clase aprendemos como pasar la herencia ( estilos) que tienen los elementos padres a sus hijos. quedo muy claro gracias a la explicacion del profesor y por los aportes de @ivan arcos.
Es tema de la herencia se debe también tener en cuenta que la anchura, los márgenes, los bordes y el relleno no se heredan
Herencia y sus valores:
-
Inherit. Este es un valor por medio de una keyword que especifica que, a la propiedad que se la apliquemos debe de heredar los valores de su elemento padre. Podemos decir que la palabra Inherit significa “Usa el valor de mi padre”, si el elemento padre no tiene definido dicho valor el navegador seguirá el DOM hasta que encuentre un elemento superior que lo contenga, y en ultima instancia de no tenerlo ningún elemento superior se aplicara el valor por defecto.
-
Initial. Este valor pertenece a la especificación CSS3 y cuando aplicamos a una propiedad el valor initial estamos dando el valor inicial y predefinido por el navegador en cuestión.
-
Upset. Este valor unset es una combinación entre inherit y initial, cuando utilizamos este valor en una propiedad esta tratara de heredar el valor de su elemento padre si este esta disponible, de no ser así este valor colocará el valor de la propiedad en su valor inicial, como si usáramos inherit e initial juntos.
html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: inherit;
}
En la columna de la izquierda aparece el tamaño de la fuente de Html, h1, p al 100%, en segunda columna aparece el tamaño de la fuente al 75% sin heredar de las mismas etiquetas, y en la tercer columna aparece aparece la etiqueta H1 ya aplicando font-size: inherit
Herencia
La etiqueta HTML hereda los estilos font-family a sus elementos hijo mientras no exista especificidad.
html {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
Con inherit le decimos al elemento hijo que herede propiedades de su elemento padre.
h1 {
font-size: inherit;
}
CSS
Inheritance
Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren’t.
For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you’ve applied different color and font values directly to them.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
inherit
The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.
https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
initial
The initial CSS keyword applies the initial (or default) value of a property to an element. It can be applied to any CSS property. This includes the CSS shorthand all, with which initial can be used to restore all CSS properties to their initial state.
On inherited properties, the initial value may be unexpected. You should consider using the inherit, unset, or revert keywords instead.
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
unset
The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.
unset can be applied to any CSS property, including the CSS shorthand all.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?