Conceptos Bsicos

Aqu analizaremos algunos conceptos bsicos de CSS para un mejor entendimiento del curso en su totalidad. Veremos:

Qu es CSS3? Implementacin Selectores CSS Pseudo-Clases

Qu es CSS3?
El cdigo HTML nos permite armar la estructura de contenidos de nuestro documento web y las hojas de estilo cascada CSS son las encargadas de representar y darle formato a los contenidos HTML: colores, posicin, tamao, fuentes, etc etc. En el ao 1996 se lanzo la primera versin de CSS y logr una aceptacin instantnea, evolucionando hasta llegar a la versin 2.1, cuya compatibilidad es casi del 100% con todos los navegadores actuales. De esta forma cumpli el objetivo inicial de separar el contenido del diseo y ofrecer un control total a los diseadores sobre los elementos de la pgina. El sucesor de la versin 2.1, se comenz a definir en el ao 2005 y se lo conoci como CSS3 (Cascading Style Sheets 3). Esta versin ofrece una amplia gama de nuevas posibilidades dentro del diseo web. Desde efectos asombrosos hasta animaciones avanzadas. De esta forma, CSS3 ser el nuevo estndar que dominar la maquetacin web en los siguientes aos.

Implementacin
En esta seccin te explicar como implement el cdigo CSS dentro de los ejemplos de este curso. Estimo que ya ests familiarizado con la implementacin de estilos CSS, pero nunca est dems repasar el tema. NOTA: Si ests con dudas sobre maquetacin o deseas aprender a fondo el proceso completo, puede acceder aqu al Curso Completo de Maquetacin con XHTML y CSS.

IMPLEMENTACION EN ESTE CURSO

Recordemos rpidamente que el cdigo HTML sirve para estructurar los contenidos del documento, y el cdigo CSS se utiliza para darle forma a los mismos. El cdigo HTML se encuentra dentro del mismo documento HTML, pero para el cdigo CSS tenemos 2 posibilidades: 1 Ubicarlo en un archivo externo al HTML 2 Insertarlo en el mismo HTML Normalmente los estilos CSS se ubican en un archivo externo para mayor comodidad. Creas un archivo CSS y lo guardas con la extensin .css. Luego en el archivo HTML, dentro del HEAD, colocas la siguiente lnea y especificas la ruta y el nombre del archivo .css que creaste anteriormente. Por ejemplo, si nuestro archivo css se llamara estilos.css, la lnea de insercin en HTML seri:
?
<link href=estilos.css rel=stylesheet type=text/css />

Para ubicar los estilos CSS dentro del mismo HTML, los debes en el HEAD con la siguiente forma:

?
<style type="text/css"> AQIU VAN LOS ESTILOS </style>

En el desarrollo de este curso he optado por esta ltima tcnica de ubicar los CSS dentro de los HTML, para reducir la cantidad de archivos y simplificar los ejemplo.

Selectores CSS
Aqu haremos un repaso rpido sobre los conceptos bsicos de los Selectores CSS Selectores Simples

Los selectores nos permiten seleccionar el elemento de nuestro documento HTML que queremos aplicarle alguna propiedad. Es decir, se utilizan normalmente de forma directa. Por ejemplo, para aplicar un color rojo al texto de un titular H1, usaramos: ?
h1 { color: #ff0000; }

Selectores Descendientes Utilizamos los selectores descendientes para aplicar reglas o propiedades CSS a un elemento que se encuentra dentro de otro. Por ejemplo, si quisiramos aplicar un color de texto rojo solo a los elementos EM que se encuentran dentro de los elementos H1, utilizaramos: ?
h1 em { color: #ff0000; }

En este caso en elemento EM es descendiente del elemento H1. Selectores de hermanos adyacentes Los selectores de hermanos adyacentes sirven para seleccionar aquellos elementos que comparten un mismo padre y que se encuentran uno a continuacin del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar. Por ejemplo: ?
h1 + p { text-indent: 0; } h1 + h2 { margin-top: 10px; }

En el primer caso, se selecciona los prrafos (P) que sigan inmediatamente a un ttulo (H1) y se les quita la sangra. En el segundo, cuando a un ttulo nivel 1 (H1) le sigue uno de nivel 2 (H2), a este ltimo se le adjudica un margen superior de 10 px.

Pseudo-Clases
Los selectores se refieren a elementos que podemos encontrar dentro del cdigo HTML. Las pseudo-clases y los pseudo-elementos, no pueden deducirse simplemente

analizando la estructura del documento. Es decir, son como abstracciones que permiten referirse a elementos que de otro modo resultaran inaccesibles. Las pseudo-clases son:

:first-child :link y :visited :hover, :active y :focus :lang

:first-child

La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Por ejemplo:

?
p b:first-child { color: red; }

El selector p b:first-child selecciona el primer elemento b que sea hijo de un elemento y que se encuentre dentro de un elemento p. Por tanto en este ejemplo slo el primer texto en bold, es decir, el primer elemento b que aparecera dentro de un prrafo p se vera de color rojo.

:link y :visited

Estas son un poco mas conocidas. Estas pseudo-clases se utilizan para dar estilo a los links al aparecer en el documento :link y en cuando ya ha sido clickeado :visited Por ejemplo:
?
a:link { color: #ff0000; } a:visited {

color: #0000ff; }

En este caso los links apareceran en rojo, y si fueron clickeados apareceran en azul.

:hover, :active y :focus

Estas pseudo-clases permiten al programador web variar los estilos de un elemento en respuesta a las acciones del usuario.

:hover, configura cuando el usuario pasa el ratn o cualquier otro elemento apuntador por encima de un elemento determinado. :active, configura cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratn sobre un elemento. El estilo se aplica solo cuando el usuario mantiene presionado el botn del ratn.. :focus, configura cuando el elemento tiene el foco del navegador, es decir, cuando el elemento est seleccionado. Por lo general se aplica a los elementos input de los formularios cuando estn activados y por tanto, se puede escribir directamente en esos campos.

Si quisiramos definir y aplicar las 4 pseudo-clases principales, deberamos hacerlo en el siguiente orden:
?
a:link {color: red} a:visited {color: gray} a:hover {color: blue} a:active {color: black}

Aqu especificamos un color rojo para los links, un color gris para los ya visitados, un color azul cuando es sealado y un negro cuando es activado.
:lang

En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo lang. Por ejemplo, para identificar que un prrafo est en francs se usa:
?
p:lang (es) { color: red;

El cdigo para identificar el idioma consta generalmente de dos letras: es espaol, en ingls, de alemn, fr francs, etc. Mediante la pseudo-clase :lang podemos seleccionar elementos en base a su idioma.