RUDEWORKS / El blog-portfolio de RUDE

23/09CSS inicial 2.0

El otro día me topé con Tripoli, algo así como un proyecto de nuevo standard para CSS y encontré unos cuantos elementos que creí necesario insertar en mi CSS inicial. De hecho, también me pareció una buena idea incluir en el mismo paquete un HTML inicial con todo listo para empezar a meter los divs con chicha.

El paquete contiene cuatro archivos:

  • style.css contiene los arreglos básicos, tipográficos y el reseteo de propiedades (además de un par de clases útiles como el ya clásico .clear).
  • hacks.css es un CSS que sólo se carga en Internet Explorer (especificado en el HTML). Contiene unos cuantos comentarios sobre cómo utilizarlo.
  • index.html es el primer paso básico para un layout, básicamente contiene la especificación de xhtml 1.0 strict, un head que añade título a la página, carga los CSS y añade un wrapper (contenedor) dentro del body.
  • style_cssedit.css es el mismo style.css adaptado para su uso en CSS Edit (una magnífica aplicación para Mac OS X).

Aquí os dejo el código por si queréis echarle un vistazo antes de descargaros el paquete.

/*  

Theme Name: CSS inicial
Theme URI: http://rudeworks.com/blog/css-inicial-2/
Author: RUDE
Author URI: http://rudeworks.com
Version: 2.0
Description: CSS básico con arreglos y selectores pre-configurados.

*/

/* Elementos que queremos limpiar completamente: */

* {
        margin: 0;
        padding: 0;
        border: none;
 }

html {
        font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
        text-shadow: #000 0px 0px 0px;/* Elimina el efecto bold en Safari */
 }

ul {
        list-style: none;
        list-style-type: none;
 }

/* Ajustes tipográficos */

h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
        font-weight: normal;
        margin: 0 0 1em 0;
 }

cite, em, dfn {
        font-style: italic;
 }

sup {
        position: relative;
        bottom: 0.3em;
        vertical-align: baseline;
 }

sub {
        position: relative;
        bottom: -0.2em;
        vertical-align: baseline;
 }

li, dd, blockquote {
        margin-left: 1em;
 }

code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
        font-size: 100%;
        font-family: monaco, "Lucida Console", courier, mono-space;
 }

del {
        text-decoration: line-through;
 }

ins, dfn {
        border-bottom: 1px solid #ccc;
 }

small, sup, sub {
        font-size: 85%;
 }

abbr, acronym {
        text-transform: uppercase;
        font-size: 85%;
        letter-spacing: .1em;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
 }

a abbr, a acronym {
        border: none;
 }

sup {
        vertical-align: super;
 }

sub {
        vertical-align: sub;
 }

h1 {
        font-size: 2em;
 }

h2 {
        font-size: 1.8em;
 }

h3 {
        font-size: 1.6em;
 }

h4 {
        font-size: 1.4em;
 }

h5 {
        font-size: 1.2em;
 }

h6 {
        font-size: 1em;
 }

/*** LINKS: Recuerda utilizar siempre la regla del LoVe-HAte ***/

a, a:link, a:visited, a:hover, a:active {
        /*
        Si quisieramos eliminar la línea de puntos que aparece al pulsar un enlace, aplicaríamos la siguiente propiedad:
       
        outline: 0;
       
        Sin embargo no se recomienda, por temas de accesibilidad para navegación con teclado (lo cual implica temas legales, un tema peliagudo).
        */

        text-decoration: none;
 }

a img {
        border: none;
        text-decoration: none;
 }

img {
        border: none;
        text-decoration: none;
        /*
        Si añades un background aparecerá como fondo de la imagen, útil para imágenes de carga
        */

 }

/* Formularios */

label, button {
        cursor: pointer;
 }

input:focus, select:focus, textarea:focus {
        background-color: #FFF;
 }

fieldset {
        border: none;
 }

/* Clases útiles */

.clear {
        clear: both;
 }

.float-left {
        float: left;
 }

.float-right {
        float: right;
 }

/* Para empezar un layout centrado: */

body {
        text-align: center;/* Hack para que IE6 no de problemas */
 }

#wrapper {
        margin: 0 auto;
        text-align: left;
}

Bájate el CSS inicial 2.0 by RUDEWORKS

Artículos relacionados

10 comentarios >

  1. Se está poniendo muy de moda resetear los estilos antes de trabajar.
    Hasta se están desarrollando cada vez más frameworks css… Personalmente esto último ya no me gusta tanto ya que mucha veces se pierde la semántica y en cuanto a Tripoli, la idea es buena pero hay dos o tres mejor…

  2. No nos dejes con la incógnita maldito! cuales son esos “dos o tres mejor…”?

  3. Yo estoy pensando en empezar a usar Tripoli. Ahora mismo estoy usando el reset.css de eric meyer, pero Tripoli me parece mucho más completo y sin picar nada de código ya te da un estilo bastante completo sobre el que trabajar…

    RicPlan ¿Hay dos o tres mejor(es)? ¿Cuales a tu juicio son mejores?

  4. Esta muy bien el css inicial :D, quiero saber cuales son esos css mejores, Ricplan dilo ! jejeje

  5. quiza se refieren a blueprint y las css reset de yahoo. Saludos

  6. A mi me gusta el frameworks css http://www.yaml.de

Pingbacks >

  1. […] Actualización (23/09/2007): He añadido unos cuantos selectores nuevos, retocado comentarios e incluido una base html, más información en el nuevo post del CSS inicial 2.0. […]

  2. […] resultado es algo parecido a lo que propone el amigo RUDE en su blog, aunque sigo dudando sobre el tema del reset de estilos inicial. He visto opciones muy buenas a […]

  3. […] idea surgió a raíz de éste post de RUDE. Yo hacía poco que había entrado a trabajar en la agencia y me pareció una buena idea tener las […]

  4. […] Técinca de Reset CSS proposta por Rudeworks: […]