en el siguiente tuto les hablare todo sobre CSS desde que es? hasta los mejores trucos CSS.
¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
¿Cómo funciona?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Las tres formas más conocidas de dar estilo a un documento son las siguientes:
Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
<body>
.
.
.
.
</body>
</html>
Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html>
<head>
<title>hoja de estilo interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", serif;
color: red;
background-color: #d8da3d;
}
</style>
</head>
<body>
<h1>Aquí se aplicará el estilo de letra para el Título</h1>
</body>
</html>
Utilizando estilos directamente sobre aquellos elementos que lo permiten a través del atributo <style> dentro de <body>. Pero este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
Algunas normas básicas a la hora de crear una CSS son las siguientes:
En el siguiente ejemplo, h1{color: red;}, el selector, <h1>, le dice al navegador la parte del documento que se verá afectada por esa regla. Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:
h1, h2, h3 {
color: red;
}
o lo que es lo mismo
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
La propiedad, que en este caso sería color, especifica qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el color. Las propiedades que se desean modificar en una CSS para un mismo selector pueden agruparse, pero será necesario separar cada una de ellas con un punto y coma.
p {text-align:center;color:red}Normalmente se describe una propiedad por línea, de la siguiente manera:
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}
El valor, representado a la derecha de los dos puntos (, establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.
p {font-family: "sans serif";}
Trucos y sugerencias para CSS:
Una variada colección de ejemplos de CSS y algo de ayuda sobre cómo usarlos.
El HTML no tiene un elemento que permita insertar una figura con leyenda. Existió una propuesta en tal sentido (véase HTML3), pero nunca se introdujo en HTML4. Aquí hay un modo de simular un elemento de figura como el propuesto:
<div class="figure">
<p><img src="eiffel.jpg" width="136"
height="200" alt="Eiffel tower">
<p>Modelo a escala de la
torre Eiffel en Parc Mini-France
</div>Luego en la hoja de estilo usamos la clase "figure" para formatear la figura como deseemos. Por ejemplo, para situar la figura a la derecha en un espacio igual al 25% del ancho de los párrafos que la rodean, bastará usar estas reglas:
div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}De hecho, sólo son imprescindibles las dos primeras declaraciones (float y width), el resto es solamente decorativo.
Cambio de escala de la imagen
Aquí tenemos un problema, y es que la imagen puede ser demasiado ancha. En este caso, el ancho de la imagen es siempre 136 píxeles, mientras que el DIV ocupa el 25% del ancho del texto circundante. De modo que si el usuario estrecha el ancho de la ventana, puede ocurrir que la imagen se exceda del espacio del DIV (¡haga la prueba!)
Si conocemos el ancho de todas las imágenes en el documento, podemos añadir un ancho mínimo al DIV, de este modo:
DIV.figure {
min-width: 150px;
}Otro modo es poner a escala la imagen en sí. Es lo que hemos hecho con la imagen que aparece aquí a la derecha. Tal vez podrá apreciar, si ensancha realmente mucho la ventana, que las imágenes JPEG no toleran muy bien los cambios de escala. Pero si la imagen es un diagrama o un gráfico en formato SVG, la verdad es que el cambio de escalas funciona a las maravillas. El HTML que usamos es éste:
<div class="figure">
<p><img class="scaled" src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez y su
fuerte, bajo el sol vespertino
</div>
Saint Tropez y su fuerte bajo el sol vespertino
Y la hoja de estilo es ésta:
div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
img.scaled {
width: 100%;
}El único agregado es la última regla, que hace que la imagen sea tan ancha como el espacio interior del DIV (el área dentro del borde y del margen interno [padding]).
Poner la leyenda encima
El Mediterráneo cerca de Cap Ferrat
También se puede poner la leyenda encima, indicándole al navegador que la figura debe formatearse como una tabla. Basta añadir estas reglas a la hoja de estilo de las secciones previas:
div.figure p {
display: table-cell;
width: 100%;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}El signo "+" hace que la regla se aplique a elementos P que sigan a otros P. En este caso quiere decir que se aplica al segundo elemento P de la figura (el que contiene la leyenda).
(Esta técnica puede dejar al descubierto errores de programación en navegadores más antiguos, especialmente cuando se combina con el cambio de escala de la imagen, como aquí).
Figuras en XHTML
La propuesta actual (enero de 2003) respecto de XHTML2 incluye un elemento CAPTION, que puede usarse con OBJECT. De aceptarse dicha propuesta, ya no será necesario usar DIV y CLASS, pero (al menos en XHTML2) se podrá escribir:
<object data="eiffel.jpg">
<caption>Modelo a escala de la
torre Eiffel en Parc
Mini-France</caption>
</object>
Un menú fijo en pantalla
El menú que usted ve en la esquina superior derecha de esta página: http://www.spanish-translator-services.com/espanol/t/007/menus.html no es más que un DIV con algunos elementos A en su interior. Todo el trabajo para que se mantenga fijo se hace mediante reglas en la hoja de estilos. A continuación mostramos el HTML correspondiente, tomado directamente del código fuente de esta página:
<div class="banner">
<p>
<a rel="nofollow" href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"></a>
<a rel="nofollow" href="http://www.w3.org/Consortium/Activities">Actividades</a>
<a rel="nofollow" href="http://www.w3.org/TR/">Informes técnicos</a>
<a rel="nofollow" href="http://www.w3.org/Help/siteindex">Índice del sitio</a>
<a rel="nofollow" href="http://www.w3.org/Consortium/Translation/">Traducciones</a>
<a rel="nofollow" href="http://www.w3.org/Status">Software</a>
<a rel="nofollow" href="http://search.w3.org/">Búsqueda</a>
<em>Relacionado:</em>
<a rel="nofollow" href="http://www.w3.org/Style/">Estilos</a>
<a rel="nofollow" href="http://www.w3.org/Style/CSS/">CSS</a>
<a rel="nofollow" href="./">Trucos y sugerencias</a>
</div>En un navegador sin CSS (o con CSS desactivado), el menú aparecerá simplemente como un párrafo con enlaces. Pero gracias a las reglas siguientes, el menú parece "flotar" encima de la página, fijado a la esquina superior derecha de la ventana del navegador:
div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }
div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }Las reglas interesantes en este ejemplo son la regla "position: fixed", que hace que el DIV quede fijo en la pantalla, y "display: block", que convierte a los elementos A dentro del DIV en elementos de bloque que, de tal modo, se visualizan uno debajo del otro en vez de aparecer todos en una sola línea.
Es importante tener cuidado con el orden de las últimas tres reglas. Puesto que todas son igualmente específicas, la última en aplicarse será la que determine el color. Como queremos que cuando el usuario pase el puntero del ratón sobre el enlace se aplique la regla :hover, esta regla debe ser la última.
El resto (márgenes, bordes, colores, etc.) puede eliminarse o modificarse de acuerdo a los gustos personales. Pero obsérvese cómo hicimos las líneas entre los enlaces: hay bordes encima de todos los enlaces menos el primero, gracias a la regla con ":first-child". Un par de reglas como ésta (border-top en todos los elementos, más un borde igual a "none" en el primer hijo) es una forma muy conveniente de crear bordes entre elementos.
Párrafos con sangría
Modelo a escala de la torre Eiffel en Parc Mini-France
Veamos algo muy sencillo: ponerle sangría a la primera línea de cada párrafo. A muchas personas esto les facilita la lectura más que si se agregan líneas vacías entre los párrafos (especialmente cuando el texto es largo) y además permite reservar las líneas vacías para indicar cortes más importantes.
El truco consiste en poner sangría solamente a los párrafos que siguen a otros párrafos. El primer párrafo de la página no necesita sangría, ni tampoco los que siguen a un diagrama, un encabezado o cualquier otra cosa que esté separada del texto. Las reglas son verdaderamente muy sencillas:
p {
margin-bottom: 0 }
p + p {
text-indent: 1.5em;
margin-top: 0 }Esto agrega una sangría solamente a la primera línea de aquellos párrafos que están después de otros párrafos. Además, elimina el espacio debajo de todos los párrafos y encima de los que tienen sangría. Pero en la práctica observará que todavía hacen falta excepciones.
Por ejemplo, en esta página hay elementos P que se usan como leyendas de imágenes (ver el ejemplo "Figuras y leyendas"). Puesto que hemos centrado esos párrafos, no deberían tener sangría. Una sencilla regla "p.caption {text-indent: 0}" basta para lograr lo que deseamos. Puede ver que de hecho hemos usado esa regla en el ejemplo.
Ahora podemos usar diversas cantidades de espacio en blanco entre los párrafos para indicar cortes importantes en el texto. Definamos tres clases diferentes: stb (por small thematic break, pequeño corte temático), mtb (medium thematic break; corte temático medio) y ltb (large thematic break; gran corte temático). Hemos asignado a este párrafo la clase stb, para que pueda ver el efecto.
El colorido menú que aparece más abajo no es más que un elemento DIV con unos pocos elementos P en su interior. El efecto visual se debe al hecho de que cada elemento P está posicionado individualmente y tiene asignados su fuente y su color propios. Esto funciona mejor con textos breves, ya que el efecto visual se basa en la superposición, pero si el texto es demasiado largo, se superpone tanto que se vuelve difícil de leer.
La hoja de estilo permite un menú formado por hasta 10 elementos, y el ejemplo anterior usa 8. El código fuente HTML del ejemplo anterior es éste:
<div class="map">
<p id="p1"><a href="http://www.w3.org/Style/CSS/#news">¿Qué hay de nuevo?</a>
<p id="p2"><a href="http://www.w3.org/Style/CSS/#learn">Aprender CSS</a>
<p id="p3"><a href="http://www.w3.org/Style/CSS/#browsers">Navegadores con CSS</a>
<p id="p4"><a href="http://www.w3.org/Style/CSS/#editors">Herramientas de creación</a>
<p id="p10"><a href="http://www.w3.org/Style/CSS/#specs">Especificaciones</a>
<p id="p6"><a href="http://www.w3.org/Style/CSS/Test">Suite de prueba CSS1</a>
<p id="p9"><a href="/StyleSheets/Core">Estilos básicos del W3C</a>
<p id="p8"><a href="http://jigsaw.w3.org/css-validator/">Validador CSS</a>
</div>Obsérvese que el elemento DIV tiene asignada la clase "map" (lo que lo convierte en un contenedor para el menú) y los atributos ID de los elementos P. Los elementos P deben tener un ID (diferente) cada uno: p1, p2, ..., p10. No es necesario usar los ID en orden (como muestra el ejemplo). Para usar la hoja de estilo, puede copiarla en su propia hoja de estilo o usar la directiva @import o un elemento LINK para importar map.css directamente desde el sitio del W3C: ya sea
@import "http://www.w3.org/Style/map.css";o si no
<link rel="stylesheet" href="http://www.w3.org/Style/map.css">Explicación de la hoja de estilo
El modo en que funciona la hoja de estilo es el siguiente. Comienza por definir un elemento DIV cuya clase es "map". Crea un espacio de 190 píxeles de altura, dentro del cual se ubicarán los contenidos de los elementos P. A continuación, se asigna color y fuente a cada uno de los elementos, con ID entre p1 y p10, y se ubica cada uno de los elementos dentro del espacio creado por el DIV, por medio de la propiedad "margin": un margen superior negativo mueve el elemento hacia arriba dentro del espacio del DIV, mientras que un margen inferior positivo asegura que el próximo elemento vuelva a comenzar en el límite inferior del DIV.
(La debilidad de la hoja de estilo es que mide todas las distancias en píxeles. Si lo desea, puede modificarla para que use porcentajes, siempre que su navegador implemente CSS lo bastante bien).
DIV.map { /* Reservar algo de espacio para los enlaces */
padding-top: 190px;
margin-left: -2em; /* Adapte esto a su página web... */
margin-right: -2em; /* Adapte esto a su página web... */
margin-bottom: 4em;
margin-top: 5em;
clear: both;
text-shadow: 0.2em 0.2em /* 0.2em */ silver }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
text-decoration: none }
#p1 {text-align: right; margin: -185px 0 85px 0} /* arriba a la derecha */
#p2 {text-align: left; margin: -190px 0 150px 5%} /* arriba a la izquierda */
#p3 {text-align: right; margin: -90px 35% 50px 0} /* centro */
#p4 {text-align: right; margin: -95px 0 55px 0} /* centro a la derecha */
#p5 {text-align: left; margin: -130px 0 30px 0} /* centro a la izquierda */
#p6 {text-align: left; margin: -40px 0 15px 35%} /* abajo al centro */
#p7 {text-align: right; margin: -80px 0 0px 0} /* abajo a la derecha */
#p5 {text-align: left; margin: -40px 0 20px 3%} /* abajo a la izquierda */
#p9 {text-align: right; margin: -25px 0 5px 0} /* abajo a la derecha */
#p10 {text-align: left; margin: -130px 0 70px 0} /* centro a la izquierda */Por supuesto, usted puede cambiar la hoja de estilo y probar fuentes, colores y posiciones diferentes, o crear otras reglas de estilo para más de 10 elementos. Además, observe los márgenes izquierdo y derecho del DIV: los hemos hecho negativos, de modo que el menú es más ancho que el texto circundante; pero en su página el margen tal vez no sea suficientemente ancho para esto, en cuyo caso quizá deba eliminar estas reglas.
Si prueba esta hoja de estilo, tal vez observe que no funciona muy bien en Netscape 4. Por supuesto, la culpa es de Netscape 4. No obstante ello, map-ns.css es una hoja de estilo similar que parece funcionar bien en el navegador mencionado. El truco siguiente, en el encabezado del documento HTML, permitirá que coexistan las dos versiones (la que es para Netscape 4 y la que se muestra más arriba, para navegadores que implementan mejor CSS):
<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">Los navegadores con implementaciones de CSS correctas leerán ambas hojas de estilo, pero las reglas de la segunda anulan las de la primera, de modo que (con la excepción de un poco de trabajo innecesario) no hay cambios. Pero Netscape 4 no cargará la segunda hoja de estilo, debido a la presencia del atributo "media", que no comprende.
Además, usted tal vez se pregunte por qué los elementos se ubican por medio de márgenes (negativos), cuando éste parece ser un candidato óptimo para las propiedades de posicionamiento absoluto. De hecho, se puede hacer lo mismo con "position", "left" y "right". La razón por la que en esta hoja de estilos se usan márgenes es que así funcionará también en navegadores que sólo implementen CSS1.
Barras de desplazamiento sin color
Algunos navegadores (IE, Konqueror) han comenzado a admitir recientemente las propiedades no estandarizadas "scrollbar-shadow-color", "scrollbar-track-color" y otras. Estas propiedades son ilegales: no están definidas en ninguna especificación de CSS ni están señaladas como propiedades privadas (con prefijo "-vendor-"). Pero afortunadamente, es fácil deshabilitarlas.
Para asegurar que las barras de desplazamiento del navegador conserven los colores normales, se puede usar la hoja de estilo de usuario y la declaración "!important". Por lo general, el usuario puede optar por el uso de su propia hoja de estilo, a través del menú de opciones/configuración del navegador. En IE esto puede hacerse en la ficha "Accesibilidad"; en Konqueror está en la ficha "Stylesheets" (hojas de estilo).
Si aún no tiene una hoja de estilo de usuario, lo primero es crear un nuevo archivo CSS, que puede guardar donde lo desee.
Agregue a este archivo de hoja de estilo las siguientes líneas:
body, html {
scrollbar-face-color: ThreeDFace !important;
scrollbar-shadow-color: ThreeDDarkShadow !important;
scrollbar-highlight-color: ThreeDHighlight !important;
scrollbar-3dlight-color: ThreeDLightShadow !important;
scrollbar-darkshadow-color: ThreeDDarkShadow !important;
scrollbar-track-color: Scrollbar !important;
scrollbar-arrow-color: ButtonText !important;
}En el cuadro de diálogo correspondiente en el navegador, ingrese la ruta a este archivo.
Esto debería bastar para resolver el problema, pero para ver el efecto, tal vez deba salir y reiniciar el navegador. Aquí tiene una pequeña prueba que he preparado para verificar si el truco funcionó.
Reglas pares e impares
Una forma de mejorar la legibilidad de tablas de gran tamaño es pintar las filas de colores alternados. Por ejemplo, en la tabla que aparece a continuación, las filas pares tienen fondo gris claro y las filas impares, fondo blanco. Las reglas para hacerlo son extremadamente sencillas:
De hecho, CSS no sólo permite alternar entre pares e impares, sino también según intervalos arbitrarios. Las palabras claves "even" y "odd" no son más que abreviaturas de conveniencia. Por ejemplo, con una lista larga podríamos hacer esto:
li:nth-child(5n+3) {font-weight: bold}
Lo que quiere decir que cada quinto elemento contando a partir del tercero aparecerá en negrita. Dicho de otro modo, estarán en negrita los elementos con la numeración 3, 8, 13, 18, 23, etc.
Columnas pares e impares
Lo mismo vale para columnas de tablas, pero entonces debe haber un elemento del documento que se corresponda con la columna. A tal fin existe en HTML el elemento COL. La tabla debe tener un COL al principio de cada columna:
<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Mes<th>1994<th>1995<th>1996...
(El elemento COL sirve para otros usos además de la aplicación de estilos, pero en este caso lo único que necesitamos es que haya elementos COL). Las siguientes reglas ponen fondo amarillo a la primera columna y luego fondo gris a las columnas impares a partir de la número 3:
El fondo de las filas (TR) se dibuja enfrente del fondo de las columnas (COL), de modo que no hay que ponerle fondo a las filas, o el fondo de las columnas no será visible.
Familias de fuentes
Probablemente, la propiedad más básica de una página, después del color, es la fuente usada. En esta página no mostraré ningún "truco", pero sí la amplitud de variaciones de fuentes que permite CSS.
Puesto que no todas las fuentes están disponibles en todas las computadoras (hay miles de fuentes, y la mayoría no son gratuitas), CSS ofrece un mecanismo para indicar fuentes alternativas. Se indica primero la fuente deseada y a continuación todas las que puedan suplir a la primera, si no estuviera disponible; la lista se debería terminar con una fuente genérica, de las cinco que existen: serif, sans-serif, monospace, cursive y fantasy.
El cuadro siguiente muestra ejemplos de diversas fuentes (puede que su navegador no conozca algunas de ellas) y también permite ver cómo interpreta su navegador cada una de las cinco fuentes genéricas:
"sans-serif": fuentes normales sin remate (serif)
Arial, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Lucida, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
"serif": fuentes normales con remate (serif)
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog
"monospace": fuentes de ancho fijo
Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog
monospace The Quick Brown Fox Jumps Over The Lazy Dog
"cursive": fuentes que imitan la escritura manual
Comic Sans, Comic Sans MS, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog
cursive The Quick Brown Fox Jumps Over The Lazy Dog
"fantasy": fuentes decorativas, para títulos y otros usos
Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog
fantasy The Quick Brown Fox Jumps Over The Lazy Dog
Estilos de fuente
La mayoría de las fuentes tienen varios estilos dentro de una misma familia: suele haber un estilo en negrita y otro en cursivas; a menudo también uno de negrita cursiva; menos frecuentemente, un estilo de versales y, en unos pocos casos, versiones extrafinas/extragruesas o estiradas/comprimidas.
El siguiente cuadro muestra algunos estilos diferentes. A menos que en su computadora disponga de una colección de fuentes realmente nutrida, muchas de las filas se verán iguales. regla serif sans-serif
Estilos
font-style: normal The Quick… The Quick…
font-style: italic The Quick… The Quick…
font-style: oblique The Quick… The Quick…
Grosores
font-weight: 100 The Quick… The Quick…
font-weight: 200 The Quick… The Quick…
font-weight: 300 The Quick… The Quick…
font-weight: normal The Quick… The Quick…
font-weight: 500 The Quick… The Quick…
font-weight: 600 The Quick… The Quick…
font-weight: bold The Quick… The Quick…
font-weight: 800 The Quick… The Quick…
font-weight: 900 The Quick… The Quick…
Variantes
font-variant: normal The Quick… The Quick…
font-variant: small-caps The Quick… The Quick…
Estiramiento
font-stretch: ultra-condensed The Quick… The Quick…
font-stretch: extra-condensed The Quick… The Quick…
font-stretch: condensed The Quick… The Quick…
font-stretch: semi-condensed The Quick… The Quick…
font-stretch: normal The Quick… The Quick…
font-stretch: semi-expanded The Quick… The Quick…
font-stretch: expanded The Quick… The Quick…
font-stretch: extra-expanded The Quick… The Quick…
font-stretch: ultra-expanded The Quick… The Quick…
En CSS3, existe un estilo más: "font-effect", para hacer que las letras aparezcan en altorrelieve o bajorrelieve.
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
, establece el valor de la propiedad. Es importante recordar que si el valor está formado por más de una palabra, hay que ponerlo entre comillas.
