Curso/Taller de CSS Aprendiendo desde Cero

[carlmycol]

Bueno he aqui un curso que voy a hacer del css y como el titulo lo dice es un curso no un manual... basta de manuales es hora de que alguien explique en tiempo real aqui iré poniendo capitulos y si tienes una pregunta solo hasla con gusto responderé

1º Capitulo: Algo de Teoria

Primero vamos a saber que es el CSS

El css es un leanguaje creado en los 90 (noventa) para separar el estilo de la informacion, de esta manera los diseñadores graficos tubieron la oportunidad de dar estilos a una pagina web sin preocuparse de tecnisismos

¿Que son las hojas de estilo?

Las hojas de estilo son un documento con extension .css donde se presentan codigos css que dan color, tamaño, alineacion. etc a la informacion que contiene el documento html y a la vez el documento HTML esta linkeado con el documento .css respectivo

Ventajas del CSS

1.- Se podia añadir estilos a una pagina web sin tener que ponerlos en el mismo html cada ves lo que hizo ahorar espacio en disco en los hostings

2.- El usuario no tiene que que cargar los estilos cada ves que entra a la pagina... por lo tanto es mucho mas rapido

3.- Es mas cencillo entender el html

4.- Se puede mostrar el mismo documento html para varias funciones solo con cambiar las hojas de estilo sin tocar el html

Esas son las principales ventajas aunque tiene muchas mas cuando lo utilizan veran que es mas censillo hacer una pagina web ^^

Desventajas del CSS

1.- Internet Explorer calcula mal las medidas

2.- Internet Explorer solo usa :hover en los links

Como ven denuevo gana firefox xD, los que no entienden que es :hover ya lo sabran

¿Por que Usar Hojas de estilo?

El css se hizo para separar la estructura de la pagina del estilo de la pagina que antes estaban mescladas y controladas por el html, ahora el html solo controla que es un parrafo, que son listas, etc y el css se encarga de lo demas, cmo veran no es algo tan complicado
(no es tan dificil )

Conceptos basicos

Capas: Estas se usan para no tener el gran problema de las tablas un problema muy grande, las tablas se usaban en los años 70 en las paginas web para tabular datos de una compañia!!! por que usarlas ahora que tenemos el css >.<

PD: Ahora ya me canse de escribir voy a cenar y sigo escribiendo

PD: Quien se Anota al Curso?

Salu2

[carlmycol]

Bueno nadie se ha anotado al curso bueno ^^ igual seguire escribiendo considero que este tema es muy importante ^^

Aprovecho el Momento para decir que hay que tener almenos algunos conocimientos basicos html... 

2º Capitulo: Usando CSS

En este capitulo vamos a ver como se puede usar el css en una pagina web... aplicacion directa, desde hoja de estilo, etc...

Aplicacion Directa: esta no es muy usada porque el proposito del css es separar el html del estilo ya que el html no es muy bueno imponiendo estilos xD

La implementacion derecta se hace así:

Código:

<etiqueta style="propiedad:valor"> html </etiqueta>

En el ejemplo que acabamos de ver se puede notar esta escrita la palabra etiqueta esta pertenece al html luego sale la palabra style que indica que se va a implementar el css, luego sale propiedad esta se sustituye por el nombre de la propiedad css que se quiere cambiar o dar estilo.. valor se sustituye por el valor que se le quiere dar a la propiedad... depues sale html... para que sirve? pues para declarar el html xD obvio en </etiqueta> se cierra la etiqueta mencionada entes

Todo se entiende mejor con un ejemplo aqui va uno sencillo 

Código:

<b style="color:red;">Hola mundo</b>

Este ejemplo nos dice y ya muchos se habran dado cuenta de eso... que dice color, red y b y en html nos sale Hola Mundo, lo que nos dice que lo que este entre y debe acatar los estilos css para esa etiqueta

Que nos saldria?

Nos saldria Hola Mundo en negrilla por la etiqueta b de html, y nos saldria rojo gracias al CSS ven que facil es??

Algo como esto puede hacer que entiendan mejor

Hola Mundo

Ahora ven es sencillo por ahora no ensañare las distintas propiedades ni tampoco pienso enseñarlas todas porque hay sientas de millones de ellas yo enseñare las basicas como pocicionar las cosas, ponerles color, tamaño, y los efectos mas conocidos

Implementacion entre Head

Esta es bastante usada y la mayoria de los editores html implementan el css de esta manera en mi opinion esta manera de utilizar css es mas ordenada que la anterior

Consiste en colocar los estilos en la cabezera del documento... y entre

Código:

<style type="text/css> y entre </style>

Todo se entiende mejor con un ejemplo

Código:

<html>
<head>
<title>titulo</title>
<style type="text/css>
b { color:red; }
</style>
<body>
<b>Hola Mundo</b>
</body>
</html>

Como vera asi es mas facil y ordenado el css y no hay que estar buscando las cosas cada ves que queramos cambiar algo

Separando el CSS del HTML

Esta viene a ser la mejor forma, la mas ordenada de todos y por cierto la mas implementada

Es mas facil de hacer solo gasta una linea de codigo en el html y puedes ordenar todos tus estilos en un archivos .css

En el html pones

Código:

<LINK REL="stylesheet" TYPE="text/css" HREF="direccion del documento.css">

Como siempre su ejemplito

Documento html

Código:

<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</head>
<body>
<b>Hola Mundo</b>
</body>
</html>

Este seria el documento css

Código:

b { color:red; }

Eso es todo es el mismo ejemplo solo que separando el html del css

reitero que todos los ejemplos hacen lo mismo

Hacen un :

Hola Mundo

Esto ha sido todo por ahora todafia faltan capitulos espero que se unan al cursillo

salu2

[carlmycol]

3º Capitulo: Avanzando

Herencia de Estilos

En el html hay un jerarquia de etiquetas la primera linea seria <html> luego el <hrad> y el <body> despues vienes las layers las tablas los textos, los elementos de texto, etc... <P>...</P>, <DIV>...</DIV>, cabeceras, ...)

Esto es importante porque la mayoria de los estilos son heredadas por etiquetas hijas provenientes de sus etiquetas padre... esto nos dice por ejemplo que si se define que el texto de body es azul los elemmentos hijos (<a>, ... etc...) heredan el mismo color
asi se entiende mejor no? 

Aunque tambien si definimos un estilo para una etiqueta body seran heredadas por sus etiquetas hijas aunque uno puede definir un estili diferente para las etiquetas hijas y asi cambiar su estilo para que no se herede 

Ejemplo:

HTML..

Código:

<HTML>
<HEAD>
<TITLE> Ejemplo 1 de herencia </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
</HEAD>
<BODY BGCOLOR=white>

Todo el texto tiene definido el estilo Fuente:Verdana,
Tamaño:x-small, Margen izquierdo:0.25in, Margen
derecho:0.25in, <SPAN STYLE="color:red">pero
este trozo de línea es de un color distinto,
conservando el resto de propiedades</SPAN>, y
eso hace interesante la herencia y la posibilidad
de cambiar en partes concretas los estilos heredados.
</BODY>
</HTML>

CSS.....

Código:

BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}

H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}

Ejecutar Ejemplo

Para ver este enlace Registrate o Inicia Sesion

http://www.webestilo.com/css/ejem/ejem03.html

Este ejemplo fue sacado de WebStilo.Com

Estilos y su Contexto

Otro tema Muy bueno es el de estilos y su conexto esto es tambien muy pero muy pero muy importante xD (en serio) esta regla nos dice que se puede declarar un estilo segun sea el conexto donde este la etiqueta,... es algo asi como que tu tienes una etiqueta B en una tabla y otra etiqueta b en otra, tu puedes definir un estilo diferente para b en cada tabla.

Ejemplo:

HTML

Código:

<HTML>
<HEAD>
<TITLE> Ejemplo de estilos segun el contexto </TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="ejemplo.css">
<STYLE TYPE="text/css">
<!--
TD B {color:green}
UL B {color:purple}
//-->
</STYLE>
</HEAD>
<BODY BGCOLOR=white>
En este ejemplo, seguimos con los estilos de la hoja
externa, pero vamos a comprobar que se verifican los
estilos definidos en función del contexto: la negrita
de una celda cualquiera de una tabla debe ser de color
verde, y la negrita de una lista debe ser de color
púrpura. <P>

<UL TYPE=DISC>
<LI>Un elemento cualquiera</LI>
<LI>Un elemento con una palabra en <B>negrita</B></LI>
<LI>Otro elemento cualquiera</LI>
</UL><P>

<CENTER>
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=2>
<TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR>
<TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR>
<TR><TD><B>Celda (2,1) en negrita</B></TD><TD>Celda (2,2)</TD></TR>
</TABLE>
</CENTER>

</BODY>
</HTML>

CSS

Código:

/* Estilo para el documento */
BODY {font-family:Verdana,sans-serif;font-size:x-small;
margin-left:0.25in; margin-right:0.25in}

/* Estilo para la cabecera de nivel 2 */
H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

/* Estilos para otras etiquetas */
B, TD {font-family:Verdana,sans-serif;font-size:x-small;
color:olive}
TH {font-family:Verdana,sans-serif;font-size:x-small;
color:white;background-color:#0080C0}
PRE, TT, CODE {font-family:Courier New,Courier;
font-size:9pt;color:maroon}

Ejecutar ejemplo

Para ver este enlace Registrate o Inicia Sesion

http://www.webestilo.com/css/ejem/ejem04.html

Este ejemplo fue sacado de WebStilo.Com

Eso fue todo por ahora seguiré ecribiendo mas tarde! 

[DarkWolf]

Muy buena información compañero, estoy seguro que les servirá de ayuda a los más nuevos.

Como ven denuevo gana firefox xD

jaja sí, tienes mucha razón
Un ejemplo de ello es la propiedad -moz-border-radius como muchas otras.
Firefox incorpora novedades y IE se queda anticuado
_{pd: si necesitas que te eche una mano escribiendo un poco solo tienes que decirlo}
Saludos!

[carlmycol]

Porsupuesto El CSS es algo extenso : 

PD: seguimos hablando por MP ^^

Gracias y Salu2

[carlmycol]

4º Capitulo: Clases

Es muy normal que se quiera un estilo para cada etiqueta, pero que a la vez cambie... no se si me estoy explicando bien! xD.. por ejemplo queremos que la etiqueta b tenga un estilo en un lugar y otro en otro lugar..  , para esto usamos las clases

Tambien nos puede suceder que queramos un estilo global y en otros lugares tenga otro estilo diferente! segurito que lo primero que se te ocurre hacer es copi & paste xD pues no tu puedes definir un estilo global y tambien definir estilo de clases!  mas facil no?? (para eso son las clases)

Una clase es como un nombre que se le da a la definicion de una etiqueta html y que se puede vincular a una hoja de estilos css

Para ello, en primer lugar definimos la clase (en el bloque de estilos o en la hoja externa) como un estilo más, de esta forma:

Código:

<etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta>

Un buen ejemplo seria este

Código:

<HTML>
<HEAD>
<TITLE> Ejemplo de uso de clases </TITLE>
<STYLE TYPE="text/css">
<!--
BODY {font-family:Verdana,sans-serif;font-size:x-small}
P,A,B {color:red}
.BAzul {color:blue}
//-->
</STYLE>
</HEAD>

<BODY BGCOLOR=white>

En este ejemplo vamos a ver cómo se aplican las clases.
Por ejemplo, <B>esta negrita</B> utiliza el estilo definido
en el bloque, pero <B CLASS="BAzul">esta otra negrita</B>
tiene un color distinto. Y no sólo podemos usar la clase
para la negrita. Por ejemplo, <SPAN CLASS="BAzul">este trozo
de línea también utiliza la clase para su estilo particular</SPAN>.

</BODY>
</HTML>

Nos vemos en La sieguiente entrea!!

salu2

[carlmycol]

5.- Etiquetas

Vamos ahora a estudiar el atributo ID de una etiqueta HTML en relación a la definición de estilos. Cualquier etiqueta HTML puede tener como parámetro la etiqueta ID seguida de un nombre, por ejemplo:

Código:

<etiqueta ID="NombreReferencia"> ... </etiqueta>

Este "NombreReferenc ia" debe ser único en el documento HTML (es decir, no debe haber dos etiquetas con el mismo ID), puesto que nos servirá para tratarla (si lo necesitamos) desde JavaScript, y por esto no debe haber confusión con el nombre como referencia.

Para definir un estilo mediante un ID, usaremos la siguiente notación (en un bloque de estilo o en la hoja externa):

Código:

#Nombre_del_ID {propiedad1:valor;...;propiedadN:valor}

Es decir, escribiendo # seguido del nombre que le queramos dar al ID, y definiendo el estilo como ya sabemos: pares propiedad:valor separados por punto y coma y encerrados entre llaves. Podremos definir todos los ID que queramos, pero cada ID sólo debe ser asociado a una única etiqueta concreta de la siguiente forma:

Código:

<etiqueta ID="Nombre_del_ID"> ... </etiqueta>

Así identificaremo s de forma unívoca a esa etiqueta concreta, asignándole la definición del estilo hecha en el bloque o en la hoja para ese ID, y además nos permitirá tratarlo (por ejemplo, cambiando algunas características del estilo definido) desde JavaScript, que usará ese identificador para saber sobre quién ha de actuar, suponiendo que quisiéramos hacerlo.

salu2

[carlmycol]

6.- Pseudoclases

Hay ocasiones en las que HTML da a algunas etiquetas un estilo propio: por ejemplo, los enlaces aparecen por defecto de otro color y subrayados. Estos elementos son las pseudoclases. Por ahora, sólo están definidas para la etiqueta <A>.

La forma de definir un estilo para una pseudoclase es la siguiente:

Código:

etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}

y las pseudoclases de que disponemos son:

link    Nos dice el estilo de un enlace que no ha sido visitado.
visited    Nos dice el estilo de un enlace que ha sido visitado.
active    Nos dice el estilo de un enlace que está siendo pulsado.
hover    Nos dice el estilo de un enlace sobre el que está pasando el ratón.


Por ejemplo, si deseasemos que apareciesen todos los enlaces sin subrayar, definiriamos los siguientes estilos:

Código:

A:link,A:visited,A:active {text-decoration:none}

Las pseudoclases pueden usarse de forma conjunta con las clases, para aplicar ese estilo sólo en casos concretos, siguiendo la notación:

Código:

A.NombreClase:pseudoclase

y también se pueden usar en función del contexto.

[carlmycol]

7.- Propiedades

He hablado bastante de ellas es hora de que las conoscan!!

Nos vamos a centrar en qué es lo que podemos poner en cada una de esas parejas propiedad:valor que decíamos que definen un estilo.

Para facilitar su identificación, los vamos a dividir en las siguientes categorías:
Propiedes:

    * Formato de bloque
    * Las fuentes
    * Texto
    * Color y fondo
    * Listas

Hay propiedades en las que necesitaremos especificar alguna longitud (por ejemplo, en los márgenes). Para ello, usaremos esta notación:

Hay propiedades en las que vamos a especificar un color; para esto hay tres posibilidades: escribiéndolo de la misma forma que en HTML, con la notación #RRGGBB, siendo RR, GG, BB los valores en hexadecimal de las componentes roja, verde y azul del color, usando algún nombre predefinido, o usando la función rgb(R,G,B), donde R, G, B son los valores en decimal de las componentes roja, verde y azul del color.

[carlmycol]

8.- Propiedades de bloque y Margenes

Principales atributos de estilos de texto en CSS.-

Vamos a estudiar ahora los atributos de estilo de texto de CSS mas usados, y para ello los vamos a dividir en apartados, correspondiend o cada uno de ellos a una propiedad diferente. Asímismo, vamos a ir utilizando variadamente tanto la definición de estilos en línea como en cabecera mediante clases o identificadore s.

La sintaxis general de los atributos para estilos en línea es la siguiente:

<P STYLE="atributo_1:valor; atributo_2:valor;...;atributo_n:valor">

para estilos definidos en una clase es:

.nombre_clase{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}

y por último, para estilos asignados mediante un identificador:

#nombre_identificador{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}

Margenes de bloque.-

Mediante Hojas de Estilos podemos establecer los margenes que va a tener cada uno de los bloques de texto de nuestra página, entendiendo por margen el espacio existente entre el bloque y el borde correspondient e de la pantalla activa del navegador. Así, el margen izquierdo sera la distancia entre el lado izquierdo del bloque y el borde izquierdo de la pantalla del navegador.

Los atributos CSS que fijan estos espacios son:

margin-left:valor-unidad    (margen izquierdo)
margin-top:valor-unidad    (margen superior)
margin-right:valor-unidad    (margen derecho)
margin-bottom:valor-unidad    (margen inferior)
margin:valor-unidad    (conjunto de todos los margenes)

Ejemplo:

<P STYLE="margin-left:100px;">parrafo con margen izquierdo<P>

que nos da:

parrafo con margen izquierdo

Espaciado interno.-

El espaciado interno o "acolchado" (padding en inglés) fija la distancia que va a haber entre el bloque y el texto (imagenes, tablas,etc.) que contiene. Para definirlo se utilizan los atributos:

padding-left:valor-unidad    (espaciado izquierdo)
padding-top:valor-unidad    (espaciado superior)
padding-right:valor-unidad    (espaciado derecho)
padding-bottom:valor-unidad    (espaciado inferior)
padding:valor-unidad    (espaciado del conjunto de todos)

Ejemplo:

Código:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
     .bloque{ padding-left:50px;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="bloque">parrafo con acolchado izquierdo</SPAN>
</BODY>
</HTML>

que nos da:

parrafo con acolchado izquierdo

NOTA.- Aunque a primera vista puedan parecer iguales el margen y el acolchado, son atributos diferentes, que producen efectos diferentes. Si imaginamos un bloque definido mediante las etiquetas P, SPAN o DIV como un rectangulo virtual en el que podemos incluir texto y/o imagenes, el margen izquierdo es la distancia entre el borde izquierdo de este recrtangulo y los demas elementos de la página que le rodean (distancia exterior), mientras que el acolchado es la distancia entre el borde izquierdo del rectangulo y el texto o imagenes que contiene (distancia interior). Su diferencia podemos apreciarla en el siguiente grafico:



Bordes de un bloque.-

Podemos conseguir pintar un borde a un bloque de texto mediante los atributos de estilo:

border-left:valor-unidad    (borde izquierdo)
border-top:valor-unidad    (borde superior)
border-right:valor-unidad    (borde derecho)
border-bottom:valor-unidad    (borde inferior)
border:valor-unidad    (conjunto de todos los bordes)

siendo su sintaxis del tipo:

Código:

<P STYLE="border:10px;">parrafo con bordes<P>

Como unidades podemos usar las ya vistas (px, cm, mm, pc, pt...) o los valores thin, medium o thick, que corresponden respectivament e a borde fino, medio y grueso.

Pero si escribimos esto en nuestra página y la vemos en el navegador observaremos que no se nos pinta borde alguno. Esto es así porque ademas de fijar el ancho del borde debemos también fijar el estilo del mismo, lo que se consigue con el siguiente atributo.

Estilo de los bordes.-

Podemos definir diversos estilos para cada borde de un bloque, consiguiendo con cada uno de ellos un efecto de borde diferente. La sintaxis para asignar estos estilos es:

border-left-style:estilo    (borde izquierdo)
border-top-style:estilo    (borde superior)
border-right-style:estilo    (borde derecho)
border-bottom-style:estilo    (borde inferior)
border-style:estilo    (conjunto de todos los bordes)

donde el parametro estilo admite uno de los siguientes valores:

solid    borde solid
double    borde double
groove    borde groove
ridge    borde ridge
inset    borde inset
outset    borde outset

Color de los bordes.-

Como complemento a los bordes de un bloque, tambiés podemos mediante CSS asignar un color determinado a uno de los bordes de un bloque o a todos ellos, mediante los atributos:

border-left-color:color    (borde izquierdo)
border-right-color:color    (borde superior)
border-top-color:color    (borde derecho)
border-bottom-color:color    (borde inferior)
border-color:color    (conjunto de todos los bordes)

donde el parametro color puede venir expresado mediante el nombre inglés web estandar o mediante su valor hexadecimal.

Así pués, mediante el grupo de atributos de borde podemos configurar de formas muy diferentes los bordes de cada uno de nuestros bloques, con lo que podemos conseguir diferentes efectos muy útiles. Veamos algunos ejemplos:

Código:

<span style="border-width:4px;border-style:solid;border-color:red;">Ejemplo número 1</span>
Ejemplo número 1
<span style="border-width:2mm;border-style:double;border-color:#003366;">Ejemplo número 1</span>
Ejemplo número 2
<span style="border-width:medium;border-style:inset;border-color:Yellow;">Ejemplo número 1</span>
Ejemplo número 3

Nota.- Mientras que Internet Explorer admite bien estos atributos, Nestcape Navigator 4x sólo los admite parcialmente. Si utilizamos un color diferente para distintos lados del bloque Nestcape se lía y pinta todos en el color por defecto, que es el negro, cosa que no ocurre en Explorer. Ademas, mientras que este último, si no especificamos anchura del bloque, pinta los bordes de este ocupando toda la pantalla del navegador, Nestcape sólo pinta bordes a aquella parte del bloque necesaria para abarcar el texto contenido en él.

La solución para busca compatibilidad pasa por usar las mismas propiedades para todos los bordes, utilizando los atributos generales, como hemos hecho en los ejemplos vistos arriba.

[carlmycol]

Propiedades y Valores a texto

En el texto que sigue, los valores permitidos para cada propiedad se enumeran con una sintaxis similar a la siguiente:

    Valor: N | NW | NE
    Valor: [ <longitud> | thick | thin ]{1,4}
    Valor: [<nombre-de-familia> ,]* <nombre-de-familia>
    Valor: <url> ? <color> [ / <color> ]?
    Valor: <url> || <color>

Los valores entre "<" y ">" dan un tipo de valor. Los tipos más comunes son <longitud>, <porcentaje>, <url>, <número> y <color>; éstos se describen en la sección 6. Los tipos más especializados (p.ej., <familia-de-fuentes> y <estilo-de-borde>) se describen bajo la propiedad correspondient e.

Otras palabras son palabras clave que deben aparecer literalmente, sin comillas. La barra inclinada (/) y la coma (,) también deben aparecer literalmente.

Cuando aparezcan varias cosas yuxtapuestas, deben incluirse todas ellas en el orden especificado. Una barra (|) separa alternativas: debe especificarse una de ellas. Una barra doble (A || B) significa que debe especificarse A, B o ambas, en cualquier orden. Los corchetes ([]) se usan para agrupar. La yuxtaposición es más fuerte que la doble barra, y la doble barra es más fuerte que la barra. Así, "a b | c || d e" es equivalente a "[ a b ] | [ c || [ d e ]]".

Cada tipo, palabra clave, o grupo entre corchetes, puede ir seguido por uno de los siguientes modificadores:

    * Un asterisco (*) indica que el tipo, palabra o grupo precedente se repite cero o más veces.
    * Un signo más (+) indica que el tipo, palabra o grupo precedente se repite una o más veces.
    * Un signo de interrogación (?) indica que el tipo, palabra o grupo precedente es opcional.
    * Un par de números entre llaves ({A,B}) indica que el tipo, palabra o grupo precedente, se repite al menos A veces y como mucho B veces.

Propiedades de fuente

El establecimient o de propiedades de fuente será uno de los usos más frecuente de las hojas de estilo. Desgraciadamen te, no existe una taxonomía bien definida y universalmente aceptada para clasificar las fuentes, y algunos términos que se aplican a una familia tipográfica pueden no ser apropiados para otras. P.ej., para referirse a texto inclinado se utiliza normalmente el término 'italic', pero también pueden utilizarse otros términos como Oblique, Slanted, Incline, Cursive o Kursiv. Por tanto, no es un problema sencillo aplicar propiedades típicas de selección de fuentes a una fuente específica.

css define las propiedades 'font-family', 'font-style', 'font-variant' y 'font-weight', 'font-size', 'font'.

Emparejamiento de fuentes

Al no haber una taxonomía universal aceptada para las propiedades de las fuentes, el emparejamiento entre propiedades y fuentes tipográficas debe hacerse con cuidado. Las propiedades se emparejan en un orden bien definido para asegurarse de que los resultados de este proceso de emparejamiento sean tan consistentes entre AAUU como sea posible (suponiendo que se ponga a la disposición de todos ellos la misma biblioteca de fuentes tipográficas).

1. El Agente de Usuario hace (o accede a) una base de datos de todas las propiedades relevantes con respecto a css de todas las fuentes de cuya existencia sabe el AU. El AU puede saber de la existencia de una fuente porque haya sido instalada localmente o porque haya sido previamente descargada de la web. Si hay dos fuentes que tengan exactamente las mismas propiedades, una de ellas se descarta.
   
2. En un elemento dado, y para cada carácter de ese elemento, el AU integra todas las propiedades de fuente aplicables a ese elemento. A partir del conjunto completo de propiedades, el AU utiliza la propiedad 'font-family' para elegir una familia tipográfica tentativa. El resto de las propiedades se prueban con la familia de acuerdo con los criterios de emparejamiento descritos para cada propiedad. Si hay emparejamiento s para todas las propiedades restantes, entonces ésa es la fuente emparejada con el elemento dado.

3. Si no hay una fuente emparejada dentro de la familia tipográfica procesada en el paso

2, y si hay una familia tipográfica ('font-family') alternativa en el conjunto de fuentes, entonces se repite el paso 2 con la siguiente familia tipográfica alternativa.
   
4. Si hay una fuente emparejada, pero no contiene un signo para el carácter considerado, y si hay una familia tipográfica alternativa en el conjunto de fuentes, entonces se repite el paso 2 con la siguiente familia tipográfica alternativa. Véase el apéndice C para una descripción de la codificación de fuentes y caracteres.
 
5. Si no hay fuente dentro de la familia seleccionada en 2, entonces se usa la familia tipográfica por defecto del AU y se repite el paso 2, usando el mejor emparejamiento que pueda lograrse con la fuente por defecto.

(El algoritmo recién descrito puede optimizarse para evitar tener que comprobar las propiedades css con cada carácter.)

Las reglas de emparejamiento de cada propiedad mencionada en el paso (2) son las siguientes:

1. Se comprueba 'font-style' en primer lugar. 'italic' se satisfará si hay o bien una fuente en la base de datos de fuentes del AU etiquetada con la palabra clave CSS 'italic' (preferentement e) o bien con 'oblique'. De otro modo los valores deben coincidir exactamente o font-style fallará.

2. A continuación se comprueba 'font-variant'. 'normal' se empareja con una fuente que no esté etiquetada como 'small-caps' (versalitas). 'small-caps' se empareja (1) con una fuente etiquetada como 'small-caps', (2) con una fuente en la que las versalitas sean sintetizadas, o (3) por una fuente en la que todas las letras minúsculas estén reemplazadas por letras mayúsculas. Una fuente de versalitas puede ser sintetizada escalando electrónicamente las letras mayúsculas de una fuente normal.
   
3. A continuación se comprueba 'font-weight'. No fallará nunca (ver 'font-weight' más abajo).
   
4. 'font-size' debe emparejarse dentro de un margen de tolerancia dependiente del AU. Normalmente, los tamaños de las fuentes escalables se redondean al píxel más cercano, mientras que la tolerancia de fuentes de mapas de bits podría ser tan grande como del 20%. Los cálculos ulteriores, p.ej., usando 'em' en otras propiedades, se basarán en el valor del 'font-size' realmente utilizado, no en el que ha sido especificado.

'font-family'

Valor: [[<nombre-de-familia> | <familia-genérica>],]* [<nombre-de-familia> | <familia-genérica>]
Inicial: depende del AU
Se aplica a: todos los elementos
Se hereda: sí
Valores porcentuales: N/A

Esta propiedad es una lista de nombres de familias tipográficas y/o nombres de familias genéricas ordenadas por prioridad. A diferencia de la mayoría de las demás propiedades css, los valores se separan por comas para indicar que son alternativos:

Código:

BODY { font-family: gill, helvetica, sans-serif }

Hay dos tipos de valores en la lista:

<nombre-de-familia>
    El nombre de una familia tipográfica para elegir. En el último ejemplo, "gill" y "helvetica" son familias tipográficas.
<familia-genérica>
    En el ejemplo anterior, el último valor es un nombre de familia genérica. Se definen las siguientes familias genéricas:

        * 'serif' (p.ej. Times)
        * 'sans-serif' (p.ej. Helvetica)
        * 'cursive' (p.ej. Zapf-Chancery)
        * 'fantasy' (p.ej. Western)
        * 'monospace' (p.ej. Courier)

Se recomienda a los diseñadores de hojas de estilo ofrecer una familia tipográfica genérica como última alternativa.

Los nombres de fuentes que contengan espacios en blanco deberían entrecomillars e:

Código:

BODY { font-family: "new century schoolbook", serif }

 

Código:

<BODY STYLE="font-family: 'My own font', fantasy">

Si se omiten las comillas, no se tienen en cuenta los caracteres de espacio que haya antes y después del nombre de la fuente, y cualquier secuencia de caracteres de espacio dentro del nombre de la fuente se convierte a un único espacio.

[carlmycol]

Propiedades de texto

Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras y parrafos.

Las propiedades que podemos utilizar son las siguientes:

text-transform

    Especifica, por medio de palabras reservadas, si las letras del texto deben transformarse en mayúsculas, minúsuculas, sólo la primera letra de cada palabra en mayúsculas, o si ha de dejarse como está. Se hereda.

    uppercase | lowercase | capitalize | none

Código:

    H1 {text-transform : uppercase}

    En el ejemplo anterior todas las cabeceras de nivel 1 apareceran en mayúsculas.
vertical-align

    Alineación vertical del texto en relación con la línea base del texto. No se hereda.

    baseline | sub | super | top | text-top | middle | mottom | text-bottom | %

Código:

    STRONG {vertical-align: sub}

text-align

    Fija la alineación del bloque, al margen izquierdo, al derecho, centrado o a ambos. Se hereda.

    left | right | center | justify

Código:

    H1 {text-align: center}

    En este caso todas las cabeceras de nivel 1 apareceran centradas.

text-indent

    Fija la sangría o indentación de la primera línea del texto. Se hereda.

    XX unidad | %, (Por defecto su valor es 0)

Código:

    P {text-indent: 2em}

line-height

    Indica la distancia entre dos lineas adyacentes. Se hereda.

    normal | XX unidad | %

text-decoration

    Fija una o más características "decorativas" del texto, como subrayado, lineas superiores, caracteres tachados o parpadeantes.

    Si se aplica a un elemento de bloque la heredan sólo los descendientes que sean de texto (o en-linea). Si se aplica a uno de éstos la heredan todos los descendientes.

    underline | overline | line-trough | blink | none

Código:

    H1 {text-decoration: underline}

    En el ejemplo anterior todas las cabeceras de nivel 1 apareceran subrayadas.
letter-spacing

    Especifica el espaciado entre letras. En el caso de especificar una longitud esta se sumara a la normal. Se hereda.

    normal | XX unidad

Código:

    H1 { letter-spacing: 0.5pc}

word-spacing

    Especifican el espaciado entre palabras. En el caso de especificar una longitud esta se sumara a la normal. Se hereda.

    normal | XX unidad

Código:

    H1 { word-spacing: 0.5pc}

[carlmycol]

Color y Fondo

Son Las que definen los colores y/o imágenes que se usarán en un objeto, como el color del texto o la imagen de fondo de un párrafo, de una caja o de todo el blog.

Antes de empezar con las propiedades, digo que el color puedes especificarlo de varias maneras. Nominal, es decir, por el nombre . También puedes hacerlo por el sistema hexagesima ( seis números y/o letras precedidos del signo # ). En web encontrarás muchas páginas que te permitirán elegir colores y obtener su código, como por ejemplo esta. También hay programas específicos para esto como el Huey . Hay otros sistemas, pero el blog utiliza básicamente estos dos.

color

Indica el color del elemento al que se aplica.

ej:

Código:

color:#555555;

background-color

Asigna el color de fondo del elemento al que se aplica.

ej: 

Código:

background:#ffffff

background-image

Asigna una imagen de fondo al elemento al que se aplica.

Ejemplo:

background: url('carlmycol.com. ar/narutobg.gif')

background-repeat

Indica, en el caso de que una imagen de fondo sea menor que el área a cubrir, la forma en que se repetirá esta imagen. Puede tomar varios valores:

repeat: La imagen se repetirá tanto en horizontal como en vertical.
repeat-x: La imagen se repetirá solo en horizontal.
repeat-y: La imagen se repetirá solo en vertical.
no-repeat: La imagen no se repetirá.

background-attachment: Indica si una imagen de fondo permanecerá fija al hacer un scroll  o no. Por tanto puede tomar dos valores:

scroll: La imagen se desplazará al hacer un scroll.
fixed: La imagen no se desplazará al hacer un scroll. Con esto creamos un fondo fijo como el que tengo yo en mi blog.

PD: Por defecto el valor es fixed, pero en el blog no es así.
PD2: Estas cinco características se pueden reunir.

 
Ejemplo:

Código:

background:#ffffff url('http://foro.portalhacker.net/Smileys/classic/koolcph.gif') repeat-x fixed

Puedes optar por especificar que es lo que estais definiendo (lo recomiendo). Entonces debes separar cada característica por un ;.

ejenplo:

Código:

Background-color:#ffffff;
              Background-image: url(‘http://foro.portalhacker.net/Smileys/classic/koolcph.gif’);

              Background-repeat: no-repeat;

              Background-attachment: fixed;

background-position

Define la posición en la que se insertará una imagen de fondo

puede adoptar una de las siguientes formas:
     x%: Donde "x" es un porcentaje que representa la posición horizontal de la imagen con respecto al ancho del objeto al que se aplica.

     x: Donde "x" es la distancia, en alguna de las unidades CSS, al borde izquierdo del objeto al que se aplica.

     left: La imagen se pegará a la izquierda.
     center: La imagen se colocará en el centro.
     right: La imagen se colocará a la derecha.

puede adoptar una de las siguientes formas:
     x%: Donde "x" es un porcentaje que representa la posición vertical de la imagen con respecto a la altura del objeto al que se aplica.

     x: Donde "x" es la distancia, en alguna de las unidades CSS, al borde superior del objeto al que se aplica.

     top: La imagen se colocará en el borde superior.
     center: La imagen se colocará en el centro.
     bottom: La imagen se colocará abajo.

Valor por defecto: 0% 0%

[carlmycol]

Listas

Las CSS tambien especifican algunas propiedades para las listas:

list-style-type, list-style-image y list-style-position, y su propiedad resumida asociada, list-style.

Los valores posibles de list-style-type son disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

Los valores posibles de list-style-image son url o none. La sintaxis es url (ruta/hacia/el/archivo)

Finalmente los valores de list-style-position son inside o outside.

La siguiente hoja de estilo, por ejemplo, define reglas de estilo para un elemento de lista ordenada <OL> y lista desordenada <UL>:

 

Código:

<STYLE TYPE="text/css">
UL
{ list-style-type: square; list-style-image: url(mi.gif)}
OL
{ list-style-type: lower-alpha}
</STYLE>

Observe en el ejemplo que la regla <OL> está establecida para utilizar letras minusculas para cada elemento de lista, mientras que la regla <UL> está establecida para utilizar una imagen. Si la imagen no se puede cargar, el código indica que el delimitador de elemento de lista square debe utilizarse en su lugar.

Además, la propiedad list-style-position está fijada en inside, mostrando texto dispuesto directamente bajo el delimitador de lista.
Si el valor está fijado en outside, que es el inicial, el texto se alinearía bajo el primer carácter del elemento de lista, que está a la derecha del delimitador:

Posición exterior (outside):
 * Item de lista 1
   segunda línea de ítem de la lista

Posición interior (inside):
   * Item de lista 1
   segunda línea de ítem de la lista