Hoy comenzaremos a usar una de las herramientas más poderosas q tenemos disponibles para generar páginas atractivas es estilo de cascada o CSS.
Vamos de lleno al código, podemos incluir nuestras instrucciones CSS de tres formas distintas, cual usaremos, eso dependerá de la necesidad y de cada caso en particular:
-Ingresando código a través de la propiedad "style" q agregamos a los distintos tag de nuestra web. Podríamos hacer uso de esta forma de agregar estilo cuando queremos modificar una característica en particular de un elemento en particular de nuestra página, yo particularmente trato de no usar esta forma porq se dispersa el estilo por todo el código y eso dificulta la corrección y modificación del mismo si en algún momento es necesario hacerlo. Este seria un ejemplo del uso de este:
-Usando un tag "style" en el head. Es útil cuando es poco y sencillo el estilo q agregaremos, se coloca entre las etiquetas "head" de nuestro HTML acompañado de la especificación del tipo de lenguaje con "type" agregaremos "text/css",este facilita el traslado del estilo ya q se encuentra junto al resto del código de nuestra web, pero a fines de prolijidad y practicidad no es el q uso. Este sería un ejemplo de aplicación de estilo en el "head":
-Agregando estilo desde un archivo externo a nuestro HTML, este archivo se guardará con extensión
.css recomiendo crear una carpeta con el nombre estilos o css para mantener todo ordenado y solo va a contener el código del estilo de nuestra web. Este es el método q elijo, por la forma de ordenar los estilos, porq facilita la implementación, el intercambio y el reciclado del estilo, es de fácil ubicación y si deseo quitar el estilo de mi web simplemente quito el enlace al archivo. Bueno pero como hacemos esto? Para esto colocaremos el siguiente tag entre el "head":
El tag es "link", acompañado de "rel" donde diremos lo q queremos enlazar, en este caso "StyleSheet" un estilo, agregaremos un "href" q al igual q con los enlaces nos indicará la dirección de nuestro archivo .css y por último configuramos el tipo de lenguaje q hablamos con "type" como es CSS colocaremos "text/CSS" y cerramos el tag.
Observación!! Sea cualquiera de los métodos usados siempre colocaremos el elemento q va a ser modificado seguido de la propiedad a modificar y por último el valor a tomar finalizando con ";"
Bien entonces veamos lo q podemos cambiar a nuestra página con CSS, nombraré las más usadas, primero tocaremos las propiedades q están incluidas con CSS2 y por lo tanto soportadas por todos los navegadores, luego veremos las nuevas propiedades q incorpora CSS3, son simplemente increíbles:
Fondo:
>background-image
>background-color
Fuentes:
>font-family
>font-size>font-style
>font-weight
Texto:
>text-align
>text-decoration >text-ident
>text-transform
Especiales de fuentes:
>color
>word-spacing
>letter-spacing>line-height
Dimensiones:
>width
>height
Posicionamiento y disposición:
>position
>float
>clear
>padding
>margin
>display
>visibility
>overflow
>border
Propiedades agregadas con CSS3:
Sombra:
>box-shadow
>text-shadow
Bordes redondeados:
>border-radius
Transiciones o transformaciones:
>transition
>transform
>transform
Fondo con gradiente y opacidad:
>gradient
>opacity
Disposición en columnas:
>column-count
y otras más...
En próximas entradas iremos desarrollando estas distintas propiedades con ejemplos q clarifican el uso y aplicación en diferentes elementos y diferentes circunstancias... Los espero porq si hay un tema q me gusta es sin dudas CSS... Nos vemos en próximas entradas!!
Comentarios
Publicar un comentario