sábado, 22 de septiembre de 2012

CSS: Líneas divisorias <hr />

La etiqueta <hr />  se usa para mostrar una línea divisoria en nuestras páginas.

Sin estilos

Por defecto la línea se muestra de esta manera:

<hr />


Anchura y Altura

  • width: modifica el ancho de la línea. Si no se define, la línea tendra el ancho máximo. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.). También se puede usar un valor en porcentaje, calculado a partir del ancho del elemento padre.
  • height: modifica el alto de la línea. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.).

<hr style="height: 5px;" />
<hr style="height:1em; width:75%;" />
<hr style="height:10px; width:100px;" />
<hr style="height:1cm; width:6cm;" />

Color

  • background-color: color de la línea.
  • border-color ó color: color del borde de la línea. En Firefox debe usarse color. En Safari y Chrome se usa background-color y se debe incluir la propiedad height.
En ambos casos los valores deben ser colores (ver Colores RGB).


<hr style="background-color:red;" />
<hr style="color:red;" />
<hr style="background-color:red; height:1px;" />
<hr style="border-color:#ff66ff; height:8px;" />
<hr style="background-color:red; height:7px;" />

Borde

  • border: define el borde de la línea. Cuando el valor es 0, se elimina el aspecto de la linea de estar hundida

<hr style="border:0; background-color:red; height:7px;" />

Márgenes

  • margin-left: márgen del lado izquierdo. Por defecto es 0.
  • margin-right: márgen del lado derecho. Por defecto es 0.

<hr style="margin-left:80px; background-color:red; height:7px;" />
<hr style="margin-left:20%; margin-right:50%; background-color:red; height:7px;" />

Ejemplos


<hr style="border: 2px dashed blue;" />
<hr style="border: 2px dotted blue;" />
<hr style="box-shadow: inset 0 20px 20px -20px #C70039; border:0; height:30px;" />
<hr style="box-shadow: 0 2px 3px 3px #557C55; border:0; height:0;" />
<hr style="border:4px solid #6B240C; background-color:#994D1C; height:5px;" />
<hr style="border:7px solid #EE9322; border-radius:30px;" />





- No hay comentarios.:
Etiquetas: ,

sábado, 8 de septiembre de 2012

CSS: Listas (<li>, <ol> y <ul>)

Es muy fácil cambiar el aspecto de nuestras listas numeradas y con viñetas haciendo uso de nuestro buen amigo CSS. A continuación doy varios ejemplos de esto.

Sin estilos

Las siguientes son dos listas que no tienen definido ningún tipo de estilo, tal como las muestran los navegadores por defecto. Las primeras son numeradas, usando <ol>, y las segundas son listas con viñetas, usando <ul>:

<ol>
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 

<ul>
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>
  • Rojo
  • Verde
  • Lila

Tipo de Viñeta

Para cambiar el tipo de viñeta a mostrar (por defecto el círculo negro y los números decimales) se usa la propiedad list-style-type.
Sus valores posibles pueden ser de tres tipos: numéricos y alfabéticos (ambos para <ol>) ó gráficos (para <ul>):

valores numéricosdecimal | decimal-leading-zero | lower-roman | upper-roman | armenian | georgian
valores alfabéticoslower-latin | upper-latin | lower-alpha | lower-greek
valores gráficoscircle | square | disc
 
Si no se desea usar ninguna viñeta, se debe emplear el valor none.
Los siguientes son ejemplos usando cada uno de ellos.

<ol style="list-style-type: decimal;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: decimal-leading-zero;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: lower-roman;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: upper-roman;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: armenian;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: georgian;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: lower-latin;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: upper-latin;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: lower-alpha;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ol style="list-style-type: lower-greek;">
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>
  1. Perro
  2. Gato
  3. Pato
 
<ul style="list-style-type: disc;">
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>
  • Rojo
  • Verde
  • Lila
 
<ul style="list-style-type: square;">
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>
  • Rojo
  • Verde
  • Lila
 
<ul style="list-style-type: circle;">
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>
  • Rojo
  • Verde
  • Lila

Imágen de la Viñeta

Si las opciones anteriores no son suficientes, también se puede utilizar una imágen propia para usarla como viñeta.
Para ello se usa la propiedad list-style-image que usa el valor url.

<ul style="list-style-image: 
   url('http://3.bp.blogspot.com/s1600/rojo.gif');">
<li>Rojo</li>
<li>Lila</li>
</ul>
  • Rojo
  • Lila

Valor inicial

Para el caso de las listas numeradas, podemos definir el valor incial. Es decir, no necesariamente tienen que partir con 1 o A.
Para ello usamos simplemente value en la etiqueta <li>, al cual le asignamos el valor de inicio.

<ol>
  <li value="5">Perro</li>
  <li>Gato</li>
  <li value="15">Pato</li>
  <li>Rana</li> 
</ol>
  1. Perro
  2. Gato
  3. Pato
  4. Rana



- No hay comentarios.:
Etiquetas: , ,

miércoles, 5 de septiembre de 2012

Reseteo de CSS para que las páginas se vean iguales en todos los navegadores

Nos pasamos días diseñanado nuestras páginas con CSS, definiendo los colores más apropiados, los márgenes, el tamaño de las fuentes, etc., y cuando todo está listo, probamos el resultado en más de un navegador y nos encontramos con la desagradable sorpresa de que no se ve igual en todos ellos.

¿Por qué ocurre esto? Pues porque cada navegador, Firefox, Safari, Opera, Google Chrome, Internet Explorer, etc., tiene sus propios valores por defecto para las etiquetas CSS.

Pero existe una manera de poder resolver esto y es "reseteando" dichos valores, para luego agregar los nuestros. Sólo hay que tener muy en cuenta que el "reseteo" se debe realizar antes de ingresar nuestros propios valores, pues de lo contrario éstos serán ignorados. También se pueden incorporar en un archivo externo y llamarlo al comienzo de nuestra página.

Y resetear es tan fácil como darle valores iniciales a todas las propiedades CSS que deseamos utilizar.
A continuación les dejo uno de los tantos ejemplos que podemos encontrar en internet y que cubre la mayoría de las propiedades.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}
 
body {
    line-height: 1; 
    height:100%
}
 
:focus {
     outline: 0
}
 
table {
    border-spacing: 0;
   border-collapse: collapse
}
 
ol, ul {
    list-style: none
}
 
blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}
blockquote, q {
    quotes: "" ""
}

input, textarea {
    margin: 0;
    padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Ojo que aún con lo anterior es posible que sigan existiendo algunas diferencias entre navegadores, especialmente con Internet Explorer, pero eso ya es hilar más fino y lo veremos en una siguiente entrada.



- No hay comentarios.:
Etiquetas:

sábado, 1 de septiembre de 2012

CSS: Hojas de Estilo en Cascada

Para los que nos gusta que nuestras páginas web tengan un toque propio, en el que somos nostros los que definimos cada detalle de su aspecto, CSS se vuelve indispensable. Sobre todo si nos gusta ahorrar tiempo y no repetir nada que no sea necesario.

Muchos ya sabrán qué es y para qué sirve CSS pues ha estado entre nostros desde mediado de los años 90. Por eso no entraré en detalle, para ello hay bastante material en internet.

Simplemente diré que su nombre proviene de Cascading Style Sheets, que traducido sería Hojas de Estilo en Cascada.

El estilo que deseamos aplicar a nuestros documentos HTML/XHTML puede ser incluído dentro de éste o adjuntarse como un archivo separado. En el primer caso, podemos definir estilos generales al comienzo del documento, o particulares, dentro de la misma etiqueta HTML/XHTML. Cualquiera sea el caso, lo que hacemos es definir para las etiquetas HTML/XHTML ciertos parámetros que determinarán, por ejemplo, color, tamaño, ancho, alineación, etc.

También hay que tener en cuenta que existen algunas diferencias al usar CSS con HTML o con XHTML, aunque son mínimas.

Donde sí podemos encontrar diferencias significaticas es al visualizar nuestras páginas con diferentes navegadores (Firefox, Opera, Safari, Internet Explorer, etc.) y esto se debe a que cada navegador posee sus propios valores por defecto para las etiquetas CSS. El cómo solucionar este problemita, lo veremos en una entrada más adelante. 

Para saber cómo usar CSS, les invito a ver la entrada Cómo incorporar CSS en nuestras páginas.

Por ahora les dejo algunas páginas donde podemos encontrar información muy detallada y actualizada sobre el tema:

Página oficial de W3C:  http://www.w3.org/
Especificaciones de CSS2: http://www.w3.org/TR/2008/REC-CSS2-20080411/
CSS 2.1: http://www.w3.org/TR/CSS21/cover.html#minitoc 



- No hay comentarios.:
Etiquetas: , ,
Suscribirse a: Entradas (Atom)