wikipediaillustrated

marketing

La guía para principiantes de clases de CSS

Site owner using CSS classes and selectors to style HTML elements.jpgkeepProtocol

Imagina que estás diseñando una página web. Desea que un grupo de encabezados tenga un texto rojo grande, un grupo de botones tenga un texto blanco mediano y un grupo de párrafos tenga un texto azul pequeño.

Elecciones audaces. Pero, gracias a las clases de CSS, puedes hacer exactamente eso. Las clases de CSS le permiten aplicar propiedades de estilo únicas a grupos de elementos HTML para lograr la apariencia deseada de la página web.

En esta publicación, cubriremos los términos fundamentales que necesita saber, como clase CSS, selector de clase y especificidad CSS. También veremos cómo crear una clase en CSS y usarla para diseñar sus páginas web.

Veamos un ejemplo de cómo funcionan las clases CSS. A continuación, tenemos una página HTML simple con tres encabezados (h2 elementos) y tres párrafos (pags elementos).

Observe cómo el segundo encabezado, el tercer encabezado y el párrafo final tienen un estilo diferente al resto; esto se debe a que a estos elementos se les ha asignado la clase brillante. Mirando el CSS, vemos el .brillante selector, que aplica sus reglas de estilo a todos los elementos con el atributo clase = «brillante».

ver la pluma clase css: ejemplo de encabezado de Christina Perricone (@hubspot) en CódigoPen.

Puede usar clases CSS para agrupar elementos HTML y luego aplicarles estilos personalizados. Puede crear clases y aplicarlas a texto, botones, intervalos y divisiones, tablas, imágenes o cualquier otro elemento de página que se le ocurra. Ahora echemos un vistazo más de cerca a cómo podemos usar las clases CSS para diseñar elementos de página.

Cómo crear una clase en CSS

Intentemos hacer una clase CSS desde cero. Digamos que quiere hacer un párrafo de texto y darle estilo a ciertas palabras para darle más énfasis. Puede hacer esto creando una clase CSS para estas palabras especiales y luego asignando esta clase a palabras individuales con lapso etiquetas

Comience por escribir los elementos HTML que desea diseñar. En este caso, es un párrafo de texto:

 
<p>Our <span>marketing software</span> and <span>service platform</span> provide you with the tools you need to <span>engage</span> visitors, <span>convert</span> them to leads, and <span>win them over</span> as customers.</p>

también he colocado etiquetas alrededor de las palabras que pronto diseñaremos con una clase CSS.

A continuación, agreguemos atributos de clase a estos etiquetas Para hacerlo, agregue el atributo clase = «nombre» a la etiqueta de apertura del elemento de destino, y reemplazar nombre con un identificador único para la clase.

un diagrama que muestra cómo crear una clase css

Fuente de imagen

En nuestro ejemplo, el HTML se ve así:

 
<p>Our <span class="orange-text">marketing software</span> and <span class="orange-text">service platform</span> provide you with the tools you need to <span class="blue-text">engage</span> visitors, <span class="blue-text">convert</span> them to leads, and <span class="blue-text">win them over</span> as customers.</p>

Aquí hemos agregado dos clases de CSS a nuestro lapso etiquetas: texto naranja y texto azul.

Ahora, repasemos algunas preguntas que pueda tener sobre las clases de CSS.

¿Dónde puede agregar clases CSS en HTML?

Las clases CSS se pueden agregar a cualquier elemento HTML. Algunos de los más comunes incluyen:

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.