Carta de Presentacion 3

El fondo con CSS
Las propiedades de fondo(en inglés background) en CSS, nos

permiten controlar el color de fondo de un elemento.
Colocar una imagen de fondo, la ubicación de la misma en la pantalla

(centrada, a la izquierda, en alguna coordenada de x-y, etc.) y la
cantidad de veces que la misma se repetirá.
En términos del modelo de cajas la propiedad background afecta

tanto al fondo del elemento, al relleno del mismo (padding) y a los
bordes (border).
Las propiedades de background se aplican a todos los elementos
La propiedad de los fondos o backgrounds

La propiedad background es la forma comprimida en la cual
podemos definir todos los valores de los fondo de una sola vez.
Sintaxis
Establecer diferentes características del fondo a la ves.
<head>
<style="type:text/css">
selector {background: valor 1 valor 2}
</style>
</head>
Nota: debemos dejar un espacio en blanco entre los valores

Los posibles valores para definir los fondos
color | transparent | URL | none | repeat | repeat-x | repeat-y | no-

repeat | no-repeat | fixed | % | longitud | left | center | right | top |
bottom
Ejemplo
Vamos a aplicar un fondo rojo al elemento h2 de esta página.
Código Resultado
<head>
<style type="text/css"> El fondo del título es
h2{background:red}
</style> rojo.
</head>
<body>
<h2>El fondo del título es rojo.</h2>
</body>
Aplicar color al fondo

La propiedad background-color especifica el color de fondo del
elemento.
Sintaxis
Establecer el color de fondo.
<head>
etiqueta HTML {background-color: valor}
</style>
</head>
Los posibles valores para definir los colores del fondo
color | transparent
Ejemplo
Vamos a aplicar un color de fondo a la página.
Código Resultado
<head>
El fondo de la página es naranja.
<style type="text/css">
body{background-color:orange}
</style>
</head>
<body>
<p>El fondo de la página es naranja.</p>
</body>
Decorar el fondo con una imagen

La propiedad background-image inserta una imagen como fondo
del elemento.
Sintaxis
Insertar una imagen de fondo.
<head>
etiqueta HTML {background-image: url("nombre-de-la-
imagen")}
</style>
</head>
Los posibles valores para la inserción de imágenes de fondo
url | none
Ejemplo
Vamos a usar una imagen de fondo en nuestra página.
Código Resultado
<head>
Ejemplo de una imagen de fondo
body{background-image:url("fondo3.jpg")}
</style>
</head>
<body>
<p>Ejemplo de una imagen de fondo</p>
</body>
Imagen más pequeña que el tamaño del fondo

Si la imagen que elegimos de fondo es más pequeña que este,
podemos repetir la imagen horizontalmente o verticalmente hasta
cubrir todo el fondo. Para ello utilizamos la propiedad background-
repeat.
Sintaxis
Repetir una imagen de fondo.
<head>
etiqueta HTML {
background-image: url('/nombre-de-la-imagen');
background-repeat: valor;
}
</style>
</head>
Los posibles valores para la repetición de una imagen en el fondo
repeat | repeat-x | repeat-y | no-repeat
Ejemplo
Vamos a usar esta imagen de fondo en nuestro ejemplo.
Código Resultado
<head>
Repetición de una imagen de fondo
body {
background-image:url("images/fondo.png");
background-repeat:repeat;
}
</style>
</head>
<body>
<h4>Repetición de una imagen de fondo</h4>
</body>
Imagen de fondo estática o dinámica

La propiedad background-attachment nos permite fijar o liberar
una imagen de fondo, es decir que al movernos por la página con la
barra de desplazamiento, la imagen de fondo quede anclada en el
lugar o se desplaze con la misma.
Sintaxis
Imagen de fondo estática o dinámica.
<head>
etiqueta HTML {
background-attachment: valor;
}
</style>
</head>
Los posibles valores para esta propiedad
fixed | scroll
Elije el lugar exacto para ubicar la imagen de fondo

La propiedad background-position nos permite ubicar una imagen
en un lugar específico dentro del fondo.
Sintaxis
<head>
etiqueta HTML {
background-position: valor;
}
</style>
</head>
Los posibles valores para la ubicación exacta de la imagen en el fondo
% | coordinadas x-y | left | center | right | top | bottom
Ejemplo
Vamos a usar una imagen y la ubicaremos en alguna coordenada dentro del fondo.
Código Resultado
<head>
Imagen en las coordenadas x=60px y=100px
body {
background-image: url("images/fondo.jpg");
background-repeat: no-repeat;
background-position: 60px 100px;
}
</style>
</head>
<body>
<p>Imagen en las coordenadas x=60px y=100px</p>
</body>
Propiedades del fondo
Propiedad Descripción Valores Detalles Ej.
background Propiedades background-color Color de fondo

individuales background-image Imagen de fondo
relacionadas con el
fondo. background-repeat Repetición del fondo
background- Acoplamiento del
attachment fondo
background-position Posición del fondo
background-color Color de fondo. color Color
transparent Transparente
background-image Imagen de fondo. URL Dirección URL
none Nada
background-repeat repeat Repite
Repetición de la repeat-x Repite
imagen de fondo. horizontalmente
repeat-y Repite verticalmente
no-repeat No se repite
background- Desplazamiento de la scroll Desplaza
attachment imagen de fondo.
fixed Fija
background-position Posición de la imagen % Porcentaje
de fondo.
longitud Longitud
left Izquierda
center Centro
right Derecha
top Superior
bottom Inferior
Los textos con CSS
Las propiedades de los textos nos permiten controlar la apariencia de
los mismos.
Entre los ajustes que podemos aplicar a los textos, tenemos:

1. La sangría
2. El alineado
3. La decoración
4. Espacio entre letras
5. Espacio entre palabras
6. Mayúsculas y minúsculas
7. Espacios en blando
Sangría de los textos - text-indent

La propiedad text-indent se utiliza para generar sangría en la
primera línea de un texto.
Sintaxis
<head>
selector {text-indent: valor}
</style>
</head>
Los posibles valores para definir la sangría
longitud | %
Ejemplo
Vamos a ver como se comporta un texto con sangría.
Código Resultado
<head>
En la primera línea de este párrafo
p{text-indent:2cm} observamos una sangría de 2 centímetros de
</style> distancia del borde.
</head>
<body>
<p>En la primera línea de este párrafo observamos
una sangría de 2 centímetros de distancia del
borde.</p>
</body>
Alineado de los textos - text-align

La propiedad text-align se utiliza para alinear un texto a la derecha,
izquierda o centro del bloque que lo contiene.
Sintaxis
<head>
selector {text-align: valor}
</style>
</head>
Los posibles valores para alinear los textos
left | right | center | justify
Ejemplo
Alineamos un texto a la derecha y otro en el centro.
Código Resultado
<head>
Texto a la derecha
p.der{text-align:right} Texto en el centro
p.cen{text-align:center}
</style>
</head>
<body>
<p class="der">Texto a la derecha</p>
<p class="cen">Texto en el centro</p>
</body>
La decoración de los textos - text-decoration

La propiedad text-decoration se utiliza para subrayar, tachar,
remarcar con una línea superior o parpadear un texto.
Sintaxis
<head>
selector {text-decoration: valor}
</style>
</head>
Los posibles valores para decorar los textos
none | underline | overline | line-through | blink
Ejemplo
Definimos un texto parpadeante y un enlace sin subrayar.
Código Resultado
<head>
Texto parpadeando
p.parpadeo{text-decoratio:blink} Ir a la home de Virtualnauta
a.sin_linea{text-decoration:none}
</style>
</head>
<body>
<p class="parpadeo">Texto parpadeando</p>
<a class="sin_linea"href="/www.virtualnauta.com">
Ir a la home de Virtualnauta</a>
</body>
Separación entre letras - letter-spacing

La propiedad letter-spacing se utiliza para definir la distancia que
queremos dejar entre letra y letra de un mismo texto.
Sintaxis
<head>
selector {letter-spacing: valor}
</style>
</head>
normal | distancia
Ejemplo
Vamos definir una distancia entre letras de 5 píxeles.
Código Resultado
<head>
La distancia entre letras es
p{letter-spacing:5px} de 5 píxeles
</style>
</head>
<body>
<p>La distancia entre letras es de 5 píxeles</p>
</body>
Separación entre palabras - word-spacing

La propiedad word-spacing se utiliza para definir la distancia que
queremos dejar entre palabras.
Sintaxis
<head>
selector {word-spacing: valor}
</style>
</head>
normal | distancia
Ejemplo
Vamos definir una distancia entre palabras de 2 centímetros.
Código Resultado
<head>
La distancia entre palabras es de 2 centímetros
p{word-spacing:2cm}
</style>
</head>
<body>
<p>La distancia entre palabras es de 2
centímetros</p>
</body>
Transformar los textos a mayúsculas o minúsculas -

text-transform
La propiedad text-transform se utiliza para convertir un texto a
mayúsculas o minúsculas.
Sintaxis
<head>
selector {text-transform: valor}
</style>
</head>
Los posibles valores para convertir los textos
capitalize | uppercase | lowercase | none
Ejemplo
Vamos definir la primera letra de cada palabra en mayúsculas.
Código Resultado
<head>
La Primera Letra De Cada Palabra Se A
p{text-transform:capitalize} Convertido A Mayúsculas
</style>
</head>
<body>
<p>La primera letra de cada palabra se a convertido
a mayúsculas</p>
</body>
Espacios en blanco - white-space

La propiedad white-space se utiliza para manipular el
comportamiento de los espacios en blanco dentro de cada elemento.
Sintaxis
<head>
selector {white-space: valor}
</style>
</head>
normal | pre | nowrap | pre-wrap | pre-line
Ejemplo
Vamos ver el comportamiento de los espacios en blanco dentro de un texto.
Código Resultado
<head>
Dejo varios espacios en blanco entre palabra y
p.pre{white-space:pre-wrap} palabra.
p.normal{white-space:normal}
Aca también dejo varios espacios en blanco
</style>
entre palabra y palabra pero los comprime a
</head>
uno solo.
<body>
<p class="pre">Dejo varios espacios en
blanco entre palabra y palabra.</p>
<p class="normal">Aca también dejo varios
espacios en blanco entre palabra y
palabra pero los comprime
a uno solo.</p>
</body>
Propiedades de los textos
text-indent Desplazamiento de la longitud Longitud

primera línea del texto.
% Porcentaje
text-align Alineamiento del texto. left Izquierda
right Derecha
center Centro
justify Justificar
text-decoration Efectos de subrayado, none Sin efectos
tachado, parpadeo.
underline Subrayado
overline Línea por encima
line-through Tachado
blink Parpadeo
text-transform Transformaciones del texto a capitalize Convierte en mayúscula el
mayúsculas/minúsculas. primer carácter de cada
palabra
uppercase Convierte en mayúscula
todas las letras del
elemento
lowercase Convierte en minúscula
todas las letras del
elemento
none Neutraliza el valor
heredado
letter-spacing Espacio entre caracteres. normal Normal
longitud Longitud
word-spacing Espacio entre palabras. normal Normal
longitud Longitud
white-space Comportamiento de los normal Normal
espacios dentro de los
pre Preformateado
elementos.
nowrap Los cambios de línea solo
ocurren con el
elemento br
pre-wrap
pre-line
direction Sentido direccional de la ltr Izquierda a derecha
escritura.
rtl Derecha a izquierda
unicode-bidi Sentido direccional de la normal Normal
escritura.
embed Abre un nivel adicional de
incrustación con respecto
al algoritmo bidireccional
bidi-override Si el elemento es a nivel
de línea o es un elemento
a nivel de bloque, crea
una sustitución
Listas con CSS
Las propiedades de las listas nos permiten establecer el estilo de las

mismas, la imagen, número o letra de los diferentes Items y la
posición de la misma.
El tipo de estilo de las listas

La propiedad list-style-type especifica el formato visual de la lista.
Esta propiedad se aplica a todo elemento con "display: list-item".
Sintaxis
selector {list-style-type: valor}
Los posibles valores para definir el estilo de las listas
disc | circle | square | decimal | decimal-leading-zero | lower-roman

| upper-roman | lower-greek | lower-latin | upper-latin | armenian |
georgian | lower-alpha | upper-alpha | none
Ejemplo
Vamos a aplicar un estilo a una lista.
Código Resultado
<head> 1. HTML
<style type="text/css"> 2. CSS
ol{list-style-type: lower-latin}
</style> 3. JavaScript
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
Listas con imágenes

La propiedad list-style-image define la imagen que va a ser usada
como marca de cada ítem.
Sintaxis
selector {list-style-image: valor}
Los posibles valores para definir las imágenes de las listas
URL | none
Ejemplo
Vamos a aplicar una imagen a una lista.
Código Resultado
<head>  XML
<style type="text/css">  VBScript
ul{list-style-image: url("punto.gif")}
</style>  AJAX
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
La posición de la marca en la lista

La propiedad list-style-position especifica la posición del marcador
de los ítems con respecto a la caja de la lista.
Sintaxis
selector {list-style-position: valor}
Los posibles valores para definir la posición de los marcadores
inside | outside
Ejemplo
Vamos a ubicar los marcadores en diferentes posiciones.
Código Resultado
<head>  Primer elemento de la lista
<style type="text/css">  Segundo elemento de la lista
ul.dentro{list-style-position: inside}
ul.fuera{list-style-position: outside}  Tercer elemento de la lista
</style>
</head>
 Primer elemento de la lista
<body>  Segundo elemento de la lista
<ul class="dentro">
 Tercer elemento de la lista
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
<ul class="fuera">
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
</body>
Todas las propiedades de las listas

La propiedad list-style se usa para definir todos los valores de las
listas a la vez.
Sintaxis
selector {list-style: valor1 valor2 valor-n }
Los posibles valores para definir las imágenes de las listas
disc | circle | square | decimal | decimal-leading-zero | lower-roman

| upper-roman | lower-greek | lower-latin | upper-latin | armenian |
georgian | lower-alpha | upper-alpha | URL | none | inside | outside
Ejemplo
Vamos a aplicar diferentes propiedades a una lista.
Código Resultado
<head>  XML
<style type="text/css">  VBScript
ul{list-style: square inside}
</style>  AJAX
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
Tabla de las propiedades de las listas
list-style Permite establecer el estilo de la list-style-type Tipos de listas

lista, la imagen y/o la posición.
list-style-position Posición de la lista
list-style-image Imagen de la lista
list-style-type Estilo aplicable a los marcadores disc Disco
visuales de las listas. circle Círculo
square Cuadrado
decimal Nro.decimal
decimal-leading- Nro.decimal
zero comenzando de 0
No funciona en IE
5, 6 y 7
lower-roman Nro.romano
minúscula
upper-roman Nro.romano
mayúscula
lower-greek Letra griega
minúscula
No funciona en IE
5, 6 y 7
lower-latin Letra latina
minúscula
No funciona en IE
5, 6 y 7
upper-latin Letra latina
mayúscula
No funciona en IE
5, 6 y 7
armenian Letra armenia
No funciona en IE
5, 6 y 7
georgian Letra gregoriana
No funciona en IE
5, 6 y 7
lower-alpha Letra alfabeto en
minúscula
upper-alpha Letra alfabeto en
mayúscula
none Nada
list-style-image Imagen aplicable a los elementos URL URL
de las listas. none Nada
list-style-position Posición dentro de la lista de los inside Dentro
elementos marcadores de las outside Fuera
listas.
Efectos visuales con CSS
Los efectos visuales se utilizan entre otras cosas para definir la

visibilidad de los elementos y también para establecer el
comportamiento del contenedor de los mismos.
La propiedad overflow
Overflow nos permite controlar el comportamiento de una caja en
caso que su contenido la desborde.
Ejemplo
Vamos a ver el comportamiento de la propiedad overflow.
Código Resultado
<head>
Utilice overflow para controlar la disposición de
p{ los elementos dentro de la caja.
background-color: #FFFFD9;
width: 100px;
height: 100 px;
overflow: scroll
}
</style>
</head>
<body>
<p>Utilice overflow para controlar la disposición de los
elementos dentro de la caja.</p> </body>
En este ejemplo, definimos el tamaño de la caja en 100x100 píxeles y le agregamos una barra
de desplazamiento.
Nota: el valor por defecto de la propiedad overflow es "visible".
La propiedad clip
Usamos clip cuando queremos recortar una imagen a una medida
determinada.
Los valores de rect son en este orden (superior derecha inferior
izquierda)
Ejemplo
Acá vemos como podemos cortar una imagen a nuestro gusto.
Código Resultado
<head>
img.recortada {
position:absolute;
clip: rect(0px 50px 100px 0px)
}
</style>
</head>
<body>
<img class="recortada" src="/foto3.jpg"
style="border:0; width: 100px; height: 150px">
<img src="/foto3.jpg" style="border:0; width: 100px;
height: 150px">
</body>
Imagen completa
En el ejemplo, el tamaño real de la imagen es de 100x150 píxeles y con la propiedad clip la

cortamos a la medida deseada.
La propiedad display
Con display se puede definir el comportamiento del elemento.
Ejemplo
Veamos un ejemplo de como manipular textos.
Código Resultado
<head>
En este ejemplo
p{display:inline}
</style>
</head> la propiedad display une dos párrafos en una
misma línea.
<body>
<p>En este ejemplo</p>
<p>la propiedad display une dos párrafos en una
misma línea.</p>
</body>
La propiedad visibility
Visibility nos define si un elemento será visible o invisible.
Ejemplo
Vamos a comparar entre las 2 propiedades.
Código Resultado
<head>
h3.se_ve{visibility:visible}
h3.no_se_ve{visibility:hidden} Este texto es visible.
</style>
</head>
<body>
<h3 class="se_ve">Este texto es visible.</h3>
<h3 class="no_se_ve">Este texto es invisible.</h3>
Propiedades de los efectos visuales
overflow Comportamiento del visible Visible

contenido si se desborda en
hidden Oculto
la caja.
scroll Barra de desplazamiento
auto Automático
clip Especifica la región visible rect Longitud superior
del elemento. Longitud derecha
Longitud inferior
Longitud izquierda
auto Automático
display Comportamiento del inline Se muestra en la misma línea.
contenedor.
block Se muestra tal cual es.
list-item Convierte diferentes elementos
en Ítems de una lista
run-in Palabra insertada
No funciona en IE 5, 6, 7 y 8 -
Firefox
inline-block Límite del bloque
Está incompleto para IE 5, 6, 7 y
8 - No funciona en Firefox
table Tabla
No funciona en IE 5, 6, 7 y 8
inline-table Límite de la tabla
No funciona en IE 5, 6, 7 y 8
none No se visualiza
visibility Visibilidad de las cajas. visible Visible
hidden Oculto
collapse Ocultar una parte

Carta de Presentacion 3

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Carta de Presentacion 3

Cargado por

Copyright:

Formatos disponibles

El fondo con CSS

Las propiedades de fondo(en inglés background) en CSS, nos

Colocar una imagen de fondo, la ubicación de la misma en la pantalla

En términos del modelo de cajas la propiedad background afecta

La propiedad de los fondos o backgrounds

Nota: debemos dejar un espacio en blanco entre los valores

color | transparent | URL | none | repeat | repeat-x | repeat-y | no-

Aplicar color al fondo

Los posibles valores para definir los colores del fondo

Decorar el fondo con una imagen

Los posibles valores para la inserción de imágenes de fondo

Imagen más pequeña que el tamaño del fondo

Los posibles valores para la repetición de una imagen en el fondo

repeat | repeat-x | repeat-y | no-repeat

Imagen de fondo estática o dinámica

Los posibles valores para esta propiedad

Elije el lugar exacto para ubicar la imagen de fondo

Los posibles valores para la ubicación exacta de la imagen en el fondo

% | coordinadas x-y | left | center | right | top | bottom

Propiedades del fondo

Propiedad Descripción Valores Detalles Ej.

background Propiedades background-color Color de fondo

Entre los ajustes que podemos aplicar a los textos, tenemos:

Sangría de los textos - text-indent

Los posibles valores para definir la sangría

Alineado de los textos - text-align

Los posibles valores para alinear los textos

left | right | center | justify

La decoración de los textos - text-decoration

Los posibles valores para decorar los textos

none | underline | overline | line-through | blink

Separación entre letras - letter-spacing

Los posibles valores para esta propiedad

Separación entre palabras - word-spacing

Los posibles valores para esta propiedad

Transformar los textos a mayúsculas o minúsculas -

Los posibles valores para convertir los textos

capitalize | uppercase | lowercase | none

Espacios en blanco - white-space

Los posibles valores para esta propiedad

normal | pre | nowrap | pre-wrap | pre-line

Propiedad Descripción Valores Detalles Ej.

text-indent Desplazamiento de la longitud Longitud

Listas con CSS

Las propiedades de las listas nos permiten establecer el estilo de las

El tipo de estilo de las listas

Los posibles valores para definir el estilo de las listas

disc | circle | square | decimal | decimal-leading-zero | lower-roman

Listas con imágenes

Los posibles valores para definir las imágenes de las listas

La posición de la marca en la lista

Los posibles valores para definir la posición de los marcadores

Todas las propiedades de las listas

Los posibles valores para definir las imágenes de las listas

disc | circle | square | decimal | decimal-leading-zero | lower-roman

Tabla de las propiedades de las listas

Propiedad Descripción Valores Detalles Ej.

list-style Permite establecer el estilo de la list-style-type Tipos de listas

Los efectos visuales se utilizan entre otras cosas para definir la

En el ejemplo, el tamaño real de la imagen es de 100x150 píxeles y con la propiedad clip la

Propiedades de los efectos visuales

Propiedad Descripción Valores Detalles Ej.

overflow Comportamiento del visible Visible

También podría gustarte