Colegio “Nueve De Octubre”

ESTILOS CSS

Katherine Torres 3ero BI

Lcdo. Luis Sánchez

OBJETIVO PRIMORDIAL DE CSS

definir un lenguaje estándar para diseñar interfaces para internet, sin importar el software o dispositivo que interprete los documentos.

Nombra tus atributos de acuerdo a su contenido, no su diseño

A veces se tiende a usar nombres de clases e id’s de acuerdo al diseño que queremos lograr:

<div id="menu-derecha"> <a class="link-rojo">Logout</a> </div> Si alguna vez decides modificar la hoja de estilos puedes

terminar con un div id=”menu-derecha” que se encuentre a la izquierda o un link class=”link-rojo” de color amarillo. No muy fácil de entender.

Tanto HTML como sus atributos fueron pensados para estructurar los documentos semánticamente, sin importar su diseño. Por esto es más sensato utilizar atributos que hablen del tipo de contenidos que contienen:

<div id="menu-principal"> <a class="link-logout">Logout</a> </div>  

En el modelo de cajas de IE5, el ancho final de un elemento es el indicado en el atributo “width”. Los bordes, paddings y márgenes se cuentan hacia dentro de la caja:

#mi-caja { width: 200px; margin: 10px; border: 5px; } /* Para IE5, el ancho final de esta caja es 200px; */   */ Para Firefox, Opera, Safari y otros el ancho final es width + bordes + paddings + margins = 230px! */

// HTML <div id="contenedor"> <div id="contenido"> Este es un contenido. </div> </div>   // CSS #contenedor { width: 200px; } #contenido { margin:10px; padding: 5px; }