Scribd
Cargar
139 vistas

Manual de CSS

El documento resume los conceptos básicos de CSS. En 3 oraciones: CSS permite separar el diseño y contenido de páginas web para facilitar su mantenimiento. Se puede enlazar una hoja de estilo CSS externa al HTML mediante la etiqueta <link> para aplicar estilos a múltiples páginas. Los selectores de CSS como tipo, clase y línea permiten aplicar formatos a diferentes elementos HTML.

Cargado por

jlandaeta99
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
139 vistas

Manual de CSS

El documento resume los conceptos básicos de CSS. En 3 oraciones: CSS permite separar el diseño y contenido de páginas web para facilitar su mantenimiento. Se puede enlazar una hoja de estilo CSS externa al HTML mediante la etiqueta <link> para aplicar estilos a múltiples páginas. Los selectores de CSS como tipo, clase y línea permiten aplicar formatos a diferentes elementos HTML.

Cargado por

jlandaeta99
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 26

Manual de CSS

I. Conceptos Bsicos

CSS mediante LINK


Es la forma recomendada de agregar css, de este modo, puedes modificar la apariencia de un sitio web con miles de pginas, solamente editando un pequeo archivo css, adems al utilizar esta tcnica los exploradores cachean el archivo css (guardan en su memoria temporal) Siginifica carga ms rapida de tus pginas y ahorro en ancho de banda.

Definicin
El trmino CSS proviene de las siglas en ingles (Cascading Style Sheets) en espaol (Hojas de Estilo en Cascada). CSS es un lenguaje creado para controlar la presentacin y diseo de los documentos estructurados en HTML, XHTML y XML. ElW3C se encarga de la normativa y especificacin oficial del CSS.

Como enlazar CSS al HTML?


Para enlazar una hoja de estilo utilizaremos la siguiente linea de cdigo:
<link rel="stylesheet" type="text/css" href="archivo.css" />

Caracteristicas:

Controla la visualizacin de un mismo documento HTML/XHTML en funcin del medio; (Pantalla de ordenador, impresora, dispositivos moviles, sintetizadores de voz, sistema braille, proyectores, televisores y dispositivos de baja resolucin). Permite la separacin del diseo y contenido, facilitando el mantenimiento de los sitios web reduciendo el peso de las pginas Web. Proporciona a los diseadores mayor precision y control de la forma de presentacin de los documentos mediante propiedades sencillas.

El mismo que debera estar ubicado dentro de las etiquetas <head> ... </head> del cdigo HTML de la pgina web. Entre los principales atributos y valores del link tenemos:

rel: Define la relacin del vnculo. Para las hojas de estilo, su valor Ser siempre
"stylesheet" type: Define el tipo de documento del vnculo. Ser siempre "text/css". href: Es el valor de la URL que enlaza al Archivo CSS Hoja de estilo.

Estructura

Mediante este mtodo se pueden enlazar a una pgina web, tantos archivos CSS como se necesite y un archivo css puede ser compartido por muchas pginas web. Agregando el atributo LINK al HTML
Primero generamos una estructura (x)HTML (podemos utilizar el bloc de notas u otro editor de texto plano) con la siguiente estructura:

o o

Regla de Estilo: Est integrada por un selector o varios selectores, y una declaracin. Selector: El selector es la parte de la regla que selecciona a qu elementos HTML se aplicara la declaracin. Declaracin: Indica los estilos que se aplicarn a los elementos HTML, se compone por uno ms pares (propiedad: valor) separados de punto y coma ";". - Propiedad: Seala que caracteristica en particular modificaremos - Valor: Es la palabra, palabras, nmeros, simbolos que indican el nuevo valor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <title>Enlazando a un archivo .css</title> <link rel="stylesheet" type="text/css" href="general.css" /> </head> <body> <h1>Titulo Principal</h1> </body> </html>

II. Agregando CSS al (X)HTML

y lo guardamos con un nombre por ejemplo (ejercicio.html) es muy importante agregar la extensin .html

y lo guardamos con el nombre(ejercicio2.html) no olvide agregar la extensin .html

Creando el archivo CSS


Ahora generamos el archivo CSS en el bloc de notas u otro editor de texto plano en el cual escribimos:
body{background:blue;color:white;}

Creando el archivo CSS


Ahora generamos un archivo CSS en el bloc de notas u otro editor de texto plano en el cual escribimos:
body{background:blue;color:white;}

Luego guardamos asignando un nombre, para nuestro ejemplo se llamara (general.css) no olvides agregar la extensin .css y guardarlo en el directorio donde est el documento (ejercicio.html). Finalmente abrimos con nuestro explorador web la pgina (ejercicio.html) y vemos el resultado donde la pagina tiene un color de fondo azul y texto de color blanco.

y lo llamaremos(general.css) es necesario que se guarde en el mismo directorio donde est el documento (ejercicio2.html). Finalmente abrimos con nuestro explorador web la pgina(ejercicio2.html) y vemos el resultado.

Incluir CSS con STYLE


Es la segunda forma de inclusin ms utilizada, aunque no recomendada, ya que los estilos se deben incluir pgina por pgina y dificulta la actualizacin, adems significa ms gasto de ancho de banda. Entonces porque es muy utilizado?, la razn es que muchos programas para desarrollar pginas web, cuando se utilizan en el modo diseador(sin ver cdigo fuente) agregan de forma predeterminada el css con STYLE. asi que es muy probable que al reestructurar o actualizar encuentres sitios con CSS mediante STYLE incrustado, veamos como funciona. Los estilos se ubican dentro de la cabecera(<head> ... </head>) mediante las etiquetas <style type="text/css"> ... </style">.

Incluyendo CSS mediante la instruccin @import


Tambien podemos incluir una hoja de estilo externa, mediante la instruccin @import el cual debe ir dentro de las etiquetas <style type="text/css"> ... </style">. El contenido de las etiquetas style estaran encerrados con un comentario html (<!-- -->) para evitar problemas de visualizacin en navegadores antiguos que no soporten css.

Ejemplo:
Primero debemos tener una pgina web con la estructura:

Agregando la instruccin @import en HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <title>Estilo incluido con @import </title> <style> <!-@import url("general.css"); --> </style> </head> <body> <h1>Titulo Principal</h1> </body> </html>

Ejemplo:

Agregando CSS directamente al HTML


Aunque parece una solucin ms prctica y directa no lo es, ya que solo seria viable si un sitio web tuviese una sola pgina. Pero veamos como funciona. Copiemos esta fragmento de cdigo al bloc de notas y lo guardamos con el nombre ejercicio3.html, no olvide agregar la extensin .html, finalmente abra el archivo con su explorador web favorito.

Para administrar el diseo CSS de manera optima, de sitios con 5, 10, 1000 o ms pginas, agregaremos CSS con link
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <title>Estilo incluido con STYLE incrustado </title> <style> <!-body{background:blue;color:white;} --> </style> </head> <body> <h1>Titulo Principal</h1> </body> </html>

III. Selectores CSS


Selector de Tipo
Selecciona un tipo de elemento HTML especfico. Para aplicar este selector escribimos el elemento HTML que deseamos seleccionar(sin "< >") y lo escribimos en la zona correspondiente al archivo CSS. Cada elemento HTML es un posible selector de tipo asi que podemos asociar un estilo a cualquier elemento HTML

Ejemplos:
h1 {color:red; } h2 {color:blue; } p {color:black;font-size:12px;} blockquote {font-size:12px;color:green;}

CSS en Lnea
los estilos se incrustan a cada etiqueta HTML mediante el atributo style=" ", esta forma de incluir el css no separa el contenido del diseo. Por lo cual se utiliza muy pocas veces, para definir estilos muy concretos

Cdigo CSS:
h1{color:red;} h2{color:blue;}

Ejemplo:

Aadiremos directamente las reglas de estilo a la etiqueta h1


Copiemos esta fragmento de cdigo al bloc de notas y guarde con el nombre ejercicio4.html y abra el archivo con su explorador web favorito.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es"> <head> <title>Estilo en lnea </title> </head> <body> <h1 style="background:blue;color:white;">Titulo Principal</h1> </body> </html>

Mediante la regla de estilo "h1{color:red;}" estamos indicando que los ttulos dentro de las etiquetas <h1>... </h1> tendran texto de color rojo. Por otro lado, la regla de estilo "h2{color:blue;}" indica que los ttulos dentro de las etiquetas <h2>... </h2> tendran texto de color azul.

Cdigo HTML:
<h1">Titulo principal</h1> <h2">Subtitulo</h2>

Selector de Clase
El selector de clase proporciona un mayor control y precisin sobre la apariencia de los elementos HTML.

Cmo crear un selector de Clase ?


Para utilizar el selector de clase, utilizaremos un punto (.) seguido del nombre que asignaremos a la clase, como por ejemplo:

.titulo .enfasis .importante

El nombre de una clase no puede empezar con nmeros, tampoco tener tildes, , ni espacios en blanco Ejemplo de creacin de selector de clase:
Crearemos en selector de clase para resaltar parrafos, y lo llamaremos .importantey escribiremos en la hoja de estilo o archivo CSS, de este modo:

El selector de clase puede ser compartido por varios tpos de etiquetas


El selector de clase, no se relaciona con una etiqueta HTML en particular, por lo cual, tambien puede ser compartida por otros tipos de etiquetas HTML. como por ejemplo:

Cdigo CSS:
.importante{color:red;}

Cdigo CSS:
.importante{color:red;}

Cdigo HTML:
<body> <p class="importante"> ... </p> <div class="importante"> ... </div> <h3 class="importante"> ... </div> </h3>

Relacionar o vincular el selector de clase al elemento HTML:


Para relacionar un selector de clase al elemento(s) HTML aadiremos el atributo'CLASS' , dentro de la etiqueta HTML de apertura y entre las comillas escribimos el nombre del selector de clase que escribimos en la hoja de estilo o archivo CSS, pero sin el punto de este modo:

Cdigo HTML:
<body> <p class="importante"> ... </p> </body>

Uno o ms selectores de clase pueden aplicarse a una misma etiqueta HTML


Para aplicar ms de un selector de clase a una etiqueta HTML, se colocara el nombre de cada selector separado por un espacio dentro de las comillas del atributo 'CLASS'.

Caractersticas y formas de utilizacin del selector de Clase

Ejemplo: Cdigo CSS:


.importante{color:red;} .justificado{text-align:justify;}

El selector de clase, se puede utilizar varias veces


Mediante un selector de clase no solo podemos aplicar estilos a un elemento HTML sino a muchos simultaneamete. Una caracterstica del selector de clase es que puede ser utilizado ms de una vez, para controlar la apariencia de los elementos HTML.

Cdigo HTML:
<body> <p class="importante justificado"> Este prrafo ser resaltado con texto de color rojo y tambien justificado</p> <p class="importante"> Este prrafo ser resaltado con texto de color rojo </p> </body>

Cdigo CSS:
.importante{color:red;}

Cdigo HTML:
<body> <p class="importante">Parrafo resaltado color rojo...</p> <p>Parrafo normal... </p> <p>Parrafo normal... </p> <p class="importante">Parrafo resaltado color rojo...</p> </body>

Selector ID "Selector de Identificacin"


El selector 'ID' se utiliza para asignar un valor nico en todo el documento. De manera que no puede ser utilizado dos veces en un documento. por lo que, suele utilizarse menos que el selector de clase por las restricciones que tiene.

#menu{width:100px;float:left;} #cuerpo{width:600px;float:right;}

Cdigo HTML:
<body> <div id="contenedor">

Cmo crear un selector ID ?


Definimos este selector, utilizando el signo(#) seguido del nombre que asignaremos al identificador ID. Por ejemplo unos posibles nombres de identificadores podrian ser:

<div id="cabecera"> ... </div> <div id="menu"> ... </div> <div id="cuerpo"> ... </div> </div> </body>

#contenedor #cabecera #columna


Ejemplo de creacin de selector ID:
Crearemos en selector de identificacin ID, que servira para nombrar un bloque y lo llamaremos #contenedor y escribiremos en la hoja de estilo o archivo CSS, de este modo:

Cdigo CSS:
#contenedor{width:760px;}

Selector Contextual o Descendiente


Se utiliza para seleccionar ciertos elementos, solo cuando esten contenidos dentro de otros.

Relacionar o vincular el selector ID al elemento HTML:


Para relacionar un selector ID al elemento HTML aadiremos el atributo 'ID' , dentro de la etiqueta HTML de apertura y entre las comillas escribimos el nombre del selector de identificacin 'ID', que escribimos en la hoja de estilo, pero sin el simbolo (#) de este modo:

Cmo aplicar el selector Contextual ?


Un selector contextual selecciona y aplica las propiedades css al elemnto(s) que esten contenidos dentro de otros elementos HTML. Por ejemplo, modificaremos la apariencia de todos los elementos "em" que solo esten dentro de los elementos "p"

Cdigo HTML:
<body> <div id="contenedor"> ... </div> </body>

Cdigo CSS:
p em{color:blue;}

Formas de utilizacin del selector ID

Cdigo HTML:
<body> <p><em>texto 1</em>... </p> <div>...<em>texto 2</em>... </div> <p><span>...<em>texto 3</em>... </span></p> <em>texto 4</em> </body>

El selector de identificacin, se utiliza para nombrar los bloques principales


El selector de identificacin, generalmente es utilizado para nombrar los bloques o secciones principales de un sitio web, por ejemplo:

Cdigo CSS:
#contenedor{width:760px;} #cabecera{height:40px;background:blue;color:white;}

la palabra 'Texto 1' Est dentro de la etiqueta "em" y est contenido en "p". Por lo tanto,cumple con la regla de estilo del cdigo CSS. la palabra 'Texto 3' Est dentro de la etiqueta "em" y est contenido en "span" y este a su vez est dentro de "p". Por lo tanto, tambien cumple con la regla de estilo.

Las palabras 'Texto 2' y 'Texto 4' dentro de la etiqueta "em" no cumplen con la regla de estilo y el selector contextual no se aplica.

Selectores contextuales con selectores de clase, ID y selectores de tipo


Esta vez utilizaremos selectores class, selectores ID y selectores de tipo, asi como una combinacion de estos como selectores contextuales

Un selector contextual ayuda seleccionar con precisin


En este ejemplo, seleccionaremos todos los elementos "strong" que estn contenidos en "p" y a su vez esten dentro de "div":

Cdigo CSS:
#contenido .destacado em{color:blue;}

Cdigo CSS:
div p strong{color:red;}

Cdigo HTML:
<div id="contenido"> <div class="destacado"><em>Texto 2</em></div> </div>

Cdigo HTML:
<div> <p><strong>Texto 1 </strong></p> </div> <div> <strong>Texto 2 </strong> </div>

la palabra 'Texto 1' Est dentro de la etiqueta "strong" y est contenido en "p" y este a su vez est dentro de "div". Por lo tanto,cumple con la regla de estilo la palabra 'Texto 2' Est dentro de la etiqueta "strong", pero est contenido directamente en "div". Por lo tanto, no cumple con la regla de estilo

La regla de estilo selecciona todos los elementos "em" que esten dentro de los (div con atributo class="destacado") y que tambin esten incluidos en los (div con atributo id="contenido").

Selector universal
El selector universal, selecciona todos los elementos sin excepcin.

Los selectores contextuales pueden ser muy especficos


en este caso estamos selecionando a todos los elementos "a" que esten contenidos dentro de "li", que tambien esten dentro de "ul" y que a la vez esten incluidos dentro de "div"

Cmo aplicar el selector Universal ?


Para aplicar el selector universal escribiremos al inicio de la hoja de estilo, el simbolo "*", luego escribimos las propiedades que se aplicaran a todos los elementos HTML.

Cdigo CSS:

Reiniciando valores por defecto con selector Universal


div ul li a{color:blue}

Cdigo HTML:
<div> <ul> <li> Texto 1 </li> <li><a href=""> Texto 2 </a></li> <li> Texto 3 </li> </ul> </div>

Esta regla de estilo elimina los margenes y rellenos de los elementos HTML, que por defecto presentan los navegadores.
*{margin:0;padding:0;}

Es recomendable resetear o reiniciar todos las margenes y rellenos con el objeto de optimizar y reducir incompatibilidades en los navegadores.

IV. Agrupacin de selectores


Para reducir el tamao de las hojas de estilo, se pueden agrupar los selectores que comparten las mismas propiedades. Separaremos con comas(,) los selectores agrupados.

solo la parte resaltada cumple con la condicin de la regla de estilo del cdigo CSS

Agrupando Selectores de Tipo


Tenemos los siguientes selectores de tipo que comparten la propiedad "font-family: arial" de este modo:
h1 {font-family: arial;} p {font-family: arial;} h3 {font-family: arial;}

Agrupando varios tipos de selectores a la vez


.titulo {color:#008800;} #contenedor h1 {color:#008800;} .cabecera h2 em {color:#008800;} h3 {color:#008800;}

Agrupando obtendriamos
.titulo, #contenedor h1, .cabecera h2 em, h3{color:#008800;}

Agrupando tenemos:
h1, p, h3{ font-family: arial }

Se pueden agrupar tantos selectores como sean necesarios


body, div, p, ul, li, h1, h2, h3 {padding:0px; margin:0px;}

V. Colores y medidas CSS


5.1 Colores en CSS
La especificacin de los colores en css se puede realizar mediante:

Del mismo modo podemos agrupar selectores de clases, selectores ID o una combinacin de ambos

Agrupando selectores de clase, selectores ID


Tenemos los selectores de clase:
.mensaje {color:#0000FF;} .subtitulo {color:#0000FF;} .enfasis {color:#0000FF;}

a) Palabras claves:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.

Ejemplo:
body {color: white; background: blue;} h1 {color: maroon;} p {border-color: lime;}

Agrupando los selectores de clases obtendriamos


.mensaje, .subtitulo, .enfasis{color:#0000FF;}

b) Especificacin numrica RGB.


RGB(rojo verde azul) es un modelo en cual se combinan los tres colores primarios red(rojo), green(verde), blue(azul), cambiando sus intensidades para generar los dems colores. En la web el ms utilizado es el rgb hexadecimal. que se expresa empezando por el simbolo '#' seguido inmediatamente por tres o seis caracteres hexadecimales. de este modo (#rrggbb).

para agrupar selectores de ID se sigue el mismo procedimiento


#contenedor, #menu, #piepagina{padding:5px;}

Agrupando selectores descendientes.


#colum4 h1 {color:#008800;} p em{color:#008800;}

Ejemplo:
strong {color: #f00;} /* #rgb */ /* #rrggbb */

lo cual es equivalente a:
#colum4 h1, p em{color:#008800;} em {color: #ff0000;}

Para generar una infinidad de colores recomendamos utilizar un pequeo programa para tal objeto, aqui tienes una herramienta que puedes descargar y utilizar gratuitamente Color Cop

Color mediante palabra clave


Los valores mediante palabra clave, se expresan con los nombres de los colores en ingles por ejemplo:
p {color:red;} span {color:blue;} h1 {color:yellow;} h2 {color:black;}

5.2 Unidades de medida


Determina las dimensiones para establecer el tamao del texto, alto y ancho de los bloques, las medidas del margen, relleno y borde. Las hojas de estilo, proporciona dos tipos de medida: absolutas y relativas.

a) Unidades relativas
Especifican su longitud en referencia a otra longitud. Estas son las unidades relativas: em, ex, px.
h2 {margin:0.2em;} div {margin:1ex;} P {font-size:12px;}

Colores en palabras clave ms usados: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, darkBlue, gold, magenta, yellowgreen.
Color especificacin RGB Hexadecimal.
Se expresa empezando por el simbolo '#' seguido inmediatamente por tres o seis caracteres hexadecimales. de este modo (#RRGGBB).
Donde: #RRGGBB

b) Unidades absolutas
Las unidades absolutas establecen de forma completa el valor de una medida.
H1 {margin: 0.5in} H2 {line-height: 3cm} /* inches (pulgadas) */ /* centmetros */ RR = red(rojo) GG = green(verde) BB = blue(azul)

H3 {word-spacing: 4mm} /* milmetros */ p {font-size: 12pt} /* puntos */ /* picas */

Ejemplos
p { color: #FF0000;} p { color: #008000;} /* color rojo */ /* color verde */ /* color negro */

strong {font-size:2pc;}

VI. Propiedades CSS


Las hojas de estilo permiten,la creacin de sitios web ms accesibles, proporcionando un control preciso sobre la apariencia del contenido, en los siguientes temas abordaremos cada una de las propiedades css, con ejemplos y ejercicios desarrollados y propuestos para ir adquiriendo dominio del css.

p { color: #000000;}

Para generar colores RGB Hexadecimales, utilizaremos pequeosprogramas para generar colores

Color de Texto
Esta propiedad define el color de texto en parrafos, ttulos, listas, enlaces, etc. Un mismo color puede indicarse de varias formas:

Color de fondo
Para definir el color de fondo de los elementos que pueden ser parrafos, ttulos, bloques, enlaces, listas, etc. emplearemos la propiedad CSS background-color.

Cmo aadir imgen de Fondo ?


La propiedad background-image sirve para aadir una imgen como fondo. Por ejemplo, aadiremos una imgen de fondo a un bloque div, para lo cual nos ayudaremos creando un selector de clase llamado 'imagen'.

Cmo aplicar el color de fondo ?


Primero elegimos a que elemento aplicaremos el color de fondo, por ejemplo aadiremos un color de fondo rojo a todos los elementos de encabezado H1 para lo cual en la hoja de estilo, la propiedad background-color tendra el valor red:
h1{background-color:red;}

Cdigo CSS:
.imagen{background-image:url(fondo.jpg); width:430px; margin:0 auto; text-align:justify; color:#eee; padding:8px; }

Aplicando color de fondo a toda la pgina Web


En este caso el elemento BODY debe tener la propiedad background-color con su respectivo valor para modificar el color de fondo de toda la pgina web.

Donde:
La propiedad background hace referencia a una imgen llamada 'fondo.jpg' que se aplicara al bloque llamado '.imagen'

Para tener un fondo de pgina de color amarillo escribimos:


body{background-color:yellow;}

Cdigo HTML:
Agregaremos el atributo class="imagen" al bloque o bloques que tendra una imagen como fondo:

Aplicando color de fondo a los enlaces


En este caso el elemento A debe tener la propiedad background-color con su respectivo valor para modificar el color de fondo de todos los enlaces o links.

Para modificar el color de fondo de todos los enlaces sin excepcin escribimos:
a{background-color:gray;}

<body> <div class="imagen"> Este bloque tendra una imgen como fondo </div> </body>

Para modificar el color de fondo solo de los enlaces 'A', que se encuentran dentro de los prrafos 'P', nos ayudamos de los selectores contextuales y escribimos:
p a{background-color:gray;}

El resultado final ser:

Imgen como Fondo


Esta propiedad permite aadir una imgen como fondo de todos los elementos HTML, bloques,listas, parrafos, enlaces, titulos.

Repetir imgen de fondo


Si ya tenemos una imgen como fondo, podemos controlar su ubicacin para que la imgen pueda repetirse de forma proporcional, horizontal vertical.

Scroll
La imgen de fondo se mueve (hace scroll) junto con el contenido, "esta opcion es la predeterminada".

Cmo repetir la imgen de Fondo ?


Mediante la propiedad background-image se controla la forma en que se repetira la imgen de fondo. Los valores pueden ser:

Ejemplo:
body{background-image:url(fig1.jpg);background-attachment:scroll;}

repeat
La imgen es repetida tanto horizontal como verticalmente.
body {background-image:url(fondo1.jpg);background-repeat:repeat;}

Cmo fijar una imgen de fondo ?


Al fijar una imgen de fondo esta permanecera esttica en su ubicacin, este efecto podra notarse cuando el contenido o texto de una pgina es extenso y aparece la barra de scroll y se desplaza el texto, mientras la imgen de fondo permanecera fija. Para aplicarlo la propiedad background-attachment toma el valor fixed.

repeat-x Fixed
La imagen es repetida slo horizontalmente. La imgen tendra una posicin fija en relacion al contenido.
body{background-image:url(fondo1.jpg);background-repeat:repeat-x;}

repeat-y
La imagen es repetida slo verticalmente.
body{background-image:url(fondo1.jpg);background-repeat:repeat-y;}

Ejemplo:
body{background-image:url(fig1.jpg);background-attachment:fixed;}

Cmo evitar que una imgen de Fondo se repita ? no-repeat


La imagen no se repite: slo una copia de la imagen es visualizada.
body{background-image:url(fondo1.jpg);background-repeat:no-repeat;}

Posicin imgen fondo


Si se ha especificado una imgen de fondo, se puede controlar la posicin de la imgen con la propiedad css background-position.

Posicin (arriba centro) de imgen como fondo


Se puede utilizar cualquiera de estas opciones para ubicar la imgen de fondo con Posicin (arriba centro):
body{background-image:url(fig.jpg);background-position:top;} body{background-image:url(fig.jpg);background-position:top center;} body{background-image:url(fig.jpg);background-position:center top;} body{background-image:url(fig.jpg);background-position:50% 0%;}

Scroll, fijar imgen fondo


Si tenemos una imagen de fondo, podemos determinar si sta se fija (fixed) con relacin al contenido, o si se mueve (hace scroll) junto con el contenido.mediante la propiedad css background-attachment :

Cmo aplicar scroll imgen de fondo ?


Para generar scroll (valor por defecto) en la imgen de fondo. Es decir, que la imgen de fondo se mueve junto al contenido, la propiedad background-attachment toma el valor scroll.

Valores de Posicionamiento de imgen como fondo


top left left top top top center right top top right

0% 0%

center top

100% 0% Posicin (arriba derecha)

Aplicando dos propiedades a la vez, imagen y color de fondo


En este caso especificamos una imgen de fondo y el color de fondo a la vez.
body {background:url(fondo1.jpg) #3333ff;}

Posicin (arriba izquierda) 50% 0% Posicin (arriba centro) left center left center center center center left 50% 50% 0% 50% Posicin (centro) Posicin (izquierda centro) bottom bottom left bottom center left bottom center bottom 0% 100% 50% 100% Posicin (abajo derecha) Posicin (abajo centro)

right right center center right 100% 50% Posicin (derecha centro)

Aplicando cuatro propiedades a la vez


Podemos aplicar simultaneamente ms propiedades; imagen de fondo, la forma en que se repetira, posicion y color de fondo.
body {background:url(fondo1.jpg) repeat-x top #3333ff;}

bottom right right bottom 100% 100% Posicin (abajo derecha)

Propiedades de Fuente
Tamao de fuente
La propiedad font-size, indica el Tamao de la fuente de los parrafos, titulos, listas, enlaces, etc.

Medidas para definir el tamao de fuente


Entre las medidads ms utilizadas para indicado el tamao de fuente tenemos:

Propiedad abreviada imgen fondo


La propiedad 'background' es una propiedad abreviada para establecer las propiedades de fondo individuales (es decir, 'background-color', 'background-image', 'backgroundrepeat', 'background-attachment' y 'background-position') y reemplazarlas en una sola propiedad.

Tamao de fuente en pixeles (px)


Definimos el tamao de fuente con la unidad de medidad (px)

Ejemplo
p { font-size:14px;}

Mediante la propiedad background se puede definir una propiedad, dos propiedades o todas las propiedades. Definiendo solo color de fondo
Opcionalmente se puede utilizar la propiedad 'background' para aplicar solo el color de fondo.
body {background:#3333ff;}

Tamao de fuente unidad (em)


Tambien se utiliza la unidad de medida relativa (em), que es ms flexible que los pixeles(px).
h2 { font-size:1.2em;}

Tamao de fuente porcentajes(%)


Otra medida relativa son los porcentajes(%)
body { font-size:100%;}

Familia de fuente
La propiedad font-family, indica el tipo de familia de fuente que se utilizara en los prrafos, listas, ttulos, enlaces y otros textos.

la propiedad font-weight puede tomar los siguientes valores: normal, bold, bolder, lighter, 100, 200, ..., 900 Indicado el peso de fuente bold
El peso bold equivale a marcar como (negrita): este valor es el ms utilizado, por ejemplo:
h4 {font-weight:bold;}

Cmo aplicar familia de fuente ?


Se asigna por un nombre de fuente especfico seguido de familias de fuente alternativas y parecidas, para ser reemplazado en el caso de que el tipo de fuente no este instalado en el ordenador del usuario y finalmente se acompaa de la familia de fuente genrica.

Sealando una fuente Arial


Primero escribimos la fuente especfica, en este caso Arial luego nombramos una fuente alternativa parecida(helvetica) y seguidamente la familia de fuente generica sans-serif.
p { font-family: arial, helvetica, sans-serif;}

Propiedad resumida font


La propiedad 'font' es una propiedad abreviada, para establecer las propiedades 'fontstyle', 'font-variant', 'font-weight', 'font-size', 'line-height' y 'font-family' algunas de ellas en una sola propiedad.

Peso, tamao y familia de fuente


Definiendo cada una de las propiedades de fuente:
body {font-weight: normal; font-size: 62.5%; font-family: "Lucida Sans Unicode",sans-serif;}

Las familias de fuentes se separan por una coma(,) Aplicando una fuente Times New Roman
Primero escribimos la fuente especfica, en este caso Times New Roman,seguido de una fuente alternativa parecida(Times) y acompaado de la fuente generica serif.
p { font-family: "Times New Roman", Times, serif;}

Donde: indicamos un estilo de fuente normal con tamao de fuente de 62.5% y familia de fuente "Lucida Sans Unicode",sans-serif;

Los nombres de fuentes que contengan espacios en blanco se escribiran entre comillas("") Lista de Familias de fuentes ms utilizadas en la Web

Utilizando la propiedad abreviada font


El ejemplo anterior se puede optimizar y escribir en una sola lnea:
body {font: normal 62.5% "Lucida Sans Unicode",sans-serif;}

font-family: Arial, Helvetica, sans-serif; font-family: Helvetica, sans-serif; font-family: "Lucida Sans Unicode",sans-serif; font-family: "Times New Roman", Times, serif; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-family: "Courier New", Courier, monospace; body {font-weight: bold; font-size: 22px; line-height: 25px; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;}

Peso, tamao, interlineado y familia de fuente


Definiendo cada una de las propiedades por separado:

Peso de fuente
La propiedad css font-weight se usa para especificar el peso o volumen de la fuente.

Donde: definimos un tamao de texto de 22px con line-heigth(interlineado) de 25px y familia de fuente "Trebuchet MS",Arial,Helvetica,sans-serif;

Utilizando la propiedad abreviada font tendremos

h2 {font: bold 22px/25px "Trebuchet MS",Arial,Helvetica,sans-serif;}

text-decoration:overline (Texto con lnea superior)


Ejemplo: Texto con decoracin Overline
p em {text-decoration: overline; }

Ejemplos Varios propiedad resumida Font


h2{font:24px/24px Georgia, "Times New Roman", Times, serif;} h3{font:14px/20px "Trebuchet MS",Arial, Helvetica, sans-serif;} a{font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif;}

text-decoration:line-through (Texto tachado)


Ejemplo: Texto con decoracin line-through
.precio {text-decoration: line-through; }

word-spacing (Espacio entre palabras)


La propiedad word-spacing agrega una cantidad extra de espacio entre palabras.

text-decoration:blink (Texto parpadeante)


Ejemplo: Texto con decoracin blink
.nuevo {text-decoration: blink; }

Ejemplo:Texto con Word-spacing


h1 {word-spacing: 1em } p em {word-spacing: 0.2em }

text-transform (Transformacin de texto)


Esta propiedad transforma el texto en minusculas, mayusculas y letra capital. mediante sus valores: capitalize, uppercase, lowercase y none

letter-spacing (Espacio entre letras)


La propiedad letter-spacing define una cantidad adicional de espacio entre caracteres.

Ejemplo: T

e x t o

c o n

l e t t e r - s p a c i n g

text-transform:capitalize (Letra capital )


convierte en mayscula el primer carcter de cada palabra

h2 {letter-spacing: 0.1em}

Ejemplo: Texto Con Letra Capital


h2 {text-transform:capitalize;}

text-decoration (Decoracin de texto)


La propiedad text-decoration permite decorar al texto, mediante uno de los cinco valores: none, underline, overline, line-through, blink.

text-transform:uppercase (Texto mayuscula)


convierte en maysculas todas las letras del elemento

text-decoration: none (sin decoracin de texto)


En este ejemplo quitamos el subrayado de todos los enlaces links que esten dentro de strong.

Ejemplo:TEXTO CON LETRA UPPERCASE


h1 {text-transform:uppercase;}

Ejemplo:Texto sin decoracin


strong a{text-decoration: none; }

text-transform:lowercase (Texto minscula)


convierte en minsculas todas las letras del elemento

text-decoration:underline (texto subrayado)

Ejemplo: Texto con decoracin Underline


h5 {text-decoration: underline; }

Ejemplo: texto con letra lowercase


h4 {text-transform:lowercase;}

text-transform:none (Ninguno)
Nota el subrayado generalmente indica enlace por lo que se debe usar con cuidado para evitar confusiones neutraliza el valor heredado

Ejemplo:

h1 em{text-transform:none;}

Propiedades de cuadro
Ancho (width)
Esta propiedad indica el ancho de los elementos en bloque, si no se especifica un valor para esta propiedad tendra como medida inicial el valor auto.

text-align (alineacin de texto)


Sirve para alinear parrafos, titulos y todo texto. la propiedad text-align toma los siguientes valores; left, right, center y justify.

La propiedad text-align se aplica a los elementos de nivel bloque para alinear el texto contenido.

Si no se indica explicitamente el ancho de un elemento bloque este ocupa todo el ancho de la pgina o del elemento que lo contiene. Elemento sin especificar el ancho
Primero veamos como actua un elemento si no se le indica la propiedad Width

left (alineacin izquierda)


Ejemplo: Texto alineado a la izquierda
blockquote{text-align:left;}

Cdigo CSS:
div {padding:8px;background:#eee;}

right (alineacin derecha)


Ejemplo:Texto alineado a la derecha
h6{text-align:right;}

Resultado:

center (alineacin al centro)


Ejemplo:
h1{text-align:center;}

Este bloque no tiene especificado un ancho y ocupa el mayor lugar posible

Aplicando ancho a un elemento


Esta vez agregaremos la propiedad de ancho width con un valor de 260px.

justify (texto justificado)


Ejemplo:

Cdigo CSS:
div {width:260px;padding:8px;background:#eee;}

p{text-align:justify;}

Resultado:
Este bloque tiene un ancho de 260px

line-height (Altura de lnea)


La propiedad line-height controla la distancia entre las lneas(interlineado de texto).

Altura del elemento (height) Ejemplo:


p { line-height: 200% ;}

La propiedad height determina la altura de los elementos en bloque, si no se especifica un valor para esta propiedad tendra como medida inicial el valor auto.

text-indent (Sangria de primera lnea)


Se aplica a los elementos en bloque, la propiedad text-indent, especifica la sangra de la primera lnea de un parrafo.

Si no se indica explicitamente la altura Height de un elemento bloque este dependera del contenido del elemento. Elemento sin especificar altura
Primero veamos como actua un elemento si no se le indica la propiedad Height

Ejemplo:
p { text-indent: 2em }

Cdigo CSS:

div {padding:8px;background:#DFE4EA;}

Aplicaremos un valor de 3em a los mrgenes superior e inferior y 5em para el margen izquierdo y derecho.
div {margin:3em 5em;}

Resultado:
Este bloque no tiene indicado la altura y dependera del contenido que tiene el bloque

Margin con 3 valores


Si hay tres valores el primero se aplica al mrgen superior, el segundo a los mrgenes izquierdo y derecho y el tercero al margen inferior.

Especificando la altura de un elemento


Esta vez especificaremos la altura con la propiedad Height con un valor de 90px.

Cdigo CSS:
div {height:90px;padding:8px;background:#DFE4EA;}

Ejemplo:
Aplicaremos un valor de 2em al mrgen superior, a los margenes izquierdo y derecho asignaremos 4em y al margen inferior le damos un valor de 5em.
div {margin:2em 4em 5em;}

Resultado:
Este bloque tiene un altura de 90px

Generalmente esta propiedad se aplica a elementos con una altura esttica como la cabecera de un sitio web, mientras que la parte del contenido de un sitio web, no tendra definido una altura, dejando que este se acomode de acuerdo a la cantidad del contenido.
Margen (margin)
Asigna un margen o espacio fuera del elemento. Se pueden aplicar de diferentes formas de acuerdo a las necesidades.

Margin con 4 valores


Si hay cuatro valores el primero se aplica al mrgen superior, el segundo al mrgen derecho, el tercero al margen inferior, y el cuarto al margen izquierdo.

Ejemplo:
Aplicaremos un valor de 1em al mrgen superior, 3em al derecho, cero al inferior y 7em al izquierdo.
div {margin:1em 3em 0 7em;}

Margin con 1 valor


La propiedad abreviada 'margin' con un solo valor, distribuye el mismo valor de margen a los cuatro lados del elemento

Asignando margenes por cada lado


En el diseo web a veces deseamos asignarle valor solo a un lado del cuadro y dejar las dems como estn. Mediante las anteriores propiedades tambien se puede hacer dando valor cero al resto de margenes. existen otras alternativas para hacerlo y los presentamos a continuacin.

Ejemplo:
Asignaremos un valor de 2em a los cuatro margenes del cuadro.

margin-top (margen superior)


div {margin:2em;}

Margin con 2 valores


Si hay dos valores 'el primero se aplica a los mrgenes superior e inferior' y el segundo se aplica a los mrgenes izquierdo y derecho'.

Ejemplo:
Aplicaremos un valor de 1em al mrgen superior.
h1 {margin-top:1em;}

Ejemplo:

margin-right (margen derecho)


Ejemplo:

Aplicaremos un valor de 5em al mrgen derecho.


h1 {margin-right:5em;}

Aplicaremos un valor de 3em a los rellenos superior e inferior y 5em para el relleno izquierdo y derecho.
div {padding:3em 5em;}

margin-bottom (margen inferior)


Ejemplo:
Aplicaremos un valor de 2em al mrgen inferior.
h1 {margin-bottom:2em;}

Padding con 3 valores


Si hay tres valores el primero se aplica al relleno superior, el segundo a los rellenos izquierdo y derecho y el tercero al relleno inferior.

Ejemplo:
Aplicaremos un valor de 2em al relleno superior, a los rellenos izquierdo y derecho asignaremos 4em y al relleno inferior le damos un valor de 5em.
div {padding:2em 4em 5em;}

margin-left (margen izquierdo)


Ejemplo:
Aplicaremos un valor de 2.5em al mrgen izquierdo.

Padding con 4 valores


h1 {margin-left:2em;}

Relleno (Padding)
El padding de un elemento es la cantidad de espacio entre el borde y el contenido del elemento, hacia dentro.

Si hay cuatro valores el primero se aplica al relleno superior, el segundo al relleno derecho, el tercero al relleno inferior, y el cuarto al relleno izquierdo.

Ejemplo:
Aplicaremos un valor de 1em al relleno superior, 3em al derecho, cero al inferior y 7em al izquierdo.
div {padding:1em 3em 0 7em;}

Padding con 1 valor


Si slo hay un valor, se aplica a los cuatro lados. Por ejemplo, asignaremos un valor de 2em a los cuatro rellenos del cuadro.

Asignando rellenos por cada lado


En el diseo web a veces deseamos asignarle valor solo a un lado del cuadro y dejar las dems como estn. Mediante las anteriores propiedades tambien se puede hacer dando valor cero al resto de rellenos. existen otras alternativas para hacerlo y los presentamos a continuacin.

Cdigo CSS:
div {padding:1em;}

Resultado:
Este bloque tiene un relleno (padding de 1em) distribuido de forma homogenea en los cuatro lados del bloque.

Padding-top (relleno superior)


Ejemplo:
Aplicaremos un valor de 1em al relleno superior.
h1 {padding-top:1em;}

Padding con 2 valores


Si hay dos valores 'el primero se aplica a los rellenos superior e inferior' y el segundo se aplica a los rellenos izquierdo y derecho'.

Ejemplo:

Padding-right (relleno derecho)


Ejemplo:

Aplicaremos un valor de 5em al relleno derecho.


h1 {padding-right:5em;}

Padding-bottom (relleno inferior)


Ejemplo:
Aplicaremos un valor de 2em al relleno inferior.
h1 {padding-bottom:2em;}

thin (delgado) medium (mediano) thick (grueso) Sin embargo esta medida es muy restringida y para tener mayor precisin en las medidas del borde utilizaremos tanto las medidas absolutas y relativas: unidades relativas: em, ex, px y % unidades absolutas: in, pt, pc, cm, mm, entre otros

Estilos de borde Padding-left (relleno izquierdo)


Ejemplo:
Aplicaremos un valor de 2.5em al relleno izquierdo.
h1 {padding-left:2em;}

solid (lnea continua) dotted (borde punteado) dashed (lineas entrecortadas) none (ninguno) double (borde doble)

Aplicando bordes a los elementos


Al disear con CSS, las lneas o bordes, son utilizadas para resaltar los bloques, cajas, cuadros, con variados efectos visuales que se generan al controlar las caracteristicas de las propiedades CSS del borde.

groove (tallado) ridge (efecto 3d ) inset (bajorrelieve) outset (altorrelieve) Color de borde
Se puede definir el color del borde mediante Palabras clave:

En este ejemplo utilizaremos la propiedad abreviada border


div {border:1px solid blue;}

Donde:
1px (Ancho de borde) solid (Estilo de borde) blue (Color de borde)

Ejemplo:
blue, red, yellow, orange, etc. Con las palabras claves anteriores se puede obtener un nmero limitado de colores, para generar ms variedad de colores emplearemos La especificacin numrica RGB Hexadecimal que es la ms utilizada en la web: Especificacin numrica RGB Hexadecimal Ejemplo:
#0000ff equivale (azul)

Resultado:
Este bloque tiene un borde con estilo SOLID, ancho de borde 1PX y color de borde azul

veamos en ms detalle cada valor:

Ancho de borde
Se puede definir el ancho del borde mediante las siguientes palabras clave:

#ff0000 equivale (rojo) #ffff00 equivale (amarillo)

#ff8000 equivale (anaranjado)

Borde, superior, derecho, inferior e izquierdo


div {border-top:3px solid #0000FF;border-right:1px solid #0000FF; border-bottom:1px solid #000000;border-left:1px solid #000000;}

Para generar muchos colores, tonalidades y copiar colores de pantalla y convertirlos automaticamente en RGB Hexadecimal, podemos utilizar un pequeo programa gratuito para tal objeto, como Color Cop, Hexagrab, etc. y que son de mucha utilidad en el diseo web. Ahora que conocemos las formas de aplicar el ancho del borde, los estilos y contamos con un programa para generar colores veamos ms ejemplos:
div {border:3px solid #0000FF;} h2 {border:1px dotted #000000;} h4 {border:1px groove #800000;} h1 {border:2px inset #80FF80;}

Aplicando ancho, estilo y color de borde por separado


Ancho de borde
border-width, es una propiedad abreviada para establecer el ancho de los bordes, puede tener entre uno y cuatro valores, interpretndose de la siguiente manera:

Estableciendo bordes para cada lado:


Borde superior
Border-top, define el ancho, estilo y color del borde superior.
div {border-top:3px solid #0000FF;}

un valor: Establece el valor del ancho de los cuatro bordes. dos valores: el primer valor se asigna al ancho de los bordes superior e inferior y el segundo establece el valor de los bordes derecho e izquierdo. tres valores: el primer valor corresponde al borde superior, el segundo a los bordes derecho e izquierdo, y el tercero al inferior. cuatro valores:se asigna empezando del borde superior, derecho, inferior e izquierdo respectivamente

border-width (un valor):


El valor de 1px se distribuye para los cuatro bordes.

borde derecho
border-right, define el ancho, estilo y color del borde derecho.
div {border-right:1px solid #0000FF;}

div{border-width:1px;border-color:#000000;border-style:solid;}

border-width (dos valores):


El valor de 1px se distribuye a los bordes superior e inferior y el valor de 3px a los bordes derecho e izquierdo.
div{border-width:1px 3px;border-color:#000000;border-style:solid;}

borde inferior
border-bottom, Es una propiedad abreviada para definir el ancho, estilo y color del borde inferior de un elemento.
div {border-bottom:1px solid #000000;}

border-width (tres valores):


El valor de 1px se aplica al borde superior, el valor de 3px se distribye a los bordes derecho e izquierdo y el valor de 5px corresponde al borde inferior. a los bordes derecho e izquierdo.
div{border-width:1px 3px 5px; border-color:#000000;border-style:solid;}

borde izquierdo
border-left, define el ancho, estilo y color del borde izquierdo.
div {border-left:1px solid #000000;}

border-width (cuatro valores):


El valor de 1px se aplica al borde superior, 3px se aplica al borde derecho, 5px al borde inferior y 8px al izquierdo.
div {border-width:1px 3px 5px 8px; border-color:#000000;border-style:solid;}

Color de borde
border-color, es una propiedad abreviada para establecer el color de los bordes, tiene entre uno y cuatro valores, interpretndose de la siguiente manera:

Estilos de borde
Mediante la propiedad border-style, controlamos el estilo de borde deseado que sera aplicado a un elemento CSS proporciona los siguientes estilos de borde:

un valor: Define el color de los cuatro bordes. dos valores: el primer valor asigna el color de los bordes superior e inferior y el segundo establece el valor de los bordes derecho e izquierdo. tres valores: el primer valor indica el color del borde superior, el segundo de los bordes derecho e izquierdo, y el tercero del inferior. cuatro valores:Asigna el valor del color empezando del borde superior, derecho, inferior e izquierdo respectivamente.

solid (lnea continua) dotted (borde punteado) dashed (lineas entrecortadas) none (ninguno) double (borde doble) groove (tallado) ridge (efecto 3d ) inset (bajorrelieve) outset (altorrelieve) Propiedad border-color
La propiedad border-color, puede tener de uno a cuatro valores, interpretndose de la siguiente manera:

border-color (un valor):


El valor de #000000 define el color para los cuatro bordes.
div {border-width:1px; border-color:#000000; border-style:solid;}

border-color (dos valores):


El valor de #000000 define el color para los bordes superior e inferior, y el valor #008000 determina el color del borde derecho e izquierdo.
div {border-width:1px; border-color:#000000 #008000; border-style:solid;}

border-color (tres valores):


El valor de #000000 define el color para los bordes superior e inferior, y el valor #008000 determina el color del borde derecho e izquierdo.
div {border-width:1px; border-color:#000000 #008000 #0000FF; border-style:solid;}

border-color (cuatro valores):


El valor de #000000 define el color para el borde superior, el segundo valor #008000 indica el color del borde derecho, el valor #0000FF corresponde al borde inferior, y el valor #FF0000 determina el color del borde izquierdo.
div {border-width:1px; border-color:#000000 #008000 #0000FF #FF0000; border-style:solid;}

un valor: Define el estilo de los cuatro bordes. dos valores: el primer valor asigna el estilo de los bordes superior e inferior y el segundo establece el valor de los bordes derecho e izquierdo. tres valores: el primer valor indica el estilo del borde superior, el segundo de los bordes derecho e izquierdo, y el tercero del inferior. cuatro valores:Asigna el valor del estilo de lnea empezando del borde superior, derecho, inferior e izquierdo respectivamente.

border-style (un valor):


El valor solid determina el estilo para los cuatro bordes.
div {border-width:1px;border-color:#000000;border-style:solid;}

border-style (dos valores):


El valor solid define el estilo para los bordes superior e inferior, y el valor dotted determina el estilo del borde derecho e izquierdo.
div {border-width:1px;border-color:#000000;

border-style:solid dotted;}

Borde

border-style (tres valores):


El valor de solid define el estilo para los bordes superior e inferior, el valor dotted indica el estilo del borde derecho e izquierdo y dashed el borde inferior.
div {border-width:1px; border-color:#000000; border-style:solid dotted dashed;}

Aplicando un borde izquierdo al ttulo


Utilizamos la propiedad border-left, con borde 8px, solido y un color de borde.

Cdigo CSS:
h2 {border-left: 8px solid #FF9933; background-color:#E6FFE6; padding:5px;font-size:19px;color:#F47A00;}

border-style (cuatro valores):


El valor solid define el estilo para el borde superior, el segundo valor dotted indica el estilo del borde derecho, el valor dashed corresponde al borde inferior, y el valor solid determina el estilo del borde izquierdo.
div {border-width:1px;border-color:#000000; border-style:solid dotted dashed solid;}

El resultado es:

Ttulo con borde izquierdo

CSS Para Enlaces


Los enlaces son la base de toda la internet, se presentan muchas veces en su aspecto natural con textos de color azul subrayado, otras veces en menus verticales u horizontales, se aplican una serie de efectos para resaltarlos para que adopten una forma llamativa al pasar sobre ellos como cambiar el color de texto, iluminar el color de fondo, subrayar, quitar subrayado, aadirle vietas, y un largo etc.

Ejemplos de Bordes CSS


los bordes de los cuadros en el diseo web, pueden presentarse definiendo las propiedad por separado o utilizando las formas abreviadas. en tal sentido el diseador web empleara su criterio. Veamos los siguientes ejemplos:

Cmo aplicar CSS a los enlaces?

Borde de estilo solido


Cdigo CSS:
div {border:1px solid green;}

Para empezar escribimos una lista con enlaces normales

Cdigo HTML:
<ul> <li><a href="#"> Enlace 1 </a></li> <li><a href="#"> Enlace 2 </a></li> <li><a href="#"> Enlace 3 </a></li> </ul>

El resultado es:
Borde de 2px, estilo Solido, color verde

bordes estilo solido, con anchos diferentes


Cdigo CSS:
div {border-color:#80A8D0 #35628E; border-width:4px 1px 1px 4px; border-style:solid; background-color:#DDEEFF;color:#000000;padding:5px;}

Ver ejemplo de lista con enlaces normales

Aadiendo estilos CSS a la lista de enlaces

Cdigo CSS:
Las propiedades para modificar la apariencia de los enlaces o links, se aplican al elemento a. Por ejemplo, si deseamos cambiar el color azul predeterminado a uno verde escribimos:
a {color:green;}

El resultado es:

Ver ejemplo de lista con enlaces con el color modificado

Cdigo CSS:
a{color:green;} a:hover {color:red;} a:active {color:yellow;}

Cambiar color cuando el puntero del raton pasa o esta sobre el enlace
Un efecto muy utilizado es cambiar el comportamiento del enlace cuando el cursor o puntero del ratn pasa por encima. Para lo cual se utiliza la pseudo-clase :hovercuando el cursor se coloca o pasa sobre el enlace.

Flotar con CSS


La propiedad float ayuda posicionar los elementos que forman bloques o cajas dentro de la estructura del diseo web, con el se puede generar dos, tres o ms columnas, flotar imgenes rodeadas de texto.

Agregando la pseudo-clase :hover


Agregamos la pseudo-clase :hover al elemento a para modificar el comportamiento del enlace cuando el puntero del mouse pasa sobre el. Por ejemplo, cambiara del color verde al rojo cuando pasemos sobre el enlace.

Cdigo HTML:
<ul> <li><a href="#"> Enlace 1 </a></li> <li><a href="#"> Enlace 2 </a></li> <li><a href="#"> Enlace 3 </a></li> </ul>

La propiedad float, Con un valor 'left' desplazara el elemento a la izquierda. Con un valor 'right' ser movido a la derecha y con el valor 'none', ser mostrado en el lugar original. Flotando dos bloques
Generando dos bloques sin la propiedad Float
Generamos dos cuadros o cajas, aadimos ancho, alto y un color de fondo para diferenciarlos.

Cdigo CSS:
a{color:green;} a:hover{color:red;}

Cdigo HTML:
<div class="cuadro1">cuadro1 ...</div> <div class="cuadro2">cuadro2 ...</div>

Ver resultado

Cdigo CSS:
.cuadro1 {height:250px;width:290px; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px;

Cambiar color del enlace al hacer clic


Adiremos el efecto para cambiar el color del enlace al hacer clic sobre los enlaces. utilizando la pseudo-clase active

Cdigo HTML:
<ul> <li><a href="#"> Enlace 1 </a></li> <li><a href="#"> Enlace 2 </a></li> <li><a href="#"> Enlace 3 </a></li> </ul>

background-color:#0000FF; color:#ffffff;}

Ver ejemplo
Como podras ver la segunda caja se desplaza hacia abajo.

Agregando la propiedad Float


Es momento de utilizar la propiedad float, para que la segunda caja permanezca al costado de la primera.

los enlaces tendran color verde, al pasar sobre ellos color rojo y al hacer clic o acivar el enlace tendra color amarillo.

Cdigo HTML:
<div class="cuadro1">cuadro1 ...</div> <div class="cuadro2">cuadro2 ...</div>

background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; float:left; background-color:#0000FF; color:#FFFFFF;}

Cdigo CSS:
.cuadro1 {height:250px;width:290px; float:left; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; float:left; background-color:#0000FF; color:#FFFFFF;}

Posicionamiento CSS
Despejando con CSS
La propiedad Clear, obliga desplazar los elementos flotantes de sus lados. despejando segun el valor de la propiedad.

Ver ejemplo

Despejando un elemento flotante


Esta vez la segunda caja flota al costado de la primera consiguiendo posicionar los bloques mediante la propiedad float. Tenemos tres elementos flotantes

Ejercicios propuestos con la propiedad float


Ejercicio 01:
Modifique el valor de la propiedad float del .cuadro2y cambie el valor left por right.

Cdigo HTML:
<div class="cuadro1">cuadro1 ...</div> <div class="cuadro2">cuadro2 ...</div> <div class="cuadro2">cuadro3 ...</div>

Que sucede con el segundo bloque?


.cuadro1 {height:250px;width:290px; float:left; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; float:right; background-color:#0000FF; color:#FFFFFF;}

Cdigo CSS:
.cuadro1 {height:250px;width:290px; float:left; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; float:left; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px; float:left; background-color:#008000;

Ejercicio 02:
Modifique los valores de la propiedad float; Valor right para .cuadro1 y valor left para .cuadro2

Cual es la nueva ubicacin para ambos bloques?


.cuadro1 {height:250px;width:290px; float:right;

color:#ffffff;}

ver ejemplo

las tres cajas flotan horizontalmente.

Despejando el tercer bloque hacia abajo


Dentro de .cuadro3, aadimos la propiedad clear con valor both , para desplazar ese bloque hacia abajo.

.cuadro2 {height:250px;width:290px; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px; background-color:#008000; color:#ffffff;}

Cdigo CSS:
.cuadro1 {height:250px;width:290px; float:left; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; float:left; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px; float:left;clear:both; background-color:#008000; color:#ffffff;}

ver ejemplo
Agregando la propiedad position con valor relative
posicionaremos de forma relativa el primer bloque, y lo desplazamos hacia la derecha y hacia abajo, notar que el lugar antes ocupado permanece como si elemento no hubiese sido movido.

Cdigo HTML:
<div class="cuadro1">bloque1 ...</div> <div class="cuadro2">bloque2 ...</div> <div class="cuadro2">bloque3 ...</div>

Cdigo CSS:
.cuadro1 {height:250px;width:290px;

Posicionamiento relativo
Es un posicionamiento calculado a partir de otro elemento. la caracteristica de este tipo de posicionamiento es que el elemento sigue ocupando el espacio despus de haberse sido posicionado.

Posicionando de forma relativa


Tenemos tres bloques y antes de posicionarlos tenemos:

position:relative;top:90px;left:80px; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px; background-color:#008000; color:#ffffff;}

Cdigo HTML:
<div class="cuadro1">bloque1 ...</div> <div class="cuadro2">bloque2 ...</div> <div class="cuadro2">bloque3 ...</div>

Posicionamiento absoluto
Los elementos que se posicionan de forma absoluta son extraidos del documento, sin dejar espacio vaco despus de ser posicionado.

Cdigo CSS:
.cuadro1 {height:250px;width:290px; background-color:#FF8000; color:#ffffff;}

Para posicionar de forma absoluta cajas, bloques u otros elementos, la propiedad Position tendra el valor absolute, acompaado de las propiedades left(izquierdo), right(derecho), top(superior), y bottom(inferior) para colocar la caja de forma precisa.

Posicionando de forma absoluta


Tenemos tres bloques y antes de posicionar tenemos:

background-color:#008000; color:#ffffff;}

Cdigo HTML:
<div class="cuadro1">bloque1 ...</div> <div class="cuadro2">bloque2 ...</div> <div class="cuadro2">bloque3 ...</div>

Cdigo CSS:
.cuadro1 {height:250px;width:290px; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px; background-color:#008000; color:#ffffff;}

ver ejemplo
Agregando la propiedad position con valor absolute
Posicionaremos de forma absoluta el primer bloque, y lo desplazamos hacia la derecha y hacia abajo, notar que el lugar antes ocupado esta vez si es ocupado por los otros elementos.

Cdigo HTML:
<div class="cuadro1">bloque1 ...</div> <div class="cuadro2">bloque2 ...</div> <div class="cuadro2">bloque3 ...</div>

Cdigo CSS:
.cuadro1 {height:250px;width:290px; position:absolute;top:90px;left:80px; background-color:#FF8000; color:#ffffff;} .cuadro2 {height:250px;width:290px; background-color:#0000FF; color:#ffffff;} .cuadro3 {height:250px;width:290px;

Hoja de Estilo
* {text-indent:0px; margin:0px; padding:0px; border:0px;} p {text-align:justify} h1 {font-size:1.2em; color:blue; font-weight:bold; textdecoration:underline; text-align:center;} h2 {font.size:1.1em; color:blue; font-weight:bold; text-decoration:none; text-align:center;} body {text-align:center;} #global {width:800px; margin:4px auto;} #curva-superior {background-image:url(objetos/curva-superior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;} #cabecera {background-color:white; border-left:black 1px solid; border-right:black 1px solid; height:85px;} #logotipo {width:280px; float:left;} #publicidad {width:518px; float:right; margin-top:25px; font-size:16px;} #navegacion {background-color:gray; border:black 1px solid; height:20px;} #navegacion li {float:left; list-style:none; margin:0px 20px 0px 20px;} #navegacion ul {margin-left:180px;} #contenido {background-color:orange; border-left:black 1px solid; border-right:black 1px solid;} #contenido p {margin:5px 10px 0px 10px; text-indent:15px;} #menu {background-color:yellow; width:150px; float:left; text-align:left; margin:3px 10px 3px 3px;} #menu li {list-style:none; margin:4px 0px 4px 6px;} #menu h1 {text-decoration:none; font-size:10px;} #pie {background-color:white; border-left:black 1px solid; border-right:black 1px solid; border-top:black 1px solid;} #curva-inferior {background-image:url(objetos/curva-inferior.gif); background-repeat:no-repeat; width:800px; height:12px; overflow:hidden;} a {color:brown; text-decoration:none; display:block;} a:link {} a:visited {} a:hover {color:red; text-decoration:underline; background-color:silver;} a:active {}

Archivo HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Page title</title> <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> </head> <body> <div id="global"> <div id="curva-superior"></div> <div id="cabecera"> <div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270px" height="80px" alt="Haz clic aqu para volver a la pgina de inicio"></a></div> <div id="publicidad">Bienvenidos a mi Web</div> </div> <div id="navegacion"> <ul> <li><a href="#">Seccin 1</a></li> <li><a href="#">Seccin 2</a></li> <li><a href="#">Seccin 3</a></li> </ul> </div> <div id="contenido"> <div id="menu"> <h1>Ttulo de Seccin 1</h1> <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li> <a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul> </div> <h1>Esta ser la zona principal de la web</h1> <p>Este es mi segundo prrafo. Acabo de poner un punto y en cambio sigue siendo un prrafo pues no le he colocado an la etiqueta de cierre. Voy a ponersela justo aqu.</p> <h2>Y este es el tercer prrafo.</h2> <p>En pocas lecciones aprender a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera lnea, que queda mucho mejor.</p> <p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos ensee a ponerlos alineados a la izquierda, o justificados. As esto parece

una poesia! je je je.</p> </div> <div id="pie">Este es el pi de pgina</div> <div id="curva-inferior"></div> </div> </body> </html>

También podría gustarte