JQuery functions

Mensajes al lector:.

martes, 2 de diciembre de 2014

como funciona CSS

Funcionamiento de CSS

CSS funciona a base de reglas. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
 
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración

el texto anterior fue copiado de w3.es para que sea lo mas claro posible el funcionamiento de CSS.

CSS lo podemos usar dentro de nuestra pagina o desde fuera de la misma:

  • usando las etiquetas <style> css aqui </style> dentro de el elemento head. 
  • Tambien se puede usar el atributo style donde se quiera dar el el estilo.
  • desde fuera de la pagina haciendo referencia con el elemento link dentro de el elemento head.

Vamos a los ejemplos:

ejemplo 1: dentro de la misma pagina usando el elemento style entre <head></head>.

<html>
  <head>
     <title>ejemplo de css interno</title>
     <style>
     h1{
       color: red;
     }
     </style>
  </head>
  <body>
     <h1>tendre color rojo<h1>
  </body>
</html>


ejemplo 2: dentro de la misma pagina (atributo style).

<html>
   <head>
      <title>ejemolo de css inline</title>
   </head>
  <body>
     <h1 style="color:red;">tendre color rojo<h1>
  </body>
</html>

a esta clase de estilo se le suele llamar inline style

ejemplo 3: desde fuera de la pagina.

<html>
   <head>
      <title>ejemplo de css externo</title>
      <link rel="stylesheet" type="text/css" href="cssexterno.css">
   </head>
   <body>
      <h1>encabezado con css</h1>
      <p>parrafo con css</p>
   </body>
</html>


lunes, 1 de diciembre de 2014

elemento nav

El elemento nav representa una sección con links de navegación.

¿Para qué sirve?
El elemento nav sirve para localizar el bloque principal de navigación de la pagina.

ejemplo de uso:

<nav>
   <ul>
       <li><a href ='#'>link 1</a></li>
       <li><a href ='#'>link 2</a></li>
       <li><a href ='#'>link 3</a></li>    
   </ul>
</nav>