oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso Dreamweaver - Lección 5: Estilos CSS
Bueno has llegado hasta la lección 5... veo que te gusta esto de hacer web´s jeje eso esta bien.
Despues de haber insertado un hipervinculo a la cabecera si le das a vista previa en el navegador veras que la imagen te sale con un recuadro, ese recuadro indica que dicha imagen tiene un vinculo asignado. Por defecto el Dreamweaver siempre lo hara así, pero sinceramente no queda muy bonito que digamos no? Vamos haber que es lo que tenemos que hacer para que desaparezca ese recuadro.
Para hacer desaparecer ese recuadro vamos a crearnos una hoja de estilos (CSS) y que diablos es esto diras... jejeje no te asustes que te lo explico brevemente, pero si lo que quieres es profundizar aún más en los estilos CSS quizás deberías echarle un vistazo a nuestro Curso de CSS.
¿Qué es CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
Despues de esta pequeña aclaración vamos a crearnos una hoja de estilos para nuestra web para ello vamos a "Archivo> Nuevo".
Ahora entre todas las opciones que nos sale elegimos CSS y clickamos en "crear".
Hecho esto nos sale un documento nuevo con el siguiente código:
@charset "utf-8";
/* CSS Document */
Eso lo dejamos como esta y en la siguiente line escribimos lo siguiente img { border: 0 } este código hara que ninguna de las imagenes de nuestra web que tengan asignado un hipervinculo salgan con ese recuadro tan molesto. El nuevo documento te tiene que quedar así:
@charset "utf-8";
/* CSS Document */
img { border: 0 }
Ahora simplemente lo guardaremos en la raíz de nuestro sitio asignandole el nombre "estilo". Para ello nos vamos a "Archivo> Guardar como..." y ponemos "estilo".
Si hemos echo todo bien el directorio de archivos de nuestro sitio nos quedará así:
Quiero aprender más!!!
- Avanzar a Lección 5: Estilos CSS II
- Retroceder a Lección 4: Hipervínculos III
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®