CSS: guía de desarrollo

30 03 2007

Como desarrolladores web, conocemos acerca de lo importante que es el diseño para nuestros sitios. La tecnología web que nos permite darle estilo a nuestras páginas es el CSS (acrónimo de Cascading Style Sheet}. El CSS como tal surgió por la necesidad de hacer sitios más ricamente visuales y que, dado los cambios continuos que se efectuan en una web, pueda ser fácilmente actualizado sin tener que rediseñar por completo.

En este primer artículo de la serie, hablaremos de la estructura de un archivo CSS y de las mejores prácticas para desarrollar una hoja de estilos lo más optimo y sencillo posible.

/**

 * CSS Document
 */

body {
    background: url(template/images/bg.jpg) repeat-x;
    padding: 0px;
}

input.textbox {
    color: #333333;
    font-family: “Trebuchet MS”, sans-serif;
    
font-size: 10px;
    
text-align: right;
}

#bannertop {
    background: #333333;
    height: 250px;
}

.footer-menu {
    padding: 0px 0px 0px 15px;
    text-decoration:: urderline;
}

span.right-column, div.bottom-row span.bottom-link {
    line-height: 25px;
}

    div.bottom-row span.bottom-link {
        color: #333333;
    }

Tipo 1: Para asignarle a todos los objetos de un mismo tipo de etiqueta, simplemente basta asignarle al nombre de la etiqueta los atributos CSS y todos los elementos de esa etiqueta tomaran esos valores.

Tipo 2: Si queremos que la clase solamente esté disponible para ciertos elementos con una etiqueta especial, indicamos el nombre de una etiqueta seguida de un punto y el nombre de la clase. El objeto tomará el estilo solamente si el atributo CLASS es el nombre de la clase.

Tipo 3: La clase afecta el estilo del objeto con el atributo ID igual al de la clase.

Tipo 4: El diseñ establecido está definido para todo elemento que defina como valor del atributo CLASS, el nombre de la clase.

Tipo 5: Este tipo es un tipo especial. Un mismo conjunto de valores pueden ser definidos para varias clases CSS y estas se dividen por comas. Ahora, cuando parece identificarse a dos clases pero estas no están separado por comas, este indica que el “tipo de objeto SPAN que tenga como clase CSS a bottom-link y que este dentro de un objeto DIV con clase CSS bottom-row heredará los atributos de estilo.

Artículos Relacionados:


Acciones

Information

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




A %d blogueros les gusta esto: