Ahora que sabemos incluir hojas de estilo a aun documento html, aprenderemos a declar el estilo de las diferentes partes que lo componen< es decir > body, font,h1,h2,text.
Todas y cada una de las partes de un documento en html pueden tener asignado un estilo general o particular en un area especifica, siempre asignado mediante lenguaje CSS e incluido en la hoja de estilo general.
Ejemplo practico
En este ejemplo vamos a definir las secciones mas generalizadas que componen un documento html y algunos atributos que se pueden modificar y los valores que usamos para ello.
P {
font-size : 12pt;
font-family : arial,tahoma;
font-weight : normal;
}
H1 {
font-size : 25pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : red;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #666600;
font-family : tahoma;
color : black;
}
En este ejemplo podemos observar como se especifican algunas de las caracteristicas de las secciones principales de la pagina, ahora veremos como integraríamos esta hoja de estilo en el documentohtml, lo que seria una pagina completa.
<html>
<head>
<title>Hackers land title>
<STYLE type="text/css">
<!--
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 25pt;
font-family : verdana,tahoma;
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,tahoma;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #666666;
font-family : tahoma;
color : red;
}
</STYLE>
</head>
<body>
<h1>Pagina de ejemplo en CSS </h1>
Bienvenidos...
<p>Esto es un texto básico con estilo CSS </p>
</body>
</html>
Ahora analizaremos las partes fundamentales que pueden contener nuestro documento html y los diferentes estilos que podriamos aplicarles.
Fuentes – Font
Color Se expresa con caracteres hexadecimales o con la palabra (en ingles) que designa el color que deseamos aplicar a la fuente. EJ :color: #009900; o
color: red;
font-size Determina el tama;o de la fuente, los valores que acompa;an a este atributo son: small,médium y large.Tambien puede expresarse por tama;os decimales EJ. font-size:10pt; font-size: large;
font-family Determina el tipo de fuente que deseamos
asignar:Arial,verdana,tahoma etc.Ej font-family:arial;
Font-weight Determina la anchura de los caracteres y sire para asignar negrita.Ej font-weight: bold; font-weight: 100;
Font-style Define el estilo de la fuente:normal,Italia,oblique. Ej font-style:normal;
Line-height Establece el alto de los caracteres .Ej line-height: 10px;
line-height: normal;
Text-decoration Establece decoración para el texto como subrayado,tachado etc.Ej text-decoration: none; text-decoration: underline;
Text-align Alinea el texto: left , right , center , justify. Ej text-align: right;
Text-indet. Sangrado texto o imágenes.Ej text-indent: 10px;
text-transform Establece las mayúsculas y minúsculas del texto, además de la posibilidad de que la primera letra de este: capitalize (poner la primera letra en mayúscula o en minúscula), uppercase , (mayúscula), lowercase (minúscula) , none (ninguno).Ej text-transform: capitalize;
Fondo- Background
Background-color Añade color al fondo:Ej background-color:black; background-color: #000000;
Background-image Añade una imagen como fondo.Ej background-image: url(url de la imagen)
Box-Caja
Podemos usar las cajas para muchas aplicaciones en las paginas web como por ejemplo las cajas de búsqueda.Puede medirse en cm o en pixeles (px)
Margin-left Margen izquierdo
Margin-right Margen derecho
Margin-top Margen superior
Margin-bottom Margen superior
Padding : indica el espacio insertado por la derecha, izquierda,arriba o abajo
Padding-left- right- top- bottom
Border (Define el borde)- style(estilo del borde) none=ningún borde, dotted=punteado (no parece funcionar), solid=solido, double=doble,Width (ancho)Float (alinear a la derecha o a la izquierda)
Articulo BY S3L3N1TY
No hay comentarios :