• Sobre nosotros
  • Aviso legal
  • Contactar
Blog de diseño web y desarrollo
  • Accesibilidad
  • Usabilidad
  • Arquitectura de la información
  • Diseño web
  • SEO
  • Desarrollo web
  • Página web

El Blog de diseño web y desarrollo

Portada > La guía definitiva para escribir una hoja de estilos CSS eficaz

La guía definitiva para escribir una hoja de estilos CSS eficaz

3 años ago webreunidos CSS, Diseño web 0
Share this:

Hojas de estilo CSS“Hojas de Estilo en Cascada (Cascading Style Sheets) es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, cómo se va a imprimir o incluso cómo va a ser pronunciada la información”. Esta es la definición de hoja de estilos (o CSS) que ofrece la W3C, el consorcio internacional que trabaja para desarrollar los estándares de la web, incluidos CSS, HTML y XML. En ella se encuentran dos detalles importantes:

  1. Es simple: el desarrollo de este estándar fue concebido para facilitar la labor de los ediseñadores de páginas wb que necesitaban aislar el contenido de las páginas de la forma en que se muestra en pantalla. Este principio hay que mantenerlo a la hora de definir la estructura de una hoja de estilos; debe ser simple ante todo.
  2. Dice cómo se muestra el documento: la definición de estilos, que puede ser, por ejemplo, letra negrita de tamaño 14 para los títulos H1, va ligada al contenido de la página web. Cada línea de código que forma la hoja de estilos CSS hace referencia a un elemento del contenido HTML de la página web, en este caso un título H1, que luego es mostrado por pantalla con un cierto diseño. Hay que procurar entonces no hacer declaraciones de diseño que luego no se usen en los documentos, ya que se estaría desplazando información al ordenador del cliente que luego no va a ser utilizada.

Estructura simple y declaraciones oportunas serán los dos grandes principios que rigen la creación de una hoja de estilos eficaz. La velocidad de carga de las páginas web depende de la cantidad de datos que tienen que \”pedir\” al servidor y, cuantos menos datos, mayor velocidad. Por otra parte, aumentando la velocidad de carga de los datos se mejora también el SEO de la página, siendo posicionada por los buscadores en lugares más altos. Y este menor tamaño también permite al servidor de páginas web disminuir su carga de trabajo.

Características principales de las hojas de estilo CSS

Otra de las características principales de CSS es la herencia de los estilos que se definen. Con ella se consigue que los elementos que se encuentran contenidos en otros elementos, como un párrafo que está dentro de una capa, hereden las propiedades de su contenedor. Por ello, si se tiene claro que, por ejemplo, el tipo de letra que se va a usar en el documento es Arial, no es necesario indicarlo en cada elemento que se muestre, sino que será suficiente con hacerlo en la declaración del diseño del elemento que contiene toda la página.

¿Y qué pasa si se definen dos estilos diferentes para un elemento que está contenido en otro? ¿Cómo se dirime la aplicación de dos estilos? En este caso se aplica el del elemento contenido. Aparece también otro de los conceptos importantes: la especificidad. Un estilo es más específico del elemento mientras mejor lo identifica, mientras menos genérico es y ese estilo será aplicado al elemento.

Por último, al usar un archivo separado con los estilos del documento, se permite que el navegador cachee esa información y no haga más peticiones si esta no cambia. Se procurará agrupar las definiciones de estilos en un solo archivo para reducir el número de peticiones al servidor y permitir este almacenamiento en caché, que redundará en una mejor velocidad de carga de las páginas de todo el sitio web.

Un servidor web más rápido y un uso del ancho de banda eficiente son las razones para disminuir el tamaño de las hojas de estilo CSS y reducir el número de peticiones a su servidor. Con las explicaciones expuestas, se conseguirán a la vez estos dos objetivos.

Si estás interesado en esta temática, no dejes de ver nuestra guía rápida de diseño web.

La guía definitiva para escribir una hoja de estilos CSS eficaz was last modified: noviembre 24th, 2014 by webreunidos
Previous Post

Beneficios del diseño a medida de una tienda online

Next Post

Herramientas para SEO móvil y estrategias

webreunidos

Desarrollo y diseño web
Posicionamiento SEO

Cómo hacer una web popular

Cómo hacer una página...

29/01/2018 0
Formulario de validación. Imagen

Herramienta AMP de Google

23/01/2018 0
Intrusismo en el desarrollo web. Imágen de un ladrón

Cómo detectar el intrusismo...

08/05/2016 0
Qué tiene que tener una página web de una empresa

¿Qué tiene que tener...

21/03/2018 0

Cancel Reply

  • Recent
  • Popular
  • Comments
Accesibilidad web en España

Accesibilidad Web en España

02/04/2018 0
Qué tiene que tener una página web de una empresa

¿Qué tiene que tener una página web de una empresa?

21/03/2018 0
SEO negativo. Imagen

SEO negativo

17/03/2018 0
Cómo hacer una web popular

Cómo hacer una página web popular

29/01/2018 0
Formulario de validación. Imagen

Herramienta AMP de Google

23/01/2018 0
Cómo crear un sencillo buscador php web

Crear buscador php web sencillo

18/01/2016 30
calendario

Lista SELECT desde ARRAY (PHP)

12/09/2016 8

Herramientas de apoyo a la accesibilidad

14/02/2012 4

Usabilidad web: qué es y para qué

04/03/2012 4

Iniciación en el desarrollo web

27/02/2012 4

VincentSot

Muchas gracias por compartir este recurso tan…

webreunidos

Te enviaré el código completo por email,…

Lena

No me funciona, ¿podrías poner el archivo…

webreunidos

Hola Sergio, ¿que versión de PHP estás…

sergio

Hola todo este codigo va en un mismo archivo…

Tweets por @WebReunidos

Diseño web profesional

Categorías

  • Accesibilidad
  • Arquitectura de la información
  • community manager
  • CSS
  • Desarrollo web
  • Diseño web
  • plugins
  • redes sociales
  • SEO
  • SEO – SEM
  • Usabilidad
  • wordpress

Entradas recientes

  • Accesibilidad Web en España
  • ¿Qué tiene que tener una página web de una empresa?
  • SEO negativo
  • Cómo hacer una página web popular
  • Herramienta AMP de Google

Suscríbete a nuestra newsletter

Copyright (c) by WebReunidos
Desarrollo y diseño web Madrid