Página CSS - MATEOS VEGA

¿Que es CSS?

El CSS permite separar los contenidos de la página y su aspecto y/o presentación. Esto quiere decir que mientras en los documentos HTML metemos los contenidos y la información que queremos comunicar, en el CSS damos las normas para su aspacto y/o presentación.


Su formato es:


Cómo incluir CSS en un documento HTML

Una de las principales características de CSS es su flexibilidad y las diferentes formas que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.


1.- En el mismo documento HTML.


<html>

  <head>

    <style type="text/css">

      p { color: black; font-family: Arial; }

    </style>

  </head>

  <body>

    <p>Texto de prueba.</p>

  </body>

</html>


2.- En un documento indepenciente.

Se crea un documento con todas los estilos y se llama desde el documento HTML. Existen dos forma de llamarlo.


a)

<head>

  <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />

</head>


-rel=indica el tipo de relación que existe con el documento llamado.

-type=indica el tipo de documento.

-href=indica la dirección y nombre del documento.

-media=indica en que medio se va a aplicar los estilos.


b)

<head>

  <style type="text/css" media="screen">

    @import '/css/estilos.css';

  </style>

</head>


3.- En los elementos del documento HTML.


<body>

  <p style="color: black; font-family: Arial;">Texto de prueba.</p>

</body>


SELECTORES

El selector nos indica a quien hay que aplicar los estilos y cumple con la norma de herencia, la cual indica que todo estilo aplicado a un elemento sera aplicado también a los elementos hijos siempre que no sean modificados en otro estilo. Es posiblemente la parte más importante de los documentos CSS. Si hay más de uno eston van separados por coma. Existen cincos selectores basicos, los cuales se pueden combinar entre sí.

Universal * Aplicable a todos los elementos o elemento comodín.
* { color:black; }
Tipo o Etiqueta Elementos Aplicable a todos los elementos indicados, separados por coma.
p, a { color:black; } <p>texto de prueba.</p>
<a href="#">prueba</a>
Descendente Elementos Aplicable al ultimo elemento pero que sea descendiente de los otros.
p span a { color:black; } <p><span><a href="#">prueba</a></span></p>
p * a { color:black; } <p><span><a href="#">prueba</a></span></p>
<p><em><a href="#">prueba</a></em></p>
clases .etiqueta Aplicable a los atributos CLASS de los elementos.
.parrafo { color:black; } <p class="parrafo">texto de prueba.</p>
ID #etiqueta Aplicable a los atributos ID de los elementos.
#parrafo { color:black; } <p id="parrafo"> texto de prueba.</p>

Existen más selectores pero tiene el inconveniente de que no es compatible con todos los navegadores (sobre todo con IE y si me apuras con la versión 6.0)
Hijos Elemen > Elemen Aplicable al ultimo elemento pero que sea hijo directo del primer elemento.
p > a {color:black; } <p>texto de prueba
<a href="#">prueba1</a></p> /*solo se aplica a este elemento*/
<p><span><a href="#">prueba2</a></span></p>
Adyacente Elemen + Elemen Aplicable al ultimo elemento siempre que sea el primer hijo del primer elemento.
p + a {color:black; } <p>texto de prueba
<a href="#">prueba1</a> /*solo se aplica a este elemento*/
<a href="#">prueba2</a></p> /*no se aplica*/
Atributo Elemento[Elemento] Aplicable al atributo del elemento con independencia de su valor.
a[class] { color:black; } <a class="enlace1" href="#">prueba1</a>
<a class="enlace2" href="#">prueba2</a>

DISTRIBUCIÓN

Antes de nada explicaremos que es un BLOQUE.

Un BLOQUE es todo lo contenido dentro de elementos con etiquetas de cierre (<p>...</p> , <table>...</table> ...).

Su funcionamiento es el siguiente:

 margenes  es el espacio comprendido entre el bloque y el borde de la ventana activa del navegador.

 borde  es un cuadro imaginario que envuelve todo el contenido del bloque.

 padding  es la distancia entre el borde del bloque y su contenido.


UNIDADES DE MEDIDAS

Unidades RELATIVAS:

Depende del tamaño de la unidad anterior asignada.


em      1 equivale al ancho de la letra M.

ex      1 equivale al alto de la letra x.

      1ex equivale aproximadamente a 0,5em.


Unidades ABSOLUTAS:

No depende de nada.


px      pixel.

in      pulgadas.

cm      centimetros.

mm      milimetros.

pt      puntos 1pt = 1in/72 = 0,35mm.

pc      picas 1pc = 12pt = 4,23mm.


COLORES
madoon (#800000) purple (#800080) navy (#000080)
red (#ff0000) fuchsia (#ff00ff) blue (#0000ff)
orange (#ffa500) white (#ffffff) aqua (#00ffff)
yellow (#ffff00) lime (#00ff00) teal (#008080)
olive (#808000) green (#800000) gray (#808080)
black (#000000) silver (#c0c0c0)