Atico
Atico
Piso
Piso en las rias bajas y Pontevedra PISO ATICO

Vacaciones en Cambados

Texto con CSS

FONT-FAMILY: fuente;
Define una clase de fuente.
Ejemplos:
FONT-FAMILY: Verdana, Tahoma;
FONT-FAMILY: "fuente tal", Arial;
Ejemplo:
<Div Style="FONT-FAMILY: Tahoma">
Texto con la fuente Tahoma
</div>

Otro ejemplo:
<STYLE>
#fuentes
{color:maroon; font-size: 22px;
font-family: Arial, Tahoma, Helvetica}
</STYLE>
<div id=fuentes>
Primero se carga ARIAL
si no existe se carga Tahoma,etc.
</div>

Estilos de fuentes:
FONT-STYLE: NORMAL; /*Normal*/
 FONT-STYLE: ITALIC; /* Cursiva */
FONT-STYLE: OBLIQUE;
/* oblícua es casi idéntica a la cursiva */
Ejemplo:
<Div Style="FONT-STYLE: OBLIQUE">
Texto con estilo de fuente Oblicua
</div>

Font-weight:
Define la intensidad
del color del texto
Ejemplos:
font-weight: bold;
font-weight: bolder;
font-weight: 200;
font-weight: light;
font-weight: lighter;
font-weight: normal;

font-weight: bold;
Pone el texto en negrita
Similar al valor numérico 700.
 Ejemplos identicos:
p { font-weight: bold }
P { font-weight: 700 }
Más grueso que la típica negrita.
 font-weight: bolder;
 Similar a aumentar en
100 el valor numérico.

Texto mas claro.
font-weight: lighter;
 Similar a disminuir en 100
el valor numérico.
Un ejemplo:
P { font-weight: lighter }

Texto normal.
font-weight:normal;
 Similar al valor numérico 400.
Un ejemplo:
P { font-weight: normal }

font-variant:
Reduce el tamaño de mayusculas
font-variant: normal;
font-variant: small-caps;
Ejemplo completo en una pagina:

<html><head><title>Ejemplo</title>
<style type="text/css">
div {font-size: 17px;}
#font14 {font-size: 14px;}
.MayPekenas {font-variant: small-caps;}
</style></head>
<body>
<span id=font14>
Texto con font-size: 14px;
</span><br>
<span class="MayPekenas">
Texto con font-variant: small-caps;
</span>
<div>Texto con font-size: 17px;
</div> </body></html>



Font-color:
Color de texto
Ejemplos.
div [font: bold 16px arial}
o
<div style="font: bold 16px arial;">
 Texto Arial en negrita, con
tamaño de 16 pixeles
</div>

div {font-color: purple;}
o
<div style="font-color: purple;">
 Texto con color purpura
</div>

p {color: purple;}
o
<p style="color: purple;">
Modo abreviado del codigo de arriba
</div>

Ejemplos:
.primera
{ width:350;
color: brown;
font-size: 12px;
font-weight: bold;
font-style: oblique;
font-family: system;
text-align: center;
text-transform: uppercase; }
#segunda
 {
font-size: 16px;
color: #FF0000;
font-weight: 700;
font-style: normal;
font-variant: normal;
white-space: nowrap;
font-family: Helvetica;
text-align: justify;
text-decoration: overline;
text-transform: lowercase;
}
#tercera
{ color: green
font-style: italic;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
font-variant: small-caps;
text-decoration: underline;
text-transform: capitalize;
font-family: Tahoma, "arial black"; }

Los codigos se pueden
poner en un archivo.css

Si es asi hay que insertar en la pagina
el siguiente enlace al archivo archivo.css
 <link rel="stylesheet" type="text/css"href="archivo.css"/ >

Los codigos se activan
en la pagina con los selectores
que contiene el archivo.css

Selectores del archivo.css:
<etiketa class="primera" >
<etiketa id="segunda" >
<etiketa id="tercera" >
<etiketa puede ser:
P, B, I, H1, TT, EM, DIV, SPAN, CODE, etc.

Al curso de CSS
Al curso de ingles
Programas y juegos
Programas de idiomas
Atico y piso para verano
Curso