Preguntas varias de un novato en HTML5 y CSS3

[elbuscador]

Buenas a todos, estoy estudiando HTML5 y CSS3 por mi cuenta, y tenía algunas dudas de novato, a ver si me pueden ayudar.

Por ejemplo, en la siguiente imagen, ¿por qué se crea ese espacio entre párrafos cuando aplico "*{margin;20px "}? Si no aplico margin, se queda todo junto, sin espacio entre párrafos, pero conforme aumente el margin ese espacio entre párrafos aumenta, pero ni en el top ni el bottom de la caja se modifica nada.¿A qué se debe, y cómo evito ese espacio entre párrafos?




La siguiente pregunta es sobre el último párrafo, es un <p> dentro de un <article> ,¿por qué se crea, a ambos lados, un espacio mayor comparado al resto de párrafos?, con article {margin:0px} lo corrijo, pero quería saber a qué se debe ese problema.




Gracias anticipadas por vuestras respuestas.

[skabeche]

La respuesta es más amplia de lo que parece.

Todos los elementos tienen un estilo por defecto o, dicho de otra forma, los navegadores tienen predefinidos estilos para todos los elementos HTML. Esto conlleva a un problema, que de un navegador a otro esos estilos pueden tener sutiles diferencias. Para eso se utilizan hojas de estilo para normalizar y generalizar esos estilos para todos los navegadores, el más famoso y que ya practicamente sólo se utiliza en la actualidad es Normalize.css https://necolas.github.io/normalize.css/

Esto viene a que veo que estás utilizando el selector universal, no es muy recomendable para resetear los estilos predefinidos, hace que pierdas la herencia de todos los elementos y es posible que lo estés utilizando para resetear margin en todos los elementos.Es más recomendable utilizar el selector universal para otros contextos que no vienen al caso.

A su vez, <article> también tiene su estilo predefinido, prueba a aplicarle un "margin: 0;" y "padding: 0;"

Respecto a que el "margin" de la caja contenedora no aumenta al aplicare un margin a <p> puede deberse al flujo del documento o incluso si has aplicado alguna propiedad como "position" o "float", a veces aplicando "overflow: auto" puedes ver el cambio, pero hay que añadirlo sólo cuando se requiere.

También se tiene en cuenta la especifidad en la declaración CSS la cual no entraré a explicar.

Espero que tenga sentido lo que comento, no es fácil explicarlo por aquí.

Salu2.

[elbuscador]

Hola Skabeche, gracias por tu respuesta.
Entendí todo lo que comentaste, se agradece. Bueno, el ejemplo que puse es uno que vi en uno de los libros que estoy estudiando, de ahí lo del selector universal.
Desconocía lo de Normalize, así que ya le he echado un vistazo en google, gracias por la info.
Bueno , duda aclarada, cómo recién me estoy empapando del tema, seguiré posteando más dudas que se presenten.
Gracias nuevamente.
Saludos.

[xpekegamer]

Al final, lo mejor es trastear y tú mismo puedes utilizar la opción de inspeccionar elemento y cotillear como lo hacen en otras webs... el HTML es muy básico, pero el CSS ya tiene mucha miga!

Mucha suerte con tu estudio, también te recomendaría utilizar algún cursito de udemy que por 10 € te explican todo genial.

[skabeche]

Aprender HTML es fácil, saber como utilizar las diversas etiquetas en su contexto correspondiente lleva su tiempo y estudio.
Cuidado con cotillear en otras webs, no siempre significa que está bien hecho.

Lo más importante de CSS es entender la herencia y el modelo de caja, después de eso no hay más que selectores y propiedades con las que trabajar.

[elbuscador]

Gracias por vuestros comentarios. Sí , al principio cuesta, pero cada vez voy entendiendo más. En CSS estoy seguro me tardaré lo suyo, ahora empiezo un curso extenso y quiero salir con conocimientos sólidos de allí antes de pasar a javascript ; así que seguiré posteando dudas al respecto, a ver si me podeis ayudar.
Estoy estudiando desde el "El Gran libro de HTML5...." de Gauchat , un par de videocursos que encontré en youtube y de páginas como w3schools.
Si me recomendais algún libro más actualizado (el que tengo es del 2012) , webs , os lo agradecería.
Saludos.

[elbuscador]

Duda 2:
Tengo una duda con el selector :not .
En el sgte código en CSS ,se supone que nav debería tener fondo amarillo, pero por alguna razón coge las características del resto, a pesar de que utilizo el selector :not e incluso utilizo !important, pero sigue sin funcionar. Imagino que tiene algo que ver con las herencias, he buscado información en diferentes páginas, pero sigue sin quedarme claro.





Edito: Lo he solucionado, agregando h2 a la excepción ; pero no sé si sea un proceder adecuado ; quizás conforme siga avanzando en CSS3 encuentre otras alternativas.

[elbuscador]

Pregunta:
¿En CSS3 Hay alguna diferencia entre "a{}" y "a:link{}" ?

Se supone que con a:link{} aplico estilos a los enlaces no visitados, osea prácticamente lo mismo que a{} ; he ido probando y con ambos obtengo los mismos resultados.

[skabeche]

Debes seguir un orden
https://www.w3.org/TR/CSS21/selector...seudo-elements
https://css-tricks.com/snippets/css/...sses-in-order/
https://www.w3schools.com/css/css_link.asp

En este caso sería:

a         { color: green }
a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

[elbuscador]

Sí , entiendo lo del orden.
Sólo que mi duda estaba en que según me parece entre "a" y "a:link" , no hay ninguna diferencia, al menos en lo que he visto hasta ahora.
No sé si es así o me equivoco.