Existen hasta la fecha 3 versiones estables de CSS que los navegadores son capaces de entender, pero hasta ahora no se ha logrado resolver los problemas para que todos los existentes pueden interpretar las reglas del CSS de la misma forma escrita, es decir, cada regla puede escribirse diferente para uno o mas navegadores, por ello necesitamos definir tres o mas reglas que signifique lo mismo pero escrito de forma diferente para diferentes navegadores, o por lo menos los mas usados, los cuales son: Chrome, Mozilla y Explorer.
1. Usa remos nuestro proyecto anterior de Sitioprueba para definir un estilo y aprender mas de como definir CSS, para ello lo cargamos en Expression Web y abrimos el archivo index.html
2. Ahora entre las etiquetas del <head></head> debajo del titulo ponemos el siguiente código que es donde definiremos el estilo de la pagina web y nos quedaría de la siguiente manera.
Este es el titulo
3. como vemos esta definido un body{background-color:cadetblue;} con esta linea le decimos al navegador que nuestro documento html tiene un body de color de fondo cadetblue, podemos poner, colores o imágenes primero definiremos este color de fondo. para esto dentro de <style> nos queda de la siguiente manera:
Este es el titulo Este es el cuerpo del documento Esta es la cabecera del documento
para el color podemos utilizar cualquier color web RGB incluso RGBA para definir colores con transparencias en lugar del nombre del color se pondria un codigo como #RRGGBB, con un valor hexadecimal, incluso con un RGB(255,255,255) para definir el valor de cada color primario en bite, mas adelante voy a mostrarles como, por el momento les dejo un enlace a Wikipedia para saber mas sobre estos colores.
https://es.wikipedia.org/wiki/Colores_web
https://es.wikipedia.org/wiki/Colores_web
Ahora nuevamente ejecutamos Wamp y lo ponemos en linea, abrimos el explorador y escribimos en la barra de direcciones localhost/sitioprueba, y vemos los cambios que realizamos
4. Ahora vamos a poner color de fondo a nuestra cabecera y pie de pagina. de la misma forma como con el body lo hacemos para el header y footer definimos sus reglas.
Guardamos los cambios y actualizamos nuestro explorador para ver los nuevos cambios.
5. Se puede observar el fondo de la cabecera y el pie de la pagina han cambiado de color pero solo es una linea ya que no contiene mas texto ni elementos, sin embargo podemos definir una maquetación fija o proporcional de estos elementos sin necesidad de que contengan otros, para definir una maquetación fija la definiremos de la siguiente manera.
Guardamos los cambios y actualizamos el explorador.
6. Como vemos la maquetación esta ahora a 100 pixeles de alto y 80% de ancho con respecto al explorador, pero esta alineado a la izquierda, esto es porque por defecto tienen un margen de 0px, también podemos definir un margen auto para que se centre en el medio, lo hacemos de la siguiente manera.
Guardamos los cambios y actualizamos el explorador.
8.Vemos como el header y el footer se han centrado con respecto al explorador, pero el cuerpo del documento aun su contenido esta alineado a la izquierda esto lo podemos corregir de diferentes maneras , una de ellas es meterlo en una maquetación, para esto podemos utilizar las etiquetas <div> </div> estas nos sirven para definir bloques de contenidos, y con ayuda de CSS podemos definir propiedades para cada div identificándolos con un id o class para saber mas sobre que es un id o una clase pueden visitar este Blog: http://www.htmlquick.com/es/reference/tags/div.html
Vamos a definir un contenedor principal, el cual contendrá dentro de el todo lo que este en el body lo hacemos de la siguiente manera, definimos un div, con un id único llamado "contenido" como a continuación .
Esta es la cabecera del documento
< br> < br> Este es el cuerpo del documento < br> < br>
9. si ahora guardamos cambios y actualizamos el explorador solo veremos un corte de linea antes de su inicio un corte de linea al final, pero para logar verlo mejor vamos a definir un estilo dentro de la etiqueta de estilos creamos su estilo, en este contenedor vamos lo identificamos en CSS con una almohadilla antes del nombre de la siguiente manera "#contenido"
10. como vemos el header esta a lo ancho del explorador, podemos maquetarlo para que este al mismo ancho del div contenido, lo hacemos de la siguiente manera
Esta es la cabecera del documento
Este es el cuerpo del documento
Guardamos cambios y actualizamos para ver los cambios.
11. Ahora para tener un diseño mas llamativo pongamos una imagen de fondo utilizaremos una imagen la que ustedes gusten, solo ponemos el nombre de la imagen un punto y su extención ya sea jpg, png, gif, incluso pueden colocar la url de alguna imagen en internet yo tengo mi imagen en mi carpeta del proyecto Sitioprueba.
Ahora en estilo configuramos el fondo con esta imagen de la siguiente manera, ustedes el lugar de poner fonfotecno.jpg, colocan el nombre o la ruta de su imagen:
background-image:url('fondotecno.jpg');
Guardamos lo cambios y actualizamos el explorador y a mi me quedo asi.
En nuestro próximo post conoceremos mas de las nuevas etiquetas de marcado y elementos de HTML5 y poner contenido en nuestra pagina de web, ademas de insertar imagenes y efectos de sombreado, les agradezco sus comentarios y no se olviden de compartir este post ;)
Buen tutorial eh, creo que cubres muy bien lo básico
ResponderEliminarGracias, ese es el objetivo mi estimado, como lo dice un excelente profesor del tecnológico, "vayámonos con las piedritas" jejeje
ResponderEliminarmuy bien josue! te mandare unos tutos que tengo que me han ayudadoo.. jajaja asi es desde las piedras y si no quieren usen adobeMAUSeCLICK
ResponderEliminarGracias, todo lo que ayude es bievenido, los espero :)
Eliminarmi. causa esta xevre el tutorial.. pero nose si podrias dar ejemplos de aplicaciones RIA .......... utilizando DHTMLX...... SOY principiante y me facina la creacion de aplicaciones web... te agradesco de antemano..
ResponderEliminarBuen artículo, espero que sigas trabajando como hasta ahora ;-)
ResponderEliminar