viernes, 11 de mayo de 2012

Hojas de Estilo y Aplicacion

En este articulo le hablare un poco sobre las Hojas de estilo en dreamweaver con el lenguaje CSS
¿Que es CSS?
es el acrónimo de Cascading Style Sheets (Hojas de Estilo en Cascada). Se trata de un lenguaje para dotar a los sitios web de un determinado “estilo” compuesto por todos aquellos elementos (colores, imágenes, bordes, márgenes, etc.) que forman las páginas y su colocación dentro de éstas.

Seguidamen encontraran una serie de paso para diseñar un pagina
Parrafo
En nuestro programa "Dreamweaver" crearemos una pagina nueva donde le iremos a colocar un parrafo y acontinuacion les mostrare como lo podemos hacer

En nuestro nuevo documento que abrimos en html iremos a pegar nuestro parrafo:
"Esta es mi primera pagina web y estoy descubriendo como hacer una hoja de estilo con imagenes, parrafos, tablas, listas y enlaces."
Seleccionaremos todo el parrafo y no iremos a la parte inferior donde se encuetra en boton CSS







Luego le damos Editar Regla y nos aparecera otra pantalla donde crearemos nuestra propia regla para nuestro parrafo:
















En tipo de selector selecionaremos la opcion "Etiqueta" tambien seleccionaremos el nombre del selector en este caso sera P y despues nos saldra una ventana donde seleccionaremos las siguentes propiedades:
Font-Family: Verdana, Geneva, sans-serif
Font-Size: 1.4 em
Color: (A su criterio)
Asi no quedo nuestra regla
Tablas
aqui las propiedades que cambiamos son similares pero antes creamos otra nueva regla que la etiqueta la llamamos Th y el codigo del estilo es este:
Border: Style: Top Ridge, Whidth: thin, Color: igual para
El codigo de la tabla es este:

Asi no esta quedando

Imagenes
 Pondremos una imagen para nuestra pagina como fondo
Aplicamos la propiedad de la pagina que tambien se encuentra en la parte inferior luego escogimos la imagen que teniamos guardada en nuestra PC y se la aplicamos a la etiqueta body para que la tomara
y que se mostrara en toda nuestra pagina


y la pagina esta quedando asi:
No esta muy bien diseñada porque solo estoy dando ejemplo ustedes pueden hacerla como deseen
Enlaces
Lo que hicimos aqui en los enlaces le colocamos una etiqueta html <a href> </a> y cambiamos las propiedades de la nueva regla que hicimos en CSS en la categoria Tipo aqui esta el codigo del estilo

Asi se ve el enlace
Listas
En las lista es una forma de como podemos ordenas las opciones o dependiendo de que se trate el texto aqui esta el codigo de la hoja de estilo de las Listas:
y asi no queda la pagina:

No hay comentarios:

Publicar un comentario