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>


No hay comentarios:

Publicar un comentario