Curso de Hojas de Estilo en Cascada / CSS
You are not allowed to view links.
Register or
Login1.- Introduccion¿Que es CSS?Cita de Wikipedia
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.
En otras palabras....
El CSS (Cascading Style Sheets) es un lenguaje simple creado para separar la Estructura (HTML o XHTML) del estilo (Presentación)
¿Por que usarlo?Cita de Wikipedia
Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:
* Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
* Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
* Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador de voz.
* El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).
En general, las Hojas de Estilo sirven para, mantener un código mas organizado a la hora de revisarlo, permite a los desarrolladores web dar estilo a multiples paginas HTML con un solo documento CSS, al efectuar cambios en una hoja de estilos es posible cambiar el estilo de múltiples paginas al mismo tiempo, permite optimizar un estilo propio para imprimir documentos HTML.
Conceptos BasicosPropiedades: es la propiedad del estilo a usar, por ejemplo, la propiedad para cuambiar tamaño de letra, la propiedad para cambiar color de fondo, etc.., para definir esta propiedad necesitamos darle un atributo asi le decimos al navegador que interpreta nuestro CSS.
Atributo: es el valor que le damos a la propiedad, por ejemplo, si queremos el color de letra azul, entonces tendríamos queescribir que la propiedad el color de letra debe ser azul, cada propiedad tiene sus atributos, esto si ya lo verémos mas adelante
Si no comprendes estos dos ultimos conceptos poco a poco irás entendiendo un poco mas sobre las propiedades y sus atributos
Capa: es un elemento definido en el documento Logico (HTML) y que se utiliza en el documento de la presentacion (CSS), su funcion principal es separar cada cosa en una capa así ubicarla en el lugar deseado sin sin tener que invetarse un procedimiendo arcaico e intrincado para poner cada cosa en su lugar.
Clase: es normal que generalmente queramos darle estilo en general a una pagina sin embargo aveces vamos a querer darle un estilo mas personalizado o unico a algunas cosas, para esto existen las clases, estas sirven para darle algun "efecto" a algo en especifico.
Sintaxis de CSSLa sintaxis de CSS viene siendo muy sencilla, como explique antes se trata depropiedades y atributos, la sintaxis basica es:
etiqueta {
propiedad:atributo;
}Se escribe la etiqueta, se habren llaves, se escriben las propiedades y atributos de la manera mostrada y se separan por punto y coma, luego se cierran las llaves.
Otro ejemplo de sintaxis:etiqueta {
propiedad1:atributo1;
propiedad2:atributo2;
}
etiqueta2 {
propiedad1:atributo1;
propiedad2:atributo2;
}¿Como se aplica?Hay tres formas de aplicar CSS:
* Externo: se aplica fuera del documento HTML, se coloca un link en la cabecera (HEAD) con la dirección de nuestra hoja de estilos, de esta forma obtenemos un HTML separado completamente del estilo, el codigo queda muy optimizado y mas ligero
Forma de utilizar:
<head>
...
<LINK REL="stylesheet" TYPE="text/css" HREF="url de la hoja">
...
</head>* Interno: se colocan los estilos igualmente dentro de la cabecera (HEAD) sin embargo los estilos quedan dentro del HTML, se obtiene el beneficio de separar el HTML del CSS sin embargo el HTML se hace mas pesado en su almacenamiento.
Forma de utilizar:
<head>
...
<style type="text/CSS">
Tus estilos
</style>
...
</head>*
En Etiqueta: consiste en dar el estilo directamente en una etiqueta especifica, suele ser beneficioso solo en algunos casos, mas sin embargo si se trata de poner todo el estilo en cada etiqueta seria muy tedioso además de ser difícil de entender a la hora de revisar errores.
Forma de utilizar:
<etiqueta style="estilos de etiqueta">Contenido de etiqueta</etiqueta>Ó en su version corta
<etiqueta style="estilo de etiqueta" />ComencemosAntes de empezar para entrar en calor tenemos que elegir una herramienta, esta nos servirá para editar y crear nuestros códigos CSS y HTML, puedes usar notepad o gdit (depende de tu S.O.), en fin, puede ser cualquier editor de texto, nos servirá tanto el mas sencillo como el editor de paginas web mas sofisticado, En mi caso usaré Geany un IDE de linux que permite la edición de todo tipo de códigos, puedo recomendarte Dreamweaver mas sin embargo puedes usar cualquier editor
con exepcion de los editores como Word o Wordpad estos suelen modificar el escrito con su propio codigoDurante este curso usaremos la implementación directa de CSS para entrar en calor luego empezaremos a usar la implementación externa.
Primer Ejemplo! aqui es donde empezamos a entrar en calor.
Abramos nuestro editor y escribamos lo siguiente, el indispensable y siempre util.. "Hola Mundo", este nunca falta en ningun lenguaje
<html>
<head>
<title>Nuestro Hola Mundo!!</title>
<style type="text/CSS">
p {
font-weight:bold;
font-family:arial;
color:red;
}
</style>
</head>
<body>
<p>Hola mundo!!!</p>
</body>
</html>
Este sería el resultado:
Eplicacion de CodigoEtiquetas <style type="text/CSS"> y </style>Definimos las etiquetas para escribir nuestro CSS, dentro de estas se escriben los estilos, muy importantes sin estas no nos funcionará el CSS
Segmento p { ... }Definimos la etiqueta a dar estilo y abrimos los { ... } y ponemos nuestro codigo adentro, esto quiere decir que el codigo de estilos que esté adentro se e asignará a la etiqueta <p> ... </p>
Linea font-weight:bold;Font Weight en español "Ancho de Fuente", damos estilo bold (negrita), como esta dentro de p { ... } le da estilo a la etiqueta p (<p> ... </p>)
Linea font-family:arial;Font Family en español "Familia de Fuente", le damos valor arial asi nuestro texto será con el estilo de letras "arial"
Linea color:red;Color del texto, red/rojo, puedes escribir el nombre del color en ingles aunque de esta manera no podras utilizar todos los colores asi que puedes poner el valor del color en hexadecimal
Linea <p>Hola mundo!!!</p>Etiqueta p, de parrafo, "Hola mundo!!!" es un texto de parrafo y es la etiqueta que trabajamos
NOTA: no vallas aconfundirte, coloque la traduccion de las propiedades para que sea mas facil de entender sin embargo las propiedades tienen su propio nombre, al igual que sus valores
NOTA 2: de igual manera en el ejemplo se trabajó una sola etiqueta pero se pueden trabajar múltiples o mas bien infinitas.
------------------
Bueno aqui empieza el curso. verán que por ahora esta sencillo pero esto es solo para empezar, iré poniendo cosas cada vez mas complicadas, para explicar las diferentes propiedades del CSS.
Saludos. Carlmycol
Tema: Tutorial Basico de Hojas de Estilo en Cascada / CSS (Leído 8364 veces)
Similar Topics
Abril 07, 2009, 07:33:41 pm
