HTML5.- Estilo con una Hoja Externa en WebMatrix


 

Muy buenas estimados geeks, antes de entrar en detalles con CSS te recomendamos revisar los capítulos anteriores:

HTML5.- Introducción y Estructura en WebMatrix

 HTML5.- Estilo con CSS3 en Webmatrix

 

Ahora luego de un poco de introducción vamos con la practica el día de hoy veremos con dar un poco de estilo a tus textos más bordes redondeados.

 

Código

 

Archivo .html

Ahora vamos a explicar un poco lo que hemos hecho aquí.

En el archivo CSS3.html tenemos:

  • Línea 6 <link rel="stylesheet" href="estilos.css" /> 
    • En esta línea hacemos referencia a nuestra hoja de estilos externa
  • Línea 9 – 13
    • Vemos como aplicamos dentro de nuestro <body> diferentes etiquetas entre ellas una con ID y otra con una clase más adelante en nuestro archivo estilos.css veremos como a través de etiquetas, ID y clases podemos dar diferentes estilos.
    • La etiqueta <span> permite agrupar variod elementos en línea seguidos dentro de un mismo bloque (por ejemplo varias palabras seguidas dentro de un párrafo) para luego darle formato con una hoja de estilos.

 

RECUERDA los ID no se pueden repetir


Archivo .css

En nuestro archivo estilos.css tenemos:

  • Línea 1- 5 body{ ……….}
    • Aquí podemos ver como aplicamos una regla de estilo a la etiqueta <body> a esto se le llama selector y esta referenciando a una etiqueta.
  • Línea 2 background: gray; 
    • Aqui aplicamos color al fondo de nuestro sitio en este ejemplo será gris.
  • Línea 3 font-family: Helvetica, Arial;
    • Aplicamos la respectiva fuente al texto del <body> de nuestro sitio una buena practica es aplicar helvetica ya que en la actulaidad está deberia estar en todos, en caso extremo de no encontrarse aplicamos en respaldo Arial donda nadie absolutamente nadie te puede decir que en la actualidad no posee un computador con dicha fuente, no esta demás aconsejarte que una muy mala practica es llenar de fuentes inecesarias el CSS basta con el estilo deseado y esta dos de respaldo.
  • Línea 4 font-size: 16px;
    • Aplicamos el tamaño a la  fuente en pixeles para la relación de nuestra sitie una buena practica es defenir en el <body> de nuestro HTML una medida global que sirvira al momento de diseñar logremos trabajar con un tamaño relativo haciendo que el diseño de nuestro sitio dependa del tamaño de nuestra fuente global más abajo veran la aplicación de este concepto.
  • Línea 7 text-align: center;
    • Alineamos el texto dentro del H1 al centro
  • Línea 8 text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    • Aplicamos sombra al texto H1.
    • Los valores de esta propiedad son: movimiento_en_X, movimiento_en_Y, difuminasión, color.
    • El valor color se ve definido por rgbaque es la cantidad de color en rojo, verde y azul esta combinación de tres valores se puede obtener con programas de diseño como photoshop o paint.
    • El último valor de color es para:
      • 1 = si queremos un 100% de sombra completamente opaca.
      • 0 = si la sombra será completamente trasparente.
      • 0.5 = si la sombra será de un 50%.
  • Línea 10 – 18 #parrafo1{….}
    • Ahora aplicamos una regla de estilo al ID este es un selector referenciando a un ID.
  • Línea 12 border-radius: 0.5em;
    • Aquí definimos el borde ne nuestro bloque.
    • El valor está definido por em que es una medida de fuente global logramos con esto agarramos a la variable global más cercana en este caso 16px y se convierte en em si le pongo 1em será los 16px, 2em serán 32px, si son 0.5em son 8px.
  • Línea 13 color: black;
    • Aquí aplicamos color a nuestro párrafo.
  • Línea 14 display: block; 
    • Los parrafos van a estar dentro de una forma tipo bloque.
  • Línea 15 margin: 1em auto; 
    • El margen que existe entre un elemento y los que tenga al lado.
    • Los valores para esta propiedad son:
      • 1m = margen arriba y abajo.
      • auto = margen a los lados en este caso lo dejamos en automático.
  • Línea 16 padding: 1em; 
    • Es el espacio que existe en un contenedor entre el contenido y los bordes del contenedor.
Diferencia entre el Margin y Padding

La diferencia entre margin y padding es:

Al definir el margin estamos creando un espacio entre una capa y otra.

Al definir el padding estamos indicando el espacio que existe entre el borde de la capa y lo que exista dentro de ella.

Si todavía aún no lo tienes claro, puedes hacer un práctica, indicando el margin y el padding entre un div y otro. Si le das color alfondo de la capa lo comprenderas.
  • Línea 17 width: 70%;
    • Ancho de nuestro bloque.
  • Línea 19 – 22 .blue{….}
    • Un selector que hace referencia a la clase
  • Línea 21 font-weight: bold; 
    • Definimos el grosor de la letra los valores pueden ser:
      • bold: negrita
      • normal 
      • border: bordeado
      • lighter: claro
      • inherit: sirve para heredar su valor de su etiqueta padre.

Presentación

 

Presentacion Navegador Chrome

 Presentacion Navegador IE9

 

El código lo pueden encontrar aquí.

Puedes realizar tus consultas en formspring  o dejanos tu comentario Wink

Mail: peter.conchar@fcmf.ug.edu.ec

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

para estar al día con las entradas en este blog.

Si quieres aprender un poco más sobre CSS te recomendamos seguir la capsula:

 CSS para principiantes

Anuncios