[go: up one dir, main page]
Scribd
Cargar
11 vistas59 páginas

Integración HTML5 y CSS3: Guía Completa

Cargado por

David Par
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas59 páginas

Integración HTML5 y CSS3: Guía Completa

Cargado por

David Par
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 59

HTML 5 CSS 3 TECNIKIDS

1
TECNIKIDS HTML 5 CSS 3

HTML 5 Y css3
La nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el
lenguaje mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición
de secciones. En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único
instrumento integrado. Ahora es momento de analizar CSS, su relevancia dentro de esta unión estratégica
y su influencia sobre la presentación de documentos HTML.

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca
lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la
complejidad de HTML.

Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada
elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y
HTML por sí mismo no pudo más satisfacer las demandas de diseñadores. En consecuencia, CSS pronto
fue adoptado como la forma de separar la estructura de la presentación.

Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo,
enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML. La versión
3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5
fue desarrollada considerando CSS a cargo del diseño.

Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web
y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia
a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas. En este momento las
nuevas características incorporadas en CSS3 están siendo implementadas e incluidas junto al resto de la
especificación en navegadores compatibles con HTML5.

2
HTML 5 CSS 3 TECNIKIDS

¿Dónde se escribe el código CSS?


Se puede elegir, ya que el código en lenguaje CSS se puede escribir en tres lugares diferentes:

1. En un archivo con la extensión .css ( es el método más recomendado);


2. En la cabecera <head> del archivo HTML;
3. Directamente en las etiquetas del archivo HTML a través de un atributo style ( es el método
menos recomendado).

Se crearán ejemplos de los tres métodos, pero se recomienda utilizar el primero. Lo más frecuente
es escribir el código CSS en un archivo con la extensión .css (a diferencia de los archivos HTML que tienen
extensión .html). Este es el método más cómodo y flexible. Evitar mezclar todo en un solo archivo.

Utilizar el siguiente código HTML:

3
TECNIKIDS HTML 5 CSS 3

Observar el contenido de la línea 5, <link rel=”stylesheet” href=”style.css” />: esta es la línea que
indica que este archivo HTML está asociado con un archivo llamado style.css que se encarga del formato.

Copiar y guardar este archivo. Hasta ahora, no se ha hecho nada especial excepto la nueva
etiqueta que hemos añadido.

Crear un archivo nuevo vacío en vuestro editor de texto que como en cursos anteriores utilizamos
SublimeText y copiar el código CSS:

Guardar el archivo con el nombre que style.css, por que ese fue el nombre con el que vinculamos
la página HTML. Guardar este archivo .css en la misma carpeta que vuestro archivo .html.

Abrir la página para probarlo. Ahora los párrafos se muestran en azul. No es necesario abrir
el archivo style.css directamente en el navegador. Solo hay que abrir el archivo html el que llamará
automáticamente al archivo style.css.

4
HTML 5 CSS 3 TECNIKIDS

Existe otra forma de utilizar CSS en los archivos HTML: esto implica insertar el código CSS
directamente en una etiqueta <style> dentro de la cabecera <head>.

Así es como se puede obtener exactamente el mismo resultado con un solo archivo .html que
contenga el código CSS (línes 5-10).

Con el último método hay que tener cuidado: se puede añadir un atributo style a cualquier
etiqueta. Hay que insertar el código CSS directamente en este atributo.

Esta vez, solo el texto del primer párrafo (línea 11), que contiene el código CSS, aparecerá en
color azul.

5
TECNIKIDS HTML 5 CSS 3

Es recomendable acostumbrarse a trabajar con el primer método porque es el que utilizan la


mayoría de administradores de sitios web.

De momento, realizas las pruebas en un solo archivo HTML. Sin embargo, luego los sitio web
incluirá varias páginas HTML, por esto, si se escribe el código CSS directamente en el archivo HTML, se
tendrá que copiar este código en todos los archivos HTML del sitio web. Y si luego se desea cambiar los
párrafos en color rojo en vez de azul, se deberá cambiar todos los archivos HTML uno por uno.

Si se trabajá con un archivo CSS externo, solo se deberá escribirlo una vez para toda la página
web. Esto nos ahorrara mucho tiempo.

APLICAR ESTILOS
Ahora que ya sabes en donde colocar el código CSS, se mostrara detalladamente su uso. Antes
se dio un trozo de código CSS sin explicárlo.

El código CSS como éste contiene tres elementos diferentes:

1. Nombres de etiquetas: Se escriben los nombres de las etiquetas cuya apariencia se quiere
cambiar. Por ejemplo, si se quiere cambiar la apariencia de todos los párrafos <p>, tenemos que escribir
p.

2. Propiedades CSS: La página “efectos de estilo” está almacenada en propiedades. Por ejemplo, la
propiedad color permite especificar el color del texto, y la propiedad font-size se usa para especificar el
tamaño del texto, etc. Existen muchas propiedades CSS que ayudaran a modificar el entorno de la página.

3. Valores: Para cada propiedad CSS, hay que especificar un valor. Para la propiedad color, por
ejemplo, se debe especificar el nombre del color. Para la propiedad font-size, se debe especificar el tamaño
deseado.

En este fragmento de código, puedes observar las etiquetas, propiedades y valores mencionados.

Como puedes ver, se escribe el nombre de la etiqueta (por ejemplo, h1) y se incluyen las propiedades
y valores deseados entre llaves. Se pueden incluir todas las propiedades que se deseen dentro de las llaves.
Cada propiedad va seguida de “dos puntos” (“:”) y después el valor correspondiente. Por último, cada línea
acaba con un punto y coma “;”.

6
HTML 5 CSS 3 TECNIKIDS

El código indica que se desean todos los parrafos de color azul. Ahora cambiar la p por h1 para
que todos los títulos agregados sean de color azul. Debes recordas siempre que se realiza un cambio
guardar el archivo html y css para que se muestre dentro de la página web.

APLICAR ESTILOS a varias etiquetas

7
TECNIKIDS HTML 5 CSS 3

Tomando como ejemplo el código CSS anterior, el cual significa que los títulos <h1> y el texto
importante <em> se deben mostrar en azul. Sin embargo, es un poco repetitivo.

Afortunadamente, en CSS hay un modo de hacerlo más rápido si se le quiere dar la misma
presentación a dos etiquetas. Simplemente se debe combinar la declaración, separando los nombres de
las etiquetas con una coma. Y el resultado de la página será el mismo.

Comentarios
Como ocurre en HTML, se pueden incluir comentarios. Los comentarios no se muestran,
simplemente se usan para especificar información destinada al diseñador que quiera interpretar el código,
para encontrar, por ejemplo, algo que estamos buscando en un archivo CSS largo.

El archivo HTML generalmente es bastante corto y la hoja CSS bastante larga, si contiene todos
los elementos de estilo del sitio web, es bastante normal. Tener en cuenta que se pueden crear varios
archivos CSS para un sitio web si hay la necesidad de separar el código CSS de alguna forma dependiendo
de las diferentes secciones del sitio web.

Incluir un comentario es muy fácil. Tenemos que introducir /* seguido por nuestro comentario, y
después */ para completar el comentario. Se pueden escribir comentarios en una o más líneas.

8
HTML 5 CSS 3 TECNIKIDS

Aplicar estilos: class - id


Lo visto hasta ahora tiene una limitación, imagina que todos los párrafos tendrán la misma
presentación, esto sería fácil realizarlo con la herramientas vistas, pero ¿Qué deberías que hacer para que
solo algunos párrafos estén escritos de forma diferente?, se debe escribir el código CSS en un atributo
style de la etiqueta en cuestión.

Para solucionar el problema, se puede usar estos atributos especiales que funcionan con todas las
etiquetas: el atributo class y el atributo id. Los atributos id y class son prácticamente lo mismo. Hay solo
una pequeña diferencia que luego se brindaran ejemplos de ella. Por ahora, y para hacerlo más simple, se
comenzara con el atributo class. Es un atributo que se puede escribir en cualquier etiqueta, ya sea título,
párrafo, imagen, etc.

9
TECNIKIDS HTML 5 CSS 3

Se debe introducir un nombre que identifique a la etiqueta. El que se desee, siempre que el nombre
empiece con una letra. Por ejemplo, se asociara el atributo class introduction con el primer párrafo.

Realizado esto, el párrafo ya está identificado. Tiene un nombre: introduction. Se podra volver a
usar este nombre en el archivo CSS para que se muestren en azul las etiquetas que tengan el nombre
introduction.

Para realizarlo en CSS, introducimos el nombre del atributo class con un punto al principio, como
se muestra a continuación.

10
HTML 5 CSS 3 TECNIKIDS

El atributo ID funciona exactamente igual que el atributo class, con una excepción: solo se puede
utilizar una vez en el código.

Es útil si se utiliza JavaScript para reconocer ciertas etiquetas. En la práctica, solo se introduce un
atributo id sobre elementos que son únicos en la página, como el logo.

Si se utilizan los atributos id, al definir sus propiedades en el archivo CSS, se debe escribir una el
simbolo de númeral (#) atras del nombre de ID.

Etiquetas de propósito general


Quizás alguna se tendra que aplicar un atributo class o un atributo id a algunas palabras que
originalmente no iban entre etiquetas.

De hecho, el problema de class es que es un atributo. Así que solo podemos introducirlo en una
etiqueta. Si, por ejemplo, solo se desea cambiar “Generales” en el siguiente párrafo.

11
TECNIKIDS HTML 5 CSS 3

Sería fácil hacerlo si “Generales” estuviera dentro de etiquetas, pero no lo está. Por lo que se
crearon las etiquetas de proposito general.

Se inventaron dos etiquetas llamadas de propósito general, que no tienen un significado especial,
lo que indica que no especifican que la palabra es importante, por ejemplo. Existe una pequeña aunque
importante diferencia entre estas dos etiquetas:

<span> </span>: Es una etiqueta de tipo inline, es decir, una etiqueta situada dentro de un párrafo
de texto, para seleccionar solo ciertas palabras. <strong> y <em> son de la misma familia. Esta etiqueta
se utiliza en medio de un párrafo y es la etiqueta que se utilizara para darle color a “Generales”.

<div> </div>: Es una etiqueta de tipo block, entre la cual se encuentra un bloque de texto. <p>,
<h1>, etc. son de la misma familia. Estas etiquetas tienen algo en común: crean un nuevo “bloque” en
la página y, de este modo, insertan un salto de línea necesariamente. <div> es una etiqueta que se usa
frecuentemente para crear un diseño, como se verá más adelante.

Por ahora, se utilizará la etiqueta <span> en su lugar. Se escribe alrededor de “Generales”, se le


agrega un atributo class con el nombre que se desee y se crea el archivo CSS.

12
HTML 5 CSS 3 TECNIKIDS

Aplicar un estilo: los selectores avanzados


En CSS, lo más difícil es saber cual es el texto al que se le debe cambiar el formato. Para seleccionar
los elementos de la página que se desea cambiar, se utiliza los selectores. Ya se han utilizado varios de ellos
anteriormente.

Los selectores que ya conocemos son:

Significa “quiero cambiar todos los párrafos de color azul”. Tambien se pueden agregar más cambios
dentro de las llaves.

Significa “Todos los títulos y todo el texto importante de color azul”. Se han seleccionado dos
etiquetas a la vez.

13
TECNIKIDS HTML 5 CSS 3

Y, por último, se ha observado cómo seleccionar etiquetas específicas a las que se ha dado un
nombre utilizando los atributos class y id:

Hay muchas más formas de seleccionar etiquetas en CSS. No se trabajaran todas porque son
muchas y algunas son bastante complejas, pero a continuación se observaran ejemplos para ser más
efectivo en CSS:

1. Selector de propósito general: Selecciona todas las etiquetas sin excepción.

2. Una etiqueta dentro de otra: Selecciona todas las etiquetas <em> situadas dentro de una
etiqueta <h3>. Tomar en cuenta que no hay coma entra los nombres de las dos etiquetas.

14
HTML 5 CSS 3 TECNIKIDS

Ejemplo de código HTML correspondiente:

3. Una etiqueta seguida de otra etiqueta: Selecciona la primera etiqueta <p> situada después de
un título <h3>.

4. Una etiqueta que tiene un atributo: Selecciona todos los enlaces <a> que tienen un atributo
title.

15
TECNIKIDS HTML 5 CSS 3

5. Una etiqueta, un atributo y un valor exacto: Igual, pero el atributo también debe tener el valor
exacto “Clic aquí”.

6. Una etiqueta, un atributo y un valor. Igual, pero el atributo esta vez tiene que contener la palabra
“Click” en este valor (en cualquier posición).

16
HTML 5 CSS 3 TECNIKIDS

Ingresa a Realiza actividad no. 01


TK Net estructura básica

Ingresa a Realiza actividad no. 02


TK Net Estilos

dar formato a texto


Los siguientes temas resultaran muy interesantes. No, “formatear texto” no tiene nada que ver con
la destrucción de todos los datos de tu disco duro. Simplemente significa que la apariencia del texto se va
a cambiar (o “formatear”).

No hay nada particularmente inesperado: Todavía se esta trabajando el código CSS y se volverá a
utilizar lo que se ha aprendido anteriores lecciones. Se trabajara directamente en el archivo .css que se ha
creado.

Esta lección dará la oportunidad de descubrir muchas propiedades CSS: Se observara cómo
cambiar el tamaño del texto, cambiar la fuente, alinear el texto, etc..

17
TECNIKIDS HTML 5 CSS 3

Tamaño
Para cambiar el tamaño del texto, se utiliza la propiedad CSS font-size. ¿Pero cómo se especifica el
tamaño del texto? Aquí es donde se complica, ya que hay varias técnicas a nuestra disposición:

Especificar un tamaño absoluto: En píxeles, pulgadas o milímetros. Aunque este método es muy
preciso, se recomienda utilizarlo solo cuando sea absolutamente necesario, ya que se podría especificar un
tamaño demasiado pequeño para algunos lectores.

Especificar un tamaño relativo: Como un porcentaje, “em” o “ex”. Esta técnica tiene la ventaja de
ser más flexible. Se puede adaptar más fácilmente a las preferencias de tamaño de los visitantes.

Un tamaño absoluto
Para especificar un tamaño absoluto, normalmente se utilizan píxeles. Así que para obtener un
texto de 16 píxeles de altura, se debe escribir de la siguiente forma:

Utilizándolo en los títulos y en los párrafos queda de la siguiente forma:

18
HTML 5 CSS 3 TECNIKIDS

Si se desea también se puede utilizar los tamaños en centímetros o milímetros. Se debe cambiar
“px” por “cm” o “mm”. Sin embargo, estas unidades son menos adecuadas para las pantallas.

Un valor relativo
Este es el método recomendado porque el texto se adapta más fácilmente a las preferencias de
todos los visitantes.

Existen varias formar de especificar un valor relativo. Se puedes escribir el tamaño en palabras, así:

1. xx-small : diminuto ;
2. x-small : muy pequeño ;
19
TECNIKIDS HTML 5 CSS 3

3. small : pequeño ;
4. medium : mediano ;
5. large : grande ;
6. x-large : muy grande ;
7. xx-large : enorme.

Sin embargo, esta técnica tiene un inconveniente: solo hay siete tamaños disponibles (porque solo
hay siete nombres). Afortunadamente, existen otras opciones. Mi técnica favorita es especificar el tamaño
en “em”.

Si se escribe 1em, el texto tiene un tamaño normal.

Si se quiere que el texto sea más grande, puedes introducir un valor superior a 1, como 1.3em.

Si se quiere que el texto sea más pequeño, puedes introducir un valor inferior a 1, como 0.8em.

Los números decimales se escriben con punto, no con coma. Por ejemplo, debes escribir « 1.4em
» , no « 1,4em ».

20
HTML 5 CSS 3 TECNIKIDS

Hay otras unidades disponibles. Se puede utilizar “ex” (que funciona con el mismo principio que
em pero tiene una base más pequeña) y el porcentaje (80 %, 130 %, etc.).

FUENTE
Para que una fuente se muestre correctamente, todos los usuarios de Internet tienen que tenerla.
Si un usuario de Internet no tiene la misma fuente que se utiliza en la página, su navegador usará una
fuente por defecto (una fuente estándar) que puede que no sea la esperada.

La buena noticia es que desde CSS3, ahora es posible que el navegador descargue una fuente
automáticamente.

Cambiar la fuente utilizada


La propiedad CSS que nos permite especificar la fuente a utilizar es font-family. Se tienesque
escribir el nombre de la fuente así:

Para evitar problemas si el usuario de Internet no tiene la misma fuente que se ingreso en la página,
se pueden especificar varios nombres de fuente, separados por comas:

21
TECNIKIDS HTML 5 CSS 3

El navegador intentará usar primero la font1. Si no la tiene, lo intentará con la font2. Si no la tiene,
lo intentará con la font3, y así sucesivamente. Pero al preguntarse ¿cuáles son las fuentes más comunes que
se pueden utilizar?.

Esta es una lista de fuentes que funcionan bien en la mayoría de los navegadores: Arial, Arial
Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.

En la siguiente ilustración se muestran las diferentes fuentes.

Para poder utilizarlas se escribe lo siguiente:

Esto significa: “ Utilizar la fuente Impact o, si no se encuentra, Arial Black, o Arial, o Verdana, o si no
funciona ninguna de éstas, utilizar una fuente estándar (sans-serif)”.

En general, es una buena idea especificar una variedad de tres o cuatro fuentes (+ serif o sans-
serif) para asegurarnos de que al menos una de ellas se encontrará en el ordenador del visitante.

Si el nombre de fuente incluye espacios, se recomienda escribirlo entre comillas, como se hizo con
“Arial Black”

Como último recurso, se suele utilizar serif, que corresponde a la fuente predeterminada (que solo
se aplica si no se ha encontrado ninguna otra fuente). También existe otra fuente predeterminada llamada
sans-serif.

La diferencia entre las dos es que la fuente sans-serif no tiene las pestañitas de conexión en la
parte inferior de las letras. Sí, es casi imperceptible.
22
HTML 5 CSS 3 TECNIKIDS

Utilizar una fuente personalizada con @font-face


Al observar las posibilidades de fuentes que se pueden utilizar en la web parece un poco limitada.
¿Cómo se puede utilizar la fuente favorita en la página web?

Durante mucho tiempo, esto no era posible. Ahora, con CSS3, afortunadamente existe una forma
de usar cualquier fuente en tu sitio web. Funciona bien con la mayoría de los navegadores.

Pero hay que tener cuidado porque hay algunas complicaciones (de lo contrario, sería demasiado
bonito para ser verdad).

El navegador del visitante tendrá que descargar automáticamente el archivo fuente cuyo tamaño
de almacenamiento podría ser superior a 1 MB.

La mayoría de las fuentes tienen copyright, así que no es legal utilizarlas en nuestros sitios web.
Por suerte, existen páginas web como fontsquirrel.com y dafont.com que permiten descargar una serie
de fuentes libres de copyright. En particular, se recomienda fontsquirrel.com que te permite descargar
paquetes para CSS3 listos para usar.

Existen varios formatos de archivos fuente y no todos funcionan en todos los buscadores. Estos
son los formatos de archivo fuente existentes que se debe conocer:

.ttf: TrueType Font. Funciona con IE9 y todos los demás navegadores.

.eot: Embedded OpenType. Funciona solo con todas las versiones de Internet Explorar. Es un
formato registrado, desarrollado por Microsoft.

.otf: OpenType Font. No funciona con Internet Explorer.

.svg: SVG Font. El único formato soportado por teléfonos iPhone y iPads por el momento.

.woff: Web Open Font Format. Nuevo formato diseñado para la Red, que funciona con IE9 y todos
los demás navegadores.

Para definir una fuente nueva en CSS, se tiene que declararlo así:

23
TECNIKIDS HTML 5 CSS 3

El archivo fuente (en este caso MiSuperFuente.eot) debe estar ubicado en la misma carpeta que
el archivo CSS (o en una subcarpeta si utilizáis una ruta relativa).

Además .eot solo funciona con Internet Explorer. La solución ideal es proporcionar varios formatos
para la fuente: el navegador descargará el que pueda leer. La forma de especificar varios formatos:

Para probar cómo funciona esto, se recomienda que se descargue una fuente de Font Squirrel, por
ejemplo Learning Curve Pro. Hacer clic en @font-face Kit”, que permitirá descargar un paquete listo para
usar con todos los formatos para esta fuente.

El archivo CSS al final será así:

La primera (gran) sección @font-face define un nuevo nombre de fuente que puede utilizarse en
el archivo CSS. Entonces se utiliza este nombre de fuente con la propiedad font-family, que ya se conoce,
para cambiar la apariencia de los títulos <h1>.

24
HTML 5 CSS 3 TECNIKIDS

Se descubiran varias peculiaridades en el CSS generado por el sitio web Font Squirrel. El objetivo
es esquivar ciertos errores en Internet Explorer porque las versiones antiguas no entienden cuándo se
definen varios formatos. Esto explica el uso de ?#iefix en el código.

Cursiva, negrita, subrayado


CSS tiene una serie de propiedades de formateo de texto estándar. Ahora vamos a descubrir
cómo mostrar texto en negrita, cursiva, subrayado, etc. y veremos que incluso es posible hacerlo parpadear.

Formato cursiva
<em> se utiliza para enfatizar palabras. Esto significa que las palabras del interior son muy
importantes.

Para representar esta importancia, la mayoría de los navegadores muestran el texto en cursiva,
pero no es obligatorio.

CSS, por su parte, permite escribir: “Quiero que este texto esté en cursiva”. Por ejemplo, no hay
nada que te impida decidir poner todos los títulos en cursiva.

Concretamente, para colocar el texto en cursiva en CSS, se utiliza font-style que puede llevar
tres valores:

italic: el texto se mostrará en cursiva.

oblique: el texto se mostrará oblicuamente (las letras se inclinan y el resultado es ligeramente


diferente a la cursiva).

normal: el texto se mostrará en formato normal (predeterminado). Esto permite cancelar la


cursiva. Si quieres que el texto que va entre <em> deje de aparecer en cursiva, por ejemplo, tienes que
escribir:

25
TECNIKIDS HTML 5 CSS 3

En el siguiente ejemplo, se utiliza font-style para poner en cursiva todos mis títulos <h2>:

Negrita
Recordar que <strong> no convierte el texto en negrita (su propósito es indicar que el texto es
importante, y como resultado el navegador normalmente muestra el texto en negrita). En CSS, puedes
aplicar la negrita en los títulos, algunos párrafos enteros, etc.

La propiedad de CSS para poner en negrita es font-weight y tiene los siguientes valores:

bold: el texto estará en negrita;

normal: el texto se mostrará en formato normal (predeterminado).

Aquí un ejemplo de cómo escribir títulos en negrita:

26
HTML 5 CSS 3 TECNIKIDS

Subrayado y otras decoraciones


La propiedad CSS asociada tiene un nombre muy acertado: text-decoration. Permite subrayar
texto, entre otras cosas, pero no solo eso. Estas son las diferentes posibilidades que ofrece:

underline: subrayado.

line-through: tachado.

overline: línea encima.

blink: parpadeante. No funciona en la mayoría de los navegadores.

none: normal (predeterminado).

Este código CSS permitirá probar los efectos de text-decoration usando underline

27
TECNIKIDS HTML 5 CSS 3

Alineación
El lenguaje CSS permite establecer todas las alineaciones de texto conocidas: izquierda,
centrado, derecha y justificado.

Es bastante sencillo. Se utiliza la propiedad text-align y especificar la alineación deseada:

left: el texto se alineará a la izquierda (este es el ajuste predeterminado).

center: el texto aparecerá centrado.

right: el texto se alineará a la derecha.

justify: el texto aparecerá justificado. Justificar el texto hace que se ocupe todo el ancho posible
sin dejar ningún espacio en blanco al final de las líneas. Los artículos de periódicos, por ejemplo,
siempre se justifican.

Ejemplo de los distintos tipos de alineación:

No se puede cambiar la alineación del texto de una etiqueta inline (como por ejemplo <span>,
<a>, <em>, <strong>…). La alineación solo funciona en las etiquetas de tipo block (<p>, <div>, <h1>,
<h2>, etc.), algo lógico si lo pensamos detenidamente: no se puede cambiar la alineación de unas
cuantas palabras en medio de un párrafo.

Así que, en general, hay que alinear el párrafo entero.

28
HTML 5 CSS 3 TECNIKIDS

Rodear Imagen
CSS permite colocar un elemento alrededor del texto. A esto también se le llama “wrapping”.

Al ver la imagen surge la pregunta ¿Cual es la propiedad que hace que la imagen este rodeada
de texto?. La respuesta es float. Esta propiedad puede tener dos valores muy sencillos:

left: el elemento flotará en la izquierda.

right: el elemento flotará en la derecha. Sí, bien hecho.

Los elementos flotantes son muy sencillos de usar, sólo se aplica un float a una etiqueta. Entonces
se escribe el texto de forma normal.

Se puede usar una propiedad de flotación en las las etiquetas de bloque e inline Es habitual una
imagen flotante con un texto rodeándola, como en el ejemplo anterior.

29
TECNIKIDS HTML 5 CSS 3

Los códigos anteriores son para HTML5 y CSS3, con lo cual se realizara la imagen flotante,
como se observo en la primer imagen.

CSS tiene una propiedad que te permite decir: « Para, este texto debería estar debajo del elemento
flotante y no a su lado.» Esta es la propiedad clear, que puede tener estos tres valores:

left: el texto continúa debajo después de un float: left;

right: el texto continúa debajo después de un float: right;

both: el texto continúa abajo, tanto después de un float: left; o despues de un float: right;.

Para simplificar, siempre debemos usar el código clear: both, que funciona después de un flotar a
la izquierda y después de un flotar a la derecha (funciona siempre). Para ilustrar cómo funciona, escribir
el siguiente código HTML:

30
HTML 5 CSS 3 TECNIKIDS

Ingresa a Realiza actividad no. 03


TK Net formato de texto

Ingresa a Realiza actividad no. 04


TK Net cursiva, negrita y subrayado

31
TECNIKIDS HTML 5 CSS 3

Color y fondo
Viendo las propiedades CSS que existentes, ahora se trabajaran las propiedades directa o
indirectamente relacionadas con el color. Se trabajara cómo cambiar el color del texto, cómo añadir un
color o una imagen de fondo, cómo añadir sombras, cómo variar los niveles de transparencia.

Color del texto


Ya se conoce la propiedad usada para cambiar el color del texto: es color. Se trabajara las
diferentes formas de especificar el color, ya que hay varias.

Especificar el nombre del color


La manera más sencilla y más cómoda de elegir un color es escribir su nombre. El único problema
con este método es que sólo hay dieciséis colores llamados «estándar».

Aunque hay otros colores informales, no molestaré enseñándolos ya que no funcionan


necesariamente de la misma manera en todos los navegadores.

La siguiente figura muestra los dieciséis colores que puedes usar simplemente escribiendo su
nombre.

Para cambiar el color de todos los títulos a marrón se debe ingresar:

32
HTML 5 CSS 3 TECNIKIDS

33
TECNIKIDS HTML 5 CSS 3

Notación hexadecimal
Pero dieciséis colores parecen un poco limitados cuando consideras que la mayoría de los
monitores pueden mostrar dieciséis millones.

Por otro lado, tomar en cuenta que si tendria que darle un nombre a cada uno de los dieciséis
millones de colores sería una tarea colosal.

Afortunadamente, hay varias maneras en CSS de elegir un color de entre los ya existentes. La
primera manera que trabajaremos es la notación hexadecimal. Aunque es muy común su uso en la web,
hay también otro método que se trabajara más adelante.

Así es como se escribe el nombre de un color en hexadecimal: #FF5A28. Simplemente, se trata


de una combinación de letras y números que especifican un color.

Se debe empezar escribiendo una almohadilla (#) seguida de seis letras o dígitos del 0 al 9 y de
la A a la F.

Estas letras o números funcionan en parejas. Los dos primeros dígitos especifican la cantidad
de rojo, los siguientes dos, la cantidad de verde y los últimos dos la cantidad de azul. Mezclando estas
cantidades (que son los componentes de los colores Rojo-Verde-Azul), se puede conseguir el color
deseado.

Así, #000000 corresponde al negro y #FFFFFF al blanco. Algunos programas de dibujo como
Photoshop,Gimp y Paint.NET permiten especificar los colores en hexadecimal. Se puede fácilmente
copiar y pegar el código hexadecimal de un color en tu archivo CSS.

¿Qué significa RGB? Rojo-Verde-Azul (en inglés), que se abrevia como «RGB». Como en la
notación hexadecimal, para elegir un color, tienes que definir una cantidad de rojo, verde y azul.

Se observa que es mucho más práctico y que con un simple programa de dibujo como Paint se
puede encontrar el color que se desea. Aquí están los pasos que hay que seguir:
34
HTML 5 CSS 3 TECNIKIDS

Inicia el programa Paint desde el menú Inicio.

Ve a la sección de Editar colores.

Se abre una ventana. En la caja que aparece en la derecha, al deslizar el puntero para seleccionar
el color que se desea. Suponiendo que deseas escribir tus títulos <h1> en rosa. Selecciona el color en la
ventana.

Apuntar las cantidades correspondientes de Rojo-Verde-Azul indicadas en la parte inferior


derecha de la ventana (en este caso 240-96-204). Ingresa los valores en el mismo orden en el archivo
CSS, como se muestra en el siguiente código.

35
TECNIKIDS HTML 5 CSS 3

Como se puede observar en el ejemplo, para usar el método RGB tienes que escribir rgb(Red,
Green, Blue) reemplazando «Red, Green, Blue» por los números correspondientes, estas cantidades
están siempre entre 0 y 255.

Color de fondo
Para especificar un color de fondo, usar la propiedad CSS background-color. Se usa de la misma
manera que la propiedad color, en otras palabras, se puede escribir el nombre de un color, introducirlo
en la notación hexadecimal o usar el método RGB.

Para especificar el color de fondo de la página web, se tiene que trabajar con la etiqueta <body>.
De hecho, <body> corresponde con la página web completa, así, si se cambia su color de fondo, se
cambiara el color de fondo de la página.

Observando que cuando se asigno color a blanco en el body se le cambio el color a todo el texto
a esto se le llama herencia.

CSS y herencia
En CSS, si aplicas un estilo a una etiqueta, todas las etiquetas que estén dentro tomaran el
mismo estilo.

En realidad es fácil de entender e intuitivo. Como se ha visto, la etiqueta <body> tag contiene,
36
HTML 5 CSS 3 TECNIKIDS

entre otros, las etiquetas del párrafo <p> y del título <h1> .

Si se aplica un fondo negro y una etiqueta de texto blanco al <body>, todos los títulos y párrafos
también tendrán un fondo negro y un texto blanco. Este fenómeno se llama herencia: las etiquetas que
están dentro de otra etiqueta se dice que «heredan» sus propiedades.

Esto también vale para el nombre «CSS», que significa «Cascading Style Sheets»(Hojas de
Estilo Cascada). Las propiedades CSS se heredan en cascada: si se da un estilo a un elemento, todos los
subelementos tendrán el mismo estilo.

Si después se decide que se desea que los títulos estén en rojo, este estilo tendrá preferencia y los
títulos estarán en rojo. Sin embargo, si no se especifica nada en particular (como se hizo anteriormente),
entonces los títulos heredarán el color blanco.

Esto no sólo funciona con el color. Todas las propiedades CSS se heredan: por ejemplo, se puede
asignar la negrita en la etiqueta <body> y todos tus títulos y párrafos estarán en negrita.

Ejemplo de herencia con la etiqueta <mark>


Se tiende a pensar que sólo pueden cambiar el color de fondo de su página. Esto no es así, se
puede cambiar el fondo de cualquier elemento: títulos, párrafos, algunas palabras, etc. En este caso,
aparecerán destacadas (como si estuvieran marcadas con un subrayador).

Por ejemplo, la etiqueta <mark> que se usa para destacar algunas palabras, se utilizara como
ejemplo de herencia:

37
TECNIKIDS HTML 5 CSS 3

Por defecto, el texto aparece con fondo amarillo. El color de fondo rojo que le fue asignado
se aplica al texto de la etiqueta <mark>. De hecho, incluso si el fondo de la página es negro, es la
propiedad CSS del elemento más específico la que tiene prioridad.

El mismo principio se aplica a todas las etiquetas HTML y a todas las propiedades CSS. Si se
escribe: Los párrafos tienen un tamaño de 1.2 em y los textos importantes ( <strong>) tienen un tamaño
de 1,4 em.

Se podría pensar que podría haber un conflicto. Si el texto importante es parte de un párrafo,
¿qué tamaño debería dársele? ¿1,2 em ó 1,4 em? CSS decide que la declaración más específica tiene
prioridad: ya que <strong> se corresponde con un elemento más específico que los párrafos, el texto
estará escrito en 1,4 em.

Imágenes de fondo
En los siguientes ejemplos, se cambiara la imagen de fondo de la página. Sin embargo, igual que
para el color de fondo, no hay que olvidar que la imagen de fondo no se aplica necesariamente a toda la
página. También puedes poner una imagen de fondo detrás de los títulos, párrafos, etc.

38
HTML 5 CSS 3 TECNIKIDS

Aplicar una imagen de fondo.


La propiedad usada para especificar una imagen de fondo es background-image. Como valor, se
tiene que especificar el url(“nombreimagen1.png”). Por ejemplo:

Lo que da como resultado lo mostrado en la siguiente figura.

El fondo no está necesariamente en PNG, pero también puede estar en formato JPEG o GIF. La
dirección que indica la ubicación de la imagen de fondo puede escribirse como una dirección completa
( http://…) o como una dirección relativa ( fondo.png).

Tener cuidado cuando se escriba una dirección relativa en el archivo CSS. La dirección de la
imagen debe ser especificada relativa al archivo .css y no relativa al archivo .html. Para simplificar las
cosas, se aconseja colocar la imagen en la misma carpeta que el archivo .css (o en una subcarpeta)

Opciones para la imagen de fondo


La propiedad de background-image que hemos se ha trabajado, puede suplementarse con otras
propiedades que permitan que el comportamiento de la imagen de fondo cambie.

La propiedad background-attachmentdel CSS se usa para «adjuntar» el fondo. El efecto obtenido


es interesante ya que puedes ver ahora el texto «slide» sobre el fondo. Hay disponibles dos valores:

fixed: la imagen del fondo permanece fija;

scroll: la imagen de fondo se desplaza con el texto (por defecto).


39
TECNIKIDS HTML 5 CSS 3

Por defecto, la imagen de fondo se repite en un patrón de mosaico. Se puede cambiar esto con
la propiedad background-repeat:

no-repeat: el fondo no se repetirá. La imagen será única en la página.

repeat-x: el final se repetirá sólo en la primera línea, horizontalmente.

repeat-y: el final se repetirá sólo en la primera columna, verticalmente.

repeat: el fondo se repetirá en un patrón de mosaico (por defecto).

40
HTML 5 CSS 3 TECNIKIDS

Se puede especificar la posición requerida de la imagen de fondo con la background-position.


Esta propiedad sólo es útil cuando se combina con background-repeat: no-repeat; (un fondo que no
repite).

Se debe introducir dos valores en píxeles para la background-position para especificar la posición
de fondo relativa a la esquina superior izquierda de la página (o párrafo, si solicitas el fondo en un
párrafo).

El fondo será situado a 500 píxeles píxeles de la izquierda y a 100 píxeles de la parte superior.
También es posible usar estos valores:

top: en la parte de arriba;

bottom: en la parte de abajo;

left: a la izquierda;

center: centrado;

right: a la derecha;

Estas palabras se pueden combinar. Por ejemplo, para alinear una imagen en la parte superior
derecha, tendría que escribir:

41
TECNIKIDS HTML 5 CSS 3

Así que si se desea mostrar una imagen de fondo, sólo una vez ( no-repeat), siempre visible (
fijo) y posicionado en la parte superior derecha ( top right) y con tamaño 150 px (size), se escribe de la
siguiente forma:

42
HTML 5 CSS 3 TECNIKIDS

Propiedades de combinación
Si se utilizan muchas propiedades en relación al fondo (como en el ejemplo anterior), se
puede utilizar una especie de superpropiedad background cuyo valor puede combinar con varias
propiedades trabajadas anteriormente: background-image, background-repeat, background-attachment
y background-position y se escribe de la siguiente forma:

El orden de los valores no importa. Se puede combinar los valores en cualquier orden. No es
obligatorio introducir todos los valores. Si no se desea introducir fixed, se puede eliminar sin ningún
problema.

Varias imágenes de fondo


Desde CSS3, se puede asignar varias imágenes de fondo a un elemento. Para hacer esto,
simplemente hay que separar las declaraciones por una coma así:

43
TECNIKIDS HTML 5 CSS 3

Transparencia
CSS permite muy fácilmente variar los niveles de transparencia de los elementos. Para hacer
esto, se usa las características CSS3: la propiedad opacity y la notación RGBA.

La propiedad de opacity se usa para especificar el nivel de opacidad (lo contrario a transparencia).
Con un valor de 1, el elemento será completamente opaco; este es el comportamiento por defecto. Con
un valor de 0, el elemento será completamente transparente. Así que se debe que elegir un valor entre 0
y 1. Con un valor de 0,6, el elemento será un 60 % opaco, y se podra ver a través de él.

En el siguiente ejemplo se observara un ejemplo de transparencia.

44
HTML 5 CSS 3 TECNIKIDS

Si se aplica la propiedad de opacidad a un elemento de la página, todo el contenido de este


elemento se hará transparente (incluso imágenes, otros bloques dentro, etc.). Si sólo se desea hacer el
color de fondo transparente, es mejor usar la notación RGBa.

La notación RGBa
CSS3 nos ofrece otra manera de variar la transparencia: la notación RGBa. Esto es, en realidad,
la notación RGB que se vio en temas anteriores, pero con un ajuste: el nivel de transparencia (llamado
canal alfa). Con un valor de 1, el fondo es completamente opaco igual que antes. Con un valor de menos
de 1, es transparente.

Es tan simple como eso. Se puede conseguir exactamente el mismo efecto que con opacidad
usando la notación RGBa.

Esta notación es reconocida por todos los navegadores más modernos, incluyendo Internet
Explorer (de IE9 en adelante). Para los navegadores más viejos, se recomienda especificar la notación
RGB convencional así como la RGBa. Aunque para estos navegadores, el fondo no será transparente,
al menos habrá color de fondo.

45
TECNIKIDS HTML 5 CSS 3

Ingresa a Realiza actividad no. 05


TK Net Color y herencia

Ingresa a Realiza actividad no. 06


TK Net fondo

Bordes y sombreado
Se observara en la siguiente lección los bordes y los efectos de sombreado que se pueden aplicar,
tanto en el texto como en los bloques.

En particular se volvera a usar los conocimiento de los colores para elegir el color de los bordes
y sombreados.

Bordes estándar
CSS ofrece una amplia selección de bordes para decorar las páginas. Muchas propiedades CSS
permiten cambiar la apariencia de tus bordes:border-width,border-color,border-style.

Se usara directamente la super propiedad border que incluye todas estas propiedades. Al igual
que la super propiedad background, funciona con el mismo principio: se pueden combinar varios
valores.

Para el borde, se puede usar hasta tres valores para cambiar la apariencia:

La anchura: especifica la anchura del borde. Introduciendo un valor en píxeles (como2px).

El color: es el color de tu borde. Usa un nombre de color (negro,rojo, etc.) o un valor hexadecimal
( #FF0000) o un valor RGB ( rgb(198, 212, 37)).

El tipo de borde: hay varias opiniones disponibles. El borde puede ser una única línea sólida,
una línea de puntos o una línea discontinua. Aquí están los valores disponibles: none: sin borde (por
defecto); solid: una sola línea sólida; dotted: una línea de puntos; dashed: una línea discontinua; double:
con doble borde; groove: una línea estriada; ridge: una línea con crestas; inset: inset global efecto 3D;
outset: outset global efecto 3D.

El tipo de borde: hay varias opiniones disponibles. El borde puede ser una única línea sólida,
una línea de puntos o una línea discontinua. Aquí están los valores disponibles: none: sin borde (por
46
HTML 5 CSS 3 TECNIKIDS

defecto). solid: una sola línea sólida. dotted: una línea de puntos. dashed: una línea discontinua. double:
con doble borde. groove: una línea estriada. ridge: una línea con crestas. inset: inset global efecto 3D.
outset: outset global efecto 3D.

Para obtener un borde azul, una línea discontinua de 3 píxeles de grueso introducir:

La siguiente figura muestra los diferentes estilos de bordes que puedes usar.

Posición del borde.


Si se quiere poner bordes diferentes dependiendo del lado (arriba, abajo, derecha o izquierda),
se puede hacer sin problema. En este caso, se tiene que usar estas cuatro propiedades:

border-top: borde superior;

border-bottom: borde inferior;


47
TECNIKIDS HTML 5 CSS 3

border-left: borde izquierdo;

border-right: borde derecho;

Hay equivalentes para modificar cada detalle del borde que se desea: border-top-width para
cambiar el grosor del borde superior, border-top-color para el color superior etc.

Son también super propiedades que funcionan como border, pero se aplica a un solo lado. Para
añadir un borde a la izquierda o derecha de los párrafos, solo se tiene que introducir:

Se puede cambiar los bordes de cualquier elemento de la página. Se ha utilizado en párrafos,


pero también se puede cambiar el borde de imágenes, textos importantes como<strong>etc.

Bordes redondeados
Los bordes redondeados son un poco como los webmasters del Holy Grain que han estado
esperando desde el milenio anterior. Desde la llegada de CSS3, ahora es posible crearlos fácilmente.

La propiedad border-radiusnos permitirá fácilmente redondear las esquinas de cualquier


elemento. Simplemente especifica el tamaño el radio en píxeles:

También se puede especificar la forma del radio de cada esquina. En este caso, se especificaran
cuatro valores:

48
HTML 5 CSS 3 TECNIKIDS

Los valores corresponden a las siguientes esquinas en el orden indicado:

superior izquierda;

superior derecha;

inferior derecha;

inferior izquierda;

Finalmente, se puede definir la redondez de las esquinas creando curvas elípticas como en la
siguiente figura En este caso, se tiene que especificar dos valores separados por un carácter / ( barra
oblicua).

Los bordes redondeados funcionan con todos los nuevos navegadores, incluyendo Internet
Explorer desde su versión 9 (IE9). Para las versiones más antiguas de Mozilla Firefox, Chrome y Safari,
los llamados «prefijos del proveedor» tienen que ser usados, en otras palabras, tienes que escribir varias
versiones de la propiedad (-moz-border-radiuspara Firefox,-webkit-border-radiuspara Safari, etc.) en el
código CSS. Afortunadamente esto ya no es necesario, a menos que quieras soportar las versiones más
antiguas de estos navegadores.

Si se desea poner bordes diferentes dependiendo del lado (arriba, abajo, derecha o izquierda), se
puede hacer sin problema. En este caso, se tiene que usar estas cuatro propiedades:

border-top: borde superior;

border-bottom: borde inferior;

49
TECNIKIDS HTML 5 CSS 3

border-left: borde izquierdo;

border-right: borde derecho;

Hay equivalentes para modificar cada detalle del borde si se desea:border-top-width para cambiar
el grosor del borde superior,border-top-color para el color superior etc.

Son también super propiedades que funcionan como border, pero se aplica a un solo lado. Para
añadir un borde a la izquierda o derecha de los párrafos, solo tenemos que introducir:

Sombreado
Las sombras se incluyen en las últimas innovaciones ofrecidas por CSS3. Ahora sólo se necesita
una única línea de CSS para añadir sombras a la página.

Se utilizaran dos tipos de sombras: sombras de caja y sombras de texto.

La propiedad box-shadow se aplica a todo el bloque y tiene cuatro valores en el siguiente orden:

El offset horizontal de la sombra, el offset vertical de la sombra, la bajada de tono y el color de


la sombra.

Por ejemplo, para un negro, sombra de 6 píxeles, sin bajada de tono, se escribiria:

50
HTML 5 CSS 3 TECNIKIDS

Para bajar el tono de la sombra usando el tercer ajuste. La bajada de tono puede ser ligera
(menos que el offset), normal (igual al offset) o fuerte (mayor que el offset). Vamos a probar un offset
normal:

También se puede añadir un cuarto valor opcional:inset. En este caso, la sombra estará situada
dentro del bloque, para dar un efecto de inset:

La propiedad box-shadow funciona en todos los navegadores nuevos, incluyendo IE9. Para
algunos navegadores, especialmente navegadores móviles, todavía hay que añadir un prefijo. Se debe
introducir una versión-webkit-box-shadow para que funcione en los navegadores Android e IOS.

Context-shadow, puedes añadir una sombra directamente a los letras de tu texto. Los valores
trabajan exactamente de la misma manera que labox-shadow: offset, bajada de tono y color.

Esta propiedad es reconocida por todos los navegadores más nuevos excepto por Internet
Explorer, que sólo la reconoce desde la versión IE10.

51
TECNIKIDS HTML 5 CSS 3

Ingresa a Realiza actividad no. 07


TK Net bordes

Ingresa a Realiza actividad no. 08


TK Net sombreado

Crear apariencias dinámicas


Este es uno de sus puntos fuertes: CSS también permite combinar la apariencia de los elementos
dinámicamente, en otras palabras, los elementos pueden cambiar la forma una vez que la página se ha
cargado. Se utilizara una característica poderosa del CSS: los seudoformatos.

Al desplazarse
Acontinuación utilizaremos varios seudoformatos CSS. Lo primero que utilizaremos se llama:
hover. Como todos los otros seudoformatos que se trabajaran, se trata de información añadida después
del nombre de etiqueta (o clase) en el CSS, así:

:hover puede interpretarse como: «Cuando el ratón se coloca encima del enlace» (cuando señalas
hacia él). Depende del diseñador definir la apariencia que el enlace tiene cuando haces clic sobre él.

52
HTML 5 CSS 3 TECNIKIDS

Se a definido dos versiones de estilos para los enlaces: para enlaces por defecto (cuando no se
pasa por encima) y para enlaces cuando se pasa por encima.

El resultado se muestra en la figura siguiente.

Aunque normalmente se usa en enlaces, se puede cambiar la apariencia de cualquier elemento.


Por ejemplo, se puede cambiar la apariencia de párrafos cuando se pasa por encima:

Al hacer clic y seleccionar


Se puedes interactuar más en CSS. Se puede cambiar la apariencia de los elementos cuando se
hace clic sobre ellos o cuando se selecciona.

El seudoformato :active permite aplicar un estilo particular cuando se hace clic. En la práctica,
sólo se usa en enlaces. El enlace no mantendrá esta apariencia durante mucho tiempo: de hecho, el
cambio se produce cuando se pulsa la tecla del ratón. Claramente, esto no siempre será visible.

Por ejemplo se puede cambiar el color del fondo del enlace cuando se a pulsado.

53
TECNIKIDS HTML 5 CSS 3

cuando se selecciona un elemento


En este caso, es un poco diferente. El seudoformato :focus aplica un estilocuando se selecciona
un elemento. Una vez pulsado, el enlace permanece «seleccionado» (tiene un pequeño borde de puntos
alrededor). Esa es la selección. En Google Chrome y Safari, el efecto sólo se ve cuando pulsas la tecla
Tab.

Cuando el enlace ya se ha visitado


Se puede aplicar un estilo a un enlace a una página que ya se ha visitado. Por defecto el navegador
cambia el color del enlace a un púrpura bastante feo (en mi opinión, al menos).

Se puede cambiar esta apariencias con :visited. En la práctica, para los enlaces visitados, no se
puede cambiar mucho aparte del color.

Si no se desea que los enlaces ya visitados tengan otro color, se debe aplicarse el mismo color
que a los enlaces normales. Muchas páginas web hacen esto. Una excepción importante: Google, que es
bastante manejable, como se puede ver en los resultados de búsqueda.
54
HTML 5 CSS 3 TECNIKIDS

Ingresa a Realiza actividad no. 09


TK Net apariencia dinamica 1

Ingresa a Realiza actividad no. 10


TK Net apariencia dinamica 2

barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web. Con CSS se puede
transformar menús HTML aburridos en atractivas barras de navegación.

Barra de navegación = Lista de enlaces


Una barra de navegación necesita HTML estándar como base. Acontinuación se construira la
barra de navegación a partir de una lista HTML estándar.

Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul>
y <li> tiene mucho sentido:

55
TECNIKIDS HTML 5 CSS 3

Ahora eliminar las viñetas y los márgenes y el relleno de la lista:

list-style-type: none: Elimina los marcadores. Una barra de navegación no necesita marcadores
de lista.

Establecer margin: 0 y padding: 0, eliminar la configuración predeterminada del navegador.

El código en el ejemplo anterior es el código estándar utilizado en las barras de navegación


vertical y horizontal.

Barra de navegación vertical


Para crear una barra de navegación vertical, puede aplicar estilo a los elementos <a> dentro de
la lista, además del código anterior:

56
HTML 5 CSS 3 TECNIKIDS

display: block; Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en
toda el área del enlace (no solo el texto), y nos permite especificar el ancho (y el relleno, el margen, la
altura, etc. si lo desea).

width: 60px; Los elementos de bloque ocupan todo el ancho disponible por defecto. Se especificar
un ancho de 60 píxeles.

También se puede establecer el ancho de <ul> y eliminar el ancho de <a>, ya que ocuparán todo
el ancho disponible cuando se muestren como elementos de bloque. Esto producirá el mismo resultado
que nuestro ejemplo anterior:

Barra de navegación horizontal


Hay dos formas de crear una barra de navegación horizontal. Uso de elementos de lista en línea
o flotantes .

Elementos de la lista en línea


Una forma de construir una barra de navegación horizontal es especificar los elementos <li>
como en línea, además del código “estándar” anterior:

57
TECNIKIDS HTML 5 CSS 3

display: inline; Por defecto, los elementos <li> son elementos de bloque. Aquí, se elimino los
saltos de línea antes y después de cada elemento de la lista, para mostrarlos en una línea.

Artículos de lista flotante


Otra forma de crear una barra de navegación horizontal es hacer flotar los elementos <li> y
especificar un diseño para los enlaces de navegación:

float: left; Use flotante para que los elementos de bloque se deslicen uno al lado del otro.

display: block; Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en
toda el área del enlace (no solo el texto), y nos permite especificar el relleno (y altura, ancho, márgenes,
etc. si lo desea).

padding: 8px; Dado que los elementos de bloque ocupan todo el ancho disponible, no pueden
flotar uno al lado del otro. Por lo tanto, colocar algo de relleno para que se vean bien.

background-color: #dddddd; Agregue un color de fondo gris a cada elemento:

58
HTML 5 CSS 3 TECNIKIDS

Ingresa a Realiza actividad no. 11


TK Net barra de navegación

Ingresa a Realiza actividad no. 12


TK Net barra de navegación 2

59

También podría gustarte