Confección y publicación de paginas web Curso 2014-2015

INTRODUCCIÓN A LA WEB

¿Qué es una página web? Un documento de texto con marcas, llamadas etiquetas. Las etiquetas determinan el aspecto de la página, y otras características. Si somos capaces de escribir un documento de texto, seremos capaces de escribir una página web. Sólo necesitamos conocer el lenguaje de las etiquetas o HTML. Las etiquetas se interpretan y se visualiza el documento como una página web.

Servidores y direcciones URL Cuando visitamos páginas web en realidad estamos accediendo a archivos en un servidor web. La dirección o URL tiene este formato: http://www.nombredominio.com/directorio/pagin aweb.html Podemos visitar una dirección desde un buscador o desde un enlace en otra página. Podemos teclear la dirección en la barra de direcciones del navegador o acceder desde nuestros favoritos. Sistema paginas Web. Protocolo

Servidores y direcciones URL Internet esta formada por un conjunto de servidores conectados. Un servidor es un ordenador conectado a la red de acceso a Intenet que dispone de un programa que es capaz de recibir una URL y devolver una página web al que hizo la petición. Internet Es una gran red mundial de ordenadores. Los ordenadores se pueden comunicar porque están unidos a través de conexiones y gracias a que utilizan un lenguaje o protocolo común, el TCP/IP.

Tipos de páginas web Página Web Estática (lado cliente): Es aquella que está compuesta de una serie de archivos que contienen el código HTML que constituye la página en sí y que permiten mostrar los textos, imágenes, videos, etc que conforman el contenido de la página. Por lo general la edición de este tipo de páginas la realizan los diseñadores y desarrolladores web dedicados a estas labores.

Tipos de páginas web Página Web Dinámica (lado servidor): El término dinámico no se refiere a movimiento como muchos pueden pensar. El término dinámico hace referencia a que la página web se construye al momento en que la página es visitada por el usuario. Es decir que el contenido de la página web no es fijo sino que se construye de acuerdo a la interacción que el usuario hace con la página. La información de este tipo de página suele estar almacenada en Bases de Datos de las cuales se extrae una parte según las selecciones o acciones llevada a cabo por la persona que visita la página web. Para realizar este tipo de página se necesita tener conocimientos de programación y manejo de bases de datos o usar software que haga uso de estas tecnologías.

Tipos de paginas web

Clases de páginas web Páginas Web Transaccionales, e-comercio o e- commerce Bajo este modelo, las empresas exhiben sus productos en la página para que los clientes los compren a través de internet. Páginas Web Orientadas al Servicio Esta modalidad está orientada a brindar información sobre productos y servicios y no poseen el famoso “carrito de compra”, por lo que los productos no pueden ser comprados directamente a través de la página.

Clases de páginas web Páginas Web dirigidas a la Construcción de una Marca La página web ofrece una experiencia para afianzar la imagen de la marca. Por lo general, los productos no pueden ser comprados en línea pero muchas veces tienen la opción de comprar material de la marca. Páginas Web de Contenido El principal producto de este tipo de páginas es su contenido. Éstas proveen información a sus usuarios. Comunidades, Foros o Redes Sociales Éstos portales están dedicados a estimular la interacción y la generación y el intercambio de información entre sus usuarios.

INTRODUCCIÓN A HTML

Historia de HTML 1980: cuando el físico Tim Berners-Lee, propuso un nuevo sistema de "hipertexto" para compartir documentos. Lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet. Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamadaWorldWideWeb (W3). 1991: se publico el primer documento formal con la descripción de HTML 1993: La primera propuesta oficial para convertir HTML en un estándar 1995: se organiza un grupo de trabajo de HTML y se consigue publicar el estándar HTML 2.0 1996+: los estándares de HTML los publica otro organismo de estandarización llamado W3C(World Wide Web Consortium). 1998: se publica HTML 4.0 La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publicó el 22 de enero de 2008.

Estandares El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML. Especificación oficial de HTML 4.01 Especificación oficial de XHTML 1.0

HTML y XHTML XHTML no es más que una adaptación de HTML al lenguaje XML. Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML.

HTML y CSS Originalmente, las páginas HTML sólo incluían información sobre sus contenidos de texto e imagenes. Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos: tipos de letra, colores y márgenes. La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) que se utilizan para crear páginas web dinámicas. De esta forma, utilizando exclusivamente HTML se crean páginas web "feas" pero correctas. Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas HTML correctas.

HTML5 HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Todavía se encuentra en modo experimental, lo cual indica la misma W3C, aunque ya es usado por múltiples desarrolladores web por sus avances, mejoras y ventajas. El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.

MI PRIMERA PAGINA WEB

El lenguaje de etiquetas Los primeros archivos sólo contenían texto sin formato y se codificaban las letras del alfabeto y se transformaban en números. Una de las codificaciones más conocidas (y una de las primeras que se publicaron) es la codificación ASCII. ¿cómo se almacena un texto en negrita? ¿y un texto de color rojo? ¿y otro texto azul, en negrita y subrayado? El archivo electrónico almacena tanto los contenidos como la información sobre el formato de esos contenidos. <parrafo> Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial. </parrafo>

El lenguaje de etiquetas Así, la estructura típica de las etiquetas HTML es: <nombre_etiqueta> ... </nombre_etiqueta> HTML es un lenguaje de etiquetas  y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. Sencillos de leer y escribir por parte de las personas y de los sistemas electrónicos. Pueden aumentar mucho el tamaño del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.

Estructura de una página web Identificador HTML Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. <html> .... </html>

Estructura de una página web Identificador HEAD La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. <html> <head> ... </head> </html>

Estructura de una página web Identificador TITLE El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él. <html> <head> <title> Titulo de nuestra pagina web </title> </head> </html>

Estructura de una página web Identificador BODY El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, losformularios, etc. <html> <head> <title> Titulo de nuestra pagina web </title> </head> <body> </body> </html>

Hola mundo <html> <head> <title>Mi primera página</title> </head> <body> <p>Hola mundo</p> </body> </html>

HTML BASICO

Texto Encabezado <h1> Establecen títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. <h1>Bienvenidos a mi pagina web.</h1>

Texto Caracteres especiales y espacios en blanco Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. < Se representa con < > Se representa con >

Texto ¡Bienvenidos, esta es mi 1ª página! Carácter Representación < > á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ™ ™ Carácter Representación € € ç ç Ç Ç ü ü Ü Ü & & ¿ ¿ ¡ ¡ " " · · º º ª ª ¬ ¬ © © ® ® ¡Bienvenidos, esta es mi 1ª página! ¡Bienvenidos, esta es mi   1ª   página!

Texto Comentarios Comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento. Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores. <!-- A continuación aparecerá una línea de texto//-->

Texto Saltos de línea <br> En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe. Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección.   Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Texto Saltos de línea <br> En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe. Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección.   Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Texto Texto preformateado <pre> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>. Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado <pre>Hola, BIENVENIDOS y esto un texto preformateado</pre>   No se pueden incluir las etiquetas <img> …

Texto Separadores <hr> El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi página.

Texto Atributo Significado Posibles valores align alineación de la regla dentro de la página left (izquierda) right (derecha) center (centro) width ancho de la regla un número, acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número noshade eliminar el sombreado de la regla no puede tomar valores

Texto Sangrado de texto <blockquote> La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. Queridos usuarios, <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacuten. </blockquote>

Texto Formatear el texto <font> ... Las propiedades del texto pueden modificarse a través de la etiqueta <font>. <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.urolalde.com</font> Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

Texto Formatear el texto <font> ... Las propiedades del texto pueden modificarse a través de la etiqueta <font>. <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.urolalde.com</font> Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

Texto También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. <body> <basefont color="#006699" size="4" face="Arial">

Texto Resaltado del texto <b> ... Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. Etiqueta Significado Ejemplo <b> negrita curso HTML aulaclic <i> cursiva <u> subrayado <s> tachado <tt> teletipo (máquina de escribir) <big> aumenta el tamaño de la fuente <small> disminuye el tamaño de la fuente

Texto Etiqueta Significado Ejemplo cita curso HTML aulaclic <cite> cita curso HTML aulaclic <code> ejemplo de código <dfn> definición <del> eliminado <em> énfasis <ins> insertado <kbd> teclado <samp> muestra <strong> destacado <sub> subíndice curso HTML aulaclic <sup> superíndice <var> variable

Texto Párrafos <p> ...   El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. Las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes. Habría que escribir: <p align="center">Bienvenidos a mi p&aacutegina.</p> <p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>

Texto Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>, para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes. <div align="center">Bienvenidos a mi p&aacutegina.</div> <div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div> También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado. <center>Bienvenidos a mi p&aacutegina.</center>

Texto Marquesinas <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Behavior: puede modificarse el tipo de movimiento. Alternate: de lado a lado de la ventana. Scroll: de un lado a otro Slide: de un lado a otro pero una vez. Direction : modificarse la dirección en la que se moverá down : (de arriba a abajo up : de abajo a arriba right: de izquierda a derecha left: de derecha a izquierda También es posible establecer un color de fondo, a través del atributo bgcolor. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee>  

Listas Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato Periquito Habría que escribir: ... <li>Perro</li> <li>Gato</li> <li>Periquito</li>   Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación.

Listas Lista desordenada <ul> Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado). Perro Gato Periquito Habría que escribir: <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul>

Listas Lista ordenada <ol> Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Perro Gato Periquito <ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol>

Listas Anidar listas <ol> <li>Lunes </li> <ul type="square"> <li>Ingles</li> <li>Frances</li> </ul> </li> <li>Martes <ol type="A"> <li>Correccion de ejercicios</li> <li>Proponer ejercicios </li> </ol>

Hipervinculos Hiperenlace <a> Es un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. Href: se especifica la página a la que está asociado el enlace. <a href="http://www. urolalde.com">Visita www. urolalde.com</a>

Hipervinculos Tipos de referencias Referencia absoluta: Conduce a una ubicación externa al sitio en el que se encuentra el documento. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. <a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Hipervinculos Tipos de referencias Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. <a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a> Punto de fijación: Conduce a un punto dentro de un documento. <a href="t_4_1.htm#miancla ">Punto de fijacion Tipos de enlaces</a> <a name=“miancla"></a>Texto con ancla

Hipervinculos Destino del enlace _blank: Abre el documento vinculado en una ventana nueva del navegador. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.   <a href="http://www.urolalde.com" target ="_blank">Visita www.urolalde.com en una ventana nueva</a>

Hipervinculos Formato de los enlaces Un texto que tiene un vínculo asociado suele aparecer subrayado. Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando. Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él. Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). ... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> <a href="http://www. urolalde.com" target ="_blank">www.urolalde.com</a>

Hipervinculos Correo electrónico: Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo". <a href="mailto:webmaster@urolalde.com">e-mail para urolalde</a> Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la dirección de correo. Rellenar asunto: <a href="mailto:webmaster@urolalde.com?subject=el asunto del mensaje">e-mail para urolalde </a>

Hipervinculos Vínculo a ficheros para descarga: El valor del atributo href normalmente será una página web pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf. <a href="carta.doc" tarjet=_blank >haz clic aquí para descargarte el fichero</a>

Imagenes <img> Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. <img src="imagenes/logo_animales.gif">

Imagenes Texto alternativo Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imágenes. En lugar de la imagen se mostrará lo siguiente: Imagen gato   El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, verás como aparece el texto Imagen gato. El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo.

Imagenes Borde de una imagen El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde. <img src="imagenes/logo_animales.gif" border="4" > Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde será el color establecido para los vínculos.

Imagenes Tamaño de una imagen Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original. A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página. <img src="imagenes/logo_animales.gif" width="200" height="80">

Imagenes Alineación de una imagen La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Tablas Tabla <table> Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna.     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.

Tablas Fila <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> </table>

Tablas Columna o celda <td> Es necesario también especificar el número de columnas. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. 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. <table border="1"> <tr> <td>Sabado</td> <td>Domingo</td> </tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> <td>Curso Frontpage</td> <td>Curso Flash</td> Sábado Domingo Curso HTML Curso Dreamweaver Curso Frontpage Curso Flash

Tablas Formato de la tabla 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 border grosor del borde 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 bordercolor color del borde <table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99">

Tablas Formato de las celdas 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 bordercolor color del borde

Tablas Encabezado de columna <th>   <table width="50%" border="1" align="center"> <tr> <th>Sabado</th> <th>Domingo</th> </tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> <td>Curso Frontpage</td> <td>Curso Flash</td> </table>

Tablas Título de tabla <caption>   Es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir después de la etiqueta <table>. <table width="50%" border="1" align="center"> <caption>Titulo de la tabla <th>Sabado</th> ... </tr> </table>

Combinar celdas Combinar celdas Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. colspan: se especifica el número de columnas por las que se extenderá la celda. rowspan: se especifica el número de filas por las que se extenderá la celda.

Formularios Formulario <form> Un formulario es un elemento que permite recoger datos introducidos por el usuario. Se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.

Formularios <form action="mailto:formularios@urolalde.com" method="post" enctype="text/plain" > ... </form> Action: indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario. Enctype indica el modo en que será cifrada la información para su envío. Method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. Get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.

Formularios Áreas de texto <textarea>   Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>. Name: indica el nombre del área de texto. Rows: indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto. Cols: indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto. <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea>

Formularios Campo de texto: Para insertar un campo de texto, el atributo type debe tener el valor text. Size: determina el ancho de la caja. Maxlength: indica el número de caracteres que podrán ser insertados en el campo de texto. Value: indica el valor inicial del campo de texto. <input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

Formularios Campo de contraseña: Para insertar un campo de contraseña, el atributo type debe tener el valor password. El resto de atributos son los mismos que para un campo de texto normal. <input name="contra" type="password" value="contraseña" size="20" maxlength="15">

Formularios Botones: Para insertar un botón, el atributo type debe tener el valor submit, restore o button. Si el valor es submit, al pulsar sobre el botón se enviará el formulario. Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción. El atributo value indica el texto que mostrará el botón. <input name="boton" type="submit" value="Enviar">

Formularios Casilla de verificación: Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox. Value: indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores. <input name="casilla" type="checkbox" value="acepto" checked>

Formularios Botón de opción: Para insertar un botón de opción, el atributo type debe tener el valor radio. Value: indica el valor asociado al botón de opción. La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Se insertan varios botones de opción con el mismo nombre y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable. <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">

Formularios Campos de selección <select> ... Los campos de selección se utilizan para insertar menús y listas desplegables. Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario. Name: indica el nombre del menú o lista. Size: indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo. Multiple: indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Disabled: indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Value: indica el valor a enviar si se selecciona el elemento. Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.

Formularios <select name="mascota"> <option selected>--- Elige animal --- </option> <option>Perro</option> <option>Gato</option> </select>

Formularios <select name="animal" size="3" multiple> <option selected>---Elige animales--- </option> <option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>

Contenedores o capas Las capas o contenedores son unos recuadros o espacios rectangulares que pueden colocarse en cualquier parte de la página. En ellas, podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseño a las páginas HTML.

Div Podemos insertar una capa o contenedor a través de las etiquetas <div> y </div> <html> <head> <title>Ejemplo etiqueta div</title> </head> <body> <div style="border: 1px solid red;"> Cabecera de la página. </div> <div style="border: 1px solid green;"> Cuerpo de la página. <div style="border: 1px solid blue;"> Pie de la página </body> </html>

Span La etiqueta span al igual que casi todas las etiquetas en HTML tiene su etiqueta de apertura <span> y su respectiva etiqueta de cierre </span>. La etiqueta span sirve normalmente para crear subdivisiones dentro de una capa (div). Esto nos permite aplicar estilos diferentes a cada subdivisión sin necesidad de crear nuevas capas.

Span <html> <head> <title>Ejemplo etiqueta span</title> </head> <body> <div style="text-align: center; font-size: 60px; border: 1px solid red;"> Cabecera <span style="color: green;">de</span> la <span style="color: orange;">página</span>. </div> <div style="border: 1px solid green;"> Cuerpo de la página. <div style="border: 1px solid blue;"> Pie de la página </body> </html>

CSS BASICO

INTRODUCCIÓN A CSS

¿Qué es CSS? Creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. Ventajas: Mejora la accesibilidad del documento, Reduce la complejidad de su mantenimiento Permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Historia Las hojas de estilos aparecieron en el año 1970. El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares. En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS. A finales de 1996, el W3C publicó la primera recomendación oficial. El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial.

Soporte CSS en los navegadores El trabajo del diseñador web siempre está limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Navegador CSS 1 CSS 2.1 CSS 3 Chrome Completo desde la versión 85 del motor Completo Todos los selectores, pseudo-clases y muchas propiedades Internet Explorer Completo desde la versión 7.0 del navegador Todos los selectores, pseudo-clases y muchas propiedades a partir de la versión 10.0 del navegador Firefox Completo desde la versión 1.0 del navegador Safari Opera

Funcionamiento básico de CSS Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:

Funcionamiento básico de CSS La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:

Incluir CSS En el mismo documento HTML Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta<style> de HTML y solamente se pueden incluir en el head. <style type="text/css"> p { color: black; font-family: Verdana; } </style>

Incluir CSS Definir CSS en un archivo externo Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css   1) Se crea un archivo de texto y se le añade solamente el siguiente contenido: 2) Se guarda el archivo de texto con el nombre nombredelacss.css 3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link> <link rel="stylesheet“ type="text/css"href="/css/estilos.css“ media="screen"/>

Etiqueta link Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS: rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet. type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

Medias disponibles CSS permite definir diferentes estilos para diferentes dispositivos: Medio Descripción all Todos los medios definidos braille Dispositivos táctiles que emplean el sistema braille embosed Impresoras braille handheld Dispositivos de mano: móviles, PDA, etc. print Impresoras y navegadores en el modo "Vista Previa para Imprimir" projection Proyectores y dispositivos para presentaciones screen Pantallas de ordenador speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas tty Dispositivos textuales limitados como teletipos y terminales de texto tv Televisores y dispositivos con resolución baja

Glosario Básico Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc. Valor: establece el nuevo valor de la característica modificada en el elemento.

Comentarios El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante /* Este es un comentario en CSS Esta es la segund linea cmentada*/

Selectores A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. La mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.

Selectores Selector universal Se utiliza para seleccionar todos los elementos de la página. *{margin:0;padding:0;} El selector universal se indica mediante un asterisco (*).

Selectores Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. p { ...} El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: h1 {color:red;}  h2 {color:blue;}  p {color:black;}

Selectores Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos: h1 {color:#8A8E27; font-weight:normal; font-family: Arial, Helvetica,sans-serif;}

Selectores CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,). h1, h2, h3 { color:#8A8E27; font-weight:normal; font- family: Arial;}

Selectores Selector descendente Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. li a { color: red; }

Selectores p * a {color:red;} La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo<p>.

Selectores Selector de clase Si se considera el siguiente código HTML de ejemplo: <body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>

Selectores <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body> .destacado{color:red;}

Selectores ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico: p.destacado{color:red} El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado".

Selectores Selectores de ID El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. Se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS: #destacado{color:red;}  <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>

Selectores Combinación de selectores básicos .aviso.especial{ ... } Selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso". ul#menuPrincipal li.destacado a#inicio{ ... } El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de una lista <ul>con un atributo id igual a menuPrincipal.

Selectores Selector de hijos Se trata de un selector similar al selector descendente. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>): p > a {color:red;} <p><a href="#">Enlace1</a></p>

Selectores Selector adyacente El selector adyacente se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo + para separar los dos elementos: elemento1 + elemento2 { ... } <body> <h1>Titulo1</h1> <h2>Subtítulo</h2>... <h2>Otro subtítulo</h2>... </body> h2 {color:green;} h1 + h2 {color:red}

Selectores Selector de atributos Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. Los cuatro tipos de selectores de atributos son: [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor. [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamadonombre_atributo con un valor igual a valor. [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor. [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento

Selectores /* Se muestran de color azul todos los enlaces que tengan un atributo "class", independientemente de su valor */ a[class]{color:blue;} un atributo "class" con el valor "externo" */ a[class="externo"]{color:blue;} /* Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com" */ a[href="http://www.ejemplo.com"]{color:blue;} un atributo "class" en el que al menos uno de sus valores sea "externo" */ a[class~="externo"]{color:blue;} /* Selecciona todos los elementos de la página cuyo atributo "lang" sea igual a "en", es decir, todos los elementos en inglés */ *[lang=en]{ ... } "lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */ *[lang|="es"]{color:red}

Herencia Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. <html> <head> <title>Ejemplo de herencia de estilos</title> <style type="text/css"> body { color: blue; } </style> </head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>

Herencia Anularlo: <html > <head> <title>Ejemplo de herencia de estilos</title> <style type="text/css"> body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p { color: red; } </style> </head>   <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>

Herencia Anularlo: <html > <head> <title>Ejemplo de herencia de estilos</title> <style type="text/css"> body { font-family: Arial; color: black; } h1 { font-family: Verdana; } p { color: red; } </style> </head>   <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no muy largo.</p> </body> </html>

Colisiones Es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. p {color:red;} p {color:blue;} CSS tiene un mecanismo de resolución de colisiones: el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseñador) la importancia de cada regla lo específico que sea el selector

Colisiones Determinar todas las declaraciones que se aplican al elemento Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important). Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones. Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.

Colisiones p {color:red;} p#especial{color:green;} *{color:blue;}

Unidades de medida Se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. CSS divide las unidades de medida en dos grupos: Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Unidades de medida Unidades absolutas Una medida indicada mediante unidades absolutas está completamente definida. in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros. cm, centímetros. mm, milímetros. pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros. pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.

Unidades de medida Unidades relativas La unidades relativas, no están completamente definidas, ya que su valor siempre está referenciado respecto a otro valor. em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra del elemento. ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo y tamaño de letra del elemento. px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página HTML.

Unidades de medida Porcentajes Un porcentaje está formado por un valor numérico seguido del símbolo % y siempre está referenciado a otra medida. Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño de letra de los elementos: body {font-size:1em;} h1 {font-size:200%;} h2 {font-size:150%;}

Recomendaciones Se recomienda el uso de unidades relativas siempre que sea posible. Recomienda el uso de la unidad em para indicar el tamaño del texto y para todas las medidas que sean posibles. Normalmente se utilizan píxel y porcentajes para definir el layout del documento (básicamente, la anchura de las columnas y de los elementos de las páginas).

Colores Palabras clave CSS define 17 palabras clave: aqua, black, blue, fuchsia, gray, green, lime,  maroon, navy, olive, orange, purple, red, silve r, teal,white, yellow

Colores RGB decimal En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a los colores. RGB: consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color.

Colores RGB decimal En el campo del diseño gráfico, se han definido varios modelos para hacer referencia a los colores. RGB: consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener ese color. p {color:rgb(71,98,176);}

Colores RGB hexadecimal Utiliza 16 símbolos para representar sus números. 10 símbolos numéricos + seis letras (de la A a la F). p {color:#4762B0;}

Colores RGB hexadecimal Utiliza 16 símbolos para representar sus números. 10 símbolos numéricos + seis letras (de la A a la F). p {color:#4762B0;}

Colores Colores del sistema Los colores del sistema hacen referencia al color que muestran algunos elementos del sistema operativo del usuario. Existen varios colores definidos, como por ejemplo ActiveBorder, que hace referencia al color del borde de las ventanas activas. http://www.w3.org/TR/CSS21/ui.html#syste m-colors

Colores Colores web safe En la década de los 90 los monitores de los usuarios no eran capaces de mostrar más de 256colores diferentes. A partir de todos los colores disponibles, se eligieron 216 colores que formaron la paleta de colores "web safe". Esta paleta de colores podía ser utilizada por los diseñadores con la seguridad de que se verían correctamente en cualquier navegador de cualquier sistema operativo de cualquier usuario. http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors

Modelo de cajas Modelo de cajas El modelo de cajas condiciona el diseño de todas las páginas web. Es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

Modelo de cajas

Modelo de cajas

Modelo de cajas Las partes que componen cada caja: Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Borde (border): línea que encierra completamente el contenido y su relleno. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

Anchura y altura Propiedad width Valores unidad de medida | porcentaje | auto | inherit Se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla Valor inicial auto Descripción Establece la anchura de un elemento Inherit: indica que la anchura del elemento se hereda de su elemento padre. Auto: indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Anchura y altura Propiedad height Valores unidad de medida | porcentaje | auto | inherit Se aplica a Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla Valor inicial auto Descripción Establece la altura de un elemento Inherit: indica que la anchura del elemento se hereda de su elemento padre. Auto: indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Margen Propiedades margin-top, margin-right, margin-bottom, margin-left Valores unidad de medida | porcentaje | auto | inherit Se aplica a Todos los elementos, salvo margin-top y margin-bottom que sólo se aplican a los elementos de bloque y a las imágenes Valor inicial Descripción Establece cada uno de los márgenes horizontales y verticales de un elemento Inherit: indica que la anchura del elemento se hereda de su elemento padre. Auto: indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Margen div img {margin-top:.5em; margin-bottom:.5em; margin-left:1em; Propiedad margin Valores ( unidad de medida | porcentaje | auto | inherit Se aplica a Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas Valor inicial - Descripción Establece de forma directa todos los márgenes de un elemento div img {margin-top:.5em; margin-bottom:.5em; margin-left:1em; margin-right:.5em;} div img {margin:.5em.5em .5m 1em;}

Margen Cuando se juntan dos o más márgenes verticales, se fusionan de forma automática y la altura del nuevo margen será igual a la altura del margen más alto de los que se han fusionado.

Margen Si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado:

Margen Si un elemento está contenido dentro de otro elemento, sus márgenes verticales se fusionan y resultan en un nuevo margen de la misma altura que el mayor margen de los que se han fusionado: se puede evitar este comportamiento con: (padding: 1px) (border: 1px solid transparent)

Relleno padding-top, padding-right, padding-bottom, padding-left Propiedades padding-top, padding-right, padding-bottom, padding-left Valores unidad de medida | porcentaje | inherit Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla Valor inicial Descripción Establece cada uno de los rellenos horizontales y verticales de un elemento

Relleno body {padding:2em}/* Todos los rellenos valen 2em */ Propiedad padding Valores ( unidad de medida | porcentaje | inherit Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla Valor inicial - Descripción Establece de forma directa todos los rellenos de los elementos body {padding:2em}/* Todos los rellenos valen 2em */ body {padding:1em2em3em4em}/* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em */

Bordes Anchura La unidad de medida más habitual para establecer el grosor de los bordes es el píxel. Propiedades border-top-width, border-right-width, border-bottom-width,border- left-width Valores ( unidad de medida | thin | medium | thick ) | inherit Se aplica a Todos los elementos Valor inicial Medium Descripción Establece la anchura de cada uno de los cuatro bordes de los elementos

Bordes div {border-top-width:10px; border-right-width:1em; border-bottom-width:thick; border-left-width:thin;}

Bordes p {border-width:thin}/* thin thin thin thin */ Propiedad border-width Valores ( unidad de medida | thin | medium | thick ) {1, 4} | inherit Se aplica a Todos los elementos Valor inicial Medium Descripción Establece la anchura de todos los bordes del elemento p {border-width:thin}/* thin thin thin thin */ p {border-width:thinthick}/* thin thick thin thick */ p {border-width:thinthickmedium}/* thin thick medium thick */ p {border-width:thinthickmediumthin}/* thin thick medium thin */

Bordes Color div {border-top-color:#CC0000; border-right-color:blue; Propiedades border-top-color, border-right-color, border-bottom-color, border- left-color Valores color | transparent | inherit Se aplica a Todos los elementos Valor inicial - Descripción Establece el color de cada uno de los cuatro bordes de los elementos div {border-top-color:#CC0000; border-right-color:blue; border-bottom-color:#00FF00; border-left-color:#CCC;}

Bordes Color border-color ( color | transparent ) {1, 4} | inherit Propiedad border-color Valores ( color | transparent ) {1, 4} | inherit Se aplica a Todos los elementos Valor inicial - Descripción Establece el color de todos los bordes del elemento

Bordes Estilo: div {border-top-style:dashed; Propiedades border-top-style, border-right-style, border-bottom-style, border- left-style Valores none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit Se aplica a Todos los elementos Valor inicial none Descripción Establece el estilo de cada uno de los cuatro bordes de los elementos div {border-top-style:dashed; border-right-style:double; border-bottom-style:dotted; border-left-style:solid;}

Bordes

Bordes p { border: 5px solid red; } Propiedades border-top, border-right, border-bottom, border-left Valores ( unidad de medida_borde || color_borde || estilo_borde ) | inherit Se aplica a Todos los elementos Valor inicial - Descripción Establece el estilo completo de cada uno de los cuatro bordes de los elementos p {     border: 5px solid red; }

Fondos El fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno. Para establecer un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento <body>. background-color background-image background-attachment background-repeat

Fondos body {background-color:#F5F5F5;} background-color Propiedad background-color Valores color | transparent | inherit Se aplica a Todos los elementos Valor inicial transparent Descripción Establece un color de fondo para los elementos body {background-color:#F5F5F5;}

Fondos body {background-image:url("imagenes/fondo.png")} Propiedad background-image Valores url | none | inherit Se aplica a Todos los elementos Valor inicial none Descripción Establece una imagen como fondo para los elementos body {background-image:url("imagenes/fondo.png")}

Fondos #hdr{ background:url("/images/ds.gif")repeat-x; width:100%; } Propiedad background-repeat Valores repeat | repeat-x | repeat-y | no-repeat | inherit Se aplica a Todos los elementos Valor inicial repeat Descripción Controla la forma en la que se repiten las imágenes de fondo #hdr{ background:url("/images/ds.gif")repeat-x; width:100%; }

Fondos #hdr{ background:url("/images/ds.gif")repeat-x; width:100%; } Propiedad background-position Valores ( ( porcentaje | unidad de medida | left | center | right ) ( porcentaje | unidad de medida | top | center | bottom )? ) | ( ( left | center | right ) || ( top | center | bottom ) ) | inherit Se aplica a Todos los elementos Valor inicial 0% 0% Descripción Controla la posición en la que se muestra la imagen en el fondo del elemento #hdr{ background:url("/images/ds.gif")repeat-x; width:100%; }

Fondos #caja1{ background-image:url("images/help.png"); background-repeat:no-repeat; background-position:bottom left; } #caja2{ background-position:right top; #caja3{ background-position:50% 50%;

Fondos Para hacer que una imagen de fondo se muestre fija al desplazar la ventana del navegador Propiedad background-attachment Valores scroll | fixed | inherit Se aplica a Todos los elementos Valor inicial scroll Descripción Controla la forma en la que se visualiza la imagen de fondo: permanece fija cuando se hace scroll en la ventana del navegador o se desplaza junto con la ventana

Posicionamiento font, i, img, input, Tipos de elementos El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque. Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea.   blockquote, center,div, dl,form, h1, h2, h3, h4, h5, h6, hr,table, ul … Los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos. a, big, br, cite, em,  font, i, img, input, 

Posicionamiento El estándar de CSS define cinco modelos diferentes para posicionar una caja: Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario. Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original. Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento. Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador. Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

Posicionamiento position Propiedad position Valores static | relative | absolute | fixed | inherit Se aplica a Todos los elementos Valor inicial static Descripción Selecciona el posicionamiento con el que se mostrará el elemento

Posicionamiento Posición normal: El posicionamiento normal o estático es el modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas.

Posicionamiento Posición relativo: El posicionamiento relativo desplaza una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right,bottom y left.

Posicionamiento img.desplazada{ position:relative; top:8em; } <img class="desplazada" src="imagenes/imagen.png" alt="Imagen genérica" /> <img src="imagenes/imagen.png" alt="Imagen genérica" />

Posicionamiento Posicionamiento absoluto: El posicionamiento absoluto se emplea para establecer de forma exacta la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top,right, bottom y left

Posicionamiento div { border: 2px solid #CCC; padding: 1em; margin: 1em 0 1em 4em; width: 300px; } <div> <imgsrc="imagenes/imagen.png"alt="Imagen genérica"/> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ullamcorper velit eu ipsum. Ut pellentesque, est in volutpat cursus, risus mi viverra augue, at pulvinar turpis leo sed orci. Donec ipsum. Curabitur felis dui, ultrices ut, sollicitudin vel, rutrum at, tellus.</p> </div> div img {position:absolute;top:50px;left:50px;}

Posicionamiento Obtiene la lista de elementos contenedores de la imagen: <div> y <body>. Recorre la lista de elementos contenedores desde el más cercano a la imagen (el <div>) hasta terminar en el <body> buscando el primer elemento contenedor que esté posicionado. El posicionamiento de todos los elementos contenedores es el normal o estático, ya que ni siquiera tienen establecida la propiedad position Como ningún elemento contenedor está posicionado, la referencia es la ventana del navegador. A partir de esa referencia, la caja de la imagen se desplaza 50px hacia la derecha (left: 50px) y otros 50px de forma descendente (top: 50px).

Posicionamiento div { border:2pxsolid#CCC; padding:1em; margin:1em01em4em; width:300px; position:relative; }  

Posicionamiento Posicionamiento fijo El estándar CSS considera que el posicionamiento fijo es un caso particular del posicionamiento absoluto, sólo se diferencian en el comportamiento de las cajas posicionadas. Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador.

Posicionamiento Posicionamiento flotante Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba.

Posicionamiento float left | right | none | inherit Propiedad float Valores left | right | none | inherit Se aplica a Todos los elementos Valor inicial none Descripción Establece el tipo de posicionamiento flotante del elemento

Posicionamiento img { float:left; } float Propiedad float Valores left | right | none | inherit Se aplica a Todos los elementos Valor inicial none Descripción Establece el tipo de posicionamiento flotante del elemento img { float:left; }

Posicionamiento La propiedad clear: Permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante.

Posicionamiento clear none | left | right | both | inherit Propiedad clear Valores none | left | right | both | inherit Se aplica a Todos los elementos de bloque Valor inicial none Descripción Indica el lado del elemento que no debe ser adyacente a ninguna caja flotante

Visualización CSS define otras cuatro propiedades para controlar su visualización: display, visibility, overflow y z- index.

Visualización Propiedades display y visibility Las dos propiedades permiten ocultar cualquier elemento de la página. Habitualmente se utilizan junto con JavaScript para crear efectos dinámicos como mostrar y ocultar determinados textos o imágenes cuando el usuario pincha sobre ellos.

Visualización Display: permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar. Visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.

Visualización

Visualización display Propiedad display Valores inline | block | none | list-item | run-in | inline-block | table | inline-table | table-row-group | table- header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit Se aplica a Todos los elementos Valor inicial inline Descripción Permite controlar la forma de visualizar un elemento e incluso ocultarlo - block muestra un elemento como si fuera un elemento de bloque, independientemente del tipo de elemento que se trate. - inline visualiza un elemento en forma de elemento en línea, independientemente del tipo de elemento que se trate. - none oculta un elemento y hace que desaparezca de la página.

Visualización visibility Propiedad visibility Valores visible | hidden | collapse | inherit Se aplica a Todos los elementos Valor inicial visible Descripción Permite hacer visibles e invisibles a los elementos - Collapse: sólo se puede utilizar en las filas, grupos de filas, columnas y grupos de columnas de una tabla. Su efecto es similar al de la propiedad display, ya que oculta completamente la fila y/o columna y se pueden mostrar otros contenidos en ese lugar. Si se utiliza el valor collapse sobre cualquier otro tipo de elemento, su efecto es idéntico al valor hidden.

Visualización Z-index: CSS permite controlar la posición tridimensional de las cajas posicionadas. De esta forma, es posible indicar las cajas que se muestran delante o detrás de otras cajas cuando se producen solapamientos. Propiedad z-index Valores auto | numero | inherit Se aplica a Elementos que han sido posicionados explícitamente Valor inicial auto Descripción Establece el nivel tridimensional en el que se muestra el elemento

Visualización div {position:absolute;} #caja1{z-index:5;top:1em;left:8em;} #caja2{z-index:15;top:5em;left:5em;} #caja3{z-index:25;top:2em;left:2em;}   <div id="caja1">Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1 - Caja 1</div>   <div id="caja2">Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2 - Caja 2</div> <div id="caja3">Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3 - Caja 3</div>

Texto Tipografía La propiedad básica que define CSS relacionada con la tipografía se denomina color y se utiliza para establecer el color de la letra. Propiedad color Valores color | inherit Se aplica a Todos los elementos Valor inicial Depende del navegador Descripción Establece el color de letra utilizado para el texto

Texto p { font-family: "Times New Roman", Times, serif } font-family Propiedad font-family Valores (( nombre_familia | familia_generica ) (,nombre_familia | familia_generica)* ) | inherit Se aplica a Todos los elementos Valor inicial Depende del navegador Descripción Establece el tipo de letra utilizado para el texto p {     font-family: "Times New Roman", Times, serif }

Texto Tamaño_absoluto: indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-small, x- small, small, medium, large, x-large, xx-large. Tamaño_relativo: indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (larger, smaller) que toman como referencia el tamaño de letra del elemento padre. Propiedad font-size Valores tamaño_absoluto | tamaño_relativo | unidad de medida | porcentaje | inherit Se aplica a Todos los elementos Valor inicial medium Descripción Establece el tamaño de letra utilizado para el texto

Texto

Texto font-weight font-style Propiedad font-weight Valores normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit Se aplica a Todos los elementos Valor inicial normal Descripción Establece la anchura de la letra utilizada para el texto Propiedad font-style Valores normal | italic | oblique | inherit Se aplica a Todos los elementos Valor inicial normal Descripción Establece el estilo de la letra utilizada para el texto

Texto font:bold 1em "Trebuchet MS", Arial,Sans-Serif; font Propiedad font Valores ( ( font-style || font-variant || font-weight )? font-size ( / line-height )? font-family ) | caption | icon | menu | message-box | small-caption | status-bar | inherit Se aplica a Todos los elementos Valor inicial - Descripción Permite indicar de forma directa todas las propiedades de la tipografía de un texto font:bold 1em "Trebuchet MS", Arial,Sans-Serif;

Texto text-align left | right | center | justify | inherit Propiedad text-align Valores left | right | center | justify | inherit Se aplica a Elementos de bloque y celdas de tabla Valor inicial left Descripción Establece la alineación del contenido del elemento

Texto La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos, como por ejemplo las imágenes. Propiedad line-height Valores normal | numero | unidad de medida | porcentaje | inherit Se aplica a Todos los elementos Valor inicial normal Descripción Permite establecer la altura de línea de los elementos

Texto

Texto text-decoration text-transform Propiedad text-decoration Valores none | ( underline || overline || line-through || blink ) | inherit Se aplica a Todos los elementos Valor inicial none Descripción Establece la decoración del texto (subrayado, tachado, parpadeante, etc.) Propiedad text-transform Valores capitalize | uppercase | lowercase | none | inherit Se aplica a Todos los elementos Valor inicial none Descripción Transforma el texto original (lo transforma a mayúsculas, a minúsculas, etc.)

Texto

Texto text-indent unidad de medida | porcentaje | inherit Propiedad text-indent Valores unidad de medida | porcentaje | inherit Se aplica a Los elementos de bloque y las celdas de tabla Valor inicial Descripción Tabula desde la izquierda la primera línea del texto original

Texto letter-spacing word-spacing normal | unidad de medida | inherit Propiedad letter-spacing Valores normal | unidad de medida | inherit Se aplica a Todos los elementos Valor inicial normal Descripción Permite establecer el espacio entre las letras que forman las palabras del texto word-spacing Permite establecer el espacio entre las palabras que forman el texto

Texto

Texto CSS permite aplicar estilos a la primera letra del texto mediante el pseudo-elemento:first- letter. p:first-line { font-size: 2.5em; font-weight: bold;}  

Enlaces Tamaño, color y decoración Utilizando las propiedades text-decoration y font- weight se pueden conseguir estilos como estos: a {margin:1em0;display:block;}   .alternativo{color:#CC0000;} .simple{text-decoration:none;} .importante{font-weight:bold;font-size:1.3em;} .raro{text-decoration:overline;} <a href="#">Enlace con el estilo por defecto</a> <a class="alternativo" href="#">Enlace de color rojo</a> <a class="simple" href="#">Enlace sin subrayado</a> <a class="importante" href="#">Enlace muy importante</a> <a class="raro" href="#">Enlace con un estilo raro</a>

Enlaces Pseudoclases: :link: aún no han sido visitados por el usuario. :visited: han sido visitados anteriormente por el usuario. :hover: aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón. :active: aplica estilos al enlace que está pinchando el usuario.

Enlaces El siguiente ejemplo muestra cómo ocultar el subrayado cuando el usuario pasa el ratón por encima de cualquier enlace de la página: a:hover {text-decoration:none;}

Enlaces Imágenes según el tipo de enlace En ocasiones, puede resultar útil incluir un pequeño icono al lado de un enlace para indicar el tipo de contenido que enlaza: Utilizando la propiedad background (y background-image):

Imágenes Establecer la anchura y altura de las imágenes Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real: #destacada{ width:120px; height:250px; }   <img id="destacada" src="imagen.png" />

Imágenes Eliminar el borde de las imágenes con enlaces Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde azul grueso alrededor de las imágenes. Por tanto, una de las reglas más utilizadas en los archivos CSS es la que elimina los bordes de las imágenes con enlaces: img {border:none;}

Imágenes Sombra (drop shadow): div {     box-shadow: 10px 10px 5px black; }

Listas La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.

Listas La propiedad list-style-position permite controlar la colocación de las viñetas.

Listas Cuando se requiere personalizar el aspecto de las viñetas, se debe emplear la propiedad list-style-image. ul.flecha{ list-style-image:url("imagenes/flecha.png");}

Listas Transformación de una lista sencilla de enlaces en un menú vertical de navegación. Lista inicial: <ul> <li><a href="#">Elemento 1</a></li> <li><a href="#">Elemento 2</a></li> <li><a href="#">Elemento 3</a></li> <li><a href="#">Elemento 4</a></li> <li><a href="#">Elemento 5</a></li> <li><a href="#">Elemento 6</a></li> </ul>

Listas 1) Definir la anchura del menú: ul{width:180px;} 2) Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto: ul{ list-style:none; margin:0; padding:0; width:180px;}

Listas 3) Añadir un borde al menú de navegación y establecer el color de fondo y los bordes de cada elemento del menú: ul { border:1px solid #7C7C7C; border-bottom:none; list-style:none; margin:0; padding:0; width:180px; } ul li { Background:#28EAD4; border-bottom:1px solid #7C7C7C; border-top:1px solid #FFF;

Listas 4) Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque para que ocupen todo el espacio de cada <li> del menú, añadir un espacio de relleno y modificar los colores y la decoración por defecto: ul li a { color:red; display:block; padding:.2em 0 .2em .5em; text-decoration:none; }

Listas Partiendo de la misma lista de elementos del menú vertical, resulta muy sencillo crear un menú de navegación horizontal. Código principal: <ul> <li><a href="#">Elemento 1</a></li> <li><a href="#">Elemento 2</a></li> <li><a href="#">Elemento 3</a></li> <li><a href="#">Elemento 4</a></li> <li><a href="#">Elemento 5</a></li> </ul>

Listas 1) Aplicar los estilos CSS básicos para establecer el estilo del menú: ul{ background-color:black; list-style:none; / margin:auto; padding:0; width: 800px; height: 30px;}

Listas 2) Establecer la anchura de los elementos del menú. Además, se posiciona de forma flotante los elementos de la lista mediante la propiedad float. ul li { float:left; width:133px; margin-top: 5px; text-align: center;}

Listas ul li a { color:blue; text-decoration:none; }

Tablas La propiedad que permite seleccionar el modelo de bordes es border-collapse: Collapse: fusiona de forma automática los bordes de las celdas adyacentes. (Igual que cellspacing=0) Separate fuerza a que cada celda muestre sus cuatro bordes. Propiedad border-collapse Valores collapse | separate | inherit Se aplica a Todas las tablas Valor inicial separate Descripción Define el mecanismo de fusión de los bordes de las celdas adyacentes de una tabla

Tablas Table { border-collapse:separate; } border-collapse: Separate border-collapse: Collapse Table { border-collapse:separate; }

Tablas Si se opta por el modelo separate (que es el que se aplica si no se indica lo contrario) se puede utilizar la propiedad border- spacing para controlar la separación entre los bordes de cada celda. Propiedad border-spacing Valores unidad de medida unidad de medida? | inherit Se aplica a Todas las tablas Valor inicial Descripción Establece la separación entre los bordes de las celdas adyacentes de una tabla

Tablas table {     border-collapse: separate;     border-spacing: 5px; }

Tablas El tratamiento que reciben las celdas vacías de una tabla se controla mediante la propiedad empty-cells. Sólo se aplica cuando el modelo de bordes de la tabla es de tipo separate. Propiedad empty-cells Valores show | hide | inherit Se aplica a Celdas de una tabla Valor inicial show Descripción Define el mecanismo utilizado para el tratamiento de las celdas vacías de una tabla

Tablas table { empty-cells:show; } table { empty-cells:hide; }

Tablas La propiedad caption-side permite controlar la posición del título de la tabla. Propiedad caption-side Valores top | bottom | inherit Se aplica a Los elementos caption Valor inicial top Descripción Establece la posición del título de la tabla

Tablas table tr:hover { background:#FFFF66; } La pseudo-clase :hover permite añadir un color cuando el usuario pasa el raton por encima de una fila. table tr:hover { background:#FFFF66; }

Formularios Mejoras en los campos de texto Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de texto. Form input { padding: .2em; }

Formularios div { margin:.4em 0; } div label { width:25%; float:left;

Formularios Resaltar el campo seleccionado Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. input:focus { border:2pxsolid#000; background:#F3F3F3; }

Layout La solución más sencilla para evitar los grandes espacios en blanco consiste en crear páginas con una anchura fija adecuada y centrar la página horizontalmente respecto de la ventana del navegador. #contenedor{ width:300px; margin:0 auto; }  

Layout #contenedor{ width:700px; } #cabecera{ #menu{ float:left; #contenido{ width:550px; #pie{ clear:both;  

Layout #contenedor{ } #cabecera{ #menu{ float:left; width:15%; #contenido{ width:85%; #contenido#principal{ width:80%; #contenido#secundario{ width:20%;   #pie{ clear:both;

Layout Alturas/anchuras máximas y mínimas max-width min-width Propiedad max-width Valores unidad de medida | porcentaje | none | inherit Se aplica a Todos los elementos salvo filas y grupos de filas de tablas Valor inicial none Descripción Permite definir la anchura máxima de un elemento min-width unidad de medida | porcentaje | inherit Permite definir la anchura mínima de un elemento

Layouts max-height min-height Propiedad max-height Valores unidad de medida | porcentaje | none | inherit Se aplica a Todos los elementos salvo columnas y grupos de columnas de tablas Valor inicial none Descripción Permite definir la altura máxima de un elemento min-height unidad de medida | porcentaje | inherit Permite definir la altura mínima de un elemento

Print Media Estas versiones optimizadas para impresora eliminan los contenidos superfluos, modifican o eliminan las imágenes y colores de fondo y sobre todo, optimizan los contenidos de texto para facilitar su lectura.

Print Media 1) Ocultar los elementos que no se van a imprimir: #cabecera,#menu,#lateral,#comentarios{displ ay:none} 2) Corregir la estructura de la página: body,#contenido,#principal,#pie{float:none !important;width:auto !important;margin:0 !important;padding:0 ;} 3) Modificar los colores y tipos de letra: body {color:#000;font:100%/150% Georgia,"Times New Roman", Times,serif;}

Cursor personalizado El puntero del ratón se puede modificar mediante la propiedad cursor. Propiedad cursor Valores ( (url ,)* ( auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ) ) | inherit Se aplica a Todos los elementos Valor inicial auto Descripción Permite personalizar el puntero del ratón

Cursor personalizado

CSS Validator La validación es un mecanismo que permite comprobar que el código CSS creado cumple las reglas de la sintaxis del lenguaje CSS y que por tanto es una hoja de estilos válida para aplicarla a cualquier documento HTML. El W3C (World Wide Web Consortium) dispone de un validador online que permite validar reglas CSS sueltas, páginas HTML con CSS incluído y archivos CSS independientes. El validador se puede acceder en http://jigsaw.w3.org/css-validator/

Recursos Firebug Es la extensión más útil y completa de todas las que están relacionadas con el diseño web.

Recursos ColorZilla: permite obtener el color de cualquier elemento de la página mediante una herramienta similar a la de los programas de diseño gráfico. MeasureIt: permite medir la altura y anchura de cualquier elemento de la página. IE Tab: permite visualizar con Internet Explorer cualquier página cargada en Firefox. La integración con Internet Explorer es total, ya que ni siquiera hace falta abrir ese navegador.