Séptima Clase - Terminología CSS y DIVs

Términos comunes de CSS

Además de los términos HTML, hay algunas comunes términos CSS que usted querrá familiarizarse con. Cuanto más se trabaja con HTML y CSS de las más estos términos se convertirá en segunda naturaleza.
Selectores

Un selector determina exactamente qué elemento, o elementos, los estilos correspondientes se aplicarán a. Los selectores pueden incluir una combinación de diferentes IDs, clases, tipos y otros atributos - todo dependiendo de lo específico que usted desea ser. Los selectores pueden ser identificados como todo lo que viene antes del primera llave, { .

p {  ...  }

Propiedades

Una propiedad determina el estilo que se aplicará a un elemento. Las propiedades pueden ser identificados como el texto que viene inmediatamente antes de los dos puntos. Hay un abundante número de propiedades que se pueden utilizar, y continuamente se están añadiendo otros nuevos.

p {
  Color:  # ff0;
  fuente-size :  16px ;
}

Valores

Un valor determina el comportamiento de una propiedad. Los valores pueden ser identificados como el texto en el medio de los dos puntos y punto y coma.

p {
  Color:  # ff0;
  font-size :  16px ;
}

CSS Estructura y sintaxis

CSS funciona mediante el uso de selectores para aplicar estilos a los elementos HTML. Todos los estilos en cascada CSS, que permite diferentes estilos que se heredan de múltiples elementos.

Como un ejemplo, es posible establecer un estilo para todo el texto en una página para ser de un color específico, tamaño, y peso. A continuación, mediante un selector más específico que el estilo puede ser sobreescrito por un elemento único.

. Figura 1.01CSS sintaxis de esquema.

La siguiente sintaxis muestra cómo se aplicarían a todos los estilos de párrafo.

p {
  Color:  # ff0;
  font-size :  16px ;
}

Largo vs Corto

En CSS hay varias maneras diferentes para declarar los valores de una propiedad. Con CSS de sintaxis larga, se apilan las múltiples declaraciones, una tras otra para cada propiedad y su valor. Con CSS abreviado se utiliza una propiedad y la lista de varios valores. Lo mejor es usar CSS abreviado, ya que requiere menos código. No todas las propiedades CSS son compatibles con el abreviado así que asegúrese de que está utilizando la propiedad y estructura de valores correcta.

/ * Modo largo * /
p {
  padding-top :  10px ;
  padding-right :  20px ;
  padding-bottom :  10px ;
  padding-left :  20px ;
}

/ * Modo corto * /
p {
  padding :  10px  20px ;
}

/ * Modo corto * /
p {
  padding :  10px ;
}

Comentarios en HTML y CSS

HTML y CSS le dan la posibilidad de dejar los comentarios en el código. Estos comentarios se pueden utilizar para ayudar con la organización, establecer recordatorios y administrar el código más eficaz. Los comentarios se hacen especialmente útil cuando hay varias personas trabajando en el mismo código. Cualquier contenido envuelto en comentarios no se representará en la página.

Comentarios HTML envuelven el contenido a partir de <- y terminan con -> . comentarios CSS envuelven el contenido empezando por / * y terminan con * / .

Selectores

Selectores, como se mencionó anteriormente, son el factor determinante en cuanto a qué elementos se van a ser estilizada. De este modo, es importante para entender completamente cómo utilizar selectores y cómo se pueden aprovechar. Algunos de los selectores más comunes incluyen elementos, los ID y las clases, o alguna combinación de los tres.

Type selectors

Los "type selectors" son el selector más básico. Basta nombrar a los elementos elementos sin los atributos para aplicar el estilo. Este tipo de selectores se prefieren siempre que sea posible, ya que requieren menos código y son fáciles de manejar.

HTML

<p> ... </ p>

CSS

p {  ...  }

Selectores de Clase

Selectores de clases le permiten aplicar el mismo estilo a un conjunto de elementos, dándoles todo lo mismo atributo de clase. Las clases se indican en el CSS mediante la identificación de la clase con un punto inicial. Está permitido usar el mismo atributo de clase en múltiples elementos de una página.

HTML

<Div  class = "increible" > ... </ div>

CSS

. increíble {  ...  }

Selectores ID

Selectores de ID son similares a los selectores de clase sin embargo que se utilizan para dirigir sólo un elemento único a la vez. En lugar de utilizar el atributo de clase, IDS, naturalmente, utilizar el atributo ID. En lugar de un período de, al igual que con las clases, los ID se denotan mediante la identificación de la identificación con el símbolo de sostenido líder. IDs sólo pueden utilizarse una vez por página e idealmente deben ser reservados para elementos significativos.

HTML

<Div  de id = "shayhowe" > ... </ div>

CSS

# Shayhowe {... }

Combinación de selectores

Una belleza de CSS es la capacidad de combinar selectores y heredar estilos. Esto le permite comenzar con un selector más genérico y su forma de ser más específicas como sea necesario. Además, puede combinar diferentes selectores a ser tan específico como usted desee.

ul # li sociales {
  padding :  0  3px ;
}

ul # sociales li a {
  height :  17px ;
  width :  16px ;
}

ul # li.tumblr sociales a {
  background : url ( 'tumblr.png' )  0  0  no-repeat ;
}

Suma de selectores

Los selectores pueden ser extremadamente poderosos y los selectores mencionados anteriormente son sólo el comienzo. Se disponen de muchos selectores avanzados.  Antes de poner nombres aleatorios a un elemento, comprobar si existe alguno que permita seleccionarlo por uno. También es importante mencionar que no todos los selectores de avanzar en el trabajo en todos los navegadores, especialmente con los nuevos selectores introducidas en CSS3. Si el selector no parece estar funcionando comprobar si el navegador lo soporta de manera adecuada.

Tutorial sobre DIVs

http://es.learnlayout.com/display.html

Posicionamiento de los DIVs

http://www.trisfera.com/ejemplosRetos/position_float/

Sexta Clase - Aplicación de estilos (CSS)

Sexta Clase: Los estilos en el HTML

En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.
Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.

La sintaxis básica de CSS

Digamos que queremos un bonito color rojo como fondo de nuestra página web:

Usando HTML podríamos haberlo conseguido así:

<body bgcolor="#FF0000"> 

Con CSS el mismo resultado puede lograrse así:

body {background-color: #FF0000;}

Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:


Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.

Aplicando CSS a un documento HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.

Método 1: En línea (el atributo style)

Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:

 <html>
   <head>
  <title>Ejemplo</title>
   </head>
   <body style="background-color: #FF0000;">
  <p>Esta es una página con fondo rojo</p>
   </body>
 </html>
 

Método 2: Interno (la etiqueta style)

Otra forma es incluir el código CSS usando la etiqueta HTML <style>. Por ejemplo, así:

 <html>
   <head>
  <title>Ejemplo</title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  <p>Esta es una página con fondo rojo</p>
   </body>
 </html>
 

Método 3: Externo (enlace a una hoja de estilo)

El método recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este tutorial usaremos este método en todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:


El truco consiste en crear un vínculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo se puede crear con una sencilla línea de código HTML:

 <link rel="stylesheet" type="text/css" href="style/style.css" />
 

Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:

 <html>
   <head>
  <title>Mi documento</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
   <body>
   ...
 

Este vínculo indica al navegador que debería usar la presentación del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este método es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentación del muchos documentos HTML.

Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 páginas, un hoja de estilo puede ahorrarte el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del código de la hoja de estilo principal.
Vamos a llevar a la práctica lo que acabamos de aprender.

Pruébalo tú mismo

Abre el Bloc de notas (o el editor de texto que utilices) y crea dos archivos - un archivo HTML y un archivos CSS - con el siguiente contenido:

Archivo index.html

 <html>
   <head>
  <title>Mi documento</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
  <h1>Mi primera hoja de estilo</h1>
   </body>
 </html>
 

Archivo style.css

 body {
   background-color: #FF0000;
 }
 

Ahora coloca los dos archivos en la misma carpeta. Recuerda grabar los archivos con las extensiones correctas (".html" y ".css", respectivamente).
Abre el fichero index.html con el navegador y observa que la página tiene un color de fondo rojo. ¡Enhorabuena! ¡Acabas de crear tu primera hoja de estilo!

Colores y fondos

En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:

• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.

 h1 {
  color: #ff0000;
 }
 

Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).

La propiedad 'background-color'

La propiedad background-color describe el color de fondo de los elementos.
El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.

 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

Fíjate cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.

Imágenes de fondo [background-image]

La propiedad CSS background-image se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.

Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").

Repetir la imagen de fondo [background-repeat]

En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat.

Valor	Descripción
Background-repeat: repeat-x	La imagen se repite en el eje horizontal
background-repeat: repeat-y	La imagen se repite en el eje vertical
background-repeat: repeat	La imagen se repite en el eje horizontal y vertical
background-repeat: no-repeat	La imagen no se repite

Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 } 

Fijar la imagen de fondo [background-attachment]

La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.
Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.
La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.

Valor	Descripción
Background-attachment: scroll	La imagen se desplaza con la página - no está fija
Background-attachment: fixed	La imagen está fija

Por ejemplo, el siguiente código fijará la imagen de fondo.

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
 

Ubicación de la imagen de fondo [background-position]

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.
Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema:
















La tabla siguiente proporciona varios ejemplos.

Valor	Descripción
background-position: 2cm 2cm	La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la página
background-position: 50% 25%	La imagen se posiciona en el centro de la página y un 25 % del margen superior de la misma
background-position: top right	La imagen se posiciona en la esquina superior derecha de la página

El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:

 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 } 

Combinación de propiedades [background]

La propiedad background es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.
Con la propiedad background se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.
Por ejemplo, observa estas cinco líneas de código:

 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
 

Usando background se puede lograr el mismo resultado con una única línea de código:

 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
 

El orden en que deben aparecer las propiedades individuales es el siguiente:
[background-color] | [background-image] | [background-repeat]| [background-attachment] | [background-position]
Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Por ejemplo, si se omiten las propiedades background-attachment y background-position del ejemplo anterior, quedando el código de la siguiente manera:

 background: #FFCC66 url("butterfly.gif") no-repeat;
 

Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que, como ya sabes, son scroll y top left.

Quinta Clase: Tablas

Las tablas

Las tablas se describen entre dos etiquetas: <table> y </table>

Las tablas están formadas por celdas y las celdas están formadas por renglones.

		imagen y texto			COLUMNA
		Texto dentro de una celda
FILA					CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Renglón <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

  <tr>...</tr>

</table>

Columna o celda <td>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla:

Sabado	Domingo
Curso HTML	Curso JQuery
Curso CSS	Curso DOM

<table border="1">
  <tr>
    <td>Sabado</td>
    <td>Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso CSS</td>
  </tr>
  <tr>
    <td>Curso JQuery</td>
    <td>Curso DOM</td>
  </tr>
</table>

Formato de la tabla

Los atributos de una tabla son:

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
cellpadding	espacio entre el contenido de las celdas y el borde	un número
cellspacing	espacio entre celdas	un número
border	grosor del borde	un número
align	alineación de la tabla dentro de la página	left (izquierda) right (derecha) center (centro)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

Probar la tabla anterior (la de los cursos) con el siguiente formato:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">

  ...

</table>

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99).

Formato de las celdas

Es posible cambiar el formato de las celdas con atributos

Atributo	Significado	Posibles valores
width	ancho de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
height	altura de la tabla	un número, acompañado de % cuando se desee que sea en porcentaje
align	alineación horizontal del contenido de la celda	left (izquierda) right (derecha) center (centro)
valign	alineación vertical del contenido de la celda	baseline (línea de base) bottom (inferior) middle (medio) top (superior)
bgcolor	color de fondo	número hexadecimal
background	imagen de fondo	número hexadecimal
bordercolor	color del borde	número hexadecimal

De ese modo se puede cambiar todo un renglón, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.
Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.
Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">
  <tr align="center" bgcolor="#0099CC">
    <td>Sabado</td>
    <td bgcolor="#66CC99">Domingo</td>
  </tr>
  <tr>
    <td>Curso HTML</td>
    <td>Curso CSS</td>
  </tr>
  <tr>
    <td>Curso JQuery</td>
    <td>Curso DOM</td>
  </tr>

</table>

¿Qué obtenemos?

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila.

Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>.