Selectores básicos CSS, modelo de cajas

Modelo cajas CSSPara diseñar con CSS una página web es necesario conocer, al menos, los selectores básicos y el modelo de cajas (box model) de los que aquí vamos a ver unas pinceladas.

Ya comenté en otro post que las hojas de estilo CSS permiten separar el diseño de una página web, de su contenido. (Ver post CSS)

Cada regla CSS está formada por una parte llamada “Selector” que indica a qué letra, palabra, conjunto de palabras, línea, párrafo o parte de la hoja va a afectar, y una parte llamada “declaración” que indica qué es lo que se le va a hacer a esa parte seleccionada.

SELECTORES BÁSICOS

Utilizando solamente los selectores básicos se podría diseñar cualquier página web aunque hay otros selectores más avanzados. Entre los selectores básicos se encuentran:

  • El selector universal que se indica mediante un asterisco (*) y sirve para seleccionar a todos los elementos de la página.
  • El selector de etiqueta que se corresponde con el nombre de una etiqueta HTML
  • (p, h1, a…) sin los caracteres <>.
  • El selector descendente que selecciona los elementos que se encuentran dentro de otros elementos y no debe confundirse con la combinación de selectores, en el descendente los elementos van separados por un espacio en blanco y en la combinación van separados por una coma.
  • El selector de clase que sirve para aplicar estilo a un solo elemento utilizando el atributo “class” de HTML. El selector de clase es un punto (.) seguido de una palabra.
  • Selectores de ID que permiten seleccionar un elemento de la página a través del valor de su atributo ID. El selector ID es una almohadilla (#) seguido de una palabra.

Ejemplos de reglas CSS de cada tipo de selector:

Universal:        * { margin: 1; padding: 1; }
Etiqueta:          p { color: black; }
Descendente:  h1 span { color: red; }
De clase:          .destacado { color: blue; }
ID:                    #aviso { font-size: 2em; }

Con estos selectores se pueden realizar combinaciones entre ellos llegando a ser todo lo complejas que sea necesario.

MODELO DE CAJAS

Una página web se compone de cajas rectangulares que, en su mayoría, no se ven ya que no tienen ningún color de fondo ni de borde.

Cada vez que incluimos una etiqueta o un elemento en el HTML de una página web, estamos generando una caja que es la que contiene dentro a ese elemento. Por ejemplo si escribimos una palabra de 4 letras estamos creando 4 cajas a las que luego en CSS les podremos dar algunas reglas como decirle que la primera sea de un formato distinto (firs-letter) o cuál debe ser la separación entre ellas (letter-spacing).

El modelo estandarizado de cajas (box model) de CSS se compone de:

  • contenido, es decir el texto, imagen, etc.
  • relleno (padding) que es un espacio libre entre el contenido y el borde que lo encierra.
  • borde que encierra el contenido y su relleno.
  • margen, espacio libre fuera del borde.

Las reglas CSS determinarán el formato de cada una de las partes de la caja. Hemos de tener en cuenta que el espacio total que ocupa la caja es la suma del espacio del contenido más el relleno, el borde y el margen, es decir, que si queremos que nuestro contenido ocupe 100 px de anchura (width:100px) y 50px de altura (height:50px) y que tenga un padding:10px, un border:5px y un margin:10px, nuestra caja tendrá un total de 150px de anchura por 100px de altura.

Estas dimensiones habremos de tenerlas en cuenta a la hora de crear la estructura de nuestra web (Layout).

Si quieres ampliar información sobre CSS puedes entrar en http://librosweb.es/css/

Anuncios

Acerca de Ricardo Rubio Simón

Transporte y logística, Marketing, Comunicación 2.0, Gestión flotas, Redes sociales, Marca, Reputación, Comunity, Responsabilidad Social
Esta entrada fue publicada en marketing y etiquetada , , , , . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s