programacion

Carlos Villaquiran 7mo”b””

INTRODUCCION
A LAS
CSS
El lenguaje HTML esta
limitado a la hora de
aplicarle forma aun
documento.
Para solucionar
estos problemas
los diseñadores
han utilizado
muchas técnicas.
Las paginas web
tienen mezclado en
su código HTML el
contenido del
documento con las
etiquetas necesarias
para darle forma.
En estas paginas de CSS
pretendemos dar a conocer la
tecnología con un enfoque
practico para que en los pocos
capítulos podamos usar las
CSS de manera depurada.

CARACTERISTICAS Y VENTAJAS DE LA
CSS
CARACTERISTICAS
El modo de funcionamiento de las
CSS consiste en definir, mediante
una sintaxis especial, la
forma de presentación que le
aplicaremos a:
• Un web entero, de modo que se
puede definir la forma de todo el
web de una sola vez.
• Un documento HTML o página, se
puede definir la forma, en un
pequeño trozo de
código en la cabecera, a toda la
página.
• Una etiqueta en
concreto, llegando incluso a poder
definir varios estilos diferentes para
una sola etiqueta.
VENTAJAS
Ya que si con el HTML tan
sólo podíamos definir
atributos
en las páginas con pixeles y
porcentajes, ahora podemos
definir utilizando muchas
más
unidades como:
• Pixels (px) y porcentaje
(%), como antes.
• Pulgadas (in)
• Puntos (pt)
• Centímetros (cm)

Usos de las CSS I
Pequeñas partes
de la página
Para definir estilos en
secciones reducidas de
una página se utiliza la
etiqueta <SPAN>. Con
su atributo style
indicamos en sintaxis CSS
las características de
estilos.
Estilo definido para una
etiqueta
De este modo podemos
hacer que toda una
etiqueta muestre un
estilo determinado. Por
ejemplo, podemos definir
un párrafo entero en
color rojo y otro en color
azul. Para ello
utilizamos el atributo
style, que es admitido
por todas las etiquetas
del HTML (siempre y
cuando dispongamos de
un navegador compatible
con CSS).
Estilo definido en
una parte de la
página
Con la etiqueta <DIV>
podemos definir
secciones de una
página y aplicarle
estilos con el
atributo style, es
decir, podemos
definir estilos de una
vez a todo un bloque
de la página.

Usos de las CSS y II
Estilo definido para
toda una página
Podemos definir, en la cabecera
del documento, estilos para que
sean aplicados a toda la
página. Es una manera muy
cómoda de darle forma al
documento y muy potente, ya
que estos
estilos serán seguidos en toda la
página y nos ahorraremos así
muchas etiquetas HTML que
apliquen forma al documento.
Además, si deseamos cambiar
los estilos de la página lo
haremos de una sola vez.
Estilo definido para todo
un sitio web
Una de las características más
potentes de la programación con
hojas de estilos consiste en
que, de una vez, podemos definir
los estilos de todo un sitio web.
Esto se consigue creando un
archivo donde tan sólo colocamos
las declaraciones de estilos de la
página y enlazando todas
las páginas del sitio con ese
archivo. De este modo, todas las
páginas comparten una misma
declaración de estilos y, por
tanto, si la
cambiamos, cambiarán todas las
páginas.

 Veamos ahora cómo el proceso para incluir estilos
con un fichero externo.
 1- Creamos el fichero con la declaración de estilos
 Es un fichero de texto normal, que puede tener
cualquier extensión, aunque le podemos
 asignar la extensión .css para aclararnos qué tipo
de archivo es. El texto que debemos incluir
 debe ser escrito exclusivamente en sintaxis
CSS, es decir, sería erróneo incluir código HTML en
 el: etiquetas y demás. Podemos ver un ejemplo a
continuación.

 P {
 font-size : 12pt;
 font-family : arial,helvetica;
 font-weight : normal;
 }
 H1 {
 font-family : verdana,arial;
 text-decoration : underline;
 text-align : center;
 background-color : Teal;
 }T
 D {
 font-family : verdana,arial;
 text-align : center;
 background-color : 666666;
 }
 BODY {
 background-color :
 #006600;
 font-family : arial;
 color : White;
 }
 Enlazamos la página web con la hoja de estilos
0
5
Cate…
Cate…
Cate…
Cate…

 Para ello, vamos a colocar la etiqueta <LINK> con los
atributos
 • rel="STYLESHEET" indicando que el enlace es con una
hoja de estilos
 • type="text/css" porque ela archivo es de texto, en sintaxis
CSS
 • href="estilos.css" indica el nombre del fichero fuente de
los estilos
 Veamos una página web entera que enlaza con la
declaración de estilos anterior:

 <html>
 <head>
 <link rel="STYLESHEET" type="text/css" href="estilos.css">
 <title>Página que lee estilos</title>
 </head>
 <body>
 <h1>Página que lee estilos</h1>
 Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es
muy
 fácil.
 <br>
 <br>
 <table width="300" cellspacing="2" cellpadding="2" border="0">
 <tr>
 <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td>
 </tr>
 <tr>
 <td>La segunda fila del TD</td>
 </tr>
 </table>
 </body>
 </html>
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Página que lee estilos</title>
</head>
<body>
<h1>Página que lee estilos</h1>
Esta página tiene en la cabecera la etiqueta necesaria
para enlazar con la hoja de estilos. Es muy
fácil.
<br>
<br>
<table width="300" cellspacing="2" cellpadding="2" border="0">
<tr>
<td>Esto está dentro de un TD, luego tiene estilo
propio, declarado en el fichero externo</td>
</tr>
<tr>
<td>La segunda fila del TD</td>
</tr>
</table>
</body>
</html>

Reglas de
importancia
en los estilos
Los estilos se heredan de una etiqueta a otra, como
se indicó anteriormente. Por ejemplo, si
tenemos declarado en el <BODY> unos estilos, por lo
general, estas declaraciones también
afectarán a etiquetas que estén dentro de esta
etiqueta, o lo que es lo mismo, dentro de
todo el cuerpo.
Declaración de estilos con fichero externo. (Para todo
un sitio web)
• Declaración de estilos para toda la página. (Con la
etiqueta <STYLE> en la cabecera de
la página)
• Estilos definidos en una parte de la página. (Con la
etiqueta <DIV>)
• Definidos en una etiqueta en concreto. (Utilizando el
atributo style en la etiqueta en
cuestión)
• Declaración de estilo para una porción pequeña del
documento. (Con la etiqueta
<SPAN>)

Sintaxis CSS
Para definir un estilo se utilizan atributos como font-size,text-decoration... segudos de
dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de
definir muchos atributos separados por punto y coma.
Ejemplo:
font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma
de la lista de atributos es opcional)
• Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de
atributos encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}
• Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla
en el siguiente capítulo. Muchos estos valores son unidades de medida, por ejemplo, el
valor del tamaño de un margen o el tamaño de la fuente. Las unidades de medida son
las siguientes:
Puntos pt
Pulgadas in
Centímetros cm
Pixels px

Atributos de las hojas
de estilo
FONT- SIZE
Sirve para indicar el
tamaño de las fuentes
de manera más rígida y
con mayor exactitud.
FONT-FAMILY
Con este atributo
indicamos la familia de
tipografía del texto. Los
primeros valores son
genéricos, es decir, los
exploradores
las comprenden y utilizan
las fuentes que el usuario
tenga en su sistema.
FONT-WEIGHT
Sirve para definir
la anchura de los
caracteres, o
dicho de otra
manera, para
poner negrillas
con total libertad.
COLOR
Sirve para indicar el color del texto.
Lo admiten casi todas las etiquetas
de HTML. No todos los nombres de
colores son
admitidos en el estándar, es
aconsejable entonces utilizar el
valor RGB.
FONT- STYLE
Es el estilo de la
fuente, que puede
ser normal, itálica u
oblícua. El estilo
oblique es similar al
italic.

PÁRRAFOS DE TEXTO
line-height
El alto de una línea,y por
tanto, el espaciado entre
líneas. Es una de esas
características que no se
podian mofificar utilizando
HTML.
text-decoration
Para establecer la
decoración de un
texto, es decir, si está
subrayado, sobrerayad
o o tachado.
text-align
Sirve para indicar la
alineación del texto. Es
interesante destacar que
las hojas de estilo
permiten el justificado de
texto,
aunque recuerda que no
tiene por que funcionar en
todos los sistemas.
text-indent
Un atributo que sirve para hacer
sangrado o márgenes en las
páginas. Muy útil y novedosa.
text-transform
Nos permite transformar
el texto, haciendo que
tenga la primera letra en
mayúsculas de todas las
palabrs, todo en
mayúsculas o minúsculas.

FONDO - BACKGROUND
Background-Color
Sirve para indicar el
color de fondo de un
elemento de la página.
Background-Imagen
Colocamos con este
atributo una imagen de
fondo en cualquier
elemento de la página

BOX-CAJA
Margin-left: Indicamos con este atributo el tamaño del margen a la izquierda.
Margin-right: Se utiliza para definir el tamaño del margen a la derecha.
Margin-top: Indicamos con este atributo el tamaño del margen arriba de la página.
Margin-bottom: Con el se indica el tamaño del margen en la parte de abajo de la página.
Padding-left: Indica el espacio insertado, por la izquierda, entre el borde del elemento-
continente y el contenido de este..
Padding-right: Indica el espacio insertado, en este caso por la derecha, entre el borde del
elemento-continente y el contenido de este.
Padding-top: Indica el espacio insertado, por arriba, entre el borde del elemento-continente
y el contenido de este.
Padding-bottom: Indica el espacio insertado, en este caso por abajo, entre el borde del
elemento-continente y el contenido de este.
Border-color: Para indicar el color del borde del elemento de la página al que se lo aplicamos..
Border-style: El estilo del borde, los valores significan: none=ningun
borde, dotted=punteado (no parece funcionar), solid=solido,
double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D.
border-width: El tamaño del borde del elemento al que lo aplicamos.
Float: Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se
agrupe alrededor de dicho elemento. Igual
que el atributo align en imagenes en sus valores right y left.
Clear: Si este elemento tiene a su altura imagenes u otros elementos alineados a la derecha o
la izquierda, con el atributo clear
hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que
indiquemos.

Trucos avanzados con CSS
Definir estilos utilizando
clases
Las clases nos sirven para crear
definiciones de estilos que se
pueden utilizar repetidas veces.
Una clase se puede definir entre
las etiquetas <STYLE> (en la
cabecera del documento), o en
un archivo externo a la página.
Para definirlas utilizamos la
siguiente sintaxis, un punto
seguido del nombre de la clase
y entre llaves los atributos de
estilos deseados
Estilo en los enlaces
Una técnica muy
habitual, que se puede
realizar utilizando las
hojas de estilo en cascada
y no
se podía en HTML, es la
definición de estilos en los
enlaces, quitándoles el
subrayado o hacer
enlaces en la misma
página con distintos
colores.

¿QUÉ SON LAS
CAPAS?
Una capa es una división, una parte de la
página, que tiene un comportamiento muy
independiente dentro de la ventana del
navegador, ya que la podemos colocar en
cualquier
parte de la misma y la podremos mover por
ella independientemente, por poner dos
ejemplos. En el uso de capas se basan
muchos de los efectos más comunes del
DHTML.

ATRIBUTOS
PARA CAPAS
Atributo position
Indica el tipo de posicionamiento de la capa. Puede
tener dos valores, relative o absolute.
- relative indica que la posición de la capa es
relativa a el lugar donde se estaba escribiendo en
la página en el momento de escribir la capa con su
etiqueta
- absolute indica que la posición de la capa se
calcula con respecto al punto superior izquierdo
de la página.
Atributo top
Indica la distancia en vertical donde se colocará la
capa. Si el atributo position es absolute, top
indica la distancia del borde superior de la capa con
respecto al borde superior de la página. Si
el atributo position era relative, top indica la
distancia desde donde se estaba escribiendo en
ese momento en la página hasta el borde superior
de la capa.

Atributo left
Básicamente funciona igual que el atributo top, con la
diferencia que el atributo left indica la
distancia en horizontal a la que estará situada la capa.
Atributo height
Sirve para indicar el tamaño de la capa en vertical, es
decir, su altura.
Atributo width
Indica la anchura de la capa
Atributo visibility
Sirve para indicar si la capa se puede ver en la página o
permanece oculta al usuario. Este
atributo puede tener tres valores.
- visible sirve para indicar que la capa se podrá ver.
- hidden indicará que la capa está oculta.
- inherit es el valor por defecto, que quiere decir que
hereda la visibilidad de la capa donde está metida la
capa en cuestión. Si la capa no está metida dentro de
ninguna otra se supone
que está metida en la capa documento, que es toda la
página y que siempre está visible.

Problema con el posicionamiento absoluto de capas
El problema de esta solución es que la
capa haría crecer la celda de la tabla
donde queremos
colocarla (al igual que cualquier otro
elemento HTML que colocásemos dentro
de la tabla) y es
muy probable que nuestro diseño no nos
permita este hecho. Seguramente ya
habrías notado
este problema y si no es así te invito a que
crees la capa que intentas colocar con el
atributo
position a relative para ver si con eso
tu problema ya está resuelto.
La idea es un poco compleja y para su puesta en marcha
debemos realizar una serie de
acciones que, sinceramente, considero excesivas para un
problema inicialmente sencillo. mejor.
Nuestro esquema de trabajo consistirá en una capa con
posición relativa, que nos servirá de
"ancla" y otra con la posición absoluta, donde colocaremos
el contenido final a mostrar en la
capa.
La capa relativa la colocaremos en el lugar aproximado
donde queramos que aparezca la capa
absoluta. La capa absoluta la posicionaremos, una vez
cargada la página, en un lugar próximo
a la capa relativa. Por supuesto, estas acciones las vamos a
tener que realizar con JavaScript,
que es el lenguaje que nos permite actualizar las
posiciones de las capas dinámicamente.

DETENIDAMENTE
Decíamos que habría que colocar una capa relativa cercana
al lugar donde tiene que aparecer
la capa con position absolute. Insisto en que las capas
relativas se colocan en el lugar donde
las metemos dentro del código HTML, por lo que será fácil
colocar la capa relativa en el lugar
exacto y que este lugar sea válido para cualquier definición.
La segunda capa, la que tiene el contenido final, la
pondremos inicialmente en una posición
cualquiera y escondida, de manera que no se vea que
está mal colocada. Una vez terminada
de cargar la página, podremos acceder a la posición de
la capa relativa, extrayendo sus valores
top y left y colocándolos en los correspondientes top y
left de la capa con posición absoluta.
Una vez marcada la posición de la capa
absoluta podemos volverla visible.

MAQUETACIÓN CSS
Como se ha podido aprender en el Manual de CSS, las hojas
de estilo en cascada ayudan a
separar el contenido de la forma, es decir, los elementos que
componen una página de la
forma con la que se muestran. Además, CSS ayuda en gran
medida a la definición de estilos
en la página, ya que permite ajustar de una manera mucho
más precisa cualquier aspecto de
cualquier elemento de la página.
La maquetación con CSS lleva la utilización de las hojas de
estilo a su grado máximo, de
manera que cualquier definición del aspecto de la página se
realiza en la declaración CSS que
enlazamos con el documento HTML. Para definir la situación
de los elementos en la página se
utilizan las capas, a las que se aplica un posicionamiento a
través también de las hojas de estilo.

VENTAJAS
DE LA
MAQUETACION
CSS
La separación del contenido de la página y del estilo o aspecto con
el que se
deben mostrar. Tener en cuenta que, cuanto más separemos estos
dos elementos,
más sencillo será el mantenimiento de las páginas y el
procesamiento de la información.
Con ello también podremos obtener páginas más limpias y claras.
• Ahorro en la transferencia. Si todos los estilos y posiciones de los
elementos se
introducen en un documento externo, liberaremos el código de la
página y ocupará
mucho menos. Como la declaración de estilos se almacena en la
caché del navegador,
sólo se transfiere en la primera página que se visita del sitio, con lo
que la segunda y
posteriores páginas que se soliciten se cargarán mucho más rápido.
• Facilidad para alterar el aspecto de la página sin tocar el código
HTML. Como
toda la información de los estilos y el posicionamiento de las capas
se encuentra en un
mismo archivo, si deseamos cambiar cualquier elemento de la
página -ya sea su
posición o su aspecto-, sólo tenemos que actualizar la hoja de
estilos y los cambios se
verán automáticamente en todo el web.

DESVENTAJAS
DE LA
MAQUETACIÓN
CSS
Compatibilidad con navegadores antiguos.
Se necesita que el visitante disponga de
un navegador bastante avanzado. La mayoría de los
visitantes disponen de
navegadores que soportan características avanzadas
de las CSS, pero todavía hay
mucha gente que no ha actualizado sus equipos o
que navega en sistemas de sólo
texto.
Diferencias entre navegadores. Dependiendo
del navegador también cambian las
etiquetas de estilos soportadas, por lo que las
páginas puede que no se vean
exactamente igual en unos clientes que en otros.
Dificultad. Sin duda, si estamos acostumbrados al
HTML, pasar a CSS resulta bastante
más complicado y requiere un estudio más
profundo. Sin

Formas de aplicar estilos en maquetación CSS
Aplicación de estilo a etiquetas
Se puede asignar el estilo a una etiqueta concreta de HTML. Para
ello, en la declaración de
estilos escribimos la etiqueta y entre llaves, los atributos de estilo
que deseemos.
body {
background-color: #f0f0f0;
color: #333366;
}
Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para
ello, indicamos las etiquetas
seguidas por comas y luego, entre llaves, los atributos que
queramos definir.
h1, p{
color: red;
}
En este caso se define que los encabezados de nivel 1 y los
párrafos, tengan letra roja.

Definición de clases
Las clases en la declaración de estilos se declaran con un
punto antes del nombre de la clase.
.miclase{
color: blue;
}
Para asignar el estilo definido por una clase en un elemento HTML, simplemente
se añade el
atributo class a la etiqueta que queremos aplicar dicha clase. El atributo class se
asigna al
nombre de la clase a aplicar. Por ejemplo:
<p class="miclase">este párrafo tiene el estilo definido en la clase "miclase".</p>
El párrafo anterior se presentaría con color azul. La definición de clases y su
utilización es
sencilla, pero veamos un ejemplo más detallado:
Para la siguiente declaración de estilos:
body, td, p{
background-color: #000000;
color: #ffffff;
}
.inverso{
background-color: #ffffff;
color: #000000;
}

Estilos que sólo se utilizan una vez
También podemos tener un estilo específico para un único elemento, que no va a
repetirse en
ningún otro caso. Para ello tenemos los estilos asignados por identificador. Los
identificadores
se definen en HTML utilizando el atributo id en la etiqueta que deseamos identificar.
El valor del
atributo id será el que definamos nosotros.
<div id="capa1">
En la hoja de estilos, para definir el aspecto de ese elemento con id único, se escribe
el
carácter almohadilla, seguido del identificador indicado en la etiqueta y entre llaves
los
atributos css que deseemos.
#capa1{
font-size: 12pt;
font-family: arial;
}
En este caso se ha asignado fuente de tamaño 12 puntos y cuerpo arial.
Como se puede concluir en la lectura de estas líneas, generalmente se prefiere
utilizar estilos
definidos en clases a los definidos con identificadores, a no ser que estemos seguros
que ese
estilo no se va a repetir en todo el documento.

programacion

Más contenido relacionado

La actualidad más candente (17)

Destacado (20)

Similar a programacion (20)

Último (20)

programacion