Curso de CSS – Inicio Rapido

Inicio Rapido

A la hora de diseñar una pagina web y darle estilo podemos optar por varias maneras de poner nuestro codigo CSS, una de estas es meterlo en la cabezera dentro de las etiquetas style.

<head>
<title> Documento simple</title>
<style>
body {
background-color: white;
margin: 5px;
font-family: helvetica, arial, sans-serif;
}
div#content {
width:75%;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
background-color:#ffc;
}
</style>
</head>
<body>
El body
</body>

Esto puede ser util si solo tenemos que hacer una pagina y tampoco tenemos que definir muchos estilos, en caso contrario, que es en casi todos, es mejor usar una hoja de estilos externa y enlazarla en la cabezera

<head>
<title>Hoja Externa</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

Teniendo luego dentro del fichero main el mismo código que teníamos dentro de las etiquetas style de antes. Y así en todas paginas que tubieramos usariamos el mismo estilo definido en esta hoja con solo enlazarlo en la cabecera

Estilos base

Imaginemos que tenemos el fichero de hoja de estilo main.css de la siguiente manera

body {
background-color: white;
margin: 5px;
font-family: helvetica, arial, sans-serif;
}
#content {
width: 75%;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
}

Agregemos ahora la siguiente linea

p {
margin: 0 0 .75em 0;
}

Y ahora vemos que los parrafos salen mas juntos, eso es por que con el atributo margin controlamos los margenes, en este caso de los parrafos “p” los valores en margin son 4: top right bottom left. El uso de esta propiedad es asi:

margin: 1px; se establecen todos los margenes a 1px

margin: 1px 2px; se establecen los margenes superiores  e inferiores a 1px y los laterales a 2px;

margin: 1px 2px 3px; se establece el superior a 1px los laterales a 2 px y el inferior a 3px.

Vamos a hacer una parada antes de continuar y voy a explicar las medidas que se usan en el css. Tenemos las siguientes con sus equivalencias

Unidad Descripcion
% Porcentaje
in Pulgadas
cm Centimetros
mm Milimetros
em 1em es igual al tamaño de la fuente actual, 2em sera 2 veces el tamaño de la fuente actual. Por ejemplo si un elemento se meustra con una fuente de 12pt, entonces 2em seran 24pt. Em es una unidad muy util dentro del CSS por que se adapta automaticamente al tamaño de fuente que le lector usa
ex Punto (1 punto es 1/72 pulgadas)
pica Pica (1 px es lo mismo que 12 puntos)
px Pixels (un punto en la pantalla)

Ahora vamos a añadir una clase a nuestra hoja de estilos. Las clases dentro de la hoja de estilos se identifican poniendole un “.” delante. p.e:

.azul {
color: #669;
}

y dentro del documento html ponemos dentro de la etiqueta h1 lo siguiente

<h1 class='azul'>

y dentro de una de las etiquetas p lo mismo

<p class='azul'>

y vemos que las propiedades de la clase se aplican a esas etiquetas manteniendo las propiedades genéricas que hemos definido.

Antes en el documento que hemos creado hemos definido unas propiedades a la etiqueta #content, esto hace referencia a un id, que dentro del html seria el id=”content”, y ahora nos preguntamos ¿Que diferencia hay entre usar un id o una class? pues la respuesta es simple pero en realidad no lo es tanto. En cuanto a usabilidad web, solo se puede utilizar un nombre de id por documento, en cambio se puede usar multiples veces la misma clase, por lo tanto si tenemos que usar la misma propiedad dentro de un mismo documento es mejor definirla como clase y no como id.

Advertisements
This entry was posted by sbarrat.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s