Html guia 1

INSTITUCION EDUCATIVA COLEGIO TECNICO JAIME GARZON
INFORMATICA – GRADO 11 – CSS GUIA 4
Propiedades relacionadas al borde de una marca HTML.
Debemos ahora hacernos la idea que todo elemento que se
crea dentro de una página HTML genera una caja.
Imaginemos los controles que hemos creado h1, h2, h3, p,
em, etc.; si fijamos la propiedad background-color veremos
que el contenido se encuentra dentro de un rectángulo.
Podemos acceder a las propiedades del borde de ese
rectángulo mediante las CSS; las propiedades más
importantes a las que tenemos acceso son: border-width,
border-style, border-color
Veamos un ejemplo que inicialice estas propiedades:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
¿Quién descubrió América y en qué año
fue?
Colón en 1492
</body>
</html>
.pregunta {
background-color:#ffff00;
border-width:1px;
border-style:solid;
border-color:#000000;
}
.respuesta {
border-width:1px;
border-style:dashed;
}
Como podemos ver, hemos definido dos clases .pregunta que
inicializa el color de fondo en amarillo y luego define el ancho
del borde en un pixel, el estilo es sólido y el color de la línea
de borde es negro.
Luego recordar que para indicar que una marca tenga este
estilo debemos inicializar la propiedad class de la marca
HTML:
Quién descubrió América y en qué año
fue?
Al segundo estilo definido lo hemos hecho con la clase
.respuesta {
border-width:1px;
border-style:dashed;
}
En ésta hemos cambiado el estilo de borde.
Disponemos de los siguientes estilos de borde: none, hidden,
dotted, dashed, solid, double, groove, ridge, inset, outset
Más propiedades relacionadas al borde de una marca HTML
Como vimos en el concepto anterior tenemos propiedades
que nos permiten fijar el grosor, estilo y color del borde de
una marca HTML. Pero podemos ir un paso más allá, las CSS
nos permiten modificar independientemente cada uno de los
cuatro bordes del rectángulo.
Contamos con las siguientes propiedades:
border-top-width, border-right-width, border-bottom-width,
border-left-width
border-top-style, border-right-style, border-bottom-style,
border-left-style
border-top-color, border-right-color, border-bottom-color,
border-left-color
Un ejemplo inicializando estas propiedades:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 class="titulopagina">El blog del pensador</h1>
</body>
</html>
Y el archivo de estilos:
.titulopagina {
background-color:#ffffcc;
text-align:center;
font-family:verdana;
font-size:40px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
ING. JESÚS ALBERTO ROJAS REYES 1

border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Es decir, esta metodología de inicializar el borde de un
control HTML, tiene utilidad si los mismos varían en grosor,
estilo o color.
Propiedades relacionadas al padding de una marca HTML.
El padding (almohadilla) suma espacio entre el contenido de
la marca HTML y el borde (recordar propiedad border)
Podemos configurar los 4 en caso que tengan el mismo valor
accediendo a la propiedad: padding o podemos configurar en
forma independiente cada lado: padding-top, padding-right,
padding-bottom, padding-left
Veamos un ejemplo, la pagina.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre class="codigofuente">
public class Rectangulo{
//atributos
int alto;
int ancho;
boolean relleno;
//métodos
public int devolverArea(){
return alto*ancho;
}
public void rellenar(boolean r){
relleno=r;
}
public void cambiarTamano(int an, int al){
ancho=an;
alto=al;
}
public Rectangulo() {// constructor
alto=20;
ancho=10;
relleno=false;
}
}//fin clase Rectangulo
</pre>
</body>
</html>
El archivo estilos.css es:
.codigofuente {
font-family:Courier;
font-size:12px;
background-color:#ffffcc;
border-width:1px;
border-style:dotted;
border-color:#ffaa00;
padding:20px;
}
Con la marca HTML pre, se respetan los espacios y retornos
de carro que hayamos puesto en el texto fuente. Este estilo
de texto es muy adecuado cuando queremos mostrar el
código fuente de un programa.
Propiedades relacionadas al margen de una marca HTML.
Otra serie de propiedades relacionadas al contorno de una
marca HTML son: margin, margin-top, margin-right, margin-
bottom, margin-left
El margen está después del borde.
Veamos un ejemplo, la página HTML muestra dos párrafos
con cero pixeles de margen:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Primer párrafo
Segundo párrafo
</body>
</html>
La hoja de estilo:
p {
background-color:#ffffaa;
margin:0px;
}
Pruebe modificar el valor para la propiedad margin y vea el
resultado de la página.
El modelo final de caja se puede resumir con esta imagen:

Propiedades relacionadas a listas.
Las listas se utilizan para enumerar una serie de elementos,
se utiliza la marca HTML ul (Unordered List), y cada item de la
lista con la marca HTML li (List Item).
Las CSS nos permiten configurar las listas por medio de tres
propiedades: list-style-type, list-style-position, list-style-image
A list-style-type puede asignársele alguno de estos valores:
none, disc, circle, square, decimal, decimal-leading-zero,
lower-roman, upper-roman, lower-alpha, upper-alpha
Los valores de list-style-position: inside, outside
Los valores de list-style-image: none, url
Veamos un ejemplo que prueba todos los valores posibles
que puede tomar la propiedad list-style-type:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="vacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulorelleno">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulovacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="cuadrado">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="decimal">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanominuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanomayuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasminusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
</body>
</html>
Luego la hoja de estilo es:
ul.vacio{
list-style-type:none;
}
ul.circulorelleno{
list-style-type:disc;
}
ul.decimal{
list-style-type:decimal;
}
ul.romanominuscula{
list-style-type:lower-roman;
}
ul.romanomayuscula{
list-style-type:upper-roman;
}
ul.circulovacio{
list-style-type:circle;
}
ul.cuadrado{

list-style-type:square;
}
ul.letrasminusculas{
list-style-type:lower-alpha;
}
ul.letrasmayusculas{
list-style-type:upper-alpha;
}
Lo que podemos ver es que cuando definimos las clases, le
antecedemos al punto, el nombre de la marca donde se aplica
dicha clase (en este caso ul, es decir que esta clase sólo tiene
sentido aplicarla a dicha marca).
Propiedades relacionadas al fondo (background)
Hasta ahora hemos probado y utilizado la propiedad
background-color para fijar el color de fondo del contenido
de una marca HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos
permiten, entre otras cosas, disponer un archivo de imagen.
Las propiedades relacionadas al background y sus valores son:
background-color, background-image, background-repeat,
background-position, background-attachment
Veamos un ejemplo de disponer una imagen sobre el fondo
de la página:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
La hoja de estilo queda:
body {
background-image:url(fondo.jpg);
}
La única propiedad que hemos inicializado es background-
image indicando el nombre del archivo de imagen a mostrar.
La imagen se repite en x e y hasta llenar la página por
completo, ya que por defecto background-repeat está
inicializada con el valor repeat, probar de modificar el estilo
primero con:
body {
background-repeat:repeat-x;
}
Luego con:
body {
background-repeat:repeat-y;
}
Y por último:
body {
background-repeat:no-repeat;
}
Tener en cuenta que podemos aplicar una imagen a otras
marcas HTML (h1, h2, h3, p, etc.).
La última propiedad background-position podemos indicar la
posición de la imagen según los siguientes valores:
top left, top center, top right, center left, center center,
center right, bottom left, bottom center, bottom right, x-% y-
%, x-pos y-pos
Para que tenga sentido esta propiedad debemos inicializar la
propiedad background-repeat con el valor no-repeat.
Por ejemplo:
body {
background-position:20% 50%;
}
Dispone la imagen 20% avanzando desde la izquierda y 50%
avanzando desde arriba.
La siguiente regla:
body {
background-position:400px 10px;
}
Dispone la imagen 400 pixeles desde la derecha y 10 píxeles
desde arriba. La regla:
body {
background-position:top right;
}
Dispone la imagen en la parte superior a la derecha.

Html guia 1

Más contenido relacionado

La actualidad más candente (19)

Similar a Html guia 1 (20)

Más de Maria Saavedra Grimaldo (20)

Último (20)

Html guia 1