En primer lugar vamos a discutir algunos temas avanzados en CSS
- Posicionar propiedad
- Propiedad de pantalla
- Propiedad flotante
- Herencia
- No repita su CSS (CSS SECO)
- Selectores
- Transforma
- Animaciones
- Funciones
Como ya está familiarizado con la estructura básica de CSS, no le llevará mucho tiempo aprender temas avanzados.
Saque un tema de la lista que aparece arriba y encuentre toda la información al respecto buscando en Internet. En primer lugar, date un poco de tiempo para entender la teoría sobre el tema. Después de haber aprendido lo suficiente de la teoría, abra Codepen / Jsfiddle y comience a practicar lo que ha aprendido hasta ahora. Compare este tema con otros temas similares y descubra la diferencia entre los dos.
Ejemplo:
- ¿Cómo pasaste de aprender a desarrollar?
- ¿De qué manera es frustrante aprender chino en un aula de idioma extranjero tradicional? ¿Qué materiales son ineficientes?
- ¿Cuánto tiempo se tarda en aprender alemán de A1 a B2?
- ¿Convertirme en un desarrollador cuantitativo es una buena forma de aprender a crear mi propio algoritmo de trading?
- Si no puedes aprender a crear mejor arte intelectualmente, ¿por qué siento que esto está sucediendo?
Tomemos un ejemplo de la lista anterior e intentemos entenderlo desde el principio.
Mostrar propiedad
La propiedad de visualización especifica cómo se muestra un elemento en el contenedor.
Hay principalmente cuatro valores principales para mostrar la propiedad en CSS. Estos son:
- Bloqueo de pantalla;
- Pantalla: bloque en línea;
- Pantalla: en línea;
- Visualización: ninguna;
Bloqueo de pantalla
Los elementos con un valor de visualización establecido en bloque se conocen como elementos de nivel de bloque. Elementos como div, encabezado, pie de página, sección, aparte, h1-h6 y p son, por defecto, elementos de nivel de bloque, es decir, su valor de visualización predeterminado es bloque.
Los elementos de nivel de bloque toman todo el ancho disponible del contenedor. Abarcan todo el ancho disponible del contenedor.
Pantalla: en línea
Los elementos con un valor de visualización establecido en línea son como elementos de bloque en línea. Ocupan el ancho y la altura necesarios en función de los contenidos que contienen. No podemos aumentar el ancho y la altura de los elementos en línea ya que estas propiedades no funcionan en ellos. Además, no pueden tomar los valores de margen derecho y margen izquierdo. Los elementos tales como span, a, em, strong, blockquote, etc. son, por defecto, elementos en línea.
Display: inline-block
Los elementos con el valor de visualización establecido en bloque en línea toman solo el ancho necesario requerido por ellos. Dejan el resto del espacio para otros elementos. Otra cosa buena acerca de los elementos de bloque en línea es que podemos especificar su ancho y alto. Una etiqueta img es por defecto un elemento de nivel de bloque en línea. Podemos especificar con imágenes de altura y sin embargo hacerlas en línea.
Exhibición: ninguna
Los elementos con el valor de visualización establecido en ninguno están ocultos. La pantalla: ninguno no elimina el elemento, sino que lo oculta completamente de la página. Si el elemento está oculto, no ocupa ningún espacio de la página. Esta propiedad se usa frecuentemente con javascript para ocultar / mostrar elementos en una página.
Ahora, a medida que se familiarice con la propiedad de visualización, puede practicarlos para tener una mejor comprensión del tema. Intente crear diferentes escenarios, como elementos de nivel de bloque de anidación dentro de bloques en línea y en línea, etc. Investigue más sobre temas como:
¿Sabe? Pantalla: inline-block toma en cuenta los espacios en blanco de la página html, por lo que una buena alternativa es usar flotadores.
Contenido por: Amir Saleem
Gracias.