Hojas de Estilos
CSS es un
lenguaje de estilos que es creado con el propósito para hacer que el aspecto de
un documento electrónico sea bien diseñado en una forma ordenada de buena presentación.
El lenguaje
html/xhtml se utiliza para marcar los contenidos, para designar los párrafos,
titulo o lista de elementos, CSS te define lo que es el aspecto de todos los
contenidos como ser el tamaño y tipo de letra, la tabulación etc.
Ejemplo de estilo para toda una
pagina
Lo que
haremos en este código son los estilos básicos y sencillos, el titulo, el
tamaño y tipo de letra, color de texto, imagen de fondo en la página, tabla.
<html>
<title>Documento
sin título</title>
<style type="text/css">
<!--
body,td,th {
font-family:
Palatino Linotype, Book Antiqua, Palatino, serif;
font-size:
2em;
color:
#C06;
}
body {
background-color:
#039;
background-image:
url(file:///F|/blog_hojas estilo/ima/mioo.jpg);
}
-->
</style></head>
<body>
<p><strong><center><h1>Hojas
de estilo </h1></center>
</strong></p>
<p>este
codigo es tipo parrafo.</p>
<p>este
que sigue es tipo lista:</p>
<li>lista1 </li>
<li>lista2 </li>
<li>lista3
</li>
<p> </p>
<table border="1">
<tr>
<th scope="col">tabla #1</th>
<th scope="col">tabla #2</th>
</tr>
</table>
</body>
</html>
Selectores
Hay que
conocer los selectores de CSS. La declaración se utiliza para decir “que hay
que hacer” y el selector es lo que dice “a quien hay que hacerlo”. La declaración
de una regla sencilla puede indicar por ejemplo que el color de la letra debe
de ser rojo, y el selector de esa regla sencilla indicar por ejemplo que los
elementos a los que se aplica ese estilo son todos los párrafos de la página.
Hasta ahora hemos vistos selectores simples, que le aplican una serie de
estilos a un ejemplo html, son los llamados selectores de etiqueta:
H1 { font-family: arial;
text-transform: capitalize;}
Selectores básicos:
Selectores de
etiqueta
Selectores de clases
Selectores de ID
Selectores de grupos
Para reducir
el tamaño de las hojas de estilo, se pueden agrupar selectores en listas
separándolos con una coma:
H1, H2, H3 {
font-family: helvetica }
Análogamente,
las declaraciones también pueden agruparse:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Además,
algunas propiedades tienen su propia sintaxis de agrupamiento:
H1 { font:
bold 12pt/14pt helvetica }
Margenes
Para empezar, se añadirán márgenes a
todos los elementos que los necesiten.
body { margin: 0; }
#main { margin: 0 auto 0 auto; }
h1 { margin: 0 0 1em 0; }
.pullQuote { margin: auto 0 1em 1em; }
p { margin: 0; }
.attribution { margin: 0 0 1.5em 0; }
