Estilos CSS en el desarrollo web con AMP

Cómo modificar el diseño de una página web AMP

Publicado en AMP 2018-03-22 12:41:14

Estilos CSS en el desarrollo web con AMP

Incluir diseño en una página AMP con CSS

AMP

Resumen: El diseño de una web AMP y de sus elementos se realiza a través de propiedades CSS comunes, dentro del <head> con la etiqueta <style amp-custom>

Las AMP son páginas web; el diseño de estas y de sus elementos se realiza a través de propiedades CSS comunes. Da estilo a los elementos con selectores de clase o elemento en una hoja de estilo en línea en el <head> llamada <style amp-custom>:

<style amp-custom>
  /* Cualquier estilo personalizado va aquí */
  body {
    background-color: peru;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Las páginas AMP solo es posible incluir una hoja de estilo y hay ciertos selectores que no puedes usar.

Controla el diseño

AMP sigue reglas estrictas al distribuir elementos en la página. En una página HTML normal, CSS se usa casi exclusivamente para distribuir elementos. Sin embargo, por motivos de rendimiento, AMP requiere que todos los elementos tengan un tamaño explícito configurado desde el principio.

Redacción:| Artículo leído: 123 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de AMP