      
       		English
        
Inicio·
Referencias·
Colabora·
Contacta
Reduce los tiempos de maquetación web con

        Código open source para maquetación de páginas web,

        flexible y rápido, basado en estandares CSS.

Instalación Maquetación Ejemplos Colores

Referencias prestablecidas con Makercss

Buena parte de las referencias ya están predefinidas, como los ejemplos del 1 al 8:

Ejemplo 01: Configuración del body

<body class="A s13 c666 tc">

Referencias "T" "A" "C" "GG" "V" "GV" "TT"
Referencias a familias tipográficas ejemplo "A" familia Arial.

Referencia "s" + número del 7 al 20, y del 20 al 200 de 10 en 10
Tamaño de tipografía; ejemplo "s14" tamaño 14 pixeles.

Referencia "c" + números prestablecidos
Ver colores prestablecidos; ejemplo "c16".

Referencia "tl" "tc" "tr"
Texto alineado a la derecha al centro o a la derecha respectivamente; ejemplo "tc".

Ejemplo 02: Valores de textos

<div class="lh120"></div>
<div class="b"></div>
<div class="i"></div>
<div class="n"></div>
<div class="u"></div>

Referencia "lh" + número de 80 a 200 de 10 en 10
Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"

Referencia "b" negrita

Referencia "i" cursiva

Referencia "n" normal

Referencia "u" subrayado

Ejemplo 03: Ejemplo de construcción

<div class="ma w900">
    <div class="ma w700"></div>
    <div class="ma w500 h300"></div>
</div>

Referencia "ma"
Referencia de construcción (capa relativa, margen izquierdo y derecho automático, centran la capa en la horizontal del navegador); ejemplo "ma".

Referencia "w" + número de 10px a 1000px de 10px en 10px
Ancho de capa; ejemplo "w320".

Referencia "h"+ número de 10px a 1000px de 10px en 10px
Ancho de capa; ejemplo "w320".

Si se quiere una capa elástica con altura variable no se debe poner ningún valor en la altura.

Ejemplo 04: Capas internas relativas

<div class="r ww"></div>
<div class="rl"></div>
<div class="roc"></div>

Referencia "r" o relativa
La capa es relativa; ejemplo "r".

Referencia "rl" o relativa flota a la izquierda
La capa es relativa y flota a la izquierda; ejemplo "rl".

Referencia "rr" o relativa flota a la derecha
La capa es relativa y flota a la derecha; ejemplo "rr".

Referencia "ww" o ancho 100%
Según donde se encuentre adapta un valor diferente, si no tiene ninguna capa que la contenga "ww" vale el ancho del navegador; si estuviese contenida dentro de una capa de 300px, entonces el valor de "ww" = 300px.

Ejemplo 05: Margenes interiores y exteriores de capa

<div class="ml20 mt30 p5"></div>
<div class="pl20 pb40"></div>

Referencias "mt" "mr" "mb" "ml" + valores de 10px a 100px de 10px en 10px
Margenes arriba, a la derecha, abajo, a la izquierda de la capa respectivamente; "ejemplo mt55".

Referencias "pt" "pr" "pb" "pl"+ valores de 5px a 50px de 5px en 5px
Margenes interiores arriba, a la derecha, abajo, a la izquierda de la capa respectivamente; "ejemplo pl90".

Referencias "p" + valores de 5px a 50px de 5px en 5px
Margenes interiores arriba, a la derecha, abajo, a la izquierda de la capa; "ejemplo p35".

Hay que considerar que los márgenes interiores suman, por ejemplo en una capa de 100px por 200px y de márgenes interiores pt20, pr10, pb30, pl40 tendrán como resultado de 150px (100+10+40) por 250px (200+20+30).

Ejemplo 06: Capas internas absolutas

<div class="ab l45 t20 w500 z2"></div>

Referencia "ab" o absoluta
La capa es absoluta, y contienen un par de coordenadas x e y y un ancho y un alto; ejemplo "ab".

Referencia "l" + valores de 10px a 1000px de 10px en 10px
Posición izquierda de 10 a 1000 de 10 en 10; ejemplo "l40".

Referencia "t"+ valores de 10px a 1000px de 10px en 10px
Posición superior de 10 a 1000 de 10 en 10; ejemplo "t70".

Referencia "z" + valores de 0 al 5
Posición capas de 0 a 5; ejemplo "z4".

Ejemplo 07: Colores de fondo preestablecidos

<div class="bcF00"></div>

Referencia "bc" + 0 ó 3 ó 6 ó 9 ó C ó F
6 colores; ejemplo "bc9".

Ejemplo 08: Radio de borde

<div class="br9"></div>

Referencia "br" + número de 5px a 30px de 5 en 5
Radio de borde de 5px a 30px de 5 en 5, solo funciona en Explore 8+, Firefox, Safari y chrome; Ejemplo "br25".

Referencias configurables en los CSS de Makercss

Las referencias que no están predefinidas son los ejemplos del 9 al 14:

Ejemplo 09: Enlace simple

<a href="#" class="l1"></a>

Abrir el archivo link.css

a.l1 { 
    color: #1C9EBE; 
    text-decoration: none;
    }
a.l1:hover { 
    color: #999999; 
    text-decoration: underline;
    }

Ejemplo 10: Enlace menú

<a href="#" class="m1"></a>

Abrir el archivo link.css

a.m1 {
    text-decoration: none;
    float: left;
    display: block;
    width: 30px;
    height: 60px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: #000;
    background:url(bg1.jpg) repeat-x bottom;
    }
a.m1:hover {
    text-decoration: none;
    background: url(bg2.jpg) repeat-x bottom;
    }

Ejemplo 11: Listas

<ul class="ul1"> 
    <li>Item 1</li>  
</ul>

Abrir el archivo list.css

li.li1 { 
    list-style-image: url(list.jpg); 
    line-height:140%;
    }

Ejemplo 12: Fondo

<div class="b1"></div>

Abrir el archivo background.css

.b1 { 
    background: #FFF url(a1.jpg) left top repeat-x; 
    }

Ejemplo 13: Borde

<div class="bo1"></div>

Abrir el archivo border.css

.bo1 { 
    border:solid 1px #EEE; 
    }

Ejemplo 14: Formulario

<input type="text" name="nombre" class="fi1"/>
<textarea name="textarea" class="ft1"></textarea>
<input type="submit" value="Enviar" class="fs1" >

Abrir el archivo form.css

input.fi1 {
    display: block; 
    width: 400px;
    height:40px;
    padding: 5px;
    font: normal 20px Verdana, sans-serif;
    border: #EEE solid 1px;
    }
textarea.ft1 {
    display: block; 
    width: 320px;
    height:100px;
    padding: 5px;
    font: normal 20px Verdana, sans-serif;
    border: #EEE solid 1px;
    }
input.fs1 {
    display: block;
    cursor:pointer; 
    width: 80px;
    height:30px;
    padding: 4px;
    font: normal 15px Verdana, sans-serif;
    border: #AAA solid 1px;
    background-color:#666666;
    background: #FFF url(b1.jpg) left top repeat-x;
    }

Ejemplo 14: Tablas

<table class="ta1"></table>

Abrir el archivo table.css

table.ta1 {
    font-family: Georgia, Times, serif;
    font-size:13px;
    }

Nosotros también damos ejemplo y pasamos los estándares de la W3C.

Los miembros del W3C tienen como objetivo principal el de conducir la web su máximo potencial: para Markercss era imprescindible lograr un código que cumpla estos estándares.