ejemplos de Estilos css
Estilo del texto
Veamos los parámetros disponibles para dar estilo al texto. Como ya sabes, las unidades de medida aplicables a todos ellos son varias, pero para mayor claridad, en todos los ejemplos utilizaremos solamente el píxel: px. Sea por ejemplo la siguiente página:<HTML> <HEAD><TITLE>Estilos</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css"> </HEAD> <BODY> Texto fuera de párrafo.<BR> Segunda línea fuera de párrafo. <P>texto de párrafo. <BR> segunda línea de párrafo.</P> </BODY> </HTML>Y si escribimos la siguiente hoja de estilo estilo.css:
BODY {color:green } P {color:red; font-size:20px; font-family:Courier; font-weight:bold; font-style:italic; line-height:30px; letter-spacing:5px; text-decoration:underline; text-transform:capitalize; text-align:left; text-indent:30px; }Se obtiene:
Texto fuera de párrafo.
Segunda línea fuera de párrafo.
texto
de párrafo.
segunda línea de párrafo
Fíjate en la gran diferencia de estilo que hay entre las dos
primeras líneas y las dos siguientes. Analicemos cómo funciona: Las
dos primeras líneas de texto, en color verde, tienen todos sus
valores por defecto, excepto el color que lo reciben de la etiqueta
BODY definida en la css. Las dos
siguientes, en rojo, reciben todas sus características de la
etiqueta P, también definida en
la css. Como puedes ver, hay una gran cantidad de atributos que
actúan sobre el estilo de ese texto.
segunda línea de párrafo
color:red; Este ya lo conocemos. Define el color del texto. El color deseado puede escribirse directamente, en inglés, o puede utilizarse el sistema RGB en hexadecimal. Por ejemplo, este mismo color rojo en RGB sería: #FF0000; Ciertos valores, como el rojo, pueden escribirse de forma abreviada: #F00; Otra forma de declarar el color es mediante la función rgb() que puede parametrizarse en decimal o en tantos por ciento. He aquí un ejemplo con las cuatro formas del color rojo:
color: #ff0000 color: #f00 color: rgb(255,0,0) color: rgb(100%, 0%, 0%)
Recuerda que en el índice tienes unas tablas con los nombres y códigos de los colores.
font-size:20px; También muy conocido: define el tamaño de los caracteres. Además del tamaño definido por el usuario, expresado en cualquiera de las unidades de medida conocidas, puede tener alguno de los siguientes valores absolutos: xx-large x-large large medium small x-small xx-small.
font-family:Courier; Indica el nombre (o nombres) del tipo de letra que se va a emplear. En el ejemplo se ha utilizado el tipo "Courier", pero pueden escribirse varios separados por comas, lo que indica al navegador que si no existe en la máquina el primer tipo, utilice el segundo, y si tampoco, el tercero, etc. Por ejemplo: font-family:Courier,Verdana,Arial;
Cuando definas tipos de letra, recuerda que muchos programas y algunos drivers de impresora instalan sus propias fuentes en el sistema sin avisarte, y puede que en tu máquina haya tipos que no son estándar en Windows. No se deben utilizar tipos extraños que difícilmente se encontrarán en las máquinas de los clientes, es decir, el tipo de fuente indicado en la hoja simplemente le indica al navegador qué fuente debe usar, NO se la sirve. En la versión 3 de CSS parece que se podrá indicar al cliente dónde obtener una fuente que no tenga instalada.
font-weight:bold; Aquí se especifica el peso o grosor de la fuente. Pueden emplearse literales como lighter, normal (por defecto) o bold. También se pueden utilizar números entre 100 y 900, escritos de 100 en 100 (no sirve 190, pero sí 200). Los pesos no tienen los mismos resultados en todas las máquinas, ya que depende mucho de la calidad de su pantalla, de su resolución, del navegador que emplea... En cualquier caso, no deben hacerse combinaciones extrañas, como definir un size muy pequeño y darle peso 900, ya que lo único que conseguirás es un borrón perfectamente ilegible.
font-style:italic; Solamente tiene dos posibilidades: normal (por defecto) o italic que es el empleado en el ejemplo que estamos analizando, y que hace que el texto tenga cierta inclinación.
line-height:30px; Sirve para establecer la distancia entre líneas consecutivas de un mismo párrafo. Además de en píxels o alguna de las unidades de medida que ya conocemos, puede indicarse con un simple número que viene a indicar, aproximadamente, cuantas anchuras de línea se tomarán como unidad de medida para separar una línea de otra. Así, por ejemplo, si pones 0 la segunda línea se suporpone a la primera.
letter-spacing:5px; Establece la separación entre los caracteres de la línea.
word-spacing:5px; Establece la separación entre las palabras de la línea.
text-decoration:underline; Con este parámetro, que no influye en el tamaño, puedes acompañar al texto de una delgada línea decorativa que puede estar en tres posiciones distintas, como underline (el típico subrayado debajo de la línea), through (en el centro de la línea -tachado-) o overline (encima del texto). Para que no aparezca se utiliza none (por defecto). El valor none se puede utilizar para eliminar el efecto de subrayado que ponen otros elementos, como ocurre en los links.
text-transform:capitalize; Curioso efecto que provee de cuatro posibilidades: capitalize que convierte en mayúscula la primera letra de cada palabra del texto, como puedes ver en el ejemplo, donde el texto original no es así. uppercase para convertir todas las letras a mayúsculas y lowercase para lo contrario, es decir, convertir todas las letras a minúsculas. El valor por defecto es none, que como ya habrás supuesto, deja el texto tal como está escrito.
text-align:left; Alinea el texto según convenga. Con left a la izquierda (por defecto), right a la derecha, center centrado, y justify justificado, es decir, igualando todas las líneas en longitud a izquierda o derecha.
text-indent:30px Produce que la primera línea del párrafo se escriba adentrada (indentada) un cierto espacio hacia la derecha o hacia la izquierda, dependiendo de la alineación activa.
Tenemos también otras instrucciones que pueden modificar el aspecto de determinadas zonas en lugar de actuar sobre todo el bloque.
Son los pseudo-elementos. Por ejemplo:
p :first-letter{ color:red; } p :first-line{ color:green; } p :after{ content:"Hola"; } p :before{ content:"Por ejemplo:"; }
Comentarios
Publicar un comentario