Apuntes CSS

CSS
La especificacin de HTML5 fue desarrollada considerando CSS a cargo del diseo

La integracin entre HTML y CSS es ahora vital para el desarrollo web y esta es la
razn por la que cada vez que mencionamos HTML5 tambin estamos haciendo
referencia a CSS3, aunque oficialmente se trate de dos tecnologas completamente
separadas.
Conceptos bsicos: CSS es un lenguaje que trabaja junto con HTML para proveer
estilos visuales a los elementos del documento, como tamao, color, fondo, bordes,
etc
Elementos block son posicionados uno sobre otro hacia abajo en la pgina.
Elementos inline son posicionados lado a lado, uno al lado del otro en la misma
lnea, sin ningn salto de lnea a menos que ya no haya ms espacio horizontal para
ubicarlos.
Modelos de caja en CSS
Cualquier elemento de una pgina web est contenido en una "caja" rectangular. Esta caja
puede tener:
un borde visible (que se define mediante la propiedad border)
un margen exterior transparente por fuera del borde (que se define mediante la
propiedad margin)
un margen interior transparente entre el borde y el elemento (que se define mediante

la propiedad padding)
La imagen siguiente muestra un prrafo de texto con borde y mrgenes exterior e interior. En
la imagen, los lmites del borde y de los mrgenes se han indicado mediante lneas
discontnuas, pero en realidad esos lmites no se ven en los navegadores.
Tanto el margen exterior (margin) como el margen interior (padding) son

transparentes. Por eso el margen interior se ve del color de fondo del elemento
(en el ejemplo, del color de fondo del prrafo), mientras que el margen exterior
se ve del color de fondo del elemento padre (en el ejemplo, del color de fondo de
la pgina).
Estilos en lnea
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el ttulo del documento</title>
</head>
<body>
Mi texto
</body>
</html>
Una de las tcnicas ms simples para incorporar estilos CSS a un documento HTML
es la de asignar los estilos dentro de las etiquetas por medio del atributo style.
Estilos embebidos
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el ttulo del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
Mi texto
</body>
</html>
Archivos externos
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
Mi texto
</body>
</html>
METODOS PARA SELECCIONAR ELEMENTOS HTML

Existen varios mtodos para seleccionar cules elementos HTML sern
afectados por las reglas CSS:
referencia por la palabra clave del elemento
referencia por el atributo id
referencia por el atributo class
Referenciando con palabra clave
Al declarar las reglas CSS utilizando la palabra clave del elemento
afectamos cada elemento de la misma clase en el documento. Por
ejemplo, la siguiente regla cambiar los estilos de todos los elementos
:
p { font-size: 20px }
span { font-size: 20px }
Referenciando con el atributo id
El atributo id es como un nombre que identifica al elemento. Esto significa
que el valor de este atributo no puede ser duplicado. Este nombre debe
ser nico en todo el documento.
Para referenciar un elemento en particular usando el atributo id desde

nuestro archivo CSS la regla debe ser declarada con el smbolo # al frente
del valor que usamos para identificar el elemento:
#texto1 { font-size: 20px }
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
Mi texto
</body>
</html>
Referenciando con el atributo class
La mayora del tiempo, en lugar de utilizar el atributo id para propsitos
de estilos es mejor utilizar class. Este atributo es ms flexible y puede ser
asignado a cada elemento HTML en el documento que comparte un diseo
similar:
.texto1 { font-size: 20px }
Para trabajar con el atributo class, debemos declarar la regla CSS con un
punto antes del nombre. La ventaja de este mtodo es que insertar el
atributo class con el valor texto1 ser suficiente para asignar estos estilos
a cualquier elemento que queramos:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
Mi texto
Mi texto
Mi texto
</body>
</html>
Nuevos selectores
Los selectores los utilizamos para elegir a qu elementos se aplican las propiedades que
escribimos. Hay diferentes tipos de selectores, los ms importantes son los que veremos
ahora.
Selectores?
Los selectores los utilizamos para elegir a qu elementos se aplican las
propiedades que escribimos. Hay diferentes tipos de selectores, los ms
importantes son los que veremos ahora.
Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo,
si queremos establecer las propiedades para los enlaces:
a {
...
}
Tambin podemos elegir un elemento nico utilizando su atributo id. Para ello,
empleamos la almohadilla:
#menu {
...
}
Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos
la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos
destacar algo:
.importante {
...
}
Luego podramos emplear esa clase en los prrafos que queramos (o cualquier otro
elemento), usando el atributo class de este modo:
Bla bla bla
Tambin podemos seleccionar ciertos elementos, pero slo cuando estn
contenidos dentro de otros. Por ejemplo, si queremos seleccionar los <li>, pero slo
de las listas sin ordenar:
ul li {
...
}
Qu significa eso de "cascading"?

Cascading significa cascada, y tiene que ver con la herencia. En CSS, los
elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si
establecemos una regla para el elemento table, sus hijos (td entre otros) tambin
tendrn esas mismas reglas.
Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el
documento, debemos indicarlo en el elemento body para que se propague por toda
nuestra pgina.
Puedo poner comentarios?

Claro, pero son distintos a los de XHTML, que van entre .
/* Esto es un comentario */
Hay algunos selectores ms que fueron agregados o que ahora son

considerados parte de CSS3 y pueden ser tiles para nuestros diseos.
Estos selectores usan los smbolos >, + y ~ para especificar la relacin
entre elementos.
div > p.mitexto2{
color: #990000;
}
body { background-image: url("imagenes/fondo.png") }
DESDE SERVLET
request.setAttribute("age_id", age_id);
request.setAttribute("agencia", agencia);
request.setAttribute("direccion", direccion);
request.setAttribute("telefono", telefono);
request.setAttribute("sucursal", sucursal);
request.setAttribute("dpt_id", dpt_id);
request.setAttribute("mensaje", "La agencia con el codigo [" + age_id + "], ya se encuentra
registrado");
RequestDispatcher requestDispatcher =request.getRequestDispatcher("/AgenciaNuevo.jsp");
requestDispatcher.forward(request, response);
EN JSP
var_age_id=request.getParameter("agencia_id"); //recibe el codigo de agencia seleccionado en Agencia.jsp

Apuntes CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes CSS

Uploaded by

Copyright:

Available Formats

CSS

La especificacin de HTML5 fue desarrollada considerando CSS a cargo del diseo

un borde visible (que se define mediante la propiedad border)

un margen interior transparente entre el borde y el elemento (que se define mediante

Tanto el margen exterior (margin) como el margen interior (padding) son

METODOS PARA SELECCIONAR ELEMENTOS HTML

Para referenciar un elemento en particular usando el atributo id desde

.texto1 { font-size: 20px }

Qu significa eso de "cascading"?

Puedo poner comentarios?

Hay algunos selectores ms que fueron agregados o que ahora son

body { background-image: url("imagenes/fondo.png") }

You might also like