PARTE 2 DE ESTE TUTORIAL LA PARTE UNO ESTA ACA
SIGAMOS....
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 pagina1.html:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</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.
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:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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).
BUENO HASTA ACA LLEGUE NO DOY MAS DEJEN SUS COMENTARIOS EN UN RATO SIGUE ESCRIBIENDO
SIGAMOS....
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 pagina1.html:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</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.
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:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</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).
BUENO HASTA ACA LLEGUE NO DOY MAS DEJEN SUS COMENTARIOS EN UN RATO SIGUE ESCRIBIENDO