7 min de lectura

Aprende CSS respondiendo estas preguntas

En ocasiones el aprendizaje es mejor asimilado cuando se responde a dudas específicas.

Hace días publiqué un examen de CSS básico, el cual no tiene las respuestas correctas, lo puedes revisar aquí

En esta ocasión te traigo las respuestas de la primera parte del examen.

En CSS para los márgenes y bordes existe un shorthand para indicar los valores de arriba, derecha, abajo e izquierda en una sola instrucción.
Si se usa un solo valor, este es aplicado a todos los lados
Si se usan dos valores, el primer valor será aplicado para arriba y abajo, y el segundo valor se aplicado para derecha e izquierda.
Si se usan tres valores, el primer valor será para arriba, el segundo valor para abajo y el 3er valor para derecha e izquierda.
Si se usan los cuatro valores, estos serán aplicados en el sentido de las manecillas del reloj: arriba, derecha, abajo e izquierda.

Controla la forma en la que se visualiza la imagen de fondo: permanece fija cuando se hace scroll en la ventana del navegador

background-image: url(“fondo.png”)
background-repeat: repeat-x
background-position: right top
background-attachment: fixed

En el posicionamiento absoluto y fijo, se pierde la posición original del elemento, de modo que el resto de los elementos del sitio se recorren y ocupan ese lugar.

Cuando una caja tiene un posicionamiento relativo y es movida con las propiedades top, left, right o bottom, esta es desplazada pero su lugar se sigue manteniendo “reservado” de modo que el resto del sitio se mantiene sin cambios.

Cuando un elemento recibe la propiedad float se puede considerar como si este fuera movido a una capa por encima del resto del contenido, es decir, todos los demás elementos se recorren y ocupan ese lugar, luego, en la capa del elemento flotante, se trata de mover el elemento lo más posible hacia la izquierda o derecha según sea el valor definido.

En CSS se maneja herencia, de modo que si un elemento no tiene definida una propiedad, la propiedad será obtenida del padre. En este ejemplo, el texto será azul dado que body es padre de h1 y p según las reglas de HTML, por lo cual el color azul es heredado a los párrafos.

En CSS las clases se identifican con punto (.), los id con numeral (#) y las etiquetas sin símbolos.

En CSS el selector para etiquetas se usa directamente.

Por medio de CSS se puede aplicar espacios entre las letras, así como espacios entre palabras. Cuando se desea hacer un espacio solo entre cada letra se usa letter-spacing.

En realidad lo que sucede con esta regla, es que aumenta el tamaño del renglón, y hace que parezca que se ha agregado un espacio entre ellos.

Esta regla es muy usada cuando se desea centrar un texto de manera vertical, agregando el tamaño de la línea con line-height y luego moviendo la alineación del texto con vertical-align.

Además de convertir a mayúsculas y minúsculas, también se puede convertir a mayúscula la primera letra de cada palabra con el valor “capitalize”

Para cambiar las viñetas utilizadas en los elementos de una lista se utiliza la propiedad list-style-type y los valores aceptados son disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha y upper-alpha

Recordemos que en CSS se usa el atributo font-style con el valor italic.

Entre las respuestas se encuenta la opción em, pero esta es una etiqueta de HTML, que comúnmente es interpretada por los navegadores para mostrar el texto en cursiva, pero es una etiqueta HTML y no una propiedad de CSS.

El grosor de la fuente se define con font-weight, y el valor comúnmente utilizado para poner negritas es bold, sin embargo, se pueden también utilizar los valores normal, bolder y lighter, así como números multiplos de 100 entre 100 y 900, donde 400 es el valor normal y 700 el valor de bold.

Existen dos maneras de ocultar elementos: display: none y visibility: hidden, sin embargo, en el caso de visibility el espacio del elemento se mantendrá, por lo cual queda un hueco en el contenido.

Mantente al pendiente del sitio, pues pronto publicaremos la segunda parte!

¿Te gustó este artículo?

Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.