CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML o XML. Este artículo introductorio está diseñado para ayudar a los comerciantes de PrestaShop a entender los conceptos básicos de CSS, incluyendo cómo utilizar selectores, cómo identificar estos selectores en su sitio a través del inspector de elementos, y las propiedades CSS fundamentales.

1 Paso : Comprender los selectores CSS

Los selectores CSS son patrones que identifican los elementos a los que se aplicarán los estilos. Estos son los tipos de selector más comunes:

• Selectores de tipo: se dirigen a los elementos por su nombre de etiqueta, como por ejemplop para los párrafos.
• Selectores de clase: se dirigen a elementos con un atributo de clase específico, precedido por un punto. Por ejemplo,.menu se dirigirá a todos los elementos que tenganclass="menu".
• Selectores ID: se dirigen a elementos con un atributo ID específico, precedido por un signo de almohadilla. Por ejemplo,#header se dirigirá al elemento conid="header".
• Selectores de atributos: se dirigen a los elementos en función de la presencia de un atributo o del valor de un atributo. Por ejemplo,[type="text"] seleccionará todos los elementos con untype con el valor "texto".
• Selectores de pseudoclase: se dirigen a elementos en estados específicos. Por ejemplo,:hover aplica un estilo cuando el usuario pasa el cursor por encima de un elemento.

2 Paso : Comprender las características específicas de los selectores CSS

La característica específica de los selectores CSS es un sistema de puntos utilizado por los navegadores para determinar qué reglas CSS se aplican en caso de conflicto entre varias reglas dirigidas al mismo elemento. Así es como funciona la especificidad:

• Selectores ID: Un ID (#id) tiene la mayor especificidad. 100 Anotó puntos.
• Selectores de clase, pseudoclase y atributo: Estos selectores (.classe, :hover, [type="text"]) tienen una especificidad media. 10 Cada selector suma puntos.
• Selectores de tipo: selectores que se dirigen a los elementos por su nombre de etiqueta (h1, div) tienen la especificidad más baja. 1 Cada selector obtiene puntos.
• El selector universal (``), los combinadores (+, >, , ~) y la negación pseudoclase (:not()0 ) no afectan a la especificidad ( punto).
• Estilos en línea (no recomendado): Coloque los estilos directamente en un atributostyle de un elemento HTML (por ejemplo,<div style="color: red;"> 1000 ) tiene una especificidad mayor que cualquier selector, recibiendo puntos.

Se aplicará la regla con la mayor especificidad total. En caso de empate, tendrá prioridad la última regla definida en el CSS. Para forzar un estilo a pesar de la especificidad, puede utilizar!important aunque en general no se recomienda su uso, ya que puede hacer más compleja la depuración del código CSS.

3 Paso : Identifique los selectores en su sitio utilizando el inspector de elementos

Para modificar eficazmente los estilos de su tienda PrestaShop, debe ser capaz de identificar los selectores mediante el inspector de elementos del navegador:

• Haga clic con el botón derecho del ratón en el elemento al que desee aplicar estilo y seleccione "Inspeccionar".

  

• El inspector de elementos abrirá una ventana en la que se resaltará el código HTML del elemento.

  

• En el panel Estilos situado junto a él, puede ver el CSS aplicado a este elemento. También puede modificar estos estilos temporalmente aquí para ver cómo afectan los cambios a su página (las modificaciones realizadas aquí sólo serán temporales y se perderán la primera vez que se recargue la página; se utilizan esencialmente para probar sus modificaciones CSS antes de enviarlas al servidor).

Ejemplo: aquí se cambia el color de fondo del elemento

4 Paso : Propiedades y valores básicos de CSS

Para aplicar estilos, se utilizan propiedades CSS asignadas a valores específicos. He aquí algunas propiedades básicas:

• color: define el color del texto.
• color de fondo: define el color de fondo de un elemento.
• font-size: define el tamaño de la fuente.
• margen y relleno: controlan el espacio alrededor y dentro de los elementos, respectivamente.
• borde: define el borde alrededor de los elementos.

Ejemplo de sintaxis CSS :

selector {
  property: value;
}

Para practicar, pruebe a cambiar el color de fondo y el tamaño de letra de un elemento de su página web.

Preguntas más frecuentes

¿Cómo puedo deshacer una regla CSS aplicada por error?

Puede eliminar o comentar la regla CSS de su archivo, o bien anularla añadiendo una nueva regla más específica o utilizando la función!important después del valor de la propiedad.

¿Son visibles inmediatamente los cambios en el CSS?

Para ver los cambios, debe actualizar la página, borrar la caché de su tienda desde Configuración avanzada / Rendimiento y, a veces, borrar la caché de su navegador para que las nuevas reglas CSS surtan efecto.

Esta guía le ofrece una visión general de cómo empezar a utilizar CSS para personalizar su tienda online PrestaShop. Con estos elementos básicos, puede empezar a explorar las posibilidades de personalización. Para saber más, consulte el artículo dedicado.

⚠️Este artículo ha sido traducido por un programa de traducción automática. En caso de duda, consulte el artículo en francés o inglés.